shieldcortex 2.0.0

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

@@ -0,0 +1,319 @@
+'use client';
+
+/**
+ * SQL Console Component
+ *
+ * Allows executing SQL queries against the memory database.
+ * Read-only by default with optional write mode.
+ */
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+// Predefined query templates
+const QUERY_TEMPLATES = [
+  {
+    label: 'Top memories by salience',
+    query: 'SELECT id, title, salience, type, category FROM memories ORDER BY salience DESC LIMIT 20',
+  },
+  {
+    label: 'Memory type distribution',
+    query: "SELECT type, COUNT(*) as count FROM memories GROUP BY type",
+  },
+  {
+    label: 'Category distribution',
+    query: 'SELECT category, COUNT(*) as count FROM memories GROUP BY category ORDER BY count DESC',
+  },
+  {
+    label: 'Contradiction links',
+    query: "SELECT * FROM memory_links WHERE relationship = 'contradicts'",
+  },
+  {
+    label: 'Recently accessed',
+    query: 'SELECT id, title, last_accessed, access_count FROM memories ORDER BY last_accessed DESC LIMIT 20',
+  },
+  {
+    label: 'Low salience (at risk)',
+    query: 'SELECT id, title, salience, decayed_score, type FROM memories WHERE decayed_score < 0.3 ORDER BY decayed_score ASC LIMIT 20',
+  },
+  {
+    label: 'Memories by project',
+    query: 'SELECT project, COUNT(*) as count FROM memories GROUP BY project ORDER BY count DESC',
+  },
+];
+
+interface QueryResult {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  rowCount: number;
+  executionTime: number;
+  error?: string;
+}
+
+export function SqlConsole() {
+  const [query, setQuery] = useState(QUERY_TEMPLATES[0].query);
+  const [result, setResult] = useState<QueryResult | null>(null);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [allowWrite, setAllowWrite] = useState(false);
+  const [history, setHistory] = useState<string[]>([]);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const executeQueryRef = useRef<() => void>(() => {});
+
+  const executeQuery = useCallback(async () => {
+    if (!query.trim()) return;
+
+    // Safety check for destructive operations
+    const upperQuery = query.toUpperCase();
+    if (!allowWrite) {
+      if (upperQuery.includes('DROP') || upperQuery.includes('DELETE') ||
+          upperQuery.includes('TRUNCATE') || upperQuery.includes('INSERT') ||
+          upperQuery.includes('UPDATE') || upperQuery.includes('ALTER')) {
+        setResult({
+          columns: [],
+          rows: [],
+          rowCount: 0,
+          executionTime: 0,
+          error: 'Write operations are disabled. Enable "Allow writes" to execute this query.',
+        });
+        return;
+      }
+    }
+
+    // Block DROP/TRUNCATE even in write mode
+    if (upperQuery.includes('DROP') || upperQuery.includes('TRUNCATE')) {
+      setResult({
+        columns: [],
+        rows: [],
+        rowCount: 0,
+        executionTime: 0,
+        error: 'DROP and TRUNCATE operations are blocked for safety.',
+      });
+      return;
+    }
+
+    setIsExecuting(true);
+    const startTime = performance.now();
+
+    try {
+      const response = await fetch(`${API_BASE}/api/sql`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: query.trim(), allowWrite }),
+      });
+
+      const data = await response.json();
+      const executionTime = performance.now() - startTime;
+
+      if (!response.ok) {
+        setResult({
+          columns: [],
+          rows: [],
+          rowCount: 0,
+          executionTime,
+          error: data.error || 'Query failed',
+        });
+      } else {
+        setResult({
+          columns: data.columns || [],
+          rows: data.rows || [],
+          rowCount: data.rowCount || data.rows?.length || 0,
+          executionTime,
+        });
+
+        // Add to history
+        setHistory((prev) => {
+          const updated = [query, ...prev.filter((q) => q !== query)];
+          return updated.slice(0, 20); // Keep last 20
+        });
+      }
+    } catch (err) {
+      setResult({
+        columns: [],
+        rows: [],
+        rowCount: 0,
+        executionTime: performance.now() - startTime,
+        error: (err as Error).message,
+      });
+    } finally {
+      setIsExecuting(false);
+    }
+  }, [query, allowWrite]);
+
+  // Keep ref in sync
+  useEffect(() => {
+    executeQueryRef.current = executeQuery;
+  }, [executeQuery]);
+
+  // Keyboard shortcut: Ctrl+Enter to execute
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        executeQueryRef.current();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const loadTemplate = (templateQuery: string) => {
+    setQuery(templateQuery);
+    textareaRef.current?.focus();
+  };
+
+  const loadFromHistory = (historicalQuery: string) => {
+    setQuery(historicalQuery);
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Query Editor */}
+      <div className="p-3 border-b border-slate-700">
+        <div className="flex gap-2 mb-2">
+          {/* Template Dropdown */}
+          <select
+            onChange={(e) => e.target.value && loadTemplate(e.target.value)}
+            className="bg-slate-800 border border-slate-600 text-white text-xs rounded px-2 py-1"
+            value=""
+          >
+            <option value="">Templates...</option>
+            {QUERY_TEMPLATES.map((t) => (
+              <option key={t.label} value={t.query}>
+                {t.label}
+              </option>
+            ))}
+          </select>
+
+          {/* History Dropdown */}
+          {history.length > 0 && (
+            <select
+              onChange={(e) => e.target.value && loadFromHistory(e.target.value)}
+              className="bg-slate-800 border border-slate-600 text-white text-xs rounded px-2 py-1"
+              value=""
+            >
+              <option value="">History...</option>
+              {history.map((q, i) => (
+                <option key={i} value={q}>
+                  {q.slice(0, 50)}...
+                </option>
+              ))}
+            </select>
+          )}
+
+          <div className="flex-1" />
+
+          {/* Allow Write Toggle */}
+          <label className="flex items-center gap-1 text-xs text-slate-400 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={allowWrite}
+              onChange={(e) => setAllowWrite(e.target.checked)}
+              className="rounded border-slate-600 bg-slate-800"
+            />
+            Allow writes
+          </label>
+
+          <Button
+            onClick={executeQuery}
+            disabled={isExecuting || !query.trim()}
+            size="sm"
+            className="bg-blue-600 hover:bg-blue-700"
+          >
+            {isExecuting ? 'Running...' : 'Execute (Ctrl+Enter)'}
+          </Button>
+        </div>
+
+        <textarea
+          ref={textareaRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full h-24 bg-slate-900 border border-slate-600 rounded p-2 text-white font-mono text-sm resize-none focus:outline-none focus:border-blue-500"
+          placeholder="Enter SQL query..."
+          spellCheck={false}
+        />
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto p-3">
+        {result?.error && (
+          <div className="p-3 rounded-lg bg-red-500/20 border border-red-500/50 text-red-300 text-sm mb-3">
+            {result.error}
+          </div>
+        )}
+
+        {result && !result.error && (
+          <>
+            <div className="text-xs text-slate-400 mb-2">
+              {result.rowCount} row{result.rowCount !== 1 ? 's' : ''} returned in{' '}
+              {result.executionTime.toFixed(0)}ms
+            </div>
+
+            {result.rows.length > 0 ? (
+              <div className="overflow-x-auto">
+                <table className="w-full text-xs border-collapse">
+                  <thead>
+                    <tr className="border-b border-slate-700">
+                      {result.columns.map((col) => (
+                        <th
+                          key={col}
+                          className="text-left text-slate-400 font-medium py-2 px-3 bg-slate-800/50"
+                        >
+                          {col}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {result.rows.map((row, i) => (
+                      <tr key={i} className="border-b border-slate-800 hover:bg-slate-800/30">
+                        {result.columns.map((col) => (
+                          <td key={col} className="py-2 px-3 text-white">
+                            {formatCellValue(row[col])}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="text-slate-500 text-center py-4">No rows returned</div>
+            )}
+          </>
+        )}
+
+        {!result && (
+          <div className="text-slate-500 text-sm text-center py-8">
+            Enter a SQL query and press Execute or Ctrl+Enter
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function formatCellValue(value: unknown): string {
+  if (value === null || value === undefined) return '—';
+  if (typeof value === 'string') {
+    // Truncate long strings
+    if (value.length > 100) {
+      return value.slice(0, 100) + '...';
+    }
+    return value;
+  }
+  if (typeof value === 'number') {
+    // Format decimals nicely
+    if (!Number.isInteger(value)) {
+      return value.toFixed(4);
+    }
+    return value.toString();
+  }
+  if (typeof value === 'boolean') {
+    return value ? 'true' : 'false';
+  }
+  return JSON.stringify(value);
+}

package/dashboard/src/components/graph/KnowledgeGraph.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import type { Memory, MemoryLink } from '@/types/memory';
+import { getCategoryColor } from '@/lib/category-colors';
+
+const ForceGraph2D = dynamic(() => import('react-force-graph-2d'), { ssr: false });
+
+interface GraphNode {
+  id: number;
+  name: string;
+  category: Memory['category'];
+  type: Memory['type'];
+  salience: number;
+  decayedScore: number;
+  val: number;
+}
+
+interface GraphLink {
+  source: number;
+  target: number;
+  strength: number;
+  relationship: string;
+}
+
+interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+interface KnowledgeGraphProps {
+  memories: Memory[];
+  links: MemoryLink[];
+  selectedMemory: Memory | null;
+  onSelectMemory: (m: Memory | null) => void;
+}
+
+export default function KnowledgeGraph({
+  memories,
+  links,
+  selectedMemory,
+  onSelectMemory,
+}: KnowledgeGraphProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const graphRef = useRef<any>(null);
+  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const update = () => {
+      setDimensions({ width: el.clientWidth, height: el.clientHeight });
+    };
+    update();
+
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const graphData: GraphData = useMemo(() => {
+    const nodeIds = new Set(memories.map((m) => m.id));
+    return {
+      nodes: memories.map((m) => ({
+        id: m.id,
+        name: m.title,
+        category: m.category,
+        type: m.type,
+        salience: m.salience,
+        decayedScore: m.decayedScore ?? m.salience,
+        val: m.salience * 10,
+      })),
+      links: links
+        .filter((l) => nodeIds.has(l.source_id) && nodeIds.has(l.target_id))
+        .map((l) => ({
+          source: l.source_id,
+          target: l.target_id,
+          strength: l.strength,
+          relationship: l.relationship,
+        })),
+    };
+  }, [memories, links]);
+
+  const nodeCanvasObject = useCallback(
+    (node: GraphNode, ctx: CanvasRenderingContext2D, globalScale: number) => {
+      const x = (node as unknown as { x: number }).x;
+      const y = (node as unknown as { y: number }).y;
+      if (x == null || y == null) return;
+
+      const radius = Math.max(3, node.salience * 8);
+      const color = getCategoryColor(node.category);
+      const opacity = Math.max(0.2, node.decayedScore);
+      const isSelected = selectedMemory?.id === node.id;
+
+      ctx.beginPath();
+      ctx.arc(x, y, radius, 0, 2 * Math.PI);
+      ctx.fillStyle = color + Math.round(opacity * 255).toString(16).padStart(2, '0');
+      ctx.fill();
+
+      // Border style based on type
+      ctx.lineWidth = isSelected ? 2 : 1;
+      ctx.strokeStyle = isSelected ? '#ffffff' : color;
+      if (node.type === 'short_term') {
+        ctx.setLineDash([3, 3]);
+      } else if (node.type === 'episodic') {
+        ctx.setLineDash([1, 2]);
+      } else {
+        ctx.setLineDash([]);
+      }
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Label when zoomed in enough
+      if (globalScale > 3) {
+        const maxChars = 40;
+        const label = node.name.length > maxChars ? node.name.slice(0, maxChars) + '…' : node.name;
+        const fontSize = Math.max(10, 12 / globalScale);
+        ctx.font = `${fontSize}px Sans-Serif`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+
+        const textWidth = ctx.measureText(label).width;
+        const textY = y + radius + 3;
+        const padding = 2;
+
+        // Dark background pill behind text
+        ctx.fillStyle = 'rgba(2, 6, 23, 0.85)';
+        ctx.beginPath();
+        ctx.roundRect(
+          x - textWidth / 2 - padding,
+          textY - padding,
+          textWidth + padding * 2,
+          fontSize + padding * 2,
+          3,
+        );
+        ctx.fill();
+
+        // White text with full opacity
+        ctx.fillStyle = '#e2e8f0';
+        ctx.fillText(label, x, textY);
+      }
+    },
+    [selectedMemory],
+  );
+
+  const linkCanvasObject = useCallback(
+    (link: GraphLink, ctx: CanvasRenderingContext2D) => {
+      const source = link.source as unknown as { x: number; y: number };
+      const target = link.target as unknown as { x: number; y: number };
+      if (!source?.x || !target?.x) return;
+
+      ctx.beginPath();
+      ctx.moveTo(source.x, source.y);
+      ctx.lineTo(target.x, target.y);
+      ctx.strokeStyle = '#334155';
+      ctx.lineWidth = link.strength * 3;
+      ctx.stroke();
+    },
+    [],
+  );
+
+  const lastZoomRef = useRef(1);
+  const handleZoom = useCallback(
+    ({ k }: { k: number }) => {
+      const fg = graphRef.current;
+      if (!fg) return;
+      const prev = lastZoomRef.current;
+      if (Math.abs(k - prev) < 0.2) return;
+      lastZoomRef.current = k;
+
+      const charge = fg.d3Force('charge');
+      if (!charge) return;
+
+      if (k > 3) {
+        // Zoomed in past label threshold — spread nodes for readability
+        charge.strength(-50 * k);
+        fg.d3ReheatSimulation();
+      } else {
+        // Zoomed out — restore default compact layout
+        charge.strength(-30);
+        fg.d3ReheatSimulation();
+      }
+    },
+    [],
+  );
+
+  const handleNodeClick = useCallback(
+    (node: GraphNode) => {
+      const memory = memories.find((m) => m.id === node.id) ?? null;
+      onSelectMemory(memory);
+    },
+    [memories, onSelectMemory],
+  );
+
+  const nodeLabel = useCallback(
+    (node: GraphNode) =>
+      `${node.name}\nCategory: ${node.category}\nSalience: ${node.salience.toFixed(2)}`,
+    [],
+  );
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      {dimensions.width > 0 && (
+        <ForceGraph2D
+          ref={graphRef as never}
+          graphData={graphData}
+          width={dimensions.width}
+          height={dimensions.height}
+          backgroundColor="rgba(0,0,0,0)"
+          nodeCanvasObject={nodeCanvasObject as never}
+          nodeLabel={nodeLabel as never}
+          onNodeClick={handleNodeClick as never}
+          onZoom={handleZoom as never}
+          linkCanvasObject={linkCanvasObject as never}
+          linkDirectionalParticles={2}
+          linkDirectionalParticleWidth={2}
+          linkDirectionalParticleSpeed={0.005}
+          linkDirectionalParticleColor={() => '#22d3ee'}
+          d3AlphaDecay={0.02}
+          d3VelocityDecay={0.3}
+          warmupTicks={100}
+          cooldownTicks={200}
+        />
+      )}
+    </div>
+  );
+}