@jlongo78/agent-spaces 0.10.0-beta.2 → 0.10.0-beta.4

package/.next/standalone/docs/superpowers/plans/2026-03-16-cortex-v2-ui.md

@@ -1,1108 +0,0 @@
-# Cortex v2 UI Implementation Plan
-
-> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
-
-**Goal:** Add a dedicated `/cortex` page with interactive entity graph visualization, enhanced knowledge cards with v2 fields, and a context assembly dashboard — plus sidebar navigation and panel enhancements.
-
-**Architecture:** New `/app/(desktop)/cortex/page.tsx` with tab navigation (Graph | Knowledge | Context | Settings). Force graph rendered via `force-graph` npm package with `nodeCanvasObject` for custom shapes. Small backend tweaks to expose `listAllEdges()`, entities/conflicts/sourceWeights in context API. Existing right panel gets "Open full view" link.
-
-**Tech Stack:** React 19, Next.js 16, Tailwind CSS 4, force-graph, Lucide icons, TanStack React Query
-
-**Spec:** `docs/superpowers/specs/2026-03-16-cortex-v2-ui-design.md`
-
----
-
-## File Structure
-
-```
-New files:
-├── src/app/(desktop)/cortex/page.tsx          — Main /cortex page with tabs
-├── src/components/cortex/entity-graph.tsx      — Force graph canvas (dynamic, ssr:false)
-├── src/components/cortex/entity-detail.tsx     — Right-side entity detail panel
-├── src/components/cortex/context-tab.tsx       — Context assembly inspector tab
-├── src/components/cortex/knowledge-tab.tsx     — Knowledge list tab (reuses cards)
-
-Modified files:
-├── src/components/cortex/knowledge-card.tsx    — Add v2 badges + evidence bar
-├── src/components/cortex/cortex-panel.tsx      — Add "Open full view" link
-├── src/components/layout/sidebar.tsx           — Add Cortex nav item
-├── src/lib/cortex/graph/entity-graph.ts       — Add listAllEdges()
-├── src/app/api/cortex/graph/edges/route.ts    — Support all=true
-├── src/lib/cortex/retrieval/context-engine.ts — Expose sourceWeights
-├── src/app/api/cortex/context/route.ts        — Return entities, conflicts, sourceWeights
-```
-
----
-
-## Chunk 1: Backend Tweaks + Enhanced Knowledge Card
-
-### Task 1: Add listAllEdges() and edges `all=true` support
-
-**Files:**
-- Modify: `src/lib/cortex/graph/entity-graph.ts`
-- Modify: `src/app/api/cortex/graph/edges/route.ts`
-
-- [ ] **Step 1: Add listAllEdges() to EntityGraph**
-
-Read `src/lib/cortex/graph/entity-graph.ts`, find the edge methods section, add:
-
-```typescript
-listAllEdges(): Edge[] {
-  return (this.db.prepare('SELECT * FROM edges ORDER BY source_id').all() as any[])
-    .map(r => this.rowToEdge(r));
-}
-```
-
-- [ ] **Step 2: Update edges route GET handler**
-
-Read `src/app/api/cortex/graph/edges/route.ts`. At the top of the GET handler, before the `from`/`to` check, add:
-
-```typescript
-const all = url.searchParams.get('all');
-if (all === 'true') {
-  const edges = cortex.graph.listAllEdges();
-  return NextResponse.json({ edges });
-}
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/lib/cortex/graph/entity-graph.ts src/app/api/cortex/graph/edges/route.ts
-git commit -m "feat(cortex): add listAllEdges() and edges all=true endpoint"
-```
-
----
-
-### Task 2: Expose sourceWeights in context API
-
-**Files:**
-- Modify: `src/lib/cortex/retrieval/context-engine.ts`
-- Modify: `src/app/api/cortex/context/route.ts`
-
-- [ ] **Step 1: Add sourceWeights to AssemblyResult**
-
-Read `src/lib/cortex/retrieval/context-engine.ts`. Find the `AssemblyResult` interface and add:
-
-```typescript
-sourceWeights: Array<{ layerKey: string; scopeLevel: string; weight: number }>;
-```
-
-Find the `assemble()` method. After `computeSourceWeights()` is called (the `sources` variable), map it into the result:
-
-```typescript
-// In the return object, add:
-sourceWeights: sources.map(s => ({
-  layerKey: s.layerKey,
-  scopeLevel: s.layerKey === 'personal' ? 'personal' : s.layerKey.startsWith('workspace') ? 'team' : 'organization',
-  weight: s.weight,
-})),
-```
-
-- [ ] **Step 2: Update context route response**
-
-Read `src/app/api/cortex/context/route.ts`. In the `NextResponse.json()` call, change:
-
-```typescript
-// From:
-conflicts: result.conflicts.length,
-// To:
-entities: result.entities,
-conflicts: result.conflicts,
-sourceWeights: result.sourceWeights,
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/lib/cortex/retrieval/context-engine.ts src/app/api/cortex/context/route.ts
-git commit -m "feat(cortex): expose entities, conflicts, sourceWeights in context API"
-```
-
----
-
-### Task 3: Enhanced knowledge card
-
-**Files:**
-- Modify: `src/components/cortex/knowledge-card.tsx`
-
-- [ ] **Step 1: Read the current knowledge-card.tsx**
-
-- [ ] **Step 2: Extend the props interface and add v2 display**
-
-Replace the entire file. The changes:
-- Extend `unit` props with optional v2 fields
-- Add sensitivity badge (color-coded)
-- Add scope badge
-- Add attribution row (creator, source, corroborations)
-- Replace confidence bar with evidence bar when available
-- Add conflict indicator
-
-```typescript
-'use client';
-
-import { Trash2, AlertTriangle } from 'lucide-react';
-import { api } from '@/lib/api';
-
-const TYPE_COLORS: Record<string, string> = {
-  decision: 'bg-blue-500/20 text-blue-400',
-  preference: 'bg-pink-500/20 text-pink-400',
-  pattern: 'bg-green-500/20 text-green-400',
-  error_fix: 'bg-amber-500/20 text-amber-400',
-  context: 'bg-gray-500/20 text-gray-400',
-  code_pattern: 'bg-cyan-500/20 text-cyan-400',
-  command: 'bg-orange-500/20 text-orange-400',
-  conversation: 'bg-slate-500/20 text-slate-400',
-  summary: 'bg-violet-500/20 text-violet-400',
-};
-
-const SENSITIVITY_COLORS: Record<string, string> = {
-  public: 'bg-green-500/20 text-green-400',
-  internal: 'bg-indigo-500/20 text-indigo-400',
-  restricted: 'bg-amber-500/20 text-amber-400',
-  confidential: 'bg-red-500/20 text-red-400',
-};
-
-interface KnowledgeCardProps {
-  unit: {
-    id: string;
-    text: string;
-    type: string;
-    confidence: number;
-    created: string;
-    session_id?: string | null;
-    layer: string;
-    stale_score?: number;
-    // v2 fields
-    scope?: { level: string; entity_id: string };
-    sensitivity?: string;
-    evidence_score?: number;
-    corroborations?: number;
-    contradiction_refs?: string[];
-    origin?: { source_type: string; source_ref: string; creator_entity_id: string };
-  };
-  onDelete?: (id: string) => void;
-  compact?: boolean;
-}
-
-export function KnowledgeCard({ unit, onDelete, compact }: KnowledgeCardProps) {
-  const colorClass = TYPE_COLORS[unit.type] || TYPE_COLORS.context;
-  const age = getRelativeAge(unit.created);
-  const hasConflicts = (unit.contradiction_refs?.length ?? 0) > 0;
-
-  // Use evidence_score if available, else confidence
-  const score = unit.evidence_score ?? unit.confidence;
-  const scoreLabel = unit.evidence_score != null
-    ? `${score.toFixed(2)} evidence`
-    : `${Math.round(score * 100)}%`;
-
-  const handleDelete = async () => {
-    await fetch(api(`/api/cortex/knowledge/${unit.id}`), { method: 'DELETE' });
-    onDelete?.(unit.id);
-  };
-
-  return (
-    <div className="group border border-white/5 rounded-lg p-3 hover:border-white/10 transition-colors">
-      {/* Badge row */}
-      <div className="flex items-start justify-between gap-2">
-        <div className="flex items-center gap-1 flex-wrap">
-          <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${colorClass}`}>
-            {unit.type.replace('_', ' ')}
-          </span>
-          {unit.sensitivity && (
-            <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${SENSITIVITY_COLORS[unit.sensitivity] || SENSITIVITY_COLORS.internal}`}>
-              {unit.sensitivity}
-            </span>
-          )}
-          {unit.scope && (
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-500/10 text-purple-400">
-              {unit.scope.level}
-            </span>
-          )}
-          {(unit.stale_score ?? 0) > 0.3 && (
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-500/20 text-amber-400">
-              stale
-            </span>
-          )}
-          {hasConflicts && (
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-500/20 text-amber-400 flex items-center gap-0.5">
-              <AlertTriangle className="w-2.5 h-2.5" />
-              contested
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2 text-[10px] text-gray-500 shrink-0">
-          <span>{age}</span>
-          {onDelete && (
-            <button
-              onClick={handleDelete}
-              className="opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-300"
-            >
-              <Trash2 className="w-3 h-3" />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Text */}
-      <p className="text-xs text-gray-300 mt-1.5 leading-relaxed line-clamp-3">{unit.text}</p>
-
-      {/* Attribution row (v2) */}
-      {!compact && unit.origin && (
-        <div className="flex items-center gap-1.5 mt-1.5 text-[10px] text-gray-500 flex-wrap">
-          <span>by {unit.origin.creator_entity_id.replace('person-', '')}</span>
-          <span>&middot;</span>
-          <span>via {unit.origin.source_type.replace('_', ' ')}</span>
-          {(unit.corroborations ?? 0) > 0 && (
-            <>
-              <span>&middot;</span>
-              <span className="text-green-400">{unit.corroborations} corr.</span>
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Evidence/confidence bar */}
-      <div className="flex items-center gap-2 mt-2">
-        <div className="flex-1 h-1 bg-white/5 rounded-full overflow-hidden">
-          <div
-            className="h-full bg-purple-500/50 rounded-full"
-            style={{ width: `${Math.round(score * 100)}%` }}
-          />
-        </div>
-        <span className="text-[10px] text-gray-500 tabular-nums">{scoreLabel}</span>
-      </div>
-    </div>
-  );
-}
-
-function getRelativeAge(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  if (days === 0) return 'today';
-  if (days === 1) return '1d ago';
-  if (days < 30) return `${days}d ago`;
-  if (days < 365) return `${Math.floor(days / 30)}mo ago`;
-  return `${Math.floor(days / 365)}y ago`;
-}
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/cortex/knowledge-card.tsx
-git commit -m "feat(cortex): enhance knowledge card with v2 fields display"
-```
-
----
-
-## Chunk 2: Cortex Page + Sidebar
-
-### Task 4: Sidebar navigation
-
-**Files:**
-- Modify: `src/components/layout/sidebar.tsx`
-
-- [ ] **Step 1: Read sidebar.tsx**
-
-- [ ] **Step 2: Add Cortex to nav array and imports**
-
-Add `Brain` to the lucide-react import. Add a Cortex entry to the `nav` array (after Network, before Settings):
-
-```typescript
-// Add to imports:
-import { ..., Brain } from 'lucide-react';
-
-// Add to nav array (before Settings):
-{ href: '/cortex', label: 'Cortex', icon: Brain },
-
-// Add to routeNames:
-'/cortex': 'cortex',
-```
-
-In the nav filter, gate it like Network:
-```typescript
-if (href === '/cortex') return hasCortex;
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/layout/sidebar.tsx
-git commit -m "feat(cortex): add Cortex nav item to sidebar"
-```
-
----
-
-### Task 5: Cortex page with tabs
-
-**Files:**
-- Create: `src/app/(desktop)/cortex/page.tsx`
-
-- [ ] **Step 1: Create the page**
-
-```typescript
-'use client';
-
-import { useState, useEffect } from 'react';
-import dynamic from 'next/dynamic';
-import { api } from '@/lib/api';
-import { KnowledgeTab } from '@/components/cortex/knowledge-tab';
-import { ContextTab } from '@/components/cortex/context-tab';
-import { CortexSettings } from '@/components/cortex/cortex-settings';
-
-const EntityGraphView = dynamic(
-  () => import('@/components/cortex/entity-graph').then(m => ({ default: m.EntityGraphView })),
-  { ssr: false, loading: () => <div className="flex-1 flex items-center justify-center text-gray-500 text-sm">Loading graph...</div> }
-);
-
-type Tab = 'graph' | 'knowledge' | 'context' | 'settings';
-
-export default function CortexPage() {
-  const [tab, setTab] = useState<Tab>('graph');
-  const [stats, setStats] = useState<any>(null);
-
-  useEffect(() => {
-    fetch(api('/api/cortex/status'))
-      .then(r => r.json())
-      .then(setStats)
-      .catch(() => {});
-  }, []);
-
-  const tabs: { key: Tab; label: string }[] = [
-    { key: 'graph', label: 'Graph' },
-    { key: 'knowledge', label: 'Knowledge' },
-    { key: 'context', label: 'Context' },
-    { key: 'settings', label: 'Settings' },
-  ];
-
-  const totalKnowledge = stats
-    ? Object.values(stats.layers || {}).reduce((sum: number, l: any) => sum + (l.count || 0), 0)
-    : 0;
-
-  return (
-    <div className="flex flex-col h-screen bg-gray-950">
-      {/* Tab bar */}
-      <div className="flex items-center border-b border-white/5 px-4 shrink-0">
-        <div className="flex">
-          {tabs.map(t => (
-            <button
-              key={t.key}
-              onClick={() => setTab(t.key)}
-              className={`px-5 py-3 text-sm font-medium transition-colors border-b-2 ${
-                tab === t.key
-                  ? 'text-purple-400 border-purple-400'
-                  : 'text-gray-500 border-transparent hover:text-gray-300'
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-        <div className="ml-auto text-xs text-gray-600">
-          {totalKnowledge} knowledge units
-        </div>
-      </div>
-
-      {/* Tab content */}
-      <div className="flex-1 overflow-hidden">
-        {tab === 'graph' && <EntityGraphView />}
-        {tab === 'knowledge' && <KnowledgeTab />}
-        {tab === 'context' && <ContextTab />}
-        {tab === 'settings' && (
-          <div className="p-6 max-w-2xl">
-            <CortexSettings />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add src/app/(desktop)/cortex/page.tsx
-git commit -m "feat(cortex): add /cortex page with tab navigation"
-```
-
----
-
-### Task 6: Panel "Open full view" link
-
-**Files:**
-- Modify: `src/components/cortex/cortex-panel.tsx`
-
-- [ ] **Step 1: Add link to panel header**
-
-Read `src/components/cortex/cortex-panel.tsx`. In the header div (between the "Cortex" heading and the close button), add:
-
-```typescript
-import Link from 'next/link';
-import { ExternalLink } from 'lucide-react';
-
-// In the header, after the h2:
-<Link
-  href="/cortex"
-  className="text-[10px] text-purple-400 hover:text-purple-300 flex items-center gap-1"
-  onClick={onClose}
->
-  Full view <ExternalLink className="w-2.5 h-2.5" />
-</Link>
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add src/components/cortex/cortex-panel.tsx
-git commit -m "feat(cortex): add 'Full view' link to cortex panel"
-```
-
----
-
-## Chunk 3: Graph + Detail Components
-
-### Task 7: Entity graph canvas component
-
-**Files:**
-- Create: `src/components/cortex/entity-graph.tsx`
-
-- [ ] **Step 1: Install force-graph**
-
-```bash
-npm install force-graph
-```
-
-- [ ] **Step 2: Create the graph component**
-
-```typescript
-'use client';
-
-import { useEffect, useRef, useState, useCallback } from 'react';
-import ForceGraph2D from 'force-graph';
-import { api } from '@/lib/api';
-import { EntityDetail } from './entity-detail';
-
-const NODE_COLORS: Record<string, string> = {
-  person: '#7c3aed',
-  team: '#10b981',
-  project: '#10b981',
-  department: '#3b82f6',
-  organization: '#3b82f6',
-  system: '#f59e0b',
-  module: '#f59e0b',
-  topic: '#06b6d4',
-};
-
-interface GraphNode {
-  id: string;
-  name: string;
-  type: string;
-  metadata: Record<string, unknown>;
-  // force-graph adds x, y, vx, vy
-  x?: number;
-  y?: number;
-}
-
-interface GraphLink {
-  source: string;
-  target: string;
-  relation: string;
-  weight: number;
-}
-
-export function EntityGraphView() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const graphRef = useRef<any>(null);
-  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
-  const [graphData, setGraphData] = useState<{ nodes: GraphNode[]; links: GraphLink[] }>({ nodes: [], links: [] });
-
-  // Fetch graph data
-  useEffect(() => {
-    Promise.all([
-      fetch(api('/api/cortex/graph/entities')).then(r => r.json()),
-      fetch(api('/api/cortex/graph/edges?all=true')).then(r => r.json()),
-    ]).then(([entData, edgeData]) => {
-      const nodes: GraphNode[] = (entData.entities || []).map((e: any) => ({
-        id: e.id,
-        name: e.name,
-        type: e.type,
-        metadata: e.metadata || {},
-      }));
-      const nodeIds = new Set(nodes.map(n => n.id));
-      const links: GraphLink[] = (edgeData.edges || [])
-        .filter((e: any) => nodeIds.has(e.source_id) && nodeIds.has(e.target_id))
-        .map((e: any) => ({
-          source: e.source_id,
-          target: e.target_id,
-          relation: e.relation,
-          weight: e.weight,
-        }));
-      setGraphData({ nodes, links });
-    }).catch(() => {});
-  }, []);
-
-  // Initialize force-graph
-  useEffect(() => {
-    if (!containerRef.current || graphData.nodes.length === 0) return;
-
-    const width = containerRef.current.clientWidth;
-    const height = containerRef.current.clientHeight;
-
-    const graph = ForceGraph2D()(containerRef.current)
-      .width(width)
-      .height(height)
-      .graphData(graphData)
-      .nodeId('id')
-      .nodeLabel((node: any) => `${node.name} (${node.type})`)
-      .nodeCanvasObject((node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
-        const color = NODE_COLORS[node.type] || '#666';
-        const size = node.type === 'person' ? 8 : node.type === 'topic' ? 5 : 6;
-        const x = node.x ?? 0;
-        const y = node.y ?? 0;
-
-        ctx.beginPath();
-        if (node.type === 'system' || node.type === 'module') {
-          // Diamond
-          ctx.moveTo(x, y - size);
-          ctx.lineTo(x + size, y);
-          ctx.lineTo(x, y + size);
-          ctx.lineTo(x - size, y);
-          ctx.closePath();
-        } else if (node.type === 'team' || node.type === 'project' || node.type === 'department' || node.type === 'organization') {
-          // Rounded rect
-          const w = size * 2;
-          const h = size * 1.5;
-          const r = 2;
-          ctx.roundRect(x - w / 2, y - h / 2, w, h, r);
-        } else {
-          // Circle (person, topic)
-          ctx.arc(x, y, size, 0, 2 * Math.PI);
-        }
-
-        ctx.fillStyle = color + '33';
-        ctx.fill();
-        ctx.strokeStyle = color;
-        ctx.lineWidth = 1.5 / globalScale;
-        ctx.stroke();
-
-        // Label
-        const fontSize = Math.max(10 / globalScale, 3);
-        ctx.font = `${fontSize}px sans-serif`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillStyle = color;
-        ctx.fillText(node.name, x, y + size + fontSize);
-      })
-      .nodePointerAreaPaint((node: any, color: string, ctx: CanvasRenderingContext2D) => {
-        const size = 10;
-        ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.arc(node.x ?? 0, node.y ?? 0, size, 0, 2 * Math.PI);
-        ctx.fill();
-      })
-      .linkColor(() => 'rgba(124, 58, 237, 0.2)')
-      .linkWidth((link: any) => Math.max(0.5, link.weight * 2))
-      .onNodeClick((node: any) => setSelectedNode(node))
-      .onBackgroundClick(() => setSelectedNode(null))
-      .backgroundColor('#06060c');
-
-    graphRef.current = graph;
-
-    const handleResize = () => {
-      if (!containerRef.current) return;
-      graph.width(containerRef.current.clientWidth);
-      graph.height(containerRef.current.clientHeight);
-    };
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      graph._destructor?.();
-    };
-  }, [graphData]);
-
-  const handleRecenter = useCallback(() => {
-    graphRef.current?.zoomToFit(400, 40);
-  }, []);
-
-  return (
-    <div className="flex h-full">
-      {/* Graph canvas */}
-      <div className="flex-1 relative">
-        <div ref={containerRef} className="w-full h-full" />
-
-        {/* Controls overlay */}
-        <div className="absolute bottom-3 left-3 flex gap-2">
-          <button
-            onClick={handleRecenter}
-            className="px-3 py-1.5 text-xs bg-gray-900/80 border border-white/10 rounded text-gray-400 hover:text-gray-200"
-          >
-            Recenter
-          </button>
-        </div>
-
-        {/* Legend overlay */}
-        <div className="absolute top-3 right-3 bg-gray-950/90 border border-white/10 rounded-lg p-3 text-[10px] space-y-1">
-          {Object.entries(NODE_COLORS).filter(([type]) =>
-            ['person', 'team', 'system', 'topic'].includes(type)
-          ).map(([type, color]) => (
-            <div key={type} className="flex items-center gap-2">
-              <span style={{ color }} className="text-sm">
-                {type === 'system' ? '◆' : type === 'team' ? '■' : '●'}
-              </span>
-              <span className="text-gray-400 capitalize">{type}</span>
-            </div>
-          ))}
-        </div>
-
-        {graphData.nodes.length === 0 && (
-          <div className="absolute inset-0 flex items-center justify-center text-gray-600 text-sm">
-            No entities yet. Add entities via the API to see the graph.
-          </div>
-        )}
-      </div>
-
-      {/* Detail panel */}
-      <div className="w-72 border-l border-white/5 bg-gray-950 overflow-y-auto">
-        <EntityDetail
-          node={selectedNode}
-          onClose={() => setSelectedNode(null)}
-        />
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 3: Commit**
-
-```bash
-git add src/components/cortex/entity-graph.tsx
-git commit -m "feat(cortex): add force-graph entity visualization component"
-```
-
----
-
-### Task 8: Entity detail panel
-
-**Files:**
-- Create: `src/components/cortex/entity-detail.tsx`
-
-- [ ] **Step 1: Create the component**
-
-```typescript
-'use client';
-
-import { useState, useEffect } from 'react';
-import { api } from '@/lib/api';
-
-const RELATION_COLORS: Record<string, string> = {
-  member_of: 'text-purple-400',
-  expert_in: 'text-cyan-400',
-  owns: 'text-green-400',
-  contains: 'text-green-400',
-  part_of: 'text-blue-400',
-  works_on: 'text-purple-400',
-  touches: 'text-amber-400',
-  depends_on: 'text-red-400',
-  relates_to: 'text-cyan-400',
-};
-
-interface EntityDetailProps {
-  node: { id: string; name: string; type: string; metadata: Record<string, unknown> } | null;
-  onClose: () => void;
-}
-
-export function EntityDetail({ node, onClose }: EntityDetailProps) {
-  const [edges, setEdges] = useState<any[]>([]);
-
-  useEffect(() => {
-    if (!node) { setEdges([]); return; }
-
-    Promise.all([
-      fetch(api(`/api/cortex/graph/edges?from=${node.id}`)).then(r => r.json()),
-      fetch(api(`/api/cortex/graph/edges?to=${node.id}`)).then(r => r.json()),
-    ]).then(([fromData, toData]) => {
-      const allEdges = [
-        ...(fromData.edges || []).map((e: any) => ({ ...e, direction: 'out' })),
-        ...(toData.edges || []).map((e: any) => ({ ...e, direction: 'in' })),
-      ];
-      setEdges(allEdges);
-    }).catch(() => {});
-  }, [node?.id]);
-
-  if (!node) {
-    return (
-      <div className="p-4 text-center text-gray-600 text-xs mt-8">
-        Click a node to see details
-      </div>
-    );
-  }
-
-  const firstLetter = node.name.charAt(0).toUpperCase();
-  const color = node.type === 'person' ? '#7c3aed'
-    : node.type === 'system' ? '#f59e0b'
-    : node.type === 'topic' ? '#06b6d4'
-    : '#10b981';
-
-  return (
-    <div className="p-4">
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-4">
-        <div
-          className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-          style={{ backgroundColor: color + '33', color, border: `2px solid ${color}` }}
-        >
-          {firstLetter}
-        </div>
-        <div>
-          <div className="text-sm font-medium text-gray-200">{node.name}</div>
-          <div className="text-[10px] text-gray-500">{node.type}</div>
-        </div>
-      </div>
-
-      {/* Metadata */}
-      {Object.keys(node.metadata).length > 0 && (
-        <div className="mb-4">
-          <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-1">Metadata</div>
-          {Object.entries(node.metadata).map(([k, v]) => (
-            <div key={k} className="text-[11px] text-gray-400">
-              <span className="text-gray-600">{k}:</span> {String(v)}
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Relationships */}
-      <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-2">
-        Relationships ({edges.length})
-      </div>
-      <div className="space-y-1 mb-4">
-        {edges.map((e, i) => {
-          const relColor = RELATION_COLORS[e.relation] || 'text-gray-400';
-          const target = e.direction === 'out' ? e.target_id : e.source_id;
-          const arrow = e.direction === 'out' ? '→' : '←';
-          return (
-            <div key={i} className="flex items-center gap-1.5 text-[11px] bg-white/[0.02] rounded px-2 py-1.5">
-              <span className={relColor}>{e.relation}</span>
-              <span className="text-gray-600">{arrow}</span>
-              <span className="text-gray-300 truncate">{target.replace(/^(person|team|system|topic|project|department|organization|module)-/, '')}</span>
-              {e.weight < 1 && (
-                <span className="text-gray-600 ml-auto text-[9px]">{e.weight.toFixed(2)}</span>
-              )}
-            </div>
-          );
-        })}
-        {edges.length === 0 && (
-          <div className="text-[11px] text-gray-600 py-2">No relationships</div>
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add src/components/cortex/entity-detail.tsx
-git commit -m "feat(cortex): add entity detail panel for graph view"
-```
-
----
-
-## Chunk 4: Knowledge Tab, Context Tab, Final Wiring
-
-### Task 9: Knowledge tab component
-
-**Files:**
-- Create: `src/components/cortex/knowledge-tab.tsx`
-
-- [ ] **Step 1: Create the component**
-
-A search + list view that reuses `KnowledgeCard`. Fetches from `/api/cortex/search`.
-
-```typescript
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { Search } from 'lucide-react';
-import { api } from '@/lib/api';
-import { KnowledgeCard } from './knowledge-card';
-
-export function KnowledgeTab() {
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const fetchResults = useCallback(async (q?: string) => {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams({ limit: '30' });
-      if (q) params.set('q', q);
-      const res = await fetch(api(`/api/cortex/search?${params}`));
-      if (res.ok) setResults((await res.json()).results || []);
-    } catch {}
-    setLoading(false);
-  }, []);
-
-  useEffect(() => { fetchResults(); }, [fetchResults]);
-
-  const handleSearch = () => fetchResults(query.trim() || undefined);
-  const handleDelete = (id: string) => setResults(prev => prev.filter(r => r.id !== id));
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="p-4 border-b border-white/5">
-        <div className="relative max-w-md">
-          <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
-          <input
-            value={query}
-            onChange={e => setQuery(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleSearch()}
-            placeholder="Search knowledge..."
-            className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-lg text-gray-300 placeholder-gray-600 focus:outline-none focus:border-purple-500/50"
-          />
-        </div>
-      </div>
-      <div className="flex-1 overflow-y-auto p-4">
-        <div className="max-w-2xl space-y-2">
-          {loading && <p className="text-sm text-gray-500 text-center py-8">Loading...</p>}
-          {!loading && results.length === 0 && (
-            <p className="text-sm text-gray-500 text-center py-8">No knowledge found</p>
-          )}
-          {results.map(unit => (
-            <KnowledgeCard key={unit.id} unit={unit} onDelete={handleDelete} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add src/components/cortex/knowledge-tab.tsx
-git commit -m "feat(cortex): add knowledge tab with search and v2 cards"
-```
-
----
-
-### Task 10: Context assembly tab
-
-**Files:**
-- Create: `src/components/cortex/context-tab.tsx`
-
-- [ ] **Step 1: Create the component**
-
-```typescript
-'use client';
-
-import { useState } from 'react';
-import { Search, ChevronDown, ChevronUp } from 'lucide-react';
-import { api } from '@/lib/api';
-
-const INTENT_COLORS: Record<string, string> = {
-  debugging: 'text-red-400',
-  architecture: 'text-blue-400',
-  onboarding: 'text-green-400',
-  policy: 'text-purple-400',
-  'how-to': 'text-amber-400',
-  review: 'text-pink-400',
-  security: 'text-red-500',
-  general: 'text-gray-400',
-};
-
-export function ContextTab() {
-  const [query, setQuery] = useState('');
-  const [result, setResult] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-  const [showRaw, setShowRaw] = useState(false);
-
-  const handleAnalyze = async () => {
-    if (!query.trim()) return;
-    setLoading(true);
-    try {
-      const res = await fetch(api(`/api/cortex/context?q=${encodeURIComponent(query)}&limit=5`));
-      if (res.ok) setResult(await res.json());
-    } catch {}
-    setLoading(false);
-  };
-
-  return (
-    <div className="p-6 max-w-3xl mx-auto">
-      {/* Query input */}
-      <div className="flex gap-3 mb-6">
-        <div className="flex-1 relative">
-          <Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
-          <input
-            value={query}
-            onChange={e => setQuery(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && handleAnalyze()}
-            placeholder="Enter a query to analyze..."
-            className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-lg text-gray-300 placeholder-gray-600 focus:outline-none focus:border-purple-500/50"
-          />
-        </div>
-        <button
-          onClick={handleAnalyze}
-          disabled={loading}
-          className="px-5 py-2 text-sm bg-purple-600 hover:bg-purple-500 text-white rounded-lg disabled:opacity-50"
-        >
-          {loading ? 'Analyzing...' : 'Analyze'}
-        </button>
-      </div>
-
-      {!result && !loading && (
-        <p className="text-sm text-gray-600 text-center py-12">
-          Enter a query to see how the Context Assembly Engine processes it
-        </p>
-      )}
-
-      {result && (
-        <>
-          {/* Pipeline summary */}
-          <div className="grid grid-cols-3 gap-3 mb-6">
-            <div className="bg-white/[0.02] border border-white/5 rounded-lg p-3">
-              <div className="text-[10px] text-gray-600 uppercase mb-1">Intent</div>
-              <div className={`text-lg font-semibold ${INTENT_COLORS[result.intent?.intent] || 'text-gray-400'}`}>
-                {result.intent?.intent || '?'}
-              </div>
-              <div className="text-[10px] text-gray-600">
-                confidence: {(result.intent?.confidence ?? 0).toFixed(2)}
-              </div>
-            </div>
-            <div className="bg-white/[0.02] border border-white/5 rounded-lg p-3">
-              <div className="text-[10px] text-gray-600 uppercase mb-1">Entities</div>
-              <div className="flex flex-wrap gap-1 mt-1">
-                {(result.entities || []).map((e: any, i: number) => (
-                  <span key={i} className="text-[10px] px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-gray-300">
-                    {e.entity?.type}:{e.entity?.name}
-                  </span>
-                ))}
-                {(!result.entities || result.entities.length === 0) && (
-                  <span className="text-[10px] text-gray-600">none detected</span>
-                )}
-              </div>
-            </div>
-            <div className="bg-white/[0.02] border border-white/5 rounded-lg p-3">
-              <div className="text-[10px] text-gray-600 uppercase mb-1">Timing</div>
-              <div className="text-lg font-semibold text-green-400">
-                {result.timing?.totalMs ?? '?'}ms
-              </div>
-              <div className="text-[10px] text-gray-600">
-                intent {result.timing?.intentMs}ms · search {result.timing?.searchMs}ms
-              </div>
-            </div>
-          </div>
-
-          {/* Source weights */}
-          {result.sourceWeights && (
-            <div className="mb-6">
-              <div className="text-[10px] text-gray-600 uppercase mb-2">Source Weights</div>
-              <div className="flex gap-3">
-                {result.sourceWeights.map((sw: any, i: number) => (
-                  <div key={i} className="flex-1 bg-white/[0.02] rounded-lg p-3">
-                    <div className="flex justify-between text-[11px] mb-1">
-                      <span className="text-gray-300 capitalize">{sw.scopeLevel}</span>
-                      <span className="text-gray-500">{sw.weight.toFixed(2)}</span>
-                    </div>
-                    <div className="h-1.5 bg-white/5 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-purple-500/60 rounded-full"
-                        style={{ width: `${Math.min(100, sw.weight * 100)}%` }}
-                      />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Results */}
-          <div className="mb-6">
-            <div className="text-[10px] text-gray-600 uppercase mb-2">
-              Results ({(result.results || []).length})
-            </div>
-            <div className="space-y-1">
-              {(result.results || []).map((r: any, i: number) => (
-                <div key={i} className="flex items-center gap-2 bg-white/[0.02] border border-white/5 rounded-lg px-3 py-2">
-                  <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${
-                    r.type === 'error_fix' ? 'bg-amber-500/20 text-amber-400'
-                    : r.type === 'decision' ? 'bg-blue-500/20 text-blue-400'
-                    : 'bg-gray-500/20 text-gray-400'
-                  }`}>{r.type?.replace('_', ' ')}</span>
-                  <span className="text-xs text-gray-300 truncate flex-1">{r.text}</span>
-                  <span className="text-[10px] text-gray-600 tabular-nums shrink-0">
-                    {(r.relevance_score ?? 0).toFixed(3)}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Conflicts */}
-          {Array.isArray(result.conflicts) && result.conflicts.length > 0 && (
-            <div className="mb-6 border border-amber-500/20 bg-amber-500/5 rounded-lg p-3">
-              <div className="text-[10px] text-amber-400 uppercase font-medium mb-1">
-                Conflicts ({result.conflicts.length})
-              </div>
-              {result.conflicts.map((c: any, i: number) => (
-                <div key={i} className="text-xs text-gray-400 mt-1">
-                  &ldquo;{c.unitA?.text?.slice(0, 60)}...&rdquo; vs &ldquo;{c.unitB?.text?.slice(0, 60)}...&rdquo;
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Raw context */}
-          <div>
-            <button
-              onClick={() => setShowRaw(!showRaw)}
-              className="flex items-center gap-1 text-[10px] text-gray-600 hover:text-gray-400 uppercase"
-            >
-              Raw context {showRaw ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
-            </button>
-            {showRaw && result.context && (
-              <pre className="mt-2 p-3 bg-white/[0.02] border border-white/5 rounded-lg text-[11px] text-gray-400 overflow-x-auto whitespace-pre-wrap">
-                {result.context}
-              </pre>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-```
-
-- [ ] **Step 2: Commit**
-
-```bash
-git add src/components/cortex/context-tab.tsx
-git commit -m "feat(cortex): add context assembly inspector tab"
-```
-
----
-
-## Summary
-
-| Task | Component | Status |
-|------|-----------|--------|
-| 1 | listAllEdges() + edges all=true | |
-| 2 | Context API expansion (entities, conflicts, sourceWeights) | |
-| 3 | Enhanced knowledge card (v2 fields) | |
-| 4 | Sidebar Cortex nav item | |
-| 5 | /cortex page with tabs | |
-| 6 | Panel "Open full view" link | |
-| 7 | Entity graph canvas (force-graph) | |
-| 8 | Entity detail panel | |
-| 9 | Knowledge tab | |
-| 10 | Context assembly tab | |
-
-**Total: 10 tasks, 4 chunks**
-
-**No tests in this plan** — these are UI components that render from existing tested APIs. The backend changes (Tasks 1-2) are trivial additions to already-tested modules.