helixevo 0.2.0 → 0.2.2

package/dashboard/app/network/client.tsx

@@ -0,0 +1,1090 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  type Node,
+  type Edge,
+  MarkerType,
+  ConnectionLineType,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import SkillFlowNode from '@/components/SkillFlowNode'
+
+// ─── Types ──────────────────────────────────────────────────────
+
+interface SkillNode {
+  id: string; name: string; score: number; generation: number
+  layer: string; status: string; tags: string[]; failureCount: number; lastEvolved: string
+}
+
+interface GraphEdge {
+  from: string; to: string; type: string; strength: number; detectedBy: string
+}
+
+interface EvolutionEntry {
+  id: string; timestamp: string; action: string; description: string
+  outcome: string; outcomeReason: string; task: number; align: number; sideEffect: number
+}
+
+interface ProjectData {
+  name: string; failures: any[]; skills: string[]
+}
+
+interface Props {
+  allNodes: SkillNode[]
+  generalized: SkillNode[]
+  evolved: SkillNode[]
+  original: SkillNode[]
+  edges: GraphEdge[]
+  evolutionBySkill: Record<string, EvolutionEntry[]>
+  skillContents: Record<string, string>
+  projects: ProjectData[]
+  stats: { nodes: number; edges: number; clusters: number; generalized: number; evolved: number; original: number }
+}
+
+type SubView = 'graph' | 'general' | 'projects' | 'coevolution'
+
+const SUB_VIEWS: { key: SubView; label: string; desc: string }[] = [
+  { key: 'graph', label: 'Skill Graph', desc: 'Interactive network visualization' },
+  { key: 'general', label: 'General Skills', desc: 'Abstract and domain-level skills' },
+  { key: 'projects', label: 'Project Skills', desc: 'Per-project specialized skills' },
+  { key: 'coevolution', label: 'Co-Evolution', desc: 'Cross-layer knowledge flow' },
+]
+
+const nodeTypes = { skillNode: SkillFlowNode }
+
+// ─── Helpers ────────────────────────────────────────────────────
+
+function scoreColor(s: number) {
+  return s >= 0.8 ? 'var(--green)' : s >= 0.6 ? 'var(--yellow)' : 'var(--red)'
+}
+
+const COLUMN_X = { generalized: 50, evolved: 400, original: 750, project: 1100 }
+const EDGE_COLORS: Record<string, string> = {
+  inherits: '#818cf8', enhances: '#22c55e', conflicts: '#ef4444', 'co-evolves': '#f59e0b', depends: '#6366f1',
+}
+const EDGE_LABELS: Record<string, string> = {
+  inherits: 'inherits', enhances: 'enhances', conflicts: 'conflicts', 'co-evolves': 'co-evolves',
+}
+
+function actionBtnStyle(color?: string): React.CSSProperties {
+  return {
+    padding: '6px 12px', fontSize: 11, fontWeight: 600, borderRadius: 6, cursor: 'pointer',
+    border: `1px solid ${color ?? 'var(--border)'}`,
+    background: color ? `${color}10` : 'var(--bg-section)',
+    color: color ?? 'var(--text-dim)',
+    fontFamily: 'var(--font)',
+    transition: 'all 0.15s ease',
+  }
+}
+
+// ─── Main Component ─────────────────────────────────────────────
+
+export default function NetworkClient({
+  allNodes, generalized, evolved, original, edges: graphEdges, evolutionBySkill, skillContents, projects, stats
+}: Props) {
+  const [view, setView] = useState<SubView>('graph')
+  const [selectedSkill, setSelectedSkill] = useState<string | null>(null)
+  const [editing, setEditing] = useState(false)
+  const [editContent, setEditContent] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [newSkillSlug, setNewSkillSlug] = useState('')
+  const [newSkillContent, setNewSkillContent] = useState('')
+  const [adaptation, setAdaptation] = useState<{ status: string; messages: { type: string; text: string }[]; suggestions: { type: string; description: string }[] } | null>(null)
+  const [actionLoading, setActionLoading] = useState(false)
+
+  // ─── Graph Sub-View Data ──────────────────────────────────────
+
+  const { flowNodes, flowEdges } = useMemo(() => {
+    const flowNodes: Node[] = []
+    const ROW_HEIGHT = 240
+
+    function getEdgesFor(id: string) {
+      return {
+        inheritsFrom: graphEdges.filter(e => e.type === 'inherits' && e.to === id).map(e => e.from),
+        children: graphEdges.filter(e => e.type === 'inherits' && e.from === id).map(e => e.to),
+        enhances: [...new Set(graphEdges.filter(e => e.type === 'enhances' && (e.from === id || e.to === id)).map(e => e.from === id ? e.to : e.from))],
+        conflicts: [...new Set(graphEdges.filter(e => e.type === 'conflicts' && (e.from === id || e.to === id)).map(e => e.from === id ? e.to : e.from))],
+      }
+    }
+
+    // Columns: Generalized → Evolved → Original → Projects
+    const addNodes = (nodes: SkillNode[], x: number, category: string) => {
+      nodes.forEach((n, i) => {
+        const ne = getEdgesFor(n.id)
+        const evo = evolutionBySkill[n.id] ?? []
+        flowNodes.push({
+          id: n.id, type: 'skillNode',
+          position: { x, y: 80 + i * ROW_HEIGHT },
+          data: {
+            name: n.name, score: n.score, generation: n.generation,
+            category, layer: n.layer,
+            description: (skillContents[n.id] ?? '').slice(0, 100),
+            inheritsFrom: ne.inheritsFrom, children: ne.children,
+            enhances: ne.enhances, conflicts: ne.conflicts,
+            evolutionSummary: evo.filter(e => e.outcome === 'accepted').map(e => e.description),
+            tags: n.tags.length > 0 ? n.tags : [category],
+          },
+        })
+      })
+    }
+
+    addNodes(generalized, COLUMN_X.generalized, 'generalized')
+    addNodes(evolved, COLUMN_X.evolved, 'evolved')
+    addNodes(original, COLUMN_X.original, 'original')
+
+    // Project nodes
+    let projY = 80
+    projects.forEach(proj => {
+      flowNodes.push({
+        id: `project-${proj.name}`, type: 'skillNode',
+        position: { x: COLUMN_X.project, y: projY },
+        data: {
+          name: proj.name,
+          score: 1 - (proj.failures.filter((f: any) => !f.resolved).length / Math.max(1, proj.failures.length)),
+          generation: 0, category: 'project', layer: 'project',
+          description: `${proj.failures.length} failures, ${proj.skills.length} skills`,
+          inheritsFrom: [], children: [],
+          enhances: proj.skills, conflicts: [],
+          evolutionSummary: proj.failures.slice(0, 2).map((f: any) => `${f.userRequest.slice(0, 50)} → ${f.correction.slice(0, 30)}`),
+          tags: proj.skills.slice(0, 3),
+        },
+      })
+      projY += ROW_HEIGHT
+    })
+
+    // Edges
+    const flowEdges: Edge[] = []
+    const seenEdges = new Set<string>()
+
+    for (const e of graphEdges) {
+      const key = `${e.from}-${e.to}-${e.type}`
+      if (seenEdges.has(key)) continue
+      seenEdges.add(key)
+      if (!flowNodes.some(n => n.id === e.from) || !flowNodes.some(n => n.id === e.to)) continue
+
+      const color = EDGE_COLORS[e.type] ?? '#9ca3af'
+      flowEdges.push({
+        id: key, source: e.from, target: e.to,
+        sourceHandle: 'right', targetHandle: 'left',
+        type: 'smoothstep',
+        animated: e.type === 'co-evolves',
+        label: EDGE_LABELS[e.type],
+        labelStyle: { fontSize: 10, fontWeight: 500, fill: color },
+        labelBgStyle: { fill: '#fff', fillOpacity: 0.9 },
+        labelBgPadding: [4, 6] as [number, number],
+        labelBgBorderRadius: 4,
+        style: { stroke: color, strokeWidth: e.type === 'inherits' ? 2 : 1.5, strokeDasharray: e.type === 'conflicts' ? '6 4' : undefined },
+        markerEnd: { type: MarkerType.ArrowClosed, color, width: 12, height: 12 },
+      })
+    }
+
+    // Project ↔ skill edges
+    for (const proj of projects) {
+      for (const skillSlug of proj.skills) {
+        if (flowNodes.some(n => n.id === skillSlug)) {
+          flowEdges.push({
+            id: `project-${proj.name}-${skillSlug}`,
+            source: skillSlug, target: `project-${proj.name}`,
+            sourceHandle: 'right', targetHandle: 'left',
+            type: 'smoothstep',
+            label: 'used in',
+            labelStyle: { fontSize: 9, fill: '#d97706' },
+            labelBgStyle: { fill: '#fff', fillOpacity: 0.9 },
+            labelBgPadding: [3, 5] as [number, number],
+            labelBgBorderRadius: 3,
+            style: { stroke: '#fbbf24', strokeWidth: 1, strokeDasharray: '4 3' },
+            markerEnd: { type: MarkerType.ArrowClosed, color: '#fbbf24', width: 10, height: 10 },
+          })
+        }
+      }
+    }
+
+    return { flowNodes, flowEdges }
+  }, [generalized, evolved, original, graphEdges, evolutionBySkill, skillContents, projects])
+
+  // ─── Detail Panel ─────────────────────────────────────────────
+
+  const selectedNode = allNodes.find(n => n.id === selectedSkill)
+  const selectedEvo = selectedSkill ? (evolutionBySkill[selectedSkill] ?? []) : []
+  const selectedContent = selectedSkill ? (skillContents[selectedSkill] ?? '') : ''
+  const selectedEdges = selectedSkill ? {
+    inheritsFrom: graphEdges.filter(e => e.type === 'inherits' && e.to === selectedSkill),
+    children: graphEdges.filter(e => e.type === 'inherits' && e.from === selectedSkill),
+    enhances: graphEdges.filter(e => e.type === 'enhances' && (e.from === selectedSkill || e.to === selectedSkill)),
+    conflicts: graphEdges.filter(e => e.type === 'conflicts' && (e.from === selectedSkill || e.to === selectedSkill)),
+  } : null
+
+  // ─── Helpers ──────────────────────────────────────────────────
+
+  const handleCreateSkill = async () => {
+    if (!newSkillSlug || !newSkillContent) return
+    setActionLoading(true)
+    const res = await fetch(`/api/skills`, { method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ slug: newSkillSlug, content: newSkillContent }) })
+    const data = await res.json()
+    setAdaptation(data.adaptation)
+    setActionLoading(false)
+    if (data.success) {
+      setCreating(false)
+      setNewSkillSlug('')
+      setNewSkillContent('')
+      setTimeout(() => window.location.reload(), 1000)
+    }
+  }
+
+  // ─── Render ───────────────────────────────────────────────────
+
+  return (
+    <div>
+      {/* Page Header */}
+      <div className="page-header">
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <h1 className="page-title">Skill Network</h1>
+            <p className="page-desc">
+              {stats.nodes} skills · {stats.edges} relationships · {stats.clusters} clusters
+              {stats.generalized > 0 && ` · ${stats.generalized} generalized`}
+            </p>
+          </div>
+          <button onClick={() => setCreating(!creating)} style={{
+            background: creating ? 'var(--bg-section)' : 'linear-gradient(135deg, var(--purple), #4f46e5)',
+            color: creating ? 'var(--text-dim)' : '#fff',
+            border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 13, fontWeight: 600,
+            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font)',
+          }}>{creating ? '✕ Cancel' : '+ New Skill'}</button>
+        </div>
+      </div>
+
+      {/* Create Skill Panel */}
+      {creating && (
+        <div className="card" style={{ marginBottom: 20 }}>
+          <div className="card-body">
+            <div className="card-header-label">Create New Skill</div>
+            <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
+              <div style={{ flex: 1 }}>
+                <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 4 }}>Skill Slug</label>
+                <input value={newSkillSlug} onChange={e => setNewSkillSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-'))}
+                  placeholder="my-new-skill" style={{
+                    width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 8,
+                    fontSize: 13, fontFamily: 'var(--font-mono)', background: 'var(--bg-input)', color: 'var(--text)',
+                  }} />
+              </div>
+            </div>
+            <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 4 }}>SKILL.md Content</label>
+            <textarea value={newSkillContent} onChange={e => setNewSkillContent(e.target.value)}
+              placeholder={`---\nname: My New Skill\ndescription: What this skill does\nlayer: domain\ntags: [tag1, tag2]\n---\n\n## Rules\n\n- Rule 1\n- Rule 2`}
+              style={{
+                width: '100%', height: 200, fontFamily: 'var(--font-mono)', fontSize: 11.5,
+                background: '#1e1e2e', color: '#cdd6f4', border: '1px solid var(--border)',
+                borderRadius: 8, padding: 12, resize: 'vertical', lineHeight: 1.6,
+              }} />
+            <div style={{ display: 'flex', gap: 8, marginTop: 12, justifyContent: 'flex-end' }}>
+              <button onClick={handleCreateSkill} disabled={!newSkillSlug || !newSkillContent || actionLoading}
+                style={{
+                  background: newSkillSlug && newSkillContent ? 'linear-gradient(135deg, var(--green), #059669)' : 'var(--bg-section)',
+                  color: newSkillSlug && newSkillContent ? '#fff' : 'var(--text-muted)',
+                  border: 'none', borderRadius: 8, padding: '8px 20px', fontSize: 13, fontWeight: 600,
+                  cursor: newSkillSlug && newSkillContent ? 'pointer' : 'default', fontFamily: 'var(--font)',
+                }}>{actionLoading ? 'Creating...' : '✓ Create Skill'}</button>
+            </div>
+
+            {/* Show adaptation feedback for create */}
+            {adaptation && creating && (
+              <div style={{ marginTop: 12 }}>
+                {adaptation.messages.map((m, i) => (
+                  <div key={i} style={{ fontSize: 12, padding: '6px 10px', marginBottom: 3, borderRadius: 6,
+                    background: m.type === 'warning' ? 'var(--yellow-light)' : 'var(--bg-section)',
+                    color: m.type === 'warning' ? 'var(--yellow)' : 'var(--text-dim)',
+                  }}>{m.type === 'warning' ? '⚠ ' : 'ℹ '}{m.text}</div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Sub-View Tabs */}
+      <div className="tab-bar">
+        {SUB_VIEWS.map(sv => (
+          <button
+            key={sv.key}
+            className={`tab-item ${view === sv.key ? 'active' : ''}`}
+            onClick={() => { setView(sv.key); setSelectedSkill(null) }}
+          >
+            {sv.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content area with optional detail panel */}
+      <div style={{ display: 'flex', gap: 0 }}>
+        {/* Main content */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          {view === 'graph' && <GraphView flowNodes={flowNodes} flowEdges={flowEdges} stats={stats} />}
+          {view === 'general' && (
+            <GeneralView
+              generalized={generalized} evolved={evolved} original={original}
+              edges={graphEdges} evolutionBySkill={evolutionBySkill} skillContents={skillContents}
+              onSelect={setSelectedSkill} selected={selectedSkill}
+            />
+          )}
+          {view === 'projects' && (
+            <ProjectsView projects={projects} allNodes={allNodes} onSelect={setSelectedSkill} selected={selectedSkill} />
+          )}
+          {view === 'coevolution' && (
+            <CoEvolutionView
+              generalized={generalized} evolved={evolved} original={original}
+              edges={graphEdges} evolutionBySkill={evolutionBySkill} projects={projects}
+            />
+          )}
+        </div>
+
+        {/* Detail Panel */}
+        {selectedSkill && selectedNode && (
+          <div className="detail-panel">
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
+              <div>
+                <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 4 }}>{selectedNode.name}</div>
+                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  <span className="badge badge-gray">{selectedNode.layer}</span>
+                  {selectedNode.generation > 0 && <span className="badge badge-green">gen {selectedNode.generation}</span>}
+                  {selectedNode.tags.map(t => <span key={t} className="badge badge-gray">{t}</span>)}
+                </div>
+              </div>
+              <button onClick={() => setSelectedSkill(null)} style={{
+                background: 'var(--bg-section)', border: 'none', borderRadius: 6, width: 28, height: 28,
+                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                color: 'var(--text-dim)', fontSize: 14,
+              }}>✕</button>
+            </div>
+
+            {/* Score */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, padding: '12px 14px', background: 'var(--bg-section)', borderRadius: 10 }}>
+              <div style={{ fontSize: 32, fontWeight: 800, color: scoreColor(selectedNode.score), lineHeight: 1 }}>
+                {(selectedNode.score * 100).toFixed(0)}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 4 }}>Quality Score</div>
+                <div className="score-track" style={{ height: 6 }}>
+                  <div className="score-fill" style={{
+                    width: `${selectedNode.score * 100}%`,
+                    background: `linear-gradient(90deg, var(--blue), ${scoreColor(selectedNode.score)})`,
+                  }} />
+                </div>
+              </div>
+            </div>
+
+            {/* Connections */}
+            {selectedEdges && (selectedEdges.inheritsFrom.length > 0 || selectedEdges.children.length > 0 || selectedEdges.enhances.length > 0 || selectedEdges.conflicts.length > 0) && (
+              <div style={{ marginBottom: 20 }}>
+                <div className="section-label">Connections</div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  {selectedEdges.inheritsFrom.length > 0 && (
+                    <div style={{ fontSize: 12 }}>
+                      <span style={{ color: 'var(--text-dim)' }}>Inherits from: </span>
+                      {selectedEdges.inheritsFrom.map(e => <span key={e.from} className="badge badge-purple" style={{ marginRight: 3 }}>{e.from}</span>)}
+                    </div>
+                  )}
+                  {selectedEdges.children.length > 0 && (
+                    <div style={{ fontSize: 12 }}>
+                      <span style={{ color: 'var(--text-dim)' }}>Children: </span>
+                      {selectedEdges.children.map(e => <span key={e.to} className="badge badge-blue" style={{ marginRight: 3 }}>{e.to}</span>)}
+                    </div>
+                  )}
+                  {selectedEdges.enhances.length > 0 && (
+                    <div style={{ fontSize: 12 }}>
+                      <span style={{ color: 'var(--text-dim)' }}>Enhances: </span>
+                      {[...new Set(selectedEdges.enhances.map(e => e.from === selectedSkill ? e.to : e.from))].map(id =>
+                        <span key={id} className="badge badge-green" style={{ marginRight: 3 }}>{id}</span>
+                      )}
+                    </div>
+                  )}
+                  {selectedEdges.conflicts.length > 0 && (
+                    <div style={{ fontSize: 12 }}>
+                      <span style={{ color: 'var(--text-dim)' }}>Conflicts: </span>
+                      {[...new Set(selectedEdges.conflicts.map(e => e.from === selectedSkill ? e.to : e.from))].map(id =>
+                        <span key={id} className="badge badge-red" style={{ marginRight: 3 }}>{id}</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Evolution History */}
+            {selectedEvo.length > 0 && (
+              <div style={{ marginBottom: 20 }}>
+                <div className="section-label">Evolution History</div>
+                {selectedEvo.map((e, i) => (
+                  <div key={i} style={{
+                    padding: '8px 12px', marginBottom: 6, borderRadius: 8,
+                    background: 'var(--bg-section)',
+                    borderLeft: `3px solid ${e.outcome === 'accepted' ? 'var(--green)' : 'var(--red)'}`,
+                  }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, marginBottom: 3 }}>
+                      <span className={`badge ${e.outcome === 'accepted' ? 'badge-green' : 'badge-red'}`}>{e.outcome}</span>
+                      <span style={{ color: 'var(--text-muted)' }}>{new Date(e.timestamp).toLocaleDateString()}</span>
+                    </div>
+                    <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 4 }}>{e.description.slice(0, 150)}</div>
+                    <div style={{ display: 'flex', gap: 8, fontSize: 10 }}>
+                      <span className="score-pill">T:{e.task}</span>
+                      <span className="score-pill">A:{e.align}</span>
+                      <span className="score-pill">S:{e.sideEffect}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* ─── Management Actions ─── */}
+            <div style={{ marginBottom: 20 }}>
+              <div className="section-label">Actions</div>
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                <button onClick={() => { setEditing(!editing); setEditContent(skillContents[selectedSkill!] ?? ''); setAdaptation(null) }}
+                  style={actionBtnStyle(editing ? 'var(--purple)' : undefined)}>
+                  {editing ? '✕ Cancel' : '✎ Edit'}
+                </button>
+                <button onClick={async () => {
+                  if (!selectedNode) return
+                  const layers = ['project', 'domain', 'system'] as const
+                  const currentIdx = layers.indexOf(selectedNode.layer as typeof layers[number])
+                  const nextLayer = layers[Math.min(currentIdx + 1, 2)]
+                  if (nextLayer === selectedNode.layer) return
+                  setActionLoading(true)
+                  const res = await fetch(`/api/skills`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ slug: selectedSkill, layer: nextLayer }) })
+                  const data = await res.json()
+                  setAdaptation(data.adaptation)
+                  setActionLoading(false)
+                }} style={actionBtnStyle('var(--blue)')}>
+                  ↑ Promote
+                </button>
+                <button onClick={async () => {
+                  if (!selectedNode) return
+                  const layers = ['project', 'domain', 'system'] as const
+                  const currentIdx = layers.indexOf(selectedNode.layer as typeof layers[number])
+                  const nextLayer = layers[Math.max(currentIdx - 1, 0)]
+                  if (nextLayer === selectedNode.layer) return
+                  setActionLoading(true)
+                  const res = await fetch(`/api/skills`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ slug: selectedSkill, layer: nextLayer }) })
+                  const data = await res.json()
+                  setAdaptation(data.adaptation)
+                  setActionLoading(false)
+                }} style={actionBtnStyle('var(--yellow)')}>
+                  ↓ Demote
+                </button>
+                <button onClick={async () => {
+                  if (!confirm(`Delete "${selectedNode?.name}"? This cannot be undone.`)) return
+                  setActionLoading(true)
+                  const res = await fetch(`/api/skills?slug=${selectedSkill}`, { method: 'DELETE' })
+                  const data = await res.json()
+                  setAdaptation(data.adaptation)
+                  setActionLoading(false)
+                  if (data.success) setTimeout(() => window.location.reload(), 1500)
+                }} style={actionBtnStyle('var(--red)')}>
+                  ✕ Delete
+                </button>
+              </div>
+            </div>
+
+            {/* ─── Edit Mode ─── */}
+            {editing && (
+              <div style={{ marginBottom: 20 }}>
+                <div className="section-label">Edit Skill Content</div>
+                <textarea
+                  value={editContent}
+                  onChange={e => setEditContent(e.target.value)}
+                  style={{
+                    width: '100%', height: 250, fontFamily: 'var(--font-mono)', fontSize: 11,
+                    background: '#1e1e2e', color: '#cdd6f4', border: '1px solid var(--border)',
+                    borderRadius: 8, padding: 12, resize: 'vertical', lineHeight: 1.6,
+                  }}
+                />
+                <button onClick={async () => {
+                  setActionLoading(true)
+                  const res = await fetch(`/api/skills`, { method: 'PUT', headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ slug: selectedSkill, content: `---\n${Object.entries(selectedNode ? { name: selectedNode.name, description: '', layer: selectedNode.layer } : {}).map(([k,v]) => `${k}: ${v}`).join('\n')}\n---\n\n${editContent}` }) })
+                  const data = await res.json()
+                  setAdaptation(data.adaptation)
+                  setEditing(false)
+                  setActionLoading(false)
+                  setTimeout(() => window.location.reload(), 1000)
+                }} disabled={actionLoading}
+                  style={{ ...actionBtnStyle('var(--green)'), width: '100%', marginTop: 8 }}>
+                  {actionLoading ? 'Saving...' : '✓ Save Changes'}
+                </button>
+              </div>
+            )}
+
+            {/* ─── Network Adaptation Feedback ─── */}
+            {adaptation && (
+              <div style={{ marginBottom: 20 }}>
+                <div className="section-label">
+                  Network Adaptation
+                  <span style={{
+                    marginLeft: 8, fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 6,
+                    background: adaptation.status === 'ok' ? 'var(--green-light)' : adaptation.status === 'warning' ? 'var(--yellow-light)' : 'var(--red-light)',
+                    color: adaptation.status === 'ok' ? 'var(--green)' : adaptation.status === 'warning' ? 'var(--yellow)' : 'var(--red)',
+                    textTransform: 'none', letterSpacing: 0,
+                  }}>{adaptation.status}</span>
+                </div>
+                {adaptation.messages.map((m, i) => (
+                  <div key={i} style={{
+                    padding: '8px 12px', marginBottom: 4, borderRadius: 6, fontSize: 12, lineHeight: 1.5,
+                    background: m.type === 'warning' ? 'var(--yellow-light)' : m.type === 'action' ? 'var(--red-light)' : 'var(--bg-section)',
+                    color: m.type === 'warning' ? 'var(--yellow)' : m.type === 'action' ? 'var(--red)' : 'var(--text-secondary)',
+                    border: `1px solid ${m.type === 'warning' ? 'var(--yellow-border)' : m.type === 'action' ? 'var(--red-border)' : 'var(--border)'}`,
+                  }}>{m.type === 'warning' ? '⚠ ' : m.type === 'action' ? '⚡ ' : 'ℹ '}{m.text}</div>
+                ))}
+                {adaptation.suggestions.length > 0 && (
+                  <div style={{ marginTop: 8 }}>
+                    <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 4 }}>SUGGESTIONS</div>
+                    {adaptation.suggestions.map((s, i) => (
+                      <div key={i} style={{
+                        padding: '6px 10px', fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5,
+                        borderLeft: '2px solid var(--purple)', marginBottom: 4, paddingLeft: 10,
+                      }}>
+                        <span className="badge badge-purple" style={{ marginRight: 6 }}>{s.type}</span>
+                        {s.description}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Skill Content (read-only when not editing) */}
+            {selectedContent && !editing && (
+              <div>
+                <div className="section-label">Skill Content</div>
+                <pre style={{
+                  background: 'var(--bg-section)', borderRadius: 8, padding: 12,
+                  whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                  color: 'var(--text-secondary)', lineHeight: 1.6, maxHeight: 300, overflow: 'auto',
+                  fontSize: 11, border: '1px solid var(--border)',
+                }}>
+                  {selectedContent.slice(0, 1500)}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// SUB-VIEW: Graph
+// ═══════════════════════════════════════════════════════════════════
+
+function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdges: Edge[]; stats: Props['stats'] }) {
+  return (
+    <div style={{ height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: '#fafafa' }}>
+      {/* Column Headers */}
+      <div style={{
+        position: 'absolute', top: 8, left: 0, right: 0, zIndex: 10,
+        display: 'flex', justifyContent: 'space-around', padding: '0 60px',
+        pointerEvents: 'none',
+      }}>
+        {[
+          { label: 'GENERALIZED', color: '#7c3aed', count: stats.generalized },
+          { label: 'EVOLVED', color: '#16a34a', count: stats.evolved },
+          { label: 'ORIGINAL', color: '#6b7280', count: stats.original },
+          { label: 'PROJECTS', color: '#b45309', count: 0 },
+        ].map(col => (
+          <div key={col.label} style={{
+            background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
+            padding: '5px 14px', textAlign: 'center',
+            boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
+          }}>
+            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.5, color: col.color }}>{col.label}</div>
+            {col.count > 0 && <div style={{ fontSize: 9, color: '#9ca3af', marginTop: 1 }}>{col.count} skills</div>}
+          </div>
+        ))}
+      </div>
+
+      <ReactFlow
+        nodes={flowNodes}
+        edges={flowEdges}
+        nodeTypes={nodeTypes}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        proOptions={{ hideAttribution: true }}
+        style={{ background: '#fafafa' }}
+        minZoom={0.3}
+        maxZoom={1.5}
+      >
+        <Background color="#e5e7eb" gap={20} size={1} />
+        <Controls position="bottom-left" />
+      </ReactFlow>
+
+      {/* Legend */}
+      <div style={{
+        position: 'absolute', bottom: 12, right: 12, zIndex: 10,
+        background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
+        padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: '#6b7280',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
+      }}>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#818cf8', marginRight: 4, verticalAlign: 'middle' }} /> inherits</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#22c55e', marginRight: 4, verticalAlign: 'middle' }} /> enhances</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#ef4444', marginRight: 4, verticalAlign: 'middle', borderTop: '1px dashed #ef4444' }} /> conflicts</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#fbbf24', marginRight: 4, verticalAlign: 'middle' }} /> project</span>
+        <span style={{ color: '#b0b5c8' }}>Scroll to zoom · Drag to pan</span>
+      </div>
+    </div>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// SUB-VIEW: General Skills
+// ═══════════════════════════════════════════════════════════════════
+
+function GeneralView({
+  generalized, evolved, original, edges, evolutionBySkill, skillContents, onSelect, selected,
+}: {
+  generalized: SkillNode[]; evolved: SkillNode[]; original: SkillNode[]
+  edges: GraphEdge[]; evolutionBySkill: Record<string, EvolutionEntry[]>
+  skillContents: Record<string, string>; onSelect: (id: string) => void; selected: string | null
+}) {
+  function SkillCard({ node, category }: { node: SkillNode; category: string }) {
+    const nodeEdges = {
+      inheritsFrom: edges.filter(e => e.type === 'inherits' && e.to === node.id),
+      children: edges.filter(e => e.type === 'inherits' && e.from === node.id),
+      enhances: edges.filter(e => e.type === 'enhances' && (e.from === node.id || e.to === node.id)),
+    }
+    const evo = evolutionBySkill[node.id] ?? []
+    const borderColor = category === 'generalized' ? 'var(--purple)' : category === 'evolved' ? 'var(--green)' : 'var(--border)'
+    const isSelected = selected === node.id
+
+    return (
+      <div
+        className={`card ${isSelected ? 'selected' : ''}`}
+        onClick={() => onSelect(node.id)}
+        style={{ borderLeft: `3px solid ${borderColor}`, cursor: 'pointer', overflow: 'hidden' }}
+      >
+        <div className="card-body" style={{ padding: 16 }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
+            <div>
+              <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>{node.name}</div>
+              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                <span className={`badge ${category === 'generalized' ? 'badge-purple' : category === 'evolved' ? 'badge-green' : 'badge-gray'}`}>
+                  {category}
+                </span>
+                {node.generation > 0 && <span className="badge badge-green">gen {node.generation}</span>}
+                <span className="badge badge-gray">{node.layer}</span>
+              </div>
+            </div>
+            <div style={{ textAlign: 'right' }}>
+              <div style={{ fontSize: 24, fontWeight: 800, color: scoreColor(node.score), lineHeight: 1 }}>
+                {(node.score * 100).toFixed(0)}
+              </div>
+              <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>score</div>
+            </div>
+          </div>
+
+          <div className="score-track" style={{ height: 4, marginBottom: 12 }}>
+            <div className="score-fill" style={{
+              width: `${node.score * 100}%`,
+              background: `linear-gradient(90deg, var(--blue), ${scoreColor(node.score)})`,
+            }} />
+          </div>
+
+          {/* Connections summary */}
+          {(nodeEdges.inheritsFrom.length > 0 || nodeEdges.children.length > 0 || nodeEdges.enhances.length > 0) && (
+            <div style={{ display: 'flex', gap: 8, fontSize: 11, marginBottom: 10, flexWrap: 'wrap' }}>
+              {nodeEdges.inheritsFrom.length > 0 && (
+                <span style={{ color: 'var(--text-dim)' }}>↑ {nodeEdges.inheritsFrom.length} parent{nodeEdges.inheritsFrom.length > 1 ? 's' : ''}</span>
+              )}
+              {nodeEdges.children.length > 0 && (
+                <span style={{ color: 'var(--text-dim)' }}>↓ {nodeEdges.children.length} child{nodeEdges.children.length > 1 ? 'ren' : ''}</span>
+              )}
+              {nodeEdges.enhances.length > 0 && (
+                <span style={{ color: 'var(--text-dim)' }}>↔ {nodeEdges.enhances.length} enhance</span>
+              )}
+            </div>
+          )}
+
+          {/* Evolution badges */}
+          {evo.length > 0 && (
+            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+              {evo.slice(0, 3).map((e, i) => (
+                <span key={i} className={`badge ${e.outcome === 'accepted' ? 'badge-green' : 'badge-red'}`} style={{ fontSize: 9 }}>
+                  {e.action} {e.outcome === 'accepted' ? '✓' : '✕'}
+                </span>
+              ))}
+              {evo.length > 3 && <span className="badge badge-gray" style={{ fontSize: 9 }}>+{evo.length - 3}</span>}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {/* Generalized Layer */}
+      {generalized.length > 0 && (
+        <div className="layer-section layer-generalized">
+          <div className="section-label" style={{ color: 'var(--purple)' }}>
+            Generalized Skills
+            <span style={{ fontWeight: 400, color: 'var(--text-dim)', fontSize: 11, textTransform: 'none', letterSpacing: 0 }}>
+              — abstracted from cross-project patterns
+            </span>
+          </div>
+          <div className="grid-auto">
+            {generalized.map(n => <SkillCard key={n.id} node={n} category="generalized" />)}
+          </div>
+          <div className="flow-arrow">▼ specializes into domain skills ▼</div>
+        </div>
+      )}
+
+      {/* Evolved Layer */}
+      {evolved.length > 0 && (
+        <div className="layer-section layer-evolved">
+          <div className="section-label" style={{ color: 'var(--green)' }}>
+            Evolved Skills
+            <span style={{ fontWeight: 400, color: 'var(--text-dim)', fontSize: 11, textTransform: 'none', letterSpacing: 0 }}>
+              — improved through failure-driven evolution
+            </span>
+          </div>
+          <div className="grid-auto">
+            {evolved.map(n => <SkillCard key={n.id} node={n} category="evolved" />)}
+          </div>
+        </div>
+      )}
+
+      {/* Original Layer */}
+      {original.length > 0 && (
+        <div className="layer-section layer-original">
+          <div className="section-label" style={{ color: 'var(--text-dim)' }}>
+            Original Skills
+            <span style={{ fontWeight: 400, fontSize: 11, textTransform: 'none', letterSpacing: 0 }}>
+              — not yet evolved
+            </span>
+          </div>
+          <div className="grid-auto">
+            {original.map(n => <SkillCard key={n.id} node={n} category="original" />)}
+          </div>
+          {generalized.length > 0 && <div className="flow-arrow">▲ common patterns generalize upward ▲</div>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// SUB-VIEW: Project Skills
+// ═══════════════════════════════════════════════════════════════════
+
+function ProjectsView({
+  projects, allNodes, onSelect, selected,
+}: {
+  projects: ProjectData[]; allNodes: SkillNode[]
+  onSelect: (id: string) => void; selected: string | null
+}) {
+  if (projects.length === 0) {
+    return (
+      <div className="card">
+        <div className="empty-state">
+          <div className="empty-state-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+          </div>
+          <div className="empty-state-title">No projects detected</div>
+          <div className="empty-state-desc">
+            Projects are auto-detected from captured failures. Use <code>helixevo capture --project name</code> to tag failures.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'grid', gap: 16 }}>
+      {projects.map(project => {
+        const unresolved = project.failures.filter((f: any) => !f.resolved)
+        const resolvedPct = project.failures.length > 0 ? ((project.failures.length - unresolved.length) / project.failures.length * 100).toFixed(0) : '0'
+
+        return (
+          <div key={project.name} className="card" style={{ overflow: 'hidden' }}>
+            {/* Project Header */}
+            <div style={{
+              padding: '16px 20px',
+              background: 'linear-gradient(135deg, #fffbeb, #fef3c7)',
+              borderBottom: '1px solid var(--yellow-border)',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 6 }}>{project.name}</div>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <span className="badge badge-yellow">{project.failures.length} failures</span>
+                    <span className="badge badge-blue">{project.skills.length} skills</span>
+                    <span className="badge badge-green">{resolvedPct}% resolved</span>
+                  </div>
+                </div>
+                {unresolved.length >= 3 && (
+                  <div style={{
+                    padding: '6px 14px', borderRadius: 8,
+                    background: 'var(--green-light)', color: 'var(--green)',
+                    fontSize: 11, fontWeight: 600,
+                  }}>
+                    Ready to specialize →
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="card-body">
+              {/* Skills */}
+              <div className="section-label">Skills Involved</div>
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
+                {project.skills.map(s => {
+                  const node = allNodes.find(n => n.id === s)
+                  return (
+                    <div key={s} onClick={() => onSelect(s)} style={{
+                      padding: '6px 12px', borderRadius: 8, background: 'var(--bg-section)',
+                      border: `1px solid ${selected === s ? 'var(--purple)' : 'var(--border)'}`,
+                      fontSize: 12, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer',
+                      transition: 'all 0.15s',
+                    }}>
+                      <span style={{ fontWeight: 500 }}>{s}</span>
+                      {node && (
+                        <span style={{ fontSize: 11, fontWeight: 700, color: node.score >= 0.8 ? 'var(--green)' : 'var(--yellow)' }}>
+                          {(node.score * 100).toFixed(0)}
+                        </span>
+                      )}
+                      {node?.generation ? <span className="badge badge-green" style={{ fontSize: 9 }}>gen {node.generation}</span> : null}
+                    </div>
+                  )
+                })}
+              </div>
+
+              {/* Failures */}
+              <div className="section-label">Recent Failures</div>
+              {project.failures.slice(0, 5).map((f: any) => (
+                <div key={f.id} style={{
+                  padding: '8px 12px', marginBottom: 4, borderRadius: 8,
+                  background: 'var(--bg-section)', borderLeft: '3px solid var(--red)',
+                  fontSize: 12,
+                }}>
+                  <div style={{ fontWeight: 500, color: 'var(--text)', marginBottom: 2 }}>{f.userRequest.slice(0, 80)}</div>
+                  <div style={{ color: 'var(--red)', fontSize: 11 }}>→ {f.correction.slice(0, 80)}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// SUB-VIEW: Co-Evolution
+// ═══════════════════════════════════════════════════════════════════
+
+function CoEvolutionView({
+  generalized, evolved, original, edges, evolutionBySkill, projects,
+}: {
+  generalized: SkillNode[]; evolved: SkillNode[]; original: SkillNode[]
+  edges: GraphEdge[]; evolutionBySkill: Record<string, EvolutionEntry[]>; projects: ProjectData[]
+}) {
+  const allNodes = [...generalized, ...evolved, ...original]
+
+  // Inheritance chains: generalized → children
+  const inheritanceChains = generalized.map(g => {
+    const children = edges.filter(e => e.type === 'inherits' && e.from === g.id).map(e => allNodes.find(n => n.id === e.to)).filter(Boolean)
+    return { parent: g, children: children as SkillNode[] }
+  })
+
+  // Enhancement clusters
+  const enhanceEdges = edges.filter(e => e.type === 'enhances')
+  const enhancePairs = enhanceEdges.map(e => ({
+    from: allNodes.find(n => n.id === e.from),
+    to: allNodes.find(n => n.id === e.to),
+    strength: e.strength,
+  })).filter(p => p.from && p.to) as { from: SkillNode; to: SkillNode; strength: number }[]
+
+  // Conflict edges
+  const conflictEdges = edges.filter(e => e.type === 'conflicts')
+  const conflictPairs = conflictEdges.map(e => ({
+    from: allNodes.find(n => n.id === e.from),
+    to: allNodes.find(n => n.id === e.to),
+    strength: e.strength,
+  })).filter(p => p.from && p.to) as { from: SkillNode; to: SkillNode; strength: number }[]
+
+  // Cross-project knowledge: which skills are shared across projects
+  const sharedSkills: Record<string, string[]> = {}
+  for (const proj of projects) {
+    for (const s of proj.skills) {
+      if (!sharedSkills[s]) sharedSkills[s] = []
+      sharedSkills[s].push(proj.name)
+    }
+  }
+  const crossProjectSkills = Object.entries(sharedSkills).filter(([, projs]) => projs.length > 1)
+
+  return (
+    <div style={{ display: 'grid', gap: 20 }}>
+      {/* Knowledge Flow: Generalize ↑ / Specialize ↓ */}
+      {inheritanceChains.length > 0 && (
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Knowledge Flow — Generalize ↑ Specialize ↓</div>
+            <div style={{ display: 'grid', gap: 12 }}>
+              {inheritanceChains.map(chain => (
+                <div key={chain.parent.id} style={{ padding: '14px 16px', background: 'var(--bg-section)', borderRadius: 10 }}>
+                  {/* Parent */}
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
+                    <div style={{
+                      width: 8, height: 8, borderRadius: '50%',
+                      background: 'var(--purple)', flexShrink: 0,
+                    }} />
+                    <span style={{ fontWeight: 700, fontSize: 14 }}>{chain.parent.name}</span>
+                    <span style={{ fontSize: 22, fontWeight: 800, color: scoreColor(chain.parent.score), marginLeft: 'auto' }}>
+                      {(chain.parent.score * 100).toFixed(0)}
+                    </span>
+                  </div>
+
+                  {/* Children */}
+                  {chain.children.length > 0 && (
+                    <div style={{ paddingLeft: 18, borderLeft: '2px solid var(--purple-border)' }}>
+                      {chain.children.map(child => (
+                        <div key={child.id} style={{
+                          display: 'flex', alignItems: 'center', gap: 10,
+                          padding: '6px 0',
+                        }}>
+                          <span style={{ fontSize: 10, color: 'var(--purple)' }}>↳</span>
+                          <span style={{ fontWeight: 500, fontSize: 13 }}>{child.name}</span>
+                          <span className="badge badge-green" style={{ fontSize: 9 }}>gen {child.generation}</span>
+                          <span style={{ marginLeft: 'auto', fontSize: 13, fontWeight: 700, color: scoreColor(child.score) }}>
+                            {(child.score * 100).toFixed(0)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Enhancement Pairs */}
+      <div className="grid-2">
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Synergies — Skills that enhance each other</div>
+            {enhancePairs.length === 0 ? (
+              <div style={{ color: 'var(--text-dim)', fontSize: 13, textAlign: 'center', padding: 20 }}>No enhancement relationships detected</div>
+            ) : (
+              enhancePairs.map((pair, i) => (
+                <div key={i} style={{
+                  display: 'flex', alignItems: 'center', gap: 10,
+                  padding: '8px 0', borderBottom: i < enhancePairs.length - 1 ? '1px solid var(--border)' : 'none',
+                }}>
+                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.from.name}</span>
+                  <span style={{ color: 'var(--green)', fontSize: 12 }}>↔</span>
+                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.to.name}</span>
+                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-dim)' }}>
+                    strength: {(pair.strength * 100).toFixed(0)}%
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Conflicts — Skills with tension</div>
+            {conflictPairs.length === 0 ? (
+              <div style={{ color: 'var(--text-dim)', fontSize: 13, textAlign: 'center', padding: 20 }}>No conflicts detected</div>
+            ) : (
+              conflictPairs.map((pair, i) => (
+                <div key={i} style={{
+                  display: 'flex', alignItems: 'center', gap: 10,
+                  padding: '8px 0', borderBottom: i < conflictPairs.length - 1 ? '1px solid var(--border)' : 'none',
+                }}>
+                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.from.name}</span>
+                  <span style={{ color: 'var(--red)', fontSize: 12 }}>⚡</span>
+                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.to.name}</span>
+                  <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-dim)' }}>
+                    strength: {(pair.strength * 100).toFixed(0)}%
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Cross-Project Knowledge Transfer */}
+      {crossProjectSkills.length > 0 && (
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Cross-Project Knowledge Transfer</div>
+            <div style={{ display: 'grid', gap: 8 }}>
+              {crossProjectSkills.map(([skillId, projs]) => {
+                const node = allNodes.find(n => n.id === skillId)
+                return (
+                  <div key={skillId} style={{
+                    display: 'flex', alignItems: 'center', gap: 12,
+                    padding: '10px 14px', background: 'var(--bg-section)', borderRadius: 8,
+                  }}>
+                    <span style={{ fontWeight: 600, fontSize: 13 }}>{node?.name ?? skillId}</span>
+                    <div style={{ display: 'flex', gap: 4, marginLeft: 'auto' }}>
+                      {projs.map(p => <span key={p} className="badge badge-yellow">{p}</span>)}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Evolution Activity by Skill */}
+      <div className="card">
+        <div className="card-body">
+          <div className="card-header-label">Evolution Activity</div>
+          <div style={{ display: 'grid', gap: 6 }}>
+            {allNodes.sort((a, b) => (evolutionBySkill[b.id]?.length ?? 0) - (evolutionBySkill[a.id]?.length ?? 0)).map(node => {
+              const evo = evolutionBySkill[node.id] ?? []
+              if (evo.length === 0) return null
+              const accepted = evo.filter(e => e.outcome === 'accepted').length
+              return (
+                <div key={node.id} style={{
+                  display: 'flex', alignItems: 'center', gap: 12,
+                  padding: '8px 14px', background: 'var(--bg-section)', borderRadius: 8,
+                }}>
+                  <span style={{ fontWeight: 500, fontSize: 13, minWidth: 160 }}>{node.name}</span>
+                  <div style={{ flex: 1, display: 'flex', gap: 3 }}>
+                    {evo.map((e, i) => (
+                      <div key={i} style={{
+                        width: 16, height: 16, borderRadius: 4,
+                        background: e.outcome === 'accepted' ? 'var(--green-light)' : 'var(--red-light)',
+                        border: `1px solid ${e.outcome === 'accepted' ? 'var(--green-border)' : 'var(--red-border)'}`,
+                      }} title={`${e.action}: ${e.outcome}`} />
+                    ))}
+                  </div>
+                  <span style={{ fontSize: 11, color: 'var(--text-dim)', whiteSpace: 'nowrap' }}>
+                    {accepted}/{evo.length} accepted
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}