shieldcortex 2.0.0

package/dashboard/src/components/debug/ActivityLog.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+/**
+ * Activity Log Component
+ *
+ * Real-time event stream showing memory operations.
+ * Uses WebSocket for live updates.
+ */
+
+import { useState, useEffect, useRef } from 'react';
+import { useMemoryWebSocket, MemoryEventType } from '@/lib/websocket';
+
+interface LogEntry {
+  id: number;
+  timestamp: Date;
+  type: MemoryEventType;
+  message: string;
+  details?: Record<string, unknown>;
+}
+
+const EVENT_COLORS: Record<MemoryEventType, string> = {
+  memory_created: 'text-green-400',
+  memory_accessed: 'text-blue-400',
+  memory_updated: 'text-yellow-400',
+  memory_deleted: 'text-red-400',
+  consolidation_complete: 'text-purple-400',
+  decay_tick: 'text-slate-500',
+  initial_state: 'text-slate-400',
+  worker_light_tick: 'text-slate-500',
+  worker_medium_tick: 'text-slate-500',
+  link_discovered: 'text-cyan-400',
+  predictive_consolidation: 'text-purple-400',
+  update_started: 'text-blue-400',
+  update_complete: 'text-green-400',
+  update_failed: 'text-red-400',
+  server_restarting: 'text-orange-400',
+};
+
+const EVENT_ICONS: Record<MemoryEventType, string> = {
+  memory_created: '+',
+  memory_accessed: '👁',
+  memory_updated: '✏',
+  memory_deleted: '✕',
+  consolidation_complete: '🔄',
+  decay_tick: '⏱',
+  initial_state: '📋',
+  worker_light_tick: '⚡',
+  worker_medium_tick: '🔋',
+  link_discovered: '🔗',
+  predictive_consolidation: '🔮',
+  update_started: '⬆',
+  update_complete: '✓',
+  update_failed: '✗',
+  server_restarting: '🔄',
+};
+
+export function ActivityLog() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [filters, setFilters] = useState<Record<MemoryEventType, boolean>>({
+    memory_created: true,
+    memory_accessed: true,
+    memory_updated: true,
+    memory_deleted: true,
+    consolidation_complete: true,
+    decay_tick: false, // Off by default (noisy)
+    initial_state: false,
+    worker_light_tick: false,
+    worker_medium_tick: false,
+    link_discovered: true,
+    predictive_consolidation: true,
+    update_started: true,
+    update_complete: true,
+    update_failed: true,
+    server_restarting: true,
+  });
+
+  const logContainerRef = useRef<HTMLDivElement>(null);
+  const nextIdRef = useRef(1);
+
+  // Connect to WebSocket
+  const { lastEvent, isConnected } = useMemoryWebSocket();
+
+  // Process incoming events
+  useEffect(() => {
+    if (!lastEvent) return;
+
+    const entry: LogEntry = {
+      id: nextIdRef.current++,
+      timestamp: new Date(lastEvent.timestamp),
+      type: lastEvent.type,
+      message: formatEventMessage(lastEvent),
+      details: lastEvent.data as Record<string, unknown>,
+    };
+
+    setLogs((prev) => {
+      const updated = [...prev, entry];
+      // Keep only last 500 entries
+      return updated.slice(-500);
+    });
+  }, [lastEvent]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && logContainerRef.current) {
+      logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
+    }
+  }, [logs, autoScroll]);
+
+  const filteredLogs = logs.filter((log) => filters[log.type]);
+
+  const toggleFilter = (type: MemoryEventType) => {
+    setFilters((prev) => ({ ...prev, [type]: !prev[type] }));
+  };
+
+  const clearLogs = () => {
+    setLogs([]);
+  };
+
+  const exportLogs = () => {
+    const json = JSON.stringify(filteredLogs, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `cortex-activity-${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Controls */}
+      <div className="p-3 border-b border-slate-700 flex items-center gap-3 flex-wrap">
+        {/* Connection Status */}
+        <div className="flex items-center gap-2 text-xs">
+          <span
+            className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}
+          />
+          <span className="text-slate-400">
+            {isConnected ? 'Connected' : 'Disconnected'}
+          </span>
+        </div>
+
+        <div className="w-px h-4 bg-slate-700" />
+
+        {/* Filters */}
+        <div className="flex items-center gap-1 flex-wrap">
+          {(Object.keys(filters) as MemoryEventType[]).map((type) => (
+            <button
+              key={type}
+              onClick={() => toggleFilter(type)}
+              className={`px-2 py-0.5 text-xs rounded transition-colors ${
+                filters[type]
+                  ? `${EVENT_COLORS[type]} bg-slate-700`
+                  : 'text-slate-600 bg-slate-800'
+              }`}
+            >
+              {type.replace(/_/g, ' ').replace('memory ', '')}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex-1" />
+
+        {/* Actions */}
+        <label className="flex items-center gap-1 text-xs text-slate-400 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={autoScroll}
+            onChange={(e) => setAutoScroll(e.target.checked)}
+            className="rounded border-slate-600 bg-slate-800"
+          />
+          Auto-scroll
+        </label>
+
+        <button
+          onClick={exportLogs}
+          className="text-xs text-slate-400 hover:text-white"
+        >
+          Export
+        </button>
+
+        <button
+          onClick={clearLogs}
+          className="text-xs text-red-400 hover:text-red-300"
+        >
+          Clear
+        </button>
+      </div>
+
+      {/* Log Entries */}
+      <div
+        ref={logContainerRef}
+        className="flex-1 overflow-auto p-3 font-mono text-xs"
+      >
+        {filteredLogs.length === 0 ? (
+          <div className="text-slate-500 text-center py-8">
+            {isConnected ? 'Waiting for events...' : 'Not connected to server'}
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {filteredLogs.map((log) => (
+              <div key={log.id} className="flex gap-2 hover:bg-slate-800/50 px-1 rounded">
+                <span className="text-slate-500 shrink-0">
+                  {log.timestamp.toLocaleTimeString()}
+                </span>
+                <span className={`shrink-0 w-4 ${EVENT_COLORS[log.type]}`}>
+                  {EVENT_ICONS[log.type]}
+                </span>
+                <span className={EVENT_COLORS[log.type]}>{log.message}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatEventMessage(event: { type: MemoryEventType; data?: unknown }): string {
+  const data = event.data as Record<string, unknown> | undefined;
+
+  switch (event.type) {
+    case 'memory_created':
+      return `Created: "${data?.title || 'Unknown'}" (${data?.type || 'unknown'})`;
+    case 'memory_accessed':
+      return `Accessed: "${data?.title || 'Unknown'}" → salience ${((data?.newSalience as number) * 100).toFixed(0)}%`;
+    case 'memory_updated':
+      return `Updated: "${data?.title || 'Unknown'}"`;
+    case 'memory_deleted':
+      return `Deleted: "${data?.title || 'Unknown'}" (ID: ${data?.memoryId})`;
+    case 'consolidation_complete':
+      return `Consolidation: ${data?.consolidated || 0} promoted, ${data?.decayed || 0} decayed, ${data?.deleted || 0} deleted`;
+    case 'decay_tick':
+      return `Decay tick: ${(data?.updates as unknown[])?.length || 0} memories updated`;
+    case 'initial_state':
+      return 'Connected - received initial state';
+    case 'worker_light_tick':
+      return 'Worker light tick completed';
+    case 'worker_medium_tick':
+      return 'Worker medium tick completed';
+    case 'link_discovered':
+      return `Link discovered: ${data?.sourceTitle || '?'} → ${data?.targetTitle || '?'}`;
+    case 'predictive_consolidation':
+      return `Predictive consolidation: ${data?.promoted || 0} promoted`;
+    default:
+      return `Event: ${event.type}`;
+  }
+}

package/dashboard/src/components/debug/DebugPanel.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+/**
+ * Debug Panel Component
+ *
+ * Collapsible bottom panel with tabbed interface for debug tools:
+ * - Memory Detail (enhanced)
+ * - Query Tester
+ * - Activity Log
+ * - Relationship Graph
+ * - SQL Console
+ */
+
+import { useState } from 'react';
+import { QueryTester } from './QueryTester';
+import { ActivityLog } from './ActivityLog';
+import { RelationshipGraph } from './RelationshipGraph';
+import { SqlConsole } from './SqlConsole';
+
+type TabId = 'detail' | 'query' | 'activity' | 'graph' | 'sql';
+
+interface Tab {
+  id: TabId;
+  label: string;
+  icon: string;
+}
+
+const TABS: Tab[] = [
+  { id: 'query', label: 'Query', icon: '🔍' },
+  { id: 'activity', label: 'Activity', icon: '📋' },
+  { id: 'graph', label: 'Graph', icon: '🕸' },
+  { id: 'sql', label: 'SQL', icon: '💾' },
+];
+
+interface DebugPanelProps {
+  onCollapse?: () => void;
+}
+
+export function DebugPanel({ onCollapse }: DebugPanelProps) {
+  const [activeTab, setActiveTab] = useState<TabId>('query');
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const handleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+    onCollapse?.();
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className="h-10 border-t border-slate-700 bg-slate-900/80 flex items-center px-4">
+        <button
+          onClick={handleCollapse}
+          className="flex items-center gap-2 text-sm text-slate-400 hover:text-white"
+        >
+          <span>▲</span>
+          <span>Debug Panel</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-96 border-t border-slate-700 bg-slate-900/80 flex flex-col">
+      {/* Tab Bar */}
+      <div className="flex items-center border-b border-slate-700 px-2">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`px-4 py-2 text-sm flex items-center gap-1.5 border-b-2 transition-colors ${
+              activeTab === tab.id
+                ? 'text-white border-blue-500'
+                : 'text-slate-400 border-transparent hover:text-white hover:border-slate-600'
+            }`}
+          >
+            <span>{tab.icon}</span>
+            <span>{tab.label}</span>
+          </button>
+        ))}
+
+        <div className="flex-1" />
+
+        <button
+          onClick={handleCollapse}
+          className="p-2 text-slate-400 hover:text-white"
+          title="Collapse panel"
+        >
+          ▼
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-hidden min-h-0">
+        {activeTab === 'query' && <QueryTester />}
+        {activeTab === 'activity' && <ActivityLog />}
+        {activeTab === 'graph' && <RelationshipGraph />}
+        {activeTab === 'sql' && <SqlConsole />}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/debug/QueryTester.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+/**
+ * Query Tester Component
+ *
+ * Allows testing search queries against the memory system
+ * with detailed score breakdowns and explanations.
+ */
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Memory } from '@/types/memory';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface SearchResult {
+  memory: Memory & { decayedScore: number };
+  relevanceScore: number;
+}
+
+type SearchMode = 'hybrid' | 'fts' | 'vector';
+
+export function QueryTester() {
+  const [query, setQuery] = useState('');
+  const [mode, setMode] = useState<SearchMode>('hybrid');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSearch = async () => {
+    if (!query.trim()) return;
+
+    setIsSearching(true);
+    setError(null);
+
+    try {
+      const params = new URLSearchParams({
+        query: query.trim(),
+        mode: 'search',
+        limit: '20',
+      });
+
+      const response = await fetch(`${API_BASE}/api/memories?${params}`);
+      if (!response.ok) {
+        throw new Error(`Search failed: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      // Transform API response to include relevance score
+      const resultsWithScore: SearchResult[] = data.memories.map((m: Memory & { decayedScore: number }) => ({
+        memory: m,
+        relevanceScore: m.decayedScore, // Using decayedScore as proxy for relevance
+      }));
+
+      setResults(resultsWithScore);
+    } catch (err) {
+      setError((err as Error).message);
+      setResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Search Controls */}
+      <div className="p-3 border-b border-slate-700 flex gap-2 items-center">
+        <Input
+          type="text"
+          placeholder="Enter search query..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className="flex-1 bg-slate-800 border-slate-600 text-white"
+        />
+
+        {/* Mode Toggle */}
+        <div className="flex gap-1 bg-slate-800 rounded-lg p-1">
+          {(['hybrid', 'fts', 'vector'] as SearchMode[]).map((m) => (
+            <button
+              key={m}
+              onClick={() => setMode(m)}
+              className={`px-2 py-1 text-xs rounded transition-colors ${
+                mode === m
+                  ? 'bg-blue-600 text-white'
+                  : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              {m.toUpperCase()}
+            </button>
+          ))}
+        </div>
+
+        <Button
+          onClick={handleSearch}
+          disabled={isSearching || !query.trim()}
+          size="sm"
+          className="bg-blue-600 hover:bg-blue-700"
+        >
+          {isSearching ? 'Searching...' : 'Search'}
+        </Button>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto p-3">
+        {error && (
+          <div className="p-3 rounded-lg bg-red-500/20 border border-red-500/50 text-red-300 text-sm mb-3">
+            {error}
+          </div>
+        )}
+
+        {results.length === 0 && !error && (
+          <div className="text-slate-500 text-sm text-center py-8">
+            {query ? 'No results found' : 'Enter a query to search memories'}
+          </div>
+        )}
+
+        {results.length > 0 && (
+          <div className="space-y-2">
+            <div className="text-xs text-slate-400 mb-2">
+              Found {results.length} results
+            </div>
+
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="text-left text-slate-400 border-b border-slate-700">
+                  <th className="pb-2 pr-4">Title</th>
+                  <th className="pb-2 pr-4 w-20">Score</th>
+                  <th className="pb-2 pr-4 w-24">Type</th>
+                  <th className="pb-2 w-24">Category</th>
+                </tr>
+              </thead>
+              <tbody>
+                {results.map((result, index) => (
+                  <tr
+                    key={result.memory.id}
+                    className="border-b border-slate-800 hover:bg-slate-800/50"
+                  >
+                    <td className="py-2 pr-4">
+                      <div className="flex items-center gap-2">
+                        <span className="text-slate-500 text-xs w-5">
+                          {index + 1}.
+                        </span>
+                        <span className="text-white truncate max-w-[300px]">
+                          {result.memory.title}
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-2 pr-4">
+                      <div className="flex items-center gap-1">
+                        <div
+                          className="h-1.5 rounded-full bg-gradient-to-r from-blue-600 to-purple-600"
+                          style={{ width: `${result.relevanceScore * 100}%`, maxWidth: '60px' }}
+                        />
+                        <span className="text-xs text-slate-400">
+                          {(result.relevanceScore * 100).toFixed(0)}%
+                        </span>
+                      </div>
+                    </td>
+                    <td className="py-2 pr-4">
+                      <span className={`text-xs px-1.5 py-0.5 rounded ${
+                        result.memory.type === 'long_term'
+                          ? 'bg-purple-600/30 text-purple-300'
+                          : result.memory.type === 'short_term'
+                          ? 'bg-blue-600/30 text-blue-300'
+                          : 'bg-green-600/30 text-green-300'
+                      }`}>
+                        {result.memory.type.replace('_', '-')}
+                      </span>
+                    </td>
+                    <td className="py-2">
+                      <span className="text-xs text-slate-400">
+                        {result.memory.category}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}