helixevo 0.2.22 → 0.2.24

package/dashboard/app/page.tsx

@@ -1,26 +1,31 @@
-import { getDashboardSummary, loadFrontier, loadHistory, loadGraph, loadFailures } from '@/lib/data'
+import Link from 'next/link'
+import { getDashboardSummary, loadFrontier, loadHistory, loadGraph, loadFailures, listProjects } from '@/lib/data'
 import { OverviewActions } from '@/components/overview-actions'
 
 export const dynamic = 'force-dynamic'
 
-function StatCard({ value, label, color, sub, accent }: { value: string | number; label: string; color: string; sub?: string; accent?: string }) {
+function StatCard({ value, label, color, sub, accent, href }: {
+  value: string | number; label: string; color: string; sub?: string; accent?: string; href: string
+}) {
   return (
-    <div className="stat-card">
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-        <div>
-          <div className="stat-value" style={{ color }}>{value}</div>
-          <div className="stat-label">{label}</div>
-          {sub && <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div>}
+    <Link href={href} style={{ textDecoration: 'none', color: 'inherit' }}>
+      <div className="stat-card" style={{ cursor: 'pointer' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+          <div>
+            <div className="stat-value" style={{ color }}>{value}</div>
+            <div className="stat-label">{label}</div>
+            {sub && <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>{sub}</div>}
+          </div>
+          {accent && (
+            <div style={{
+              width: 36, height: 36, borderRadius: 10,
+              background: `${color}12`, display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color, fontSize: 16,
+            }}>{accent}</div>
+          )}
         </div>
-        {accent && (
-          <div style={{
-            width: 36, height: 36, borderRadius: 10,
-            background: `${color}12`, display: 'flex', alignItems: 'center', justifyContent: 'center',
-            color, fontSize: 16,
-          }}>{accent}</div>
-        )}
       </div>
-    </div>
+    </Link>
   )
 }
 
@@ -51,21 +56,23 @@ export default function Overview() {
           hasFailures={failures.length > 0}
           hasEdges={graph.edges.length > 0}
           unresolvedCount={s.failures.unresolved}
+          skillCount={graph.nodes.length}
+          projectList={listProjects()}
         />
       </div>
 
-      {/* Stats */}
+      {/* Stats — all clickable, linking to relevant pages */}
       <div className="grid-5" style={{ marginBottom: 28 }}>
-        <StatCard value={s.skills.total} label="Total Skills" color="var(--purple)" sub={`${s.skills.evolved} evolved`} accent="◆" />
-        <StatCard value={s.evolution.accepted} label="Accepted" color="var(--green)" sub={`${s.evolution.rejected} rejected`} accent="✓" />
-        <StatCard value={s.failures.unresolved} label="Unresolved" color="var(--yellow)" sub={`of ${s.failures.total} total`} accent="!" />
-        <StatCard value={s.buffer.discoveries} label="Discoveries" color="var(--blue)" sub={`${s.buffer.drafts} drafts`} accent="◎" />
-        <StatCard value={frontier.programs.length} label="Frontier" color="var(--text-secondary)" sub={`/${frontier.capacity} capacity`} accent="▲" />
+        <StatCard value={s.skills.total} label="Total Skills" color="var(--purple)" sub={`${s.skills.evolved} evolved`} accent="◆" href="/network" />
+        <StatCard value={s.evolution.accepted} label="Accepted" color="var(--green)" sub={`${s.evolution.rejected} rejected`} accent="✓" href="/evolution" />
+        <StatCard value={s.failures.unresolved} label="Unresolved" color="var(--yellow)" sub={`of ${s.failures.total} total`} accent="!" href="#unresolved" />
+        <StatCard value={s.buffer.discoveries} label="Discoveries" color="var(--blue)" sub={`${s.buffer.drafts} drafts`} accent="◎" href="/research" />
+        <StatCard value={frontier.programs.length} label="Frontier" color="var(--text-secondary)" sub={`/${frontier.capacity} capacity`} accent="▲" href="/frontier" />
       </div>
 
       {/* Unresolved Failures */}
       {failures.filter(f => !f.resolved).length > 0 && (
-        <div className="card" style={{ marginBottom: 20 }}>
+        <div id="unresolved" className="card" style={{ marginBottom: 20 }}>
           <div className="card-body">
             <div className="card-header-label">
               Unresolved Corrections ({failures.filter(f => !f.resolved).length})
@@ -108,98 +115,104 @@ export default function Overview() {
 
       <div className="grid-2">
         {/* Frontier */}
-        <div className="card">
-          <div className="card-body">
-            <div className="card-header-label">Pareto Frontier</div>
-            {frontier.programs.map((p, i) => (
-              <div key={`${p.id}-${i}`} style={{
-                padding: '12px 0',
-                borderBottom: i < frontier.programs.length - 1 ? '1px solid var(--border-subtle)' : 'none',
-              }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
-                  <span style={{ fontSize: 13, fontWeight: 600 }}>{p.id}</span>
-                  <span style={{
-                    fontSize: 20, fontWeight: 800, lineHeight: 1,
-                    color: p.score >= 0.8 ? 'var(--green)' : 'var(--yellow)',
-                  }}>
-                    {(p.score * 100).toFixed(0)}
-                  </span>
-                </div>
-                <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
-                  <span className="score-pill" style={{ color: 'var(--green)' }}>T:{(p.scores.taskCompletion * 10).toFixed(0)}</span>
-                  <span className="score-pill" style={{ color: 'var(--blue)' }}>A:{(p.scores.correctionAlignment * 10).toFixed(0)}</span>
-                  <span className="score-pill" style={{ color: 'var(--purple)' }}>S:{(p.scores.sideEffectFree * 10).toFixed(0)}</span>
-                </div>
-                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.4 }}>
-                  {p.changesDescription.slice(0, 80)}
+        <Link href="/frontier" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <div className="card" style={{ cursor: 'pointer', height: '100%' }}>
+            <div className="card-body">
+              <div className="card-header-label">Pareto Frontier</div>
+              {frontier.programs.map((p, i) => (
+                <div key={`${p.id}-${i}`} style={{
+                  padding: '12px 0',
+                  borderBottom: i < frontier.programs.length - 1 ? '1px solid var(--border-subtle)' : 'none',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600 }}>{p.id}</span>
+                    <span style={{
+                      fontSize: 20, fontWeight: 800, lineHeight: 1,
+                      color: p.score >= 0.8 ? 'var(--green)' : 'var(--yellow)',
+                    }}>
+                      {(p.score * 100).toFixed(0)}
+                    </span>
+                  </div>
+                  <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
+                    <span className="score-pill" style={{ color: 'var(--green)' }}>T:{(p.scores.taskCompletion * 10).toFixed(0)}</span>
+                    <span className="score-pill" style={{ color: 'var(--blue)' }}>A:{(p.scores.correctionAlignment * 10).toFixed(0)}</span>
+                    <span className="score-pill" style={{ color: 'var(--purple)' }}>S:{(p.scores.sideEffectFree * 10).toFixed(0)}</span>
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4, lineHeight: 1.4 }}>
+                    {p.changesDescription.slice(0, 80)}
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
-        </div>
+        </Link>
 
         {/* Recent Evolution */}
-        <div className="card">
-          <div className="card-body">
-            <div className="card-header-label">Recent Evolution</div>
-            {recent.map((iter, idx) => (
-              <div key={`${iter.id}-${idx}`} style={{
-                padding: '10px 0',
-                borderBottom: '1px solid var(--border-subtle)',
-              }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 8 }}>
-                  <span style={{ fontWeight: 600, color: 'var(--text)' }}>{iter.id}</span>
-                  <span style={{ color: 'var(--text-muted)' }}>{new Date(iter.timestamp).toLocaleDateString()}</span>
-                </div>
-                {iter.proposals.map(p => (
-                  <div key={p.id} style={{
-                    display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 4,
-                    padding: '4px 0',
-                  }}>
-                    <span style={{
-                      width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
-                      background: p.outcome === 'accepted' ? 'var(--green)' : 'var(--red)',
-                    }} />
-                    <span style={{ fontWeight: 500 }}>{p.targetSkill}</span>
-                    <span className="badge badge-gray" style={{ fontSize: 9 }}>{p.action}</span>
+        <Link href="/evolution" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <div className="card" style={{ cursor: 'pointer', height: '100%' }}>
+            <div className="card-body">
+              <div className="card-header-label">Recent Evolution</div>
+              {recent.map((iter, idx) => (
+                <div key={`${iter.id}-${idx}`} style={{
+                  padding: '10px 0',
+                  borderBottom: '1px solid var(--border-subtle)',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 8 }}>
+                    <span style={{ fontWeight: 600, color: 'var(--text)' }}>{iter.id}</span>
+                    <span style={{ color: 'var(--text-muted)' }}>{new Date(iter.timestamp).toLocaleDateString()}</span>
                   </div>
-                ))}
-              </div>
-            ))}
+                  {iter.proposals.map(p => (
+                    <div key={p.id} style={{
+                      display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 4,
+                      padding: '4px 0',
+                    }}>
+                      <span style={{
+                        width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
+                        background: p.outcome === 'accepted' ? 'var(--green)' : 'var(--red)',
+                      }} />
+                      <span style={{ fontWeight: 500 }}>{p.targetSkill}</span>
+                      <span className="badge badge-gray" style={{ fontSize: 9 }}>{p.action}</span>
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
+        </Link>
       </div>
 
       {/* All Skills Summary */}
-      <div className="card" style={{ marginTop: 16 }}>
-        <div className="card-body">
-          <div className="card-header-label">All Skills</div>
-          <div className="grid-2" style={{ gap: 6 }}>
-            {graph.nodes.sort((a, b) => b.score - a.score).map(n => (
-              <div key={n.id} style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '8px 12px', borderRadius: 8, background: 'var(--bg-section)',
-              }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-                  <span style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.name}</span>
-                  {n.generation > 0 && <span className="badge badge-green" style={{ fontSize: 9 }}>gen {n.generation}</span>}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 90, flexShrink: 0 }}>
-                  <div className="score-track" style={{ width: 50 }}>
-                    <div className="score-fill" style={{
-                      width: `${n.score * 100}%`,
-                      background: n.score >= 0.8 ? 'var(--green)' : n.score >= 0.6 ? 'var(--yellow)' : 'var(--red)',
-                    }} />
+      <Link href="/network" style={{ textDecoration: 'none', color: 'inherit' }}>
+        <div className="card" style={{ marginTop: 16, cursor: 'pointer' }}>
+          <div className="card-body">
+            <div className="card-header-label">All Skills</div>
+            <div className="grid-2" style={{ gap: 6 }}>
+              {graph.nodes.sort((a, b) => b.score - a.score).map(n => (
+                <div key={n.id} style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                  padding: '8px 12px', borderRadius: 8, background: 'var(--bg-section)',
+                }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                    <span style={{ fontSize: 13, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.name}</span>
+                    {n.generation > 0 && <span className="badge badge-green" style={{ fontSize: 9 }}>gen {n.generation}</span>}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 90, flexShrink: 0 }}>
+                    <div className="score-track" style={{ width: 50 }}>
+                      <div className="score-fill" style={{
+                        width: `${n.score * 100}%`,
+                        background: n.score >= 0.8 ? 'var(--green)' : n.score >= 0.6 ? 'var(--yellow)' : 'var(--red)',
+                      }} />
+                    </div>
+                    <span style={{ fontSize: 12, fontWeight: 600, color: n.score >= 0.8 ? 'var(--green)' : 'var(--yellow)' }}>
+                      {(n.score * 100).toFixed(0)}
+                    </span>
                   </div>
-                  <span style={{ fontSize: 12, fontWeight: 600, color: n.score >= 0.8 ? 'var(--green)' : 'var(--yellow)' }}>
-                    {(n.score * 100).toFixed(0)}
-                  </span>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         </div>
-      </div>
+      </Link>
     </div>
   )
 }

package/dashboard/app/research/client.tsx

@@ -0,0 +1,359 @@
+'use client'
+
+import { useState, useRef } from 'react'
+
+interface Discovery {
+  id: string; title: string; summary: string; score: number; gap: string; lastAccessed: string
+}
+
+interface Draft {
+  id: string; skillName: string; avgScore: number; passRate: number; iteration: number; hypothesis: string
+}
+
+interface KnowledgeBuffer {
+  discoveries: Discovery[]
+  drafts: Draft[]
+}
+
+interface Props {
+  buffer: KnowledgeBuffer
+  projects: string[]
+}
+
+type RunState = 'idle' | 'running' | 'success' | 'error' | 'stopped'
+
+const PIPELINE_STEPS = [
+  {
+    step: 1,
+    title: 'Identify Gaps',
+    desc: 'Analyze your existing skills and project context to find what capabilities are missing.',
+    icon: '🔍',
+    color: 'var(--blue)',
+    bgColor: 'var(--blue-light)',
+  },
+  {
+    step: 2,
+    title: 'Web Search',
+    desc: 'Search the web for the latest best practices, tools, and techniques to fill each gap.',
+    icon: '🌐',
+    color: 'var(--purple)',
+    bgColor: 'var(--purple-light)',
+  },
+  {
+    step: 3,
+    title: 'Draft Skills',
+    desc: 'Generate hypotheses and draft new SKILL.md files from the discoveries.',
+    icon: '📝',
+    color: 'var(--yellow)',
+    bgColor: 'var(--yellow-light)',
+  },
+  {
+    step: 4,
+    title: 'Test & Score',
+    desc: 'Test each draft against scenarios. Skills scoring ≥7/10 with ≥67% pass rate are accepted.',
+    icon: '✓',
+    color: 'var(--green)',
+    bgColor: 'var(--green-light)',
+  },
+]
+
+export default function ResearchClient({ buffer, projects }: Props) {
+  const [runState, setRunState] = useState<RunState>('idle')
+  const [output, setOutput] = useState<string | null>(null)
+  const abortRef = useRef<AbortController | null>(null)
+
+  const handleRun = async () => {
+    setRunState('running')
+    setOutput(null)
+    const controller = new AbortController()
+    abortRef.current = controller
+
+    try {
+      const res = await fetch('/api/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ command: 'research' }),
+        signal: controller.signal,
+      })
+      const data = await res.json()
+      if (data.stopped) {
+        setOutput(data.output ?? 'Stopped')
+        setRunState('stopped')
+      } else {
+        setOutput(data.output ?? data.error ?? 'No output')
+        setRunState(data.success ? 'success' : 'error')
+      }
+    } catch (err: unknown) {
+      if (err instanceof Error && err.name === 'AbortError') {
+        try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
+        setOutput('Stopped by user')
+        setRunState('stopped')
+      } else {
+        setOutput('Network error')
+        setRunState('error')
+      }
+    } finally {
+      abortRef.current = null
+    }
+  }
+
+  const handleStop = async () => {
+    if (abortRef.current) abortRef.current.abort()
+    try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
+  }
+
+  const nearPass = buffer.drafts.filter(d => d.passRate >= 0.67)
+
+  return (
+    <div>
+      <div className="page-header">
+        <h1 className="page-title">Proactive Research</h1>
+        <p className="page-desc">
+          Discover new skills by searching the web for techniques and best practices your skill set doesn&apos;t cover yet
+        </p>
+      </div>
+
+      {/* Pipeline Visualization */}
+      <div className="card" style={{ marginBottom: 24, padding: '20px 24px' }}>
+        <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 16 }}>
+          How Research Works
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
+          {PIPELINE_STEPS.map((step, i) => (
+            <div key={step.step} style={{ display: 'flex', alignItems: 'flex-start' }}>
+              <div style={{ flex: 1 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                  <div style={{
+                    width: 32, height: 32, borderRadius: 9,
+                    background: step.bgColor,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontSize: 14, flexShrink: 0,
+                  }}>
+                    {step.icon}
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 9, fontWeight: 600, color: step.color, letterSpacing: 0.5 }}>STEP {step.step}</div>
+                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{step.title}</div>
+                  </div>
+                </div>
+                <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5, paddingRight: 12 }}>
+                  {step.desc}
+                </div>
+              </div>
+              {i < 3 && (
+                <svg width="20" height="60" viewBox="0 0 20 60" style={{ flexShrink: 0, marginTop: 8 }}>
+                  <path d="M4 30h12M12 24l4 6-4 6" stroke="var(--border)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Run button */}
+        <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {runState === 'idle' && (
+              <button
+                onClick={handleRun}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 6,
+                  padding: '9px 20px',
+                  background: 'var(--teal, var(--green))',
+                  color: '#fff', border: 'none',
+                  borderRadius: 'var(--radius)',
+                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
+                  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 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Run Research
+              </button>
+            )}
+            {runState === 'running' && (
+              <button
+                onClick={handleStop}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 6,
+                  padding: '9px 20px',
+                  background: 'var(--red)', color: '#fff', border: 'none',
+                  borderRadius: 'var(--radius)',
+                  fontSize: 13, fontWeight: 600, cursor: 'pointer',
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none">
+                  <rect x="4" y="4" width="16" height="16" rx="2" />
+                </svg>
+                Stop Research
+              </button>
+            )}
+            {(runState === 'success' || runState === 'error' || runState === 'stopped') && (
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button onClick={handleRun} style={{
+                  padding: '8px 16px', background: 'var(--bg-section)', border: '1px solid var(--border)',
+                  borderRadius: 'var(--radius)', fontSize: 12, fontWeight: 600, cursor: 'pointer',
+                  color: 'var(--text-secondary)',
+                }}>
+                  Run Again
+                </button>
+                <button onClick={() => window.location.reload()} style={{
+                  padding: '8px 16px', background: 'var(--bg-section)', border: '1px solid var(--border)',
+                  borderRadius: 'var(--radius)', fontSize: 12, fontWeight: 600, cursor: 'pointer',
+                  color: 'var(--text-secondary)',
+                }}>
+                  Refresh Data
+                </button>
+              </div>
+            )}
+            <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+              {runState === 'running' && 'Searching the web and testing hypotheses...'}
+              {runState === 'success' && 'Research complete — refresh to see new discoveries'}
+              {runState === 'error' && 'Research failed — check output below'}
+              {runState === 'stopped' && 'Research stopped'}
+              {runState === 'idle' && 'Analyzes all your skills, searches for gaps, and drafts new skills'}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Output panel */}
+      {runState !== 'idle' && output && (
+        <div className="card" style={{ marginBottom: 24, overflow: 'hidden' }}>
+          <div style={{
+            padding: '10px 16px',
+            background: runState === 'success' ? 'var(--green-light)' : runState === 'error' ? 'var(--red-light)' : 'var(--bg-section)',
+            borderBottom: '1px solid var(--border)',
+            fontSize: 12, fontWeight: 600,
+            color: runState === 'success' ? 'var(--green)' : runState === 'error' ? 'var(--red)' : 'var(--text-secondary)',
+          }}>
+            {runState === 'running' && '● Running research pipeline...'}
+            {runState === 'success' && '✓ Research completed'}
+            {runState === 'error' && '✗ Research failed'}
+            {runState === 'stopped' && '■ Research stopped'}
+          </div>
+          <pre style={{
+            padding: '14px 16px', margin: 0,
+            fontSize: 11, lineHeight: 1.55,
+            fontFamily: 'var(--font-mono)',
+            color: 'var(--text-secondary)',
+            maxHeight: 300, overflow: 'auto',
+            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+          }}>
+            {output}
+          </pre>
+        </div>
+      )}
+
+      {/* Summary Stats */}
+      <div className="grid-3" style={{ marginBottom: 24 }}>
+        <div className="stat-card">
+          <div className="stat-value" style={{ color: 'var(--blue)' }}>{buffer.discoveries.length}</div>
+          <div className="stat-label">Discoveries</div>
+          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>of 50 capacity</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ color: 'var(--yellow)' }}>{buffer.drafts.length}</div>
+          <div className="stat-label">Drafts In Progress</div>
+          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>of 10 capacity</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ color: 'var(--green)' }}>{nearPass.length}</div>
+          <div className="stat-label">Near-Pass Drafts</div>
+          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>≥67% pass rate — close to becoming skills</div>
+        </div>
+      </div>
+
+      <div className="grid-2">
+        {/* Discoveries */}
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Discoveries ({buffer.discoveries.length}/50)</div>
+            {buffer.discoveries.length === 0 ? (
+              <div className="empty-state" style={{ padding: 32 }}>
+                <div className="empty-state-icon">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+                <div className="empty-state-title">No discoveries yet</div>
+                <div className="empty-state-desc">
+                  Click <strong>Run Research</strong> above to search the web for techniques your skills don&apos;t cover
+                </div>
+              </div>
+            ) : (
+              buffer.discoveries.sort((a, b) => b.score - a.score).map(d => (
+                <div key={d.id} style={{
+                  padding: '12px 0',
+                  borderBottom: '1px solid var(--border-subtle)',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{d.title}</span>
+                    <span className="score-pill" style={{ color: 'var(--blue)', flexShrink: 0, marginLeft: 8 }}>
+                      {(d.score * 100).toFixed(0)}%
+                    </span>
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 6 }}>
+                    {d.summary.slice(0, 140)}
+                  </div>
+                  <span className="badge badge-blue">{d.gap}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Drafts */}
+        <div className="card">
+          <div className="card-body">
+            <div className="card-header-label">Skill Drafts ({buffer.drafts.length}/10)</div>
+            {buffer.drafts.length === 0 ? (
+              <div className="empty-state" style={{ padding: 32 }}>
+                <div className="empty-state-icon">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                </div>
+                <div className="empty-state-title">No drafts yet</div>
+                <div className="empty-state-desc">
+                  Drafts are skill prototypes that almost passed quality checks. Running research again improves them iteratively.
+                </div>
+              </div>
+            ) : (
+              buffer.drafts.sort((a, b) => b.avgScore - a.avgScore).map(d => (
+                <div key={d.id} style={{
+                  padding: '12px 0',
+                  borderBottom: '1px solid var(--border-subtle)',
+                }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
+                    <span style={{ fontSize: 13, fontWeight: 600 }}>{d.skillName}</span>
+                    <span className={`badge ${d.avgScore >= 6 ? 'badge-green' : 'badge-yellow'}`}>
+                      {d.avgScore.toFixed(1)}/10 · iter {d.iteration}
+                    </span>
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 6 }}>
+                    {d.hypothesis.slice(0, 140)}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>Pass rate:</span>
+                    <div className="score-track" style={{ width: 60, height: 4 }}>
+                      <div className="score-fill" style={{
+                        width: `${d.passRate * 100}%`,
+                        background: d.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)',
+                      }} />
+                    </div>
+                    <b style={{ fontSize: 11, color: d.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)' }}>
+                      {(d.passRate * 100).toFixed(0)}%
+                    </b>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dashboard/app/research/page.tsx

@@ -1,124 +1,11 @@
-import { loadBuffer } from '@/lib/data'
+import { loadBuffer, listProjects } from '@/lib/data'
+import ResearchClient from './client'
 
 export const dynamic = 'force-dynamic'
 
 export default function ResearchPage() {
   const buffer = loadBuffer()
+  const projects = listProjects()
 
-  return (
-    <div>
-      <div className="page-header">
-        <h1 className="page-title">Proactive Research</h1>
-        <p className="page-desc">
-          Web search discoveries and skill drafts from the knowledge buffer
-        </p>
-      </div>
-
-      {/* Summary Stats */}
-      <div className="grid-3" style={{ marginBottom: 28 }}>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--blue)' }}>{buffer.discoveries.length}</div>
-          <div className="stat-label">Discoveries</div>
-          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>of 50 capacity</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--yellow)' }}>{buffer.drafts.length}</div>
-          <div className="stat-label">Drafts</div>
-          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>of 10 capacity</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--green)' }}>
-            {buffer.drafts.filter(d => d.passRate >= 0.67).length}
-          </div>
-          <div className="stat-label">Near-Pass Drafts</div>
-          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 2 }}>≥67% pass rate</div>
-        </div>
-      </div>
-
-      <div className="grid-2">
-        {/* Discoveries */}
-        <div className="card">
-          <div className="card-body">
-            <div className="card-header-label">Discoveries ({buffer.discoveries.length}/50)</div>
-            {buffer.discoveries.length === 0 ? (
-              <div className="empty-state" style={{ padding: 32 }}>
-                <div className="empty-state-icon">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-                    <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                </div>
-                <div className="empty-state-title">No discoveries yet</div>
-                <div className="empty-state-desc">Run <code>helixevo research</code> to start proactive web research</div>
-              </div>
-            ) : (
-              buffer.discoveries.sort((a, b) => b.score - a.score).map(d => (
-                <div key={d.id} style={{
-                  padding: '12px 0',
-                  borderBottom: '1px solid var(--border-subtle)',
-                }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
-                    <span style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{d.title}</span>
-                    <span className="score-pill" style={{ color: 'var(--blue)', flexShrink: 0, marginLeft: 8 }}>
-                      {(d.score * 100).toFixed(0)}%
-                    </span>
-                  </div>
-                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 6 }}>
-                    {d.summary.slice(0, 140)}
-                  </div>
-                  <span className="badge badge-blue">{d.gap}</span>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* Drafts */}
-        <div className="card">
-          <div className="card-body">
-            <div className="card-header-label">Drafts ({buffer.drafts.length}/10)</div>
-            {buffer.drafts.length === 0 ? (
-              <div className="empty-state" style={{ padding: 32 }}>
-                <div className="empty-state-icon">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-                    <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                  </svg>
-                </div>
-                <div className="empty-state-title">No drafts yet</div>
-                <div className="empty-state-desc">Near-pass proposals are automatically saved here for future iteration</div>
-              </div>
-            ) : (
-              buffer.drafts.sort((a, b) => b.avgScore - a.avgScore).map(d => (
-                <div key={d.id} style={{
-                  padding: '12px 0',
-                  borderBottom: '1px solid var(--border-subtle)',
-                }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
-                    <span style={{ fontSize: 13, fontWeight: 600 }}>{d.skillName}</span>
-                    <span className={`badge ${d.avgScore >= 6 ? 'badge-green' : 'badge-yellow'}`}>
-                      {d.avgScore.toFixed(1)}/10 · iter {d.iteration}
-                    </span>
-                  </div>
-                  <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 6 }}>
-                    {d.hypothesis.slice(0, 140)}
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>Pass rate:</span>
-                    <div className="score-track" style={{ width: 60, height: 4 }}>
-                      <div className="score-fill" style={{
-                        width: `${d.passRate * 100}%`,
-                        background: d.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)',
-                      }} />
-                    </div>
-                    <b style={{ fontSize: 11, color: d.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)' }}>
-                      {(d.passRate * 100).toFixed(0)}%
-                    </b>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+  return <ResearchClient buffer={buffer} projects={projects} />
 }

package/dashboard/components/overview-actions.tsx

@@ -7,77 +7,111 @@ interface OverviewActionsProps {
   hasSkills: boolean
   hasEdges: boolean
   unresolvedCount: number
+  skillCount: number
+  projectList: string[]
 }
 
-export function OverviewActions({ hasFailures, hasSkills, hasEdges, unresolvedCount }: OverviewActionsProps) {
+// Small inline SVG flow diagrams for each action
+function FlowDiagram({ steps, color }: { steps: string[]; color: string }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginTop: 8, marginBottom: 2, flexWrap: 'wrap', rowGap: 4 }}>
+      {steps.map((step, i) => (
+        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
+          <div style={{
+            fontSize: 9, fontWeight: 600, padding: '2px 6px',
+            background: i === steps.length - 1 ? `${color}18` : 'var(--bg-section)',
+            color: i === steps.length - 1 ? color : 'var(--text-dim)',
+            borderRadius: 4, whiteSpace: 'nowrap',
+            border: i === steps.length - 1 ? `1px solid ${color}30` : '1px solid var(--border-subtle)',
+          }}>
+            {step}
+          </div>
+          {i < steps.length - 1 && (
+            <span style={{ fontSize: 9, color: 'var(--text-muted)', padding: '0 2px' }}>&rarr;</span>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function OverviewActions({ hasFailures, hasSkills, hasEdges, unresolvedCount, skillCount, projectList }: OverviewActionsProps) {
   const actions = [
     {
       id: 'graph-rebuild',
       label: 'Organize Skills',
-      subtitle: 'Map how your skills relate to each other — finds dependencies, enhancements, and conflicts between them.',
+      subtitle: `Analyze ${skillCount} skills to discover how they relate — dependencies, enhancements, and conflicts.`,
       command: 'graph-rebuild',
       icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
       color: 'var(--purple)',
-      description: 'Use LLM to infer relationships between skills (depends, enhances, conflicts)',
+      description: 'Use LLM to infer relationships between skills',
       disabled: !hasSkills,
       disabledReason: 'No skills imported yet — run helixevo init first',
+      flowSteps: [`${skillCount} skills`, 'LLM analysis', 'Skill graph'],
     },
     {
       id: 'generalize',
       label: 'Generalize',
-      subtitle: 'Find common patterns across multiple skills and create higher-level abstract skills from them.',
+      subtitle: 'Find common patterns across your skills and create higher-level abstract skills.',
       command: 'generalize',
       icon: 'M5 10l7-7m0 0l7 7m-7-7v18',
       color: 'var(--blue)',
-      description: 'Detect patterns across skills and promote to abstract parent skills',
+      description: 'Promote cross-skill patterns to abstract parent skills',
       disabled: !hasSkills,
       disabledReason: 'No skills imported yet',
+      flowSteps: ['All skills', 'Pattern detection', 'Abstract skills'],
     },
     {
       id: 'evolve',
-      label: `Evolve${unresolvedCount > 0 ? ` (${unresolvedCount} pending)` : ''}`,
+      label: `Evolve${unresolvedCount > 0 ? ` (${unresolvedCount})` : ''}`,
       subtitle: hasFailures
-        ? `Improve skills based on ${unresolvedCount} correction${unresolvedCount !== 1 ? 's' : ''} you've made. Each correction teaches the system what went wrong.`
-        : 'Improve skills based on your corrections. Use Craft Agent normally — corrections are captured automatically.',
+        ? `Use ${unresolvedCount} correction${unresolvedCount !== 1 ? 's' : ''} to propose and test skill improvements.`
+        : 'Use your corrections to improve skills. Corrections are captured automatically when you use Craft Agent.',
       command: 'evolve',
       icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6',
       color: 'var(--green)',
-      description: 'Evolve skills based on captured failures',
+      description: 'Evolve skills based on captured corrections',
       disabled: !hasFailures,
-      disabledReason: 'No corrections captured yet — use Craft Agent normally, and when you correct its output, those corrections are captured automatically.',
+      disabledReason: 'No corrections yet — use Craft Agent normally. When you correct its output, those corrections are captured automatically.',
+      flowSteps: hasFailures
+        ? [`${unresolvedCount} corrections`, 'Propose changes', 'Judge & test', 'Apply']
+        : ['Corrections', 'Propose', 'Judge', 'Apply'],
     },
     {
       id: 'health',
       label: 'Health Check',
-      subtitle: 'Analyze your skill network for gaps, imbalances, and areas that need attention.',
+      subtitle: 'Assess your skill network for coverage gaps, cohesion issues, and imbalances.',
       command: 'health',
       icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
       color: 'var(--yellow)',
-      description: 'Assess network cohesion, coverage, balance, and cross-project transfer',
+      description: 'Assess network cohesion and coverage',
       disabled: !hasSkills,
       disabledReason: 'No skills imported yet',
+      flowSteps: ['Skill network', 'Coverage analysis', 'Health report'],
     },
     {
       id: 'graph-optimize',
-      label: 'Optimize',
-      subtitle: 'Find skills that should be merged, split, or flagged as conflicting with each other.',
+      label: 'Optimize Network',
+      subtitle: 'Find skills that should be merged, split, or that conflict with each other.',
       command: 'graph-optimize',
       icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
       color: 'var(--text-secondary)',
-      description: 'Detect merge/split/conflict opportunities in the skill network',
+      description: 'Detect merge/split opportunities',
       disabled: !hasEdges,
-      disabledReason: 'Run "Organize Skills" first to build relationships between skills.',
+      disabledReason: 'Run "Organize Skills" first to discover relationships between skills.',
+      flowSteps: ['Relationships', 'Detect overlaps', 'Merge/split/flag'],
     },
     {
       id: 'research',
-      label: 'Research',
-      subtitle: 'Search the web for new techniques and best practices, then draft new skills from discoveries.',
+      label: 'Discover New Skills',
+      subtitle: `Search the web for techniques your ${skillCount} skills don't cover yet, then draft new skills.`,
       command: 'research',
       icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
       color: 'var(--purple)',
-      description: 'Proactive web research to discover new skill opportunities',
+      description: 'Proactive web research → discover → draft → test',
+      flowSteps: ['Find gaps', 'Web search', 'Draft skills', 'Test & score'],
     },
   ]
 
-  return <QuickActions actions={actions} />
+  return <QuickActions actions={actions} flowDiagram={FlowDiagram} />
 }

package/dashboard/components/quick-actions.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useState, useRef, type ReactNode, type ComponentType } from 'react'
 
 interface Action {
   id: string
@@ -12,15 +12,17 @@ interface Action {
   description: string
   disabled?: boolean
   disabledReason?: string
+  flowSteps?: string[]
 }
 
 interface QuickActionsProps {
   actions: Action[]
+  flowDiagram?: ComponentType<{ steps: string[]; color: string }>
 }
 
 type RunState = 'idle' | 'running' | 'success' | 'error' | 'stopped'
 
-export function QuickActions({ actions }: QuickActionsProps) {
+export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActionsProps) {
   const [running, setRunning] = useState<string | null>(null)
   const [state, setState] = useState<RunState>('idle')
   const [output, setOutput] = useState<string | null>(null)
@@ -52,7 +54,6 @@ export function QuickActions({ actions }: QuickActionsProps) {
       }
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') {
-        // Client-side abort — also kill server-side process
         try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
         setOutput('Stopped by user')
         setState('stopped')
@@ -66,14 +67,8 @@ export function QuickActions({ actions }: QuickActionsProps) {
   }
 
   const handleStop = async () => {
-    // Abort the fetch request
-    if (abortRef.current) {
-      abortRef.current.abort()
-    }
-    // Also kill server-side process
-    try {
-      await fetch('/api/run', { method: 'DELETE' })
-    } catch {}
+    if (abortRef.current) abortRef.current.abort()
+    try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
   }
 
   const handleClose = () => {
@@ -99,7 +94,7 @@ export function QuickActions({ actions }: QuickActionsProps) {
 
   return (
     <>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 10 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 10 }}>
         {actions.map(action => (
           <button
             key={action.id}
@@ -107,45 +102,60 @@ export function QuickActions({ actions }: QuickActionsProps) {
             disabled={action.disabled || (running !== null && running !== action.id)}
             title={action.disabled ? action.disabledReason : action.description}
             style={{
-              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
-              padding: '12px 14px',
+              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4,
+              padding: '14px 16px',
               background: action.disabled ? 'var(--bg-section)' : 'var(--bg-card)',
               border: `1px solid ${running === action.id && state === 'running' ? action.color : 'var(--border)'}`,
-              borderRadius: 'var(--radius)',
+              borderRadius: 'var(--radius-lg)',
               fontSize: 12,
               fontWeight: 600,
               color: action.disabled ? 'var(--text-muted)' : 'var(--text-secondary)',
               cursor: action.disabled ? 'not-allowed' : 'pointer',
-              opacity: (running !== null && running !== action.id) ? 0.5 : 1,
-              transition: 'all 0.15s',
+              opacity: (running !== null && running !== action.id) ? 0.4 : 1,
+              transition: 'all 0.2s',
               textAlign: 'left',
             }}
           >
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%' }}>
+            {/* Header: icon + label */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 7, width: '100%' }}>
               {running === action.id && state === 'running' ? (
                 <span style={{
-                  width: 14, height: 14, border: '2px solid var(--border)',
+                  width: 16, height: 16, border: '2px solid var(--border)',
                   borderTopColor: action.color, borderRadius: '50%',
                   animation: 'actionSpin 0.8s linear infinite',
                   flexShrink: 0,
                 }} />
               ) : (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
-                  stroke={action.disabled ? 'var(--text-muted)' : action.color}
-                  strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d={action.icon} />
-                </svg>
+                <div style={{
+                  width: 26, height: 26, borderRadius: 7, flexShrink: 0,
+                  background: action.disabled ? 'var(--bg-hover)' : `${action.color}12`,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
+                    stroke={action.disabled ? 'var(--text-muted)' : action.color}
+                    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d={action.icon} />
+                  </svg>
+                </div>
               )}
-              {action.label}
+              <span style={{ fontSize: 13 }}>{action.label}</span>
             </div>
+
+            {/* Subtitle */}
             {action.subtitle && (
               <div style={{
                 fontSize: 11, fontWeight: 400, lineHeight: 1.45,
                 color: action.disabled ? 'var(--text-muted)' : 'var(--text-dim)',
+                marginTop: 2,
               }}>
                 {action.disabled ? action.disabledReason : action.subtitle}
               </div>
             )}
+
+            {/* Flow diagram */}
+            {FlowDiagram && action.flowSteps && !action.disabled && (
+              <FlowDiagram steps={action.flowSteps} color={action.color} />
+            )}
           </button>
         ))}
       </div>
@@ -153,13 +163,12 @@ export function QuickActions({ actions }: QuickActionsProps) {
       {/* Output panel */}
       {running && state !== 'idle' && (
         <div style={{
-          marginTop: 12,
+          marginTop: 14,
           background: 'var(--bg-card)',
           border: `1px solid ${stateBorderColor}`,
           borderRadius: 'var(--radius-lg)',
           overflow: 'hidden',
         }}>
-          {/* Header */}
           <div style={{
             display: 'flex', justifyContent: 'space-between', alignItems: 'center',
             padding: '10px 14px',
@@ -218,18 +227,13 @@ export function QuickActions({ actions }: QuickActionsProps) {
             </div>
           </div>
 
-          {/* Output */}
           <pre style={{
-            padding: '12px 14px',
-            margin: 0,
-            fontSize: 11,
-            lineHeight: 1.5,
+            padding: '12px 14px', margin: 0,
+            fontSize: 11, lineHeight: 1.5,
             fontFamily: 'var(--font-mono)',
             color: 'var(--text-secondary)',
-            maxHeight: 400,
-            overflow: 'auto',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
+            maxHeight: 400, overflow: 'auto',
+            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
           }}>
             {output ?? 'Waiting for output...'}
           </pre>

package/package.json

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