shieldcortex 2.1.1 → 2.1.3

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

@@ -1,250 +0,0 @@
-'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

@@ -1,101 +0,0 @@
-'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

@@ -1,192 +0,0 @@
-'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>
-  );
-}