helixevo 0.2.38 → 0.2.40

package/dashboard/app/network/client.tsx

@@ -242,19 +242,24 @@ export default function NetworkClient({
     <div>
       {/* Page Header */}
       <div className="page-header">
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 18, flexWrap: 'wrap' }}>
           <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`}
+              Visualize how skills generalize, specialize, and interact across the living HelixEvo network.
             </p>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 16 }}>
+              <span className="hero-chip hero-chip-purple">{stats.nodes} skills</span>
+              <span className="hero-chip hero-chip-blue">{stats.edges} relationships</span>
+              <span className="hero-chip hero-chip-neutral">{stats.clusters} clusters</span>
+              {stats.generalized > 0 ? <span className="hero-chip hero-chip-green">{stats.generalized} generalized</span> : null}
+            </div>
           </div>
           <button onClick={() => setCreating(!creating)} style={{
-            background: creating ? 'var(--bg-section)' : 'linear-gradient(135deg, var(--purple), #4f46e5)',
+            background: creating ? 'rgba(97,93,86,0.08)' : '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)',
+            border: creating ? '1px solid var(--border)' : 'none', borderRadius: 999, padding: '11px 18px', fontSize: 13, fontWeight: 700,
+            cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font)', boxShadow: creating ? 'none' : 'var(--shadow-md)',
           }}>{creating ? '✕ Cancel' : '+ New Skill'}</button>
         </div>
       </div>
@@ -314,8 +319,12 @@ export default function NetworkClient({
             key={sv.key}
             className={`tab-item ${view === sv.key ? 'active' : ''}`}
             onClick={() => { setView(sv.key) }}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2, minWidth: 0 }}
           >
-            {sv.label}
+            <span style={{ fontSize: 12.5, fontWeight: 700 }}>{sv.label}</span>
+            <span style={{ fontSize: 10.5, color: view === sv.key ? 'rgba(62,53,46,0.74)' : 'var(--text-muted)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '100%' }}>
+              {sv.desc}
+            </span>
           </button>
         ))}
       </div>
@@ -346,256 +355,82 @@ export default function NetworkClient({
 
         {/* 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, cursor: 'pointer' }} onClick={() => setSelectedSkill(e.from)}>{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, cursor: 'pointer' }} onClick={() => setSelectedSkill(e.to)}>{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, cursor: 'pointer' }} onClick={() => setSelectedSkill(id)}>{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, cursor: 'pointer' }} onClick={() => setSelectedSkill(id)}>{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>
-            )}
-
-            {/* ─── Cross-Links ─── */}
-            <div style={{ marginBottom: 16 }}>
-              <div className="section-label">Navigate</div>
-              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
-                {view !== 'graph' && (
-                  <button onClick={() => setView('graph')} style={actionBtnStyle('var(--blue)')}>
-                    ◎ View in Graph
-                  </button>
-                )}
-                {view !== 'general' && (
-                  <button onClick={() => setView('general')} style={actionBtnStyle()}>
-                    ▤ View in Skills
-                  </button>
-                )}
-                {view !== 'coevolution' && (
-                  <button onClick={() => setView('coevolution')} style={actionBtnStyle()}>
-                    ↕ Co-Evolution
-                  </button>
-                )}
-              </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>
+          <InspectorPanel
+            selectedSkill={selectedSkill}
+            selectedNode={selectedNode}
+            selectedEdges={selectedEdges}
+            selectedEvo={selectedEvo}
+            selectedContent={selectedContent}
+            view={view}
+            editing={editing}
+            editContent={editContent}
+            adaptation={adaptation}
+            actionLoading={actionLoading}
+            onClose={() => setSelectedSkill(null)}
+            onSelectSkill={setSelectedSkill}
+            onViewChange={setView}
+            onToggleEdit={() => {
+              setEditing(!editing)
+              setEditContent(skillContents[selectedSkill] ?? '')
+              setAdaptation(null)
+            }}
+            onEditContentChange={setEditContent}
+            onPromote={async () => {
+              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)
+            }}
+            onDemote={async () => {
+              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)
+            }}
+            onDelete={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)
+            }}
+            onSave={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({ 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)
+            }}
+          />
         )}
       </div>
     </div>
@@ -608,7 +443,44 @@ export default function NetworkClient({
 
 function GraphView({ flowNodes, flowEdges, stats, onNodeClick }: { flowNodes: Node[]; flowEdges: Edge[]; stats: Props['stats']; onNodeClick: (id: string) => void }) {
   return (
-    <div style={{ position: 'relative', height: 'calc(100vh - 200px)', width: '100%', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--border)', background: 'var(--bg)' }}>
+    <div style={{
+      position: 'relative',
+      height: 'calc(100vh - 200px)',
+      width: '100%',
+      borderRadius: 22,
+      overflow: 'hidden',
+      border: '1px solid var(--border)',
+      background: 'radial-gradient(circle at top right, rgba(107,73,223,0.08), transparent 24%), radial-gradient(circle at left center, rgba(18,121,109,0.08), transparent 22%), linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,244,239,0.96))',
+      boxShadow: 'var(--shadow-lg)',
+    }}>
+      <div style={{ position: 'absolute', top: 14, left: 16, zIndex: 8, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <span className="hero-chip hero-chip-purple">Generalized</span>
+        <span className="hero-chip hero-chip-green">Evolved</span>
+        <span className="hero-chip hero-chip-neutral">Original</span>
+        <span className="hero-chip hero-chip-yellow">Projects</span>
+      </div>
+
+      <div style={{
+        position: 'absolute',
+        top: 14,
+        right: 16,
+        zIndex: 8,
+        padding: '10px 12px',
+        borderRadius: 18,
+        background: 'rgba(255,255,255,0.88)',
+        border: '1px solid var(--border)',
+        boxShadow: 'var(--shadow-sm)',
+        display: 'grid',
+        gap: 4,
+        minWidth: 180,
+      }}>
+        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase', color: 'var(--text-muted)' }}>Live network</div>
+        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text)' }}>{stats.nodes} active skill nodes</div>
+        <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5 }}>
+          {stats.edges} relationships spanning {stats.clusters} clusters{stats.generalized > 0 ? ` • ${stats.generalized} generalized anchors` : ''}
+        </div>
+      </div>
+
       <ReactFlow
         nodes={flowNodes}
         edges={flowEdges}
@@ -618,26 +490,338 @@ function GraphView({ flowNodes, flowEdges, stats, onNodeClick }: { flowNodes: No
         fitView
         fitViewOptions={{ padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
-        style={{ background: 'var(--bg)' }}
+        style={{ background: 'transparent' }}
         minZoom={0.3}
         maxZoom={1.5}
       >
-        <Background color="#d5d2ca" gap={20} size={1} />
+        <Background color="rgba(112,104,94,0.22)" gap={20} size={1} />
         <Controls position="bottom-left" />
       </ReactFlow>
 
       {/* Legend */}
       <div style={{
-        position: 'absolute', bottom: 12, right: 12, zIndex: 10,
-        background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8,
-        padding: '8px 14px', display: 'flex', gap: 14, fontSize: 10, color: 'var(--text-dim)',
-        boxShadow: 'var(--shadow-sm)',
+        position: 'absolute', bottom: 14, right: 14, zIndex: 10,
+        background: 'rgba(255,255,255,0.9)', border: '1px solid var(--border)', borderRadius: 18,
+        padding: '10px 14px', display: 'flex', gap: 14, fontSize: 10.5, color: 'var(--text-dim)',
+        boxShadow: 'var(--shadow-md)', flexWrap: 'wrap', maxWidth: 'min(720px, calc(100% - 28px))',
       }}>
-        <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>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#818cf8', marginRight: 5, verticalAlign: 'middle' }} /> inherits</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#22c55e', marginRight: 5, verticalAlign: 'middle' }} /> enhances</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#ef4444', marginRight: 5, verticalAlign: 'middle', borderTop: '1px dashed #ef4444' }} /> conflicts</span>
+        <span><span style={{ display: 'inline-block', width: 12, height: 2, background: '#fbbf24', marginRight: 5, verticalAlign: 'middle' }} /> project link</span>
+        <span style={{ color: 'var(--text-muted)' }}>Scroll to zoom · Drag to pan · Click a node to inspect it</span>
+      </div>
+    </div>
+  )
+}
+
+function InspectorPanel({
+  selectedSkill,
+  selectedNode,
+  selectedEdges,
+  selectedEvo,
+  selectedContent,
+  view,
+  editing,
+  editContent,
+  adaptation,
+  actionLoading,
+  onClose,
+  onSelectSkill,
+  onViewChange,
+  onToggleEdit,
+  onEditContentChange,
+  onPromote,
+  onDemote,
+  onDelete,
+  onSave,
+}: {
+  selectedSkill: string
+  selectedNode: SkillNode
+  selectedEdges: {
+    inheritsFrom: GraphEdge[]
+    children: GraphEdge[]
+    enhances: GraphEdge[]
+    conflicts: GraphEdge[]
+  } | null
+  selectedEvo: EvolutionEntry[]
+  selectedContent: string
+  view: SubView
+  editing: boolean
+  editContent: string
+  adaptation: { status: string; messages: { type: string; text: string }[]; suggestions: { type: string; description: string }[] } | null
+  actionLoading: boolean
+  onClose: () => void
+  onSelectSkill: (id: string) => void
+  onViewChange: (view: SubView) => void
+  onToggleEdit: () => void
+  onEditContentChange: (value: string) => void
+  onPromote: () => void | Promise<void>
+  onDemote: () => void | Promise<void>
+  onDelete: () => void | Promise<void>
+  onSave: () => void | Promise<void>
+}) {
+  const acceptedCount = selectedEvo.filter(entry => entry.outcome === 'accepted').length
+  const rejectedCount = selectedEvo.filter(entry => entry.outcome !== 'accepted').length
+  const connectionGroups = selectedEdges ? [
+    { label: 'Inherits from', tone: 'purple', ids: selectedEdges.inheritsFrom.map(edge => edge.from) },
+    { label: 'Children', tone: 'blue', ids: selectedEdges.children.map(edge => edge.to) },
+    { label: 'Enhances', tone: 'green', ids: [...new Set(selectedEdges.enhances.map(edge => edge.from === selectedSkill ? edge.to : edge.from))] },
+    { label: 'Conflicts', tone: 'red', ids: [...new Set(selectedEdges.conflicts.map(edge => edge.from === selectedSkill ? edge.to : edge.from))] },
+  ].filter(group => group.ids.length > 0) : []
+
+  return (
+    <div className="detail-panel" style={{
+      background: 'linear-gradient(180deg, rgba(255,255,255,0.94), rgba(245,241,236,0.98))',
+      boxShadow: 'inset 1px 0 0 rgba(255,255,255,0.45)',
+    }}>
+      <div style={{
+        padding: '18px 18px 16px',
+        borderBottom: '1px solid var(--border)',
+        background: 'linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.2))',
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 14 }}>
+          <div>
+            <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>
+              Skill inspector
+            </div>
+            <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text)', lineHeight: 1.2, marginBottom: 8 }}>{selectedNode.name}</div>
+            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+              <span className="hero-chip hero-chip-neutral">{selectedNode.layer}</span>
+              {selectedNode.generation > 0 ? <span className="hero-chip hero-chip-green">gen {selectedNode.generation}</span> : <span className="hero-chip hero-chip-blue">original</span>}
+              {selectedNode.tags.slice(0, 4).map(tag => <span key={tag} className="hero-chip hero-chip-neutral">{tag}</span>)}
+            </div>
+          </div>
+          <button onClick={onClose} style={{
+            width: 34,
+            height: 34,
+            borderRadius: 999,
+            border: '1px solid var(--border)',
+            background: 'rgba(97,93,86,0.08)',
+            color: 'var(--text-dim)',
+            cursor: 'pointer',
+            fontSize: 16,
+            fontWeight: 700,
+          }}>×</button>
+        </div>
+
+        <div style={{
+          padding: '16px',
+          borderRadius: 20,
+          border: '1px solid var(--border)',
+          background: 'linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,241,236,0.96))',
+          boxShadow: 'var(--shadow-sm)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginBottom: 10 }}>
+            <div style={{ fontSize: 40, fontWeight: 800, color: scoreColor(selectedNode.score), lineHeight: 1 }}>{(selectedNode.score * 100).toFixed(0)}</div>
+            <div style={{ paddingBottom: 6 }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: 0.4, textTransform: 'uppercase' }}>Quality score</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>Current confidence in this skill’s network fit and maturity.</div>
+            </div>
+          </div>
+          <div className="score-track" style={{ height: 7, marginBottom: 12 }}>
+            <div className="score-fill" style={{ width: `${selectedNode.score * 100}%`, background: `linear-gradient(90deg, var(--blue), ${scoreColor(selectedNode.score)})` }} />
+          </div>
+          <div className="grid-2" style={{ gap: 10 }}>
+            <div style={{ padding: '12px 14px', borderRadius: 16, background: 'rgba(107,73,223,0.08)', border: '1px solid rgba(107,73,223,0.14)' }}>
+              <div style={{ fontSize: 10, color: 'var(--purple)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>Failures mapped</div>
+              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--purple)' }}>{selectedNode.failureCount}</div>
+            </div>
+            <div style={{ padding: '12px 14px', borderRadius: 16, background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.14)' }}>
+              <div style={{ fontSize: 10, color: 'var(--green)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>Last evolved</div>
+              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{selectedNode.lastEvolved ? new Date(selectedNode.lastEvolved).toLocaleDateString() : 'Not yet evolved'}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ padding: '18px', display: 'grid', gap: 18 }}>
+        {connectionGroups.length > 0 ? (
+          <div>
+            <div className="section-label">Connections</div>
+            <div style={{ display: 'grid', gap: 10 }}>
+              {connectionGroups.map(group => (
+                <div key={group.label} style={{ padding: '12px 14px', borderRadius: 18, background: 'rgba(255,255,255,0.74)', border: '1px solid var(--border)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>{group.label}</div>
+                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                    {group.ids.map(id => (
+                      <button
+                        key={`${group.label}-${id}`}
+                        onClick={() => onSelectSkill(id)}
+                        style={actionBtnStyle(
+                          group.tone === 'purple'
+                            ? 'var(--purple)'
+                            : group.tone === 'green'
+                              ? 'var(--green)'
+                              : group.tone === 'red'
+                                ? 'var(--red)'
+                                : 'var(--blue)'
+                        )}
+                      >
+                        {id}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        {selectedEvo.length > 0 ? (
+          <div>
+            <div className="section-label">Evolution record</div>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
+              <span className="hero-chip hero-chip-green">{acceptedCount} accepted</span>
+              {rejectedCount > 0 ? <span className="hero-chip hero-chip-red">{rejectedCount} rejected</span> : null}
+              <span className="hero-chip hero-chip-neutral">{selectedEvo.length} total revisions</span>
+            </div>
+            <div style={{ display: 'grid', gap: 8 }}>
+              {selectedEvo.map((entry, index) => (
+                <div key={`${entry.id}-${index}`} style={{
+                  padding: '12px 14px',
+                  borderRadius: 16,
+                  background: 'rgba(255,255,255,0.74)',
+                  border: `1px solid ${entry.outcome === 'accepted' ? 'rgba(16,185,129,0.18)' : 'rgba(239,68,68,0.18)'}`,
+                  boxShadow: 'var(--shadow-xs)',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', marginBottom: 6, flexWrap: 'wrap' }}>
+                    <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+                      <span className={`hero-chip hero-chip-${entry.outcome === 'accepted' ? 'green' : 'red'}`}>{entry.outcome}</span>
+                      <span className="hero-chip hero-chip-neutral">{entry.action}</span>
+                    </div>
+                    <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{new Date(entry.timestamp).toLocaleDateString()}</span>
+                  </div>
+                  <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: 8 }}>{entry.description}</div>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                    <span className="score-pill">T:{entry.task}</span>
+                    <span className="score-pill">A:{entry.align}</span>
+                    <span className="score-pill">S:{entry.sideEffect}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        <div>
+          <div className="section-label">Navigate</div>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            {view !== 'graph' ? <button onClick={() => onViewChange('graph')} style={actionBtnStyle('var(--blue)')}>◎ View in graph</button> : null}
+            {view !== 'general' ? <button onClick={() => onViewChange('general')} style={actionBtnStyle()}>▤ View in skills</button> : null}
+            {view !== 'coevolution' ? <button onClick={() => onViewChange('coevolution')} style={actionBtnStyle()}>↕ Co-evolution</button> : null}
+            {view !== 'projects' ? <button onClick={() => onViewChange('projects')} style={actionBtnStyle('var(--yellow)')}>◇ Project usage</button> : null}
+          </div>
+        </div>
+
+        <div>
+          <div className="section-label">Manage skill</div>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            <button onClick={onToggleEdit} style={actionBtnStyle(editing ? 'var(--purple)' : undefined)}>
+              {editing ? '✕ Cancel edit' : '✎ Edit content'}
+            </button>
+            <button onClick={() => void onPromote()} disabled={actionLoading} style={{ ...actionBtnStyle('var(--blue)'), opacity: actionLoading ? 0.7 : 1 }}>
+              ↑ Promote
+            </button>
+            <button onClick={() => void onDemote()} disabled={actionLoading} style={{ ...actionBtnStyle('var(--yellow)'), opacity: actionLoading ? 0.7 : 1 }}>
+              ↓ Demote
+            </button>
+            <button onClick={() => void onDelete()} disabled={actionLoading} style={{ ...actionBtnStyle('var(--red)'), opacity: actionLoading ? 0.7 : 1 }}>
+              ✕ Delete
+            </button>
+          </div>
+        </div>
+
+        {editing ? (
+          <div>
+            <div className="section-label">Edit skill content</div>
+            <textarea
+              value={editContent}
+              onChange={event => onEditContentChange(event.target.value)}
+              style={{
+                width: '100%',
+                height: 260,
+                fontFamily: 'var(--font-mono)',
+                fontSize: 11.5,
+                background: '#1e1e2e',
+                color: '#cdd6f4',
+                border: '1px solid var(--border)',
+                borderRadius: 14,
+                padding: 14,
+                resize: 'vertical',
+                lineHeight: 1.65,
+              }}
+            />
+            <button onClick={() => void onSave()} disabled={actionLoading} style={{ ...actionBtnStyle('var(--green)'), width: '100%', marginTop: 10, justifyContent: 'center', opacity: actionLoading ? 0.7 : 1 }}>
+              {actionLoading ? 'Saving changes…' : '✓ Save changes'}
+            </button>
+          </div>
+        ) : null}
+
+        {adaptation ? (
+          <div>
+            <div className="section-label">Network adaptation</div>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
+              <span className={`hero-chip hero-chip-${adaptation.status === 'ok' ? 'green' : adaptation.status === 'warning' ? 'yellow' : 'red'}`}>{adaptation.status}</span>
+              <span className="hero-chip hero-chip-neutral">post-change network response</span>
+            </div>
+            <div style={{ display: 'grid', gap: 8 }}>
+              {adaptation.messages.map((message, index) => (
+                <div key={`${message.type}-${index}`} style={{
+                  padding: '10px 12px',
+                  borderRadius: 14,
+                  border: `1px solid ${message.type === 'warning' ? 'var(--yellow-border)' : message.type === 'action' ? 'var(--red-border)' : 'var(--border)'}`,
+                  background: message.type === 'warning' ? 'var(--yellow-light)' : message.type === 'action' ? 'var(--red-light)' : 'rgba(255,255,255,0.72)',
+                  color: message.type === 'warning' ? 'var(--yellow)' : message.type === 'action' ? 'var(--red)' : 'var(--text-secondary)',
+                  fontSize: 12,
+                  lineHeight: 1.6,
+                }}>
+                  {message.type === 'warning' ? '⚠ ' : message.type === 'action' ? '⚡ ' : 'ℹ '}{message.text}
+                </div>
+              ))}
+            </div>
+            {adaptation.suggestions.length > 0 ? (
+              <div style={{ marginTop: 10, display: 'grid', gap: 6 }}>
+                {adaptation.suggestions.map((suggestion, index) => (
+                  <div key={`${suggestion.type}-${index}`} style={{
+                    padding: '10px 12px',
+                    borderRadius: 14,
+                    background: 'rgba(107,73,223,0.08)',
+                    border: '1px solid rgba(107,73,223,0.14)',
+                    fontSize: 11.5,
+                    color: 'var(--text-secondary)',
+                    lineHeight: 1.6,
+                  }}>
+                    <span className="badge badge-purple" style={{ marginRight: 8 }}>{suggestion.type}</span>
+                    {suggestion.description}
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {selectedContent && !editing ? (
+          <div>
+            <div className="section-label">Skill content</div>
+            <pre style={{
+              margin: 0,
+              padding: '14px',
+              borderRadius: 16,
+              border: '1px solid var(--border)',
+              background: 'rgba(255,255,255,0.72)',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              color: 'var(--text-secondary)',
+              lineHeight: 1.7,
+              maxHeight: 340,
+              overflow: 'auto',
+              fontSize: 11.5,
+            }}>
+              {selectedContent.slice(0, 2200)}
+            </pre>
+          </div>
+        ) : null}
       </div>
     </div>
   )