claude-cortex 1.10.0 → 1.11.0

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 > 1.5) {
+        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 > 1.5) {
+        // 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>
+  );
+}

package/dashboard/src/components/insights/ActivityHeatmap.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useMemo } from 'react';
+
+export interface ActivityDay {
+  date: string;
+  count: number;
+}
+
+interface ActivityHeatmapProps {
+  activity: ActivityDay[];
+}
+
+const CELL_SIZE = 12;
+const CELL_GAP = 2;
+const CELL_RADIUS = 2;
+const WEEKS = 52;
+const DAYS = 7;
+const LEFT_LABEL_WIDTH = 30;
+const TOP_LABEL_HEIGHT = 16;
+
+const DAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function getColor(count: number, max: number): string {
+  if (count === 0) return '#0f172a'; // slate-900 (darker empty)
+  const ratio = count / Math.max(max, 1);
+  if (ratio < 0.25) return '#155e75'; // cyan-800
+  if (ratio < 0.50) return '#0891b2'; // cyan-600
+  if (ratio < 0.75) return '#06b6d4'; // cyan-500
+  return '#22d3ee'; // cyan-400
+}
+
+export function ActivityHeatmap({ activity }: ActivityHeatmapProps) {
+  const { grid, monthPositions, maxCount } = useMemo(() => {
+    // Build lookup map
+    const lookup = new Map<string, number>();
+    for (const d of activity) {
+      lookup.set(d.date, d.count);
+    }
+
+    // Today at start of day
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    // Find the Saturday of the current week (end of last column)
+    const todayDay = today.getDay(); // 0=Sun
+    const endDate = new Date(today);
+    endDate.setDate(today.getDate() + (6 - todayDay));
+
+    // Start date is 52 weeks before endDate's Sunday
+    const startDate = new Date(endDate);
+    startDate.setDate(endDate.getDate() - (WEEKS * 7 - 1));
+
+    const cells: Array<{ week: number; day: number; date: string; count: number }> = [];
+    const months: Array<{ label: string; week: number }> = [];
+    let lastMonth = -1;
+
+    const cursor = new Date(startDate);
+    for (let w = 0; w < WEEKS; w++) {
+      for (let d = 0; d < DAYS; d++) {
+        const dateStr = cursor.toISOString().slice(0, 10);
+        const count = lookup.get(dateStr) || 0;
+        cells.push({ week: w, day: d, date: dateStr, count });
+
+        const month = cursor.getMonth();
+        if (month !== lastMonth && d === 0) {
+          months.push({ label: MONTH_LABELS[month], week: w });
+          lastMonth = month;
+        }
+
+        cursor.setDate(cursor.getDate() + 1);
+      }
+    }
+
+    const max = Math.max(...cells.map(c => c.count), 1);
+    return { grid: cells, monthPositions: months, maxCount: max };
+  }, [activity]);
+
+  const svgWidth = LEFT_LABEL_WIDTH + WEEKS * (CELL_SIZE + CELL_GAP);
+  const svgHeight = TOP_LABEL_HEIGHT + DAYS * (CELL_SIZE + CELL_GAP);
+
+  return (
+    <div className="bg-slate-900/50 rounded-lg p-4 overflow-x-auto">
+      <svg width={svgWidth} height={svgHeight} className="text-slate-400">
+        {/* Month labels */}
+        {monthPositions.map((m, i) => (
+          <text
+            key={i}
+            x={LEFT_LABEL_WIDTH + m.week * (CELL_SIZE + CELL_GAP)}
+            y={12}
+            fontSize={10}
+            fill="currentColor"
+          >
+            {m.label}
+          </text>
+        ))}
+
+        {/* Day labels */}
+        {DAY_LABELS.map((label, i) =>
+          label ? (
+            <text
+              key={i}
+              x={0}
+              y={TOP_LABEL_HEIGHT + i * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 1}
+              fontSize={10}
+              fill="currentColor"
+            >
+              {label}
+            </text>
+          ) : null
+        )}
+
+        {/* Cells */}
+        {grid.map((cell, i) => (
+          <rect
+            key={i}
+            x={LEFT_LABEL_WIDTH + cell.week * (CELL_SIZE + CELL_GAP)}
+            y={TOP_LABEL_HEIGHT + cell.day * (CELL_SIZE + CELL_GAP)}
+            width={CELL_SIZE}
+            height={CELL_SIZE}
+            rx={CELL_RADIUS}
+            fill={getColor(cell.count, maxCount)}
+          >
+            <title>{`${cell.date}: ${cell.count} memories`}</title>
+          </rect>
+        ))}
+      </svg>
+    </div>
+  );
+}

