shieldcortex 2.0.0

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

package/dashboard/src/components/memories/MemoriesView.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { Memory } from '@/types/memory';
+import { MemoryCard } from './MemoryCard';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+type SortKey = 'salience' | 'createdAt' | 'lastAccessed' | 'decayedScore';
+type ViewStyle = 'grid' | 'list';
+
+interface MemoriesViewProps {
+  memories: Memory[];
+  selectedMemory: Memory | null;
+  onSelectMemory: (m: Memory | null) => void;
+}
+
+export function MemoriesView({ memories, selectedMemory, onSelectMemory }: MemoriesViewProps) {
+  const [sortKey, setSortKey] = useState<SortKey>('salience');
+  const [viewStyle, setViewStyle] = useState<ViewStyle>('grid');
+  const [bulkMode, setBulkMode] = useState(false);
+  const [checked, setChecked] = useState<Set<number>>(new Set());
+  const [deleting, setDeleting] = useState(false);
+  const queryClient = useQueryClient();
+
+  const sorted = useMemo(() => {
+    const arr = [...memories];
+    arr.sort((a, b) => {
+      switch (sortKey) {
+        case 'salience': return b.salience - a.salience;
+        case 'createdAt': return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        case 'lastAccessed': return new Date(b.lastAccessed).getTime() - new Date(a.lastAccessed).getTime();
+        case 'decayedScore': return (b.decayedScore ?? b.salience) - (a.decayedScore ?? a.salience);
+        default: return 0;
+      }
+    });
+    return arr;
+  }, [memories, sortKey]);
+
+  const handleCheck = useCallback((id: number, val: boolean) => {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (val) next.add(id); else next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const selectAll = () => setChecked(new Set(sorted.map((m) => m.id)));
+  const _deselectAll = () => setChecked(new Set());
+
+  const deleteSelected = async () => {
+    if (checked.size === 0) return;
+    setDeleting(true);
+    try {
+      await Promise.all(
+        Array.from(checked).map((id) =>
+          fetch(`${API_BASE}/api/memories/${id}`, { method: 'DELETE' })
+        )
+      );
+      setChecked(new Set());
+      queryClient.invalidateQueries({ queryKey: ['memories'] });
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 px-4 py-2 border-b border-slate-800 shrink-0">
+        <span className="text-xs text-slate-400">{memories.length} memories</span>
+
+        <div className="w-px h-5 bg-slate-700" />
+
+        <select
+          value={sortKey}
+          onChange={(e) => setSortKey(e.target.value as SortKey)}
+          className="bg-slate-800 border border-slate-700 text-white text-xs rounded px-2 py-1"
+        >
+          <option value="salience">Salience</option>
+          <option value="createdAt">Created</option>
+          <option value="lastAccessed">Last Accessed</option>
+          <option value="decayedScore">Decay Score</option>
+        </select>
+
+        <div className="flex items-center border border-slate-700 rounded overflow-hidden">
+          <button
+            onClick={() => setViewStyle('grid')}
+            className={`px-2 py-1 text-xs ${viewStyle === 'grid' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}
+          >
+            Grid
+          </button>
+          <button
+            onClick={() => setViewStyle('list')}
+            className={`px-2 py-1 text-xs ${viewStyle === 'list' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'}`}
+          >
+            List
+          </button>
+        </div>
+
+        <div className="w-px h-5 bg-slate-700" />
+
+        <button
+          onClick={() => { setBulkMode(!bulkMode); setChecked(new Set()); }}
+          className={`px-2 py-1 text-xs rounded ${bulkMode ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:text-white'}`}
+        >
+          Select
+        </button>
+
+        {bulkMode && (
+          <>
+            <button onClick={selectAll} className="px-2 py-1 text-xs text-slate-400 hover:text-white">
+              Select all
+            </button>
+            <button
+              onClick={deleteSelected}
+              disabled={checked.size === 0 || deleting}
+              className="px-2 py-1 text-xs rounded bg-red-600/20 text-red-400 hover:bg-red-600/40 disabled:opacity-40"
+            >
+              {deleting ? 'Deleting...' : `Delete (${checked.size})`}
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Card grid */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div
+          className={
+            viewStyle === 'grid'
+              ? 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'
+              : 'flex flex-col gap-3 max-w-2xl'
+          }
+        >
+          {sorted.map((memory) => (
+            <MemoryCard
+              key={memory.id}
+              memory={memory}
+              isSelected={selectedMemory?.id === memory.id}
+              onSelect={onSelectMemory}
+              isChecked={bulkMode ? checked.has(memory.id) : undefined}
+              onCheck={bulkMode ? handleCheck : undefined}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/memories/MemoryCard.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { Memory } from '@/types/memory';
+import { getCategoryColor, getTypeColor } from '@/lib/category-colors';
+
+function relativeTime(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.floor(days / 7);
+  return `${weeks}w ago`;
+}
+
+interface MemoryCardProps {
+  memory: Memory;
+  isSelected: boolean;
+  onSelect: (m: Memory) => void;
+  isChecked?: boolean;
+  onCheck?: (id: number, checked: boolean) => void;
+}
+
+export function MemoryCard({ memory, isSelected, onSelect, isChecked, onCheck }: MemoryCardProps) {
+  const catColor = getCategoryColor(memory.category);
+  const typeColor = getTypeColor(memory.type);
+
+  return (
+    <div
+      onClick={() => onSelect(memory)}
+      className={`bg-slate-900 border rounded-lg p-3 hover:border-slate-600 cursor-pointer transition-colors relative ${
+        isSelected ? 'border-cyan-500' : 'border-slate-800'
+      }`}
+    >
+      {/* Salience bar */}
+      <div className="h-0.5 rounded-full bg-slate-800 mb-2 overflow-hidden">
+        <div
+          className="h-full rounded-full"
+          style={{ width: `${memory.salience * 100}%`, backgroundColor: catColor }}
+        />
+      </div>
+
+      {/* Checkbox */}
+      {onCheck && (
+        <input
+          type="checkbox"
+          checked={isChecked ?? false}
+          onChange={(e) => {
+            e.stopPropagation();
+            onCheck(memory.id, e.target.checked);
+          }}
+          onClick={(e) => e.stopPropagation()}
+          className="absolute top-3 right-3 w-4 h-4 accent-blue-500"
+        />
+      )}
+
+      {/* Title */}
+      <h3 className="text-sm font-semibold text-white truncate pr-6">{memory.title}</h3>
+
+      {/* Badges */}
+      <div className="flex items-center gap-1.5 mt-1">
+        <span
+          className="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+          style={{ backgroundColor: catColor + '22', color: catColor }}
+        >
+          {memory.category}
+        </span>
+        <span
+          className="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+          style={{ backgroundColor: typeColor + '22', color: typeColor }}
+        >
+          {memory.type.replace('_', '-')}
+        </span>
+      </div>
+
+      {/* Content preview */}
+      <p className="text-[13px] text-slate-400 mt-1.5 line-clamp-3 leading-snug">{memory.content}</p>
+
+      {/* Tags */}
+      {memory.tags.length > 0 && (
+        <div className="flex items-center gap-1 mt-2 flex-wrap">
+          {memory.tags.slice(0, 3).map((tag) => (
+            <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">
+              {tag}
+            </span>
+          ))}
+          {memory.tags.length > 3 && (
+            <span className="text-[10px] text-slate-500">+{memory.tags.length - 3} more</span>
+          )}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between mt-2 text-[11px] text-slate-500">
+        <span>Created {relativeTime(memory.createdAt)}</span>
+        <span>Accessed {relativeTime(memory.lastAccessed)}</span>
+      </div>
+    </div>
+  );
+}