claude-cortex 1.0.0 → 1.1.0

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

@@ -0,0 +1,313 @@
+'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 } 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);
+
+  // Keyboard shortcut: Ctrl+Enter to execute
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        executeQuery();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [query, allowWrite]);
+
+  const executeQuery = 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);
+    }
+  };
+
+  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/memory/MemoryDetail.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+/**
+ * Memory Detail
+ * Shows detailed information about a selected memory
+ * including related memories and decay visualization
+ */
+
+import { useMemo } from 'react';
+import { Memory, MemoryLink } from '@/types/memory';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { getCategoryColor, getTypeColor } from '@/lib/category-colors';
+import { calculateDecayFactor } from '@/lib/position-algorithm';
+
+interface MemoryDetailProps {
+  memory: Memory;
+  links?: MemoryLink[];
+  memories?: Memory[];
+  onClose: () => void;
+  onReinforce?: (id: number) => void;
+  onSelectMemory?: (id: number) => void;
+}
+
+// Relationship styling
+const RELATIONSHIP_STYLES: Record<string, { color: string; label: string; icon: string }> = {
+  references: { color: '#60a5fa', label: 'References', icon: '→' },
+  extends: { color: '#34d399', label: 'Extends', icon: '⊃' },
+  contradicts: { color: '#f87171', label: 'Contradicts', icon: '⊗' },
+  related: { color: '#a78bfa', label: 'Related', icon: '~' },
+};
+
+// Get health status based on decay
+function getHealthStatus(decayFactor: number): { label: string; color: string; bgColor: string } {
+  if (decayFactor > 0.7) {
+    return { label: 'Healthy', color: '#22C55E', bgColor: 'rgba(34, 197, 94, 0.15)' };
+  }
+  if (decayFactor > 0.4) {
+    return { label: 'Fading', color: '#EAB308', bgColor: 'rgba(234, 179, 8, 0.15)' };
+  }
+  return { label: 'Critical', color: '#EF4444', bgColor: 'rgba(239, 68, 68, 0.15)' };
+}
+
+export function MemoryDetail({
+  memory,
+  links = [],
+  memories = [],
+  onClose,
+  onReinforce,
+  onSelectMemory,
+}: MemoryDetailProps) {
+  const decayFactor = calculateDecayFactor(memory);
+  const categoryColor = getCategoryColor(memory.category);
+  const typeColor = getTypeColor(memory.type);
+  const healthStatus = getHealthStatus(decayFactor);
+
+  // Find related memories through links
+  const relatedMemories = useMemo(() => {
+    const related: Array<{
+      memory: Memory;
+      relationship: string;
+      strength: number;
+      direction: 'from' | 'to';
+    }> = [];
+
+    for (const link of links) {
+      if (link.source_id === memory.id) {
+        const target = memories.find(m => m.id === link.target_id);
+        if (target) {
+          related.push({
+            memory: target,
+            relationship: link.relationship,
+            strength: link.strength,
+            direction: 'to',
+          });
+        }
+      } else if (link.target_id === memory.id) {
+        const source = memories.find(m => m.id === link.source_id);
+        if (source) {
+          related.push({
+            memory: source,
+            relationship: link.relationship,
+            strength: link.strength,
+            direction: 'from',
+          });
+        }
+      }
+    }
+
+    // Sort by strength
+    return related.sort((a, b) => b.strength - a.strength);
+  }, [memory.id, links, memories]);
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  };
+
+  const timeSince = (dateStr: string) => {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const hours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
+
+    if (hours < 1) return 'Just now';
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d ago`;
+    return `${Math.floor(days / 7)}w ago`;
+  };
+
+  return (
+    <Card className="bg-slate-900 border-slate-700 h-full overflow-auto">
+      <CardHeader className="border-b border-slate-700 pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-lg font-semibold text-white leading-tight">
+            {memory.title}
+          </CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="text-slate-400 hover:text-white -mt-1"
+          >
+            ✕
+          </Button>
+        </div>
+        <div className="flex items-center gap-2 mt-2">
+          <span
+            className="px-2 py-0.5 rounded text-xs font-medium"
+            style={{
+              backgroundColor: categoryColor + '20',
+              color: categoryColor,
+            }}
+          >
+            {memory.category}
+          </span>
+          <span
+            className="px-2 py-0.5 rounded text-xs font-medium"
+            style={{
+              backgroundColor: typeColor + '20',
+              color: typeColor,
+            }}
+          >
+            {memory.type.replace('_', '-')}
+          </span>
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-4 space-y-4">
+        {/* Content */}
+        <div>
+          <h4 className="text-xs font-medium text-slate-400 mb-1">Content</h4>
+          <p className="text-sm text-slate-200 whitespace-pre-wrap leading-relaxed">
+            {memory.content}
+          </p>
+        </div>
+
+        {/* Health Status Banner */}
+        <div
+          className="rounded-lg p-3 flex items-center gap-3"
+          style={{ backgroundColor: healthStatus.bgColor }}
+        >
+          <div
+            className="w-3 h-3 rounded-full animate-pulse"
+            style={{ backgroundColor: healthStatus.color }}
+          />
+          <div>
+            <div className="text-sm font-medium" style={{ color: healthStatus.color }}>
+              {healthStatus.label}
+            </div>
+            <div className="text-xs text-slate-400">
+              {decayFactor > 0.7
+                ? 'Memory is strong and stable'
+                : decayFactor > 0.4
+                ? 'Memory is fading - reinforce to preserve'
+                : 'Memory at risk of deletion - reinforce now'}
+            </div>
+          </div>
+        </div>
+
+        {/* Metrics */}
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-slate-800 rounded-lg p-3">
+            <div className="text-xs text-slate-400">Salience</div>
+            <div className="text-lg font-bold text-white">
+              {(memory.salience * 100).toFixed(0)}%
+            </div>
+            <div className="mt-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-full transition-all"
+                style={{ width: `${memory.salience * 100}%` }}
+              />
+            </div>
+          </div>
+
+          <div className="bg-slate-800 rounded-lg p-3">
+            <div className="text-xs text-slate-400">Decay Factor</div>
+            <div className="text-lg font-bold text-white">
+              {(decayFactor * 100).toFixed(0)}%
+            </div>
+            <div className="mt-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{
+                  width: `${decayFactor * 100}%`,
+                  backgroundColor: healthStatus.color,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Access info */}
+        <div className="bg-slate-800 rounded-lg p-3 space-y-2">
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Access Count</span>
+            <span className="text-sm font-medium text-white">
+              {memory.accessCount} times
+            </span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Last Accessed</span>
+            <span className="text-sm text-white">
+              {timeSince(memory.lastAccessed)}
+            </span>
+          </div>
+          <div className="flex justify-between items-center">
+            <span className="text-xs text-slate-400">Created</span>
+            <span className="text-sm text-white">
+              {formatDate(memory.createdAt)}
+            </span>
+          </div>
+        </div>
+
+        {/* Related Memories */}
+        {relatedMemories.length > 0 && (
+          <div>
+            <h4 className="text-xs font-medium text-slate-400 mb-2 flex items-center gap-2">
+              <span className="inline-block w-4 h-4">🔗</span>
+              Related Memories ({relatedMemories.length})
+            </h4>
+            <div className="space-y-2 max-h-48 overflow-y-auto">
+              {relatedMemories.map(({ memory: related, relationship, strength, direction }) => {
+                const style = RELATIONSHIP_STYLES[relationship] || RELATIONSHIP_STYLES.related;
+                const relatedCategoryColor = getCategoryColor(related.category);
+
+                return (
+                  <button
+                    key={related.id}
+                    onClick={() => onSelectMemory?.(related.id)}
+                    className="w-full text-left p-2 bg-slate-800 hover:bg-slate-750 rounded-lg transition-colors group"
+                  >
+                    <div className="flex items-center gap-2 mb-1">
+                      <span
+                        className="w-1.5 h-1.5 rounded-full"
+                        style={{ backgroundColor: style.color }}
+                      />
+                      <span
+                        className="text-[10px] font-medium"
+                        style={{ color: style.color }}
+                      >
+                        {direction === 'to' ? `${style.icon} ${style.label}` : `${style.label} ${style.icon}`}
+                      </span>
+                      <span className="text-[10px] text-slate-500 ml-auto">
+                        {(strength * 100).toFixed(0)}%
+                      </span>
+                    </div>
+                    <div className="text-sm text-white truncate group-hover:text-blue-400 transition-colors">
+                      {related.title}
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span
+                        className="px-1.5 py-0.5 rounded text-[10px]"
+                        style={{
+                          backgroundColor: relatedCategoryColor + '20',
+                          color: relatedCategoryColor,
+                        }}
+                      >
+                        {related.category}
+                      </span>
+                      <span className="text-[10px] text-slate-500">
+                        {(related.salience * 100).toFixed(0)}% salience
+                      </span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Tags */}
+        {memory.tags && memory.tags.length > 0 && (
+          <div>
+            <h4 className="text-xs font-medium text-slate-400 mb-2">Tags</h4>
+            <div className="flex flex-wrap gap-1">
+              {memory.tags.map((tag, i) => (
+                <span
+                  key={i}
+                  className="px-2 py-0.5 bg-slate-700 text-slate-300 rounded text-xs"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-2">
+          {onReinforce && (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => onReinforce(memory.id)}
+              className="flex-1 bg-blue-600 hover:bg-blue-700"
+            >
+              ⚡ Reinforce Memory
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/dashboard/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }