shieldcortex 2.0.0

package/dashboard/src/app/page.tsx

@@ -0,0 +1,364 @@
+'use client';
+
+/**
+ * Main Dashboard Page
+ * Multi-view dashboard for the ShieldCortex memory system
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
+import { useMemoriesWithRealtime, useStats, useAccessMemory, useConsolidate, useProjects, useMemoryLinks, useControlStatus, usePauseMemory, useResumeMemory } from '@/hooks/useMemories';
+import { useDashboardStore } from '@/lib/store';
+import { useDebouncedValue } from '@/hooks/useDebouncedValue';
+import { useSuggestions } from '@/hooks/useSuggestions';
+import { MemoryDetail } from '@/components/memory/MemoryDetail';
+import { MemoriesView } from '@/components/memories/MemoriesView';
+import { NavRail } from '@/components/nav/NavRail';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { InsightsView } from '@/components/insights/InsightsView';
+import { Memory } from '@/types/memory';
+
+// Dynamic imports (avoid SSR issues with canvas/WebGL)
+const KnowledgeGraph = dynamic(
+  () => import('@/components/graph/KnowledgeGraph'),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-full flex items-center justify-center bg-slate-950">
+        <div className="text-slate-400 animate-pulse">Loading Graph...</div>
+      </div>
+    ),
+  }
+);
+
+const OntologyGraph = dynamic(
+  () => import('@/components/graph/OntologyGraph'),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-full flex items-center justify-center bg-slate-950">
+        <div className="text-slate-400 animate-pulse">Loading Ontology...</div>
+      </div>
+    ),
+  }
+);
+
+const BrainScene = dynamic(
+  () => import('@/components/brain/BrainScene').then((mod) => mod.BrainScene),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="w-full h-full flex items-center justify-center bg-slate-950">
+        <div className="text-slate-400 animate-pulse">Loading 3D Brain...</div>
+      </div>
+    ),
+  }
+);
+
+export default function DashboardPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<string | undefined>(undefined);
+  const [showFilters, setShowFilters] = useState(false);
+  const [typeFilter, setTypeFilter] = useState<string | undefined>(undefined);
+  const [categoryFilter, setCategoryFilter] = useState<string | undefined>(undefined);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+
+  // Debounce search to avoid API calls on every keystroke
+  const debouncedSearch = useDebouncedValue(searchQuery, 300);
+
+  // Zustand store
+  const { viewMode, selectedMemory, setSelectedMemory } = useDashboardStore();
+
+  // Search suggestions
+  const { data: suggestions = [] } = useSuggestions(searchQuery);
+
+  // Fetch projects for dropdown
+  const { data: projectsData } = useProjects();
+
+  // Close suggestions when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(event.target as Node) &&
+        searchInputRef.current &&
+        !searchInputRef.current.contains(event.target as Node)
+      ) {
+        setShowSuggestions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSelectSuggestion = (text: string) => {
+    setSearchQuery(text);
+    setShowSuggestions(false);
+    searchInputRef.current?.focus();
+  };
+
+  // Data fetching with real-time WebSocket updates
+  const {
+    data: memories = [],
+    isLoading: memoriesLoading,
+    isConnected,
+  } = useMemoriesWithRealtime({
+    limit: 200,
+    query: debouncedSearch || undefined,
+    mode: debouncedSearch ? 'search' : 'recent',
+    project: selectedProject,
+    type: typeFilter,
+    category: categoryFilter,
+  });
+  const { data: stats, isLoading: _statsLoading } = useStats(selectedProject);
+  const { data: links = [] } = useMemoryLinks(selectedProject);
+
+  // Mutations
+  const accessMutation = useAccessMemory();
+  const consolidateMutation = useConsolidate();
+
+  // Control status
+  const { data: controlStatus } = useControlStatus();
+  const _pauseMutation = usePauseMemory();
+  const _resumeMutation = useResumeMemory();
+  const isPaused = controlStatus?.paused ?? false;
+
+  const handleSelectMemory = (memory: Memory | null) => {
+    setSelectedMemory(memory);
+  };
+
+  const handleSelectMemoryById = (id: number) => {
+    const memory = memories.find(m => m.id === id);
+    if (memory) {
+      setSelectedMemory(memory);
+    }
+  };
+
+  const handleReinforce = (id: number) => {
+    accessMutation.mutate(id);
+  };
+
+  const _handleConsolidate = () => {
+    consolidateMutation.mutate();
+  };
+
+  return (
+    <div className="h-screen w-screen bg-slate-950 text-white overflow-hidden flex flex-col">
+      {/* Top Bar */}
+      <header className="h-14 border-b border-slate-800 flex items-center justify-between px-4 bg-slate-900/50 backdrop-blur-sm shrink-0">
+        <div className="flex items-center gap-4">
+          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
+            🧠 ShieldCortex
+          </h1>
+
+          {/* Project Selector */}
+          <select
+            value={selectedProject || ''}
+            onChange={(e) => setSelectedProject(e.target.value || undefined)}
+            className="bg-slate-800 border border-slate-700 text-white text-sm rounded-lg px-3 py-1.5 focus:ring-blue-500 focus:border-blue-500"
+          >
+            {projectsData?.projects.map((p) => (
+              <option key={p.project || 'all'} value={p.project || ''}>
+                {p.label} ({p.memory_count})
+              </option>
+            ))}
+          </select>
+
+          {/* Search Input */}
+          <div className="relative">
+            <Input
+              ref={searchInputRef}
+              type="text"
+              placeholder="Search memories..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                setShowSuggestions(true);
+              }}
+              onFocus={() => setShowSuggestions(true)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  setShowSuggestions(false);
+                }
+              }}
+              className="w-64 bg-slate-800 border-slate-700 text-white placeholder:text-slate-400 focus:ring-blue-500"
+            />
+            {/* Suggestions dropdown */}
+            {showSuggestions && suggestions.length > 0 && (
+              <div
+                ref={suggestionsRef}
+                className="absolute top-full left-0 right-0 mt-1 bg-slate-800 border border-slate-700 rounded-lg shadow-xl overflow-hidden z-50"
+              >
+                {suggestions.map((suggestion, index) => (
+                  <button
+                    key={`${suggestion.type}-${suggestion.text}-${index}`}
+                    onClick={() => handleSelectSuggestion(suggestion.text)}
+                    className="w-full px-3 py-2 text-left hover:bg-slate-700 transition-colors flex items-center gap-2"
+                  >
+                    <span className="text-white text-sm truncate flex-1">
+                      {suggestion.text}
+                    </span>
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-slate-600 text-slate-300">
+                      {suggestion.type}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Filter Toggle */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowFilters(!showFilters)}
+            className={`border-slate-600 text-slate-300 hover:text-white hover:bg-slate-700 ${showFilters ? 'bg-slate-700' : ''}`}
+            title="Filter memories by type and category"
+          >
+            Filters {(typeFilter || categoryFilter) && '•'}
+          </Button>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 text-xs text-slate-400 px-2">
+            <span
+              className={`w-2 h-2 rounded-full ${isPaused ? 'bg-orange-500 animate-pulse' : (isConnected ? 'bg-green-500' : 'bg-yellow-500')}`}
+              title={isPaused ? 'Memory creation paused' : (isConnected ? 'Real-time connected' : 'Polling mode')}
+            />
+            {memories.length} memories
+          </div>
+        </div>
+      </header>
+
+      {/* Filter Bar (collapsible) */}
+      {showFilters && (
+        <div className="h-12 border-b border-slate-800 flex items-center gap-4 px-4 bg-slate-900/30">
+          {/* Type filters */}
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-slate-400">Type:</span>
+            {['short_term', 'long_term', 'episodic'].map((type) => (
+              <button
+                key={type}
+                onClick={() => setTypeFilter(typeFilter === type ? undefined : type)}
+                className={`px-2 py-1 text-xs rounded-full transition-colors ${
+                  typeFilter === type
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
+                }`}
+              >
+                {type.replace('_', '-')}
+              </button>
+            ))}
+          </div>
+
+          <div className="w-px h-6 bg-slate-700" />
+
+          {/* Category filters */}
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-slate-400">Category:</span>
+            {['architecture', 'pattern', 'error', 'learning', 'preference', 'context'].map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setCategoryFilter(categoryFilter === cat ? undefined : cat)}
+                className={`px-2 py-1 text-xs rounded-full transition-colors ${
+                  categoryFilter === cat
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-slate-800 text-slate-300 hover:bg-slate-700'
+                }`}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+
+          {/* Clear filters */}
+          {(typeFilter || categoryFilter) && (
+            <>
+              <div className="w-px h-6 bg-slate-700" />
+              <button
+                onClick={() => {
+                  setTypeFilter(undefined);
+                  setCategoryFilter(undefined);
+                }}
+                className="px-2 py-1 text-xs text-red-400 hover:text-red-300"
+              >
+                Clear all
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        <NavRail />
+
+        {/* Active View */}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={viewMode}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            className="flex-1 relative overflow-hidden"
+          >
+            {viewMode === 'brain' && (
+              memoriesLoading ? (
+                <div className="w-full h-full flex items-center justify-center">
+                  <div className="text-slate-400 animate-pulse">Loading memories...</div>
+                </div>
+              ) : (
+                <BrainScene
+                  memories={memories}
+                  links={links}
+                  selectedMemory={selectedMemory}
+                  onSelectMemory={handleSelectMemory}
+                />
+              )
+            )}
+            {viewMode === 'graph' && (
+              <KnowledgeGraph
+                memories={memories}
+                links={links}
+                selectedMemory={selectedMemory}
+                onSelectMemory={handleSelectMemory}
+              />
+            )}
+            {viewMode === 'memories' && (
+              <MemoriesView
+                memories={memories}
+                selectedMemory={selectedMemory}
+                onSelectMemory={handleSelectMemory}
+              />
+            )}
+            {viewMode === 'insights' && (
+              <InsightsView selectedProject={selectedProject} stats={stats} />
+            )}
+            {viewMode === 'ontology' && (
+              <OntologyGraph />
+            )}
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Right Detail Panel */}
+        {selectedMemory && (
+          <div className="w-80 border-l border-slate-800 overflow-y-auto shrink-0">
+            <MemoryDetail
+              memory={selectedMemory}
+              links={links}
+              memories={memories}
+              onClose={() => setSelectedMemory(null)}
+              onReinforce={handleReinforce}
+              onSelectMemory={handleSelectMemoryById}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/Providers.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * Providers
+ * React Query and other providers wrapper
+ */
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

package/dashboard/src/components/brain/ActivityPulseSystem.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+/**
+ * Activity Pulse System
+ *
+ * Creates visual pulses when memory events occur:
+ * - memory_created: Green expanding pulse at memory position
+ * - memory_accessed: Blue flash at memory position
+ * - link_discovered: Cyan line connecting two memories
+ */
+
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+
+interface Pulse {
+  id: number;
+  type: 'created' | 'accessed' | 'linked';
+  position: [number, number, number];
+  targetPosition?: [number, number, number]; // For links
+  startTime: number;
+  duration: number;
+  color: string;
+}
+
+interface ActivityPulseSystemProps {
+  pulses: Pulse[];
+  onPulseComplete: (id: number) => void;
+}
+
+// Shared geometry
+const PULSE_GEOMETRY = new THREE.RingGeometry(0.1, 0.15, 32);
+const SPHERE_GEOMETRY = new THREE.SphereGeometry(0.1, 16, 16);
+
+function CreatedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const startTimeRef = useRef<number | null>(null);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Expanding ring that fades out
+    const scale = 0.5 + progress * 3;
+    const opacity = (1 - progress) * 0.8;
+
+    meshRef.current.scale.setScalar(scale);
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity = opacity;
+  });
+
+  return (
+    <mesh
+      ref={meshRef}
+      position={pulse.position}
+      rotation={[Math.PI / 2, 0, 0]}
+      geometry={PULSE_GEOMETRY}
+    >
+      <meshBasicMaterial
+        color={pulse.color}
+        transparent
+        opacity={0.8}
+        side={THREE.DoubleSide}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}
+
+function AccessedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const startTimeRef = useRef<number | null>(null);
+
+  useFrame((state) => {
+    if (!meshRef.current) return;
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Flash that expands slightly then fades
+    const flash = Math.sin(progress * Math.PI);
+    const scale = 0.8 + flash * 0.6;
+    const opacity = flash * 0.9;
+
+    meshRef.current.scale.setScalar(scale);
+    (meshRef.current.material as THREE.MeshBasicMaterial).opacity = opacity;
+  });
+
+  return (
+    <mesh ref={meshRef} position={pulse.position} geometry={SPHERE_GEOMETRY}>
+      <meshBasicMaterial
+        color={pulse.color}
+        transparent
+        opacity={0.9}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}
+
+function LinkedPulse({
+  pulse,
+  onComplete,
+}: {
+  pulse: Pulse;
+  onComplete: () => void;
+}) {
+  const groupRef = useRef<THREE.Group>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const lineRef = useRef<THREE.Line | null>(null);
+
+  // Create line object once
+  const lineObject = useMemo(() => {
+    const points = [
+      new THREE.Vector3(...pulse.position),
+      new THREE.Vector3(...(pulse.targetPosition || pulse.position)),
+    ];
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({
+      color: pulse.color,
+      transparent: true,
+      opacity: 0.8,
+    });
+    return new THREE.Line(geometry, material);
+  }, [pulse.position, pulse.targetPosition, pulse.color]);
+
+  useFrame((state) => {
+    if (!lineRef.current) {
+      // Add line to group on first render
+      if (groupRef.current && !groupRef.current.children.length) {
+        groupRef.current.add(lineObject);
+        lineRef.current = lineObject;
+      }
+      return;
+    }
+
+    // Initialize start time on first frame
+    if (startTimeRef.current === null) {
+      startTimeRef.current = state.clock.elapsedTime;
+    }
+
+    const elapsed = state.clock.elapsedTime - startTimeRef.current;
+    const progress = elapsed / (pulse.duration / 1000); // Convert ms to seconds
+
+    if (progress >= 1) {
+      onComplete();
+      return;
+    }
+
+    // Line that appears then fades
+    const flash = Math.sin(progress * Math.PI);
+    (lineRef.current.material as THREE.LineBasicMaterial).opacity = flash * 0.8;
+  });
+
+  return <group ref={groupRef} />;
+}
+
+export function ActivityPulseSystem({ pulses, onPulseComplete }: ActivityPulseSystemProps) {
+  return (
+    <group name="activity-pulses">
+      {pulses.map((pulse) => {
+        switch (pulse.type) {
+          case 'created':
+            return (
+              <CreatedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          case 'accessed':
+            return (
+              <AccessedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          case 'linked':
+            return (
+              <LinkedPulse
+                key={pulse.id}
+                pulse={pulse}
+                onComplete={() => onPulseComplete(pulse.id)}
+              />
+            );
+          default:
+            return null;
+        }
+      })}
+    </group>
+  );
+}
+
+// Type export for use in parent components
+export type { Pulse };