package/dashboard/src/components/insights/InsightsView.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useActivity } from '@/hooks/useMemories';
+import { useDashboardStore } from '@/lib/store';
+import { ActivityHeatmap } from './ActivityHeatmap';
+import { KnowledgeMapPanel } from './KnowledgeMapPanel';
+import { QualityPanel } from './QualityPanel';
+import type { MemoryStats } from '@/types/memory';
+
+interface InsightsViewProps {
+  selectedProject?: string;
+  stats?: MemoryStats;
+}
+
+export function InsightsView({ selectedProject, stats }: InsightsViewProps) {
+  const { data: activityData } = useActivity(selectedProject);
+  const { setViewMode, setCategoryFilter } = useDashboardStore();
+
+  const handleNavigate = (filter: { category?: string }) => {
+    if (filter.category) {
+      setCategoryFilter(filter.category);
+    }
+    setViewMode('memories');
+  };
+
+  return (
+    <div className="h-full overflow-y-auto p-6 space-y-8">
+      <section>
+        <h2 className="text-lg font-semibold text-white mb-4">Activity</h2>
+        <ActivityHeatmap activity={activityData?.activity ?? []} />
+      </section>
+
+      {stats && (
+        <section>
+          <h2 className="text-lg font-semibold text-white mb-4">Knowledge Coverage</h2>
+          <KnowledgeMapPanel stats={stats} onNavigate={handleNavigate} />
+        </section>
+      )}
+
+      <section>
+        <h2 className="text-lg font-semibold text-white mb-4">Memory Quality</h2>
+        <QualityPanel project={selectedProject} />
+      </section>
+    </div>
+  );
+}

