helixevo 0.2.27 → 0.2.28

package/dashboard/app/network/client.tsx

@@ -313,7 +313,7 @@ export default function NetworkClient({
           <button
             key={sv.key}
             className={`tab-item ${view === sv.key ? 'active' : ''}`}
-            onClick={() => { setView(sv.key); setSelectedSkill(null) }}
+            onClick={() => { setView(sv.key) }}
           >
             {sv.label}
           </button>
@@ -324,7 +324,7 @@ export default function NetworkClient({
       <div style={{ display: 'flex', gap: 0 }}>
         {/* Main content */}
         <div style={{ flex: 1, minWidth: 0 }}>
-          {view === 'graph' && <GraphView flowNodes={flowNodes} flowEdges={flowEdges} stats={stats} />}
+          {view === 'graph' && <GraphView flowNodes={flowNodes} flowEdges={flowEdges} stats={stats} onNodeClick={setSelectedSkill} />}
           {view === 'general' && (
             <GeneralView
               generalized={generalized} evolved={evolved} original={original}
@@ -339,6 +339,7 @@ export default function NetworkClient({
             <CoEvolutionView
               generalized={generalized} evolved={evolved} original={original}
               edges={graphEdges} evolutionBySkill={evolutionBySkill} projects={projects}
+              onSelect={setSelectedSkill}
             />
           )}
         </div>
@@ -386,20 +387,20 @@ export default function NetworkClient({
                   {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>)}
+                      {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 }}>{e.to}</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 }}>{id}</span>
+                        <span key={id} className="badge badge-green" style={{ marginRight: 3, cursor: 'pointer' }} onClick={() => setSelectedSkill(id)}>{id}</span>
                       )}
                     </div>
                   )}
@@ -407,7 +408,7 @@ export default function NetworkClient({
                     <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>
+                        <span key={id} className="badge badge-red" style={{ marginRight: 3, cursor: 'pointer' }} onClick={() => setSelectedSkill(id)}>{id}</span>
                       )}
                     </div>
                   )}
@@ -440,6 +441,28 @@ export default function NetworkClient({
               </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>
@@ -583,7 +606,7 @@ export default function NetworkClient({
 // SUB-VIEW: Graph
 // ═══════════════════════════════════════════════════════════════════
 
-function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdges: Edge[]; stats: Props['stats'] }) {
+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)' }}>
       <ReactFlow
@@ -591,6 +614,7 @@ function GraphView({ flowNodes, flowEdges, stats }: { flowNodes: Node[]; flowEdg
         edges={flowEdges}
         nodeTypes={nodeTypes}
         connectionLineType={ConnectionLineType.SmoothStep}
+        onNodeClick={(_event, node) => onNodeClick(node.id)}
         fitView
         fitViewOptions={{ padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
@@ -808,13 +832,24 @@ function ProjectsView({
                   </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>
+                  <button
+                    onClick={async () => {
+                      try {
+                        await fetch('/api/run', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ command: 'specialize', project: project.name }),
+                        })
+                      } catch {}
+                    }}
+                    style={{
+                      padding: '6px 14px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                      background: 'var(--green)', color: '#fff',
+                      fontSize: 11, fontWeight: 600,
+                    }}
+                  >
+                    Specialize for {project.name} →
+                  </button>
                 )}
               </div>
             </div>
@@ -869,10 +904,11 @@ function ProjectsView({
 // ═══════════════════════════════════════════════════════════════════
 
 function CoEvolutionView({
-  generalized, evolved, original, edges, evolutionBySkill, projects,
+  generalized, evolved, original, edges, evolutionBySkill, projects, onSelect,
 }: {
   generalized: SkillNode[]; evolved: SkillNode[]; original: SkillNode[]
   edges: GraphEdge[]; evolutionBySkill: Record<string, EvolutionEntry[]>; projects: ProjectData[]
+  onSelect: (id: string) => void
 }) {
   const allNodes = [...generalized, ...evolved, ...original]
 
@@ -924,7 +960,7 @@ function CoEvolutionView({
                       width: 8, height: 8, borderRadius: '50%',
                       background: 'var(--purple)', flexShrink: 0,
                     }} />
-                    <span style={{ fontWeight: 700, fontSize: 14 }}>{chain.parent.name}</span>
+                    <span onClick={() => onSelect(chain.parent.id)} style={{ fontWeight: 700, fontSize: 14, cursor: 'pointer' }}>{chain.parent.name}</span>
                     <span style={{ fontSize: 22, fontWeight: 800, color: scoreColor(chain.parent.score), marginLeft: 'auto' }}>
                       {(chain.parent.score * 100).toFixed(0)}
                     </span>
@@ -939,7 +975,7 @@ function CoEvolutionView({
                           padding: '6px 0',
                         }}>
                           <span style={{ fontSize: 10, color: 'var(--purple)' }}>↳</span>
-                          <span style={{ fontWeight: 500, fontSize: 13 }}>{child.name}</span>
+                          <span onClick={() => onSelect(child.id)} style={{ fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>{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)}
@@ -968,9 +1004,9 @@ function CoEvolutionView({
                   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 onClick={() => onSelect(pair.from.id)} style={{ fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>{pair.from.name}</span>
                   <span style={{ color: 'var(--green)', fontSize: 12 }}>↔</span>
-                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.to.name}</span>
+                  <span onClick={() => onSelect(pair.to.id)} style={{ fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>{pair.to.name}</span>
                   <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-dim)' }}>
                     strength: {(pair.strength * 100).toFixed(0)}%
                   </span>
@@ -991,9 +1027,9 @@ function CoEvolutionView({
                   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 onClick={() => onSelect(pair.from.id)} style={{ fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>{pair.from.name}</span>
                   <span style={{ color: 'var(--red)', fontSize: 12 }}>⚡</span>
-                  <span style={{ fontWeight: 500, fontSize: 13 }}>{pair.to.name}</span>
+                  <span onClick={() => onSelect(pair.to.id)} style={{ fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>{pair.to.name}</span>
                   <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-dim)' }}>
                     strength: {(pair.strength * 100).toFixed(0)}%
                   </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixevo",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "description": "Self-evolving skill ecosystem for AI agents. Skills and projects co-evolve through multi-judge evaluation and a Pareto frontier.",
   "type": "module",
   "bin": {