helixevo 0.2.26 → 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/dashboard/components/update-banner.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 
 const REGISTRY_URL = 'https://registry.npmjs.org/helixevo/latest'
-const CHECK_INTERVAL_MS = 60 * 60 * 1000 // re-check every hour
+const CHECK_INTERVAL_MS = 60 * 60 * 1000
 
 function compareVersions(current: string, latest: string): boolean {
   const c = current.split('.').map(Number)
@@ -15,7 +15,7 @@ function compareVersions(current: string, latest: string): boolean {
   return false
 }
 
-type UpdateState = 'idle' | 'updating' | 'success' | 'error'
+type UpdateState = 'idle' | 'updating' | 'installed' | 'error'
 
 export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [latestVersion, setLatestVersion] = useState<string | null>(null)
@@ -23,10 +23,10 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [state, setState] = useState<UpdateState>('idle')
   const [newVersion, setNewVersion] = useState<string | null>(null)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     let mounted = true
-
     async function check() {
       try {
         const res = await fetch(REGISTRY_URL)
@@ -37,7 +37,6 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         }
       } catch {}
     }
-
     check()
     const interval = setInterval(check, CHECK_INTERVAL_MS)
     return () => { mounted = false; clearInterval(interval) }
@@ -54,49 +53,35 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       const data = await res.json()
 
       if (data.success) {
-        setState('success')
+        setState('installed')
         setNewVersion(data.version)
-
-        // Tell server to restart, then wait and reload
-        try {
-          await fetch('/api/restart', { method: 'POST' })
-        } catch {}
-
-        // Wait for: shutdown (2s) + port release (2s) + restart + compile (~8s)
-        // Then try to reload, retrying if server isn't ready
-        await new Promise(r => setTimeout(r, 6000))
-
-        for (let attempt = 0; attempt < 20; attempt++) {
-          try {
-            const check = await fetch('/?_bust=' + Date.now(), { cache: 'no-store' })
-            if (check.ok) {
-              window.location.href = window.location.pathname + '?updated=' + Date.now()
-              return
-            }
-          } catch {}
-          await new Promise(r => setTimeout(r, 2000))
-        }
-
-        // Final fallback
-        window.location.href = window.location.pathname + '?updated=' + Date.now()
       } else {
         setState('error')
         setErrorMsg(data.error ?? 'Update failed')
       }
-    } catch (err) {
+    } catch {
       setState('error')
       setErrorMsg('Network error — try running: npm install -g helixevo@latest')
     }
   }
 
+  const restartCmd = 'helixevo dashboard'
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(restartCmd)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {}
+  }
+
   return (
     <div style={{
       position: 'fixed',
       bottom: 20,
       right: 20,
-      width: 320,
+      width: 340,
       background: 'var(--bg-card)',
-      border: `1px solid ${state === 'success' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
+      border: `1px solid ${state === 'installed' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
       borderRadius: 'var(--radius-lg)',
       boxShadow: 'var(--shadow-xl)',
       padding: '16px 18px',
@@ -123,7 +108,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
         <div style={{
           width: 28, height: 28, borderRadius: '50%',
-          background: state === 'success' ? 'var(--green-light)'
+          background: state === 'installed' ? 'var(--green-light)'
             : state === 'error' ? 'var(--red-light)'
             : 'var(--purple-light)',
           display: 'flex',
@@ -135,7 +120,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
               borderTopColor: 'var(--purple)', borderRadius: '50%',
               animation: 'updateSpin 0.8s linear infinite',
             }} />
-          ) : state === 'success' ? (
+          ) : state === 'installed' ? (
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--green)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M20 6L9 17l-5-5" />
             </svg>
@@ -151,21 +136,21 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         </div>
         <div>
           <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.2 }}>
-            {state === 'updating' ? 'Updating...'
-              : state === 'success' ? 'Updated!'
+            {state === 'updating' ? 'Installing...'
+              : state === 'installed' ? 'Installed!'
               : state === 'error' ? 'Update Failed'
               : 'Update Available'}
           </div>
           <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-            {state === 'success'
-              ? <>Now on <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{newVersion}</span> — restarting...</>
+            {state === 'installed'
+              ? <>v{newVersion} is ready</>
               : <>v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span></>
             }
           </div>
         </div>
       </div>
 
-      {/* Action area */}
+      {/* Idle — Update Now button */}
       {state === 'idle' && (
         <button
           onClick={handleUpdate}
@@ -183,18 +168,16 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
             alignItems: 'center',
             justifyContent: 'center',
             gap: 6,
-            transition: 'opacity 0.15s',
           }}
-          onMouseOver={e => (e.currentTarget.style.opacity = '0.9')}
-          onMouseOut={e => (e.currentTarget.style.opacity = '1')}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" />
+            <path d="M12 19V5m-7 7l7-7 7 7" />
           </svg>
           Update Now
         </button>
       )}
 
+      {/* Updating spinner */}
       {state === 'updating' && (
         <div style={{
           width: '100%',
@@ -209,21 +192,52 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         </div>
       )}
 
-      {state === 'success' && (
-        <div style={{
-          width: '100%',
-          padding: '9px 16px',
-          background: 'var(--green-light)',
-          borderRadius: 'var(--radius)',
-          fontSize: 12,
-          color: 'var(--green)',
-          textAlign: 'center',
-          fontWeight: 600,
-        }}>
-          Restarting dashboard...
+      {/* Installed — restart instructions */}
+      {state === 'installed' && (
+        <div>
+          <div style={{
+            padding: '10px 14px',
+            background: 'var(--green-light)',
+            borderRadius: 'var(--radius)',
+            fontSize: 12,
+            color: 'var(--green)',
+            fontWeight: 600,
+            marginBottom: 10,
+            textAlign: 'center',
+          }}>
+            v{newVersion} installed successfully
+          </div>
+          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 8, lineHeight: 1.5 }}>
+            Restart the dashboard to load the new version:
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
+              1. Press <kbd style={{ padding: '1px 5px', background: 'var(--bg-section)', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 10, border: '1px solid var(--border)' }}>Ctrl+C</kbd> in the terminal running the dashboard
+            </div>
+            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
+              2. Run:
+            </div>
+            <div
+              onClick={handleCopy}
+              style={{
+                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                padding: '7px 12px',
+                background: 'var(--bg-section)', border: '1px solid var(--border)',
+                borderRadius: 'var(--radius)',
+                fontFamily: 'var(--font-mono)', fontSize: 11,
+                color: 'var(--text)', cursor: 'pointer',
+              }}
+            >
+              <span>$ {restartCmd}</span>
+              <span style={{ fontSize: 10, color: copied ? 'var(--green)' : 'var(--purple)', fontWeight: 600, fontFamily: 'var(--font)' }}>
+                {copied ? 'Copied!' : 'Copy'}
+              </span>
+            </div>
+          </div>
         </div>
       )}
 
+      {/* Error */}
       {state === 'error' && (
         <>
           <div style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixevo",
-  "version": "0.2.26",
+  "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": {