package/dashboard/src/components/insights/KnowledgeMapPanel.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useMemo } from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+import { getCategoryColor } from '@/lib/category-colors';
+import type { MemoryStats, MemoryCategory } from '@/types/memory';
+
+interface KnowledgeMapPanelProps {
+  stats: MemoryStats;
+  onNavigate: (filter: { category?: string }) => void;
+}
+
+export function KnowledgeMapPanel({ stats, onNavigate }: KnowledgeMapPanelProps) {
+  const data = useMemo(() => {
+    return Object.entries(stats.byCategory)
+      .map(([category, count]) => ({
+        category,
+        count,
+        color: getCategoryColor(category as MemoryCategory),
+        thin: count < 3,
+      }))
+      .sort((a, b) => b.count - a.count);
+  }, [stats.byCategory]);
+
+  if (data.length === 0) {
+    return (
+      <div className="bg-slate-900/50 rounded-lg p-4 text-slate-400 text-sm">
+        No category data available.
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-900/50 rounded-lg p-4">
+      <ResponsiveContainer width="100%" height={data.length * 36 + 20}>
+        <BarChart data={data} layout="vertical" margin={{ left: 10, right: 30 }}>
+          <XAxis type="number" hide />
+          <YAxis
+            type="category"
+            dataKey="category"
+            width={100}
+            tick={{ fill: '#94a3b8', fontSize: 12 }}
+            axisLine={false}
+            tickLine={false}
+          />
+          <Tooltip
+            contentStyle={{ background: '#1e293b', border: '1px solid #334155', borderRadius: 8 }}
+            labelStyle={{ color: '#e2e8f0' }}
+            itemStyle={{ color: '#e2e8f0' }}
+          />
+          <Bar
+            dataKey="count"
+            radius={[0, 4, 4, 0]}
+            cursor="pointer"
+            onClick={(_data, index) => {
+              if (index !== undefined && data[index]) {
+                onNavigate({ category: data[index].category });
+              }
+            }}
+          >
+            {data.map((entry, index) => (
+              <Cell key={index} fill={entry.color} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+
+      {/* Thin coverage warnings */}
+      {data.some(d => d.thin) && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {data.filter(d => d.thin).map(d => (
+            <span key={d.category} className="text-xs text-amber-400 bg-amber-400/10 px-2 py-0.5 rounded">
+              ⚠ {d.category} ({d.count})
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/insights/QualityPanel.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { Eye, Clock, Copy, AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import { useQuality, useContradictions } from '@/hooks/useMemories';
+
+interface QualityPanelProps {
+  project?: string;
+}
+
+function Section({
+  icon: Icon,
+  title,
+  count,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string; size?: number }>;
+  title: string;
+  count: number;
+  children: React.ReactNode;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="border border-slate-800 rounded-lg overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-2 px-3 py-2 hover:bg-slate-800/50 transition-colors"
+      >
+        {expanded ? <ChevronDown size={14} className="text-slate-400" /> : <ChevronRight size={14} className="text-slate-400" />}
+        <Icon size={14} className="text-slate-400" />
+        <span className="text-sm text-slate-200 flex-1 text-left">{title}</span>
+        <span className="text-xs px-1.5 py-0.5 rounded bg-slate-700 text-slate-300">{count}</span>
+      </button>
+      {expanded && <div className="px-3 pb-3 space-y-1">{children}</div>}
+    </div>
+  );
+}
+
+export function QualityPanel({ project }: QualityPanelProps) {
+  const { data: quality } = useQuality(project);
+  const { data: contradictionsData } = useContradictions(project);
+
+  const neverAccessed = quality?.neverAccessed;
+  const stale = quality?.stale;
+  const duplicates = quality?.duplicates;
+  const contradictions = contradictionsData?.contradictions ?? [];
+
+  return (
+    <div className="space-y-2">
+      <Section icon={Eye} title="Never Accessed" count={neverAccessed?.count ?? 0}>
+        {neverAccessed?.items?.length ? (
+          neverAccessed.items.map((item, i) => (
+            <div key={i} className="text-xs text-slate-400 py-1 border-b border-slate-800/50 last:border-0">
+              <span className="text-slate-300">{String(item.title || 'Untitled')}</span>
+              {item.created_at ? (
+                <span className="ml-2 text-slate-500">{String(item.created_at).slice(0, 10)}</span>
+              ) : null}
+            </div>
+          ))
+        ) : (
+          <div className="text-xs text-slate-500">None found</div>
+        )}
+      </Section>
+
+      <Section icon={Clock} title="Stale Memories" count={stale?.count ?? 0}>
+        {stale?.items?.length ? (
+          stale.items.map((item, i) => {
+            const score = Number(item.decayed_score ?? 0);
+            const color = score < 0.3 ? 'text-red-400' : score < 0.5 ? 'text-amber-400' : 'text-slate-400';
+            return (
+              <div key={i} className="text-xs text-slate-400 py-1 border-b border-slate-800/50 last:border-0 flex items-center gap-2">
+                <span className={`${color} font-mono`}>{score.toFixed(2)}</span>
+                <span className="text-slate-300">{String(item.title || 'Untitled')}</span>
+              </div>
+            );
+          })
+        ) : (
+          <div className="text-xs text-slate-500">None found</div>
+        )}
+      </Section>
+
+      <Section icon={Copy} title="Duplicates" count={duplicates?.count ?? 0}>
+        {duplicates?.items?.length ? (
+          duplicates.items.map((item, i) => (
+            <div key={i} className="text-xs text-slate-400 py-1 border-b border-slate-800/50 last:border-0">
+              <span className="text-slate-300">{String(item.title_a || 'Untitled')}</span>
+              <span className="mx-1 text-slate-600">&harr;</span>
+              <span className="text-slate-300">{String(item.title_b || 'Untitled')}</span>
+            </div>
+          ))
+        ) : (
+          <div className="text-xs text-slate-500">None found</div>
+        )}
+      </Section>
+
+      <Section icon={AlertTriangle} title="Contradictions" count={contradictions.length}>
+        {contradictions.length ? (
+          contradictions.map((c, i) => (
+            <div key={i} className="text-xs py-1 border-b border-slate-800/50 last:border-0">
+              <div className="flex items-center gap-2 text-slate-400">
+                <span className="font-mono text-amber-400">{c.score.toFixed(2)}</span>
+                <span className="text-slate-300">{c.memoryATitle}</span>
+                <span className="text-slate-600">&harr;</span>
+                <span className="text-slate-300">{c.memoryBTitle}</span>
+              </div>
+              {c.reason && <div className="text-slate-500 mt-0.5 ml-10">{c.reason}</div>}
+            </div>
+          ))
+        ) : (
+          <div className="text-xs text-slate-500">None found</div>
+        )}
+      </Section>
+    </div>
+  );
+}