@jlongo78/agent-spaces 0.9.6 → 0.9.8

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

@@ -1,1108 +1,1108 @@
-# 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.
+# 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.