helixevo 0.2.38 → 0.2.40

package/dashboard/app/network/page.tsx

@@ -19,7 +19,17 @@ export default function SkillNetworkPage() {
   )
 
   // Build evolution history per skill
-  const evolutionBySkill = {}
+  const evolutionBySkill: Record<string, Array<{
+    id: string
+    timestamp: string
+    action: string
+    description: string
+    outcome: string
+    outcomeReason: string
+    task: number
+    align: number
+    sideEffect: number
+  }>> = {}
   for (const iter of history.iterations) {
     for (const p of iter.proposals) {
       if (!evolutionBySkill[p.targetSkill]) evolutionBySkill[p.targetSkill] = []
@@ -33,7 +43,7 @@ export default function SkillNetworkPage() {
   }
 
   // Load skill contents
-  const skillContents = {}
+  const skillContents: Record<string, string> = {}
   for (const n of graph.nodes) {
     const raw = loadSkillContent(n.id)
     if (raw) skillContents[n.id] = raw.match(/^---\n[\s\S]*?\n---\n([\s\S]*)$/)?.[1]?.trim() ?? raw

package/dashboard/app/page.tsx

@@ -1,230 +1,211 @@
 import Link from 'next/link'
-import { getDashboardSummary, loadFrontier, loadHistory, loadGraph, loadFailures, listProjects } from '@/lib/data'
+import { getDashboardSummary, loadFailures, loadFrontier, loadGraph, loadHistory, listProjects } from '@/lib/data'
 import { OverviewActions } from '@/components/overview-actions'
+import { PageHero } from '@/components/page-hero'
+import { MetricCard } from '@/components/metric-card'
+import { SectionFrame } from '@/components/section-frame'
 
 export const dynamic = 'force-dynamic'
 
-function StatCard({ value, label, color, sub, accent, href }: {
-  value: string | number; label: string; color: string; sub?: string; accent?: string; href: string
-}) {
-  return (
-    <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>
-      </div>
-    </Link>
-  )
+function scoreColor(score: number) {
+  if (score >= 0.8) return 'var(--green)'
+  if (score >= 0.6) return 'var(--yellow)'
+  return 'var(--red)'
 }
 
 export default function Overview() {
-  const s = getDashboardSummary()
+  const summary = getDashboardSummary()
   const frontier = loadFrontier()
   const history = loadHistory()
   const graph = loadGraph()
   const failures = loadFailures()
-  const recent = history.iterations.slice(-5).reverse()
+  const unresolved = failures.filter((failure) => !failure.resolved)
+  const recentRuns = history.iterations.slice(-4).reverse()
+  const topSkills = [...graph.nodes].sort((a, b) => b.score - a.score).slice(0, 10)
 
   return (
-    <div>
-      <div className="page-header">
-        <h1 className="page-title">Dashboard</h1>
-        <p className="page-desc">
-          Overview of your self-evolving skill ecosystem
-        </p>
-      </div>
+    <div className="overview-grid">
+      <PageHero
+        eyebrow="System cockpit"
+        title="Dashboard"
+        description="Monitor the live state of your self-evolving skill ecosystem, launch high-value actions, and trace how failures turn into frontier-worthy improvements."
+        chips={[
+          { label: `${summary.skills.total} skills`, tone: 'purple' },
+          { label: `${summary.failures.unresolved} unresolved corrections`, tone: summary.failures.unresolved > 0 ? 'yellow' : 'green' },
+          { label: `${summary.evolution.runs} evolution runs`, tone: 'blue' },
+          { label: `${frontier.programs.length}/${frontier.capacity} frontier slots`, tone: 'green' },
+        ]}
+        actions={
+          <Link href="/projects" className="metric-card-anchor" style={{ minWidth: 240, display: 'block' }}>
+            <div className="metric-card metric-card-green metric-card-link">
+              <div className="metric-card-header">
+                <div>
+                  <div className="metric-card-label">Next workflow</div>
+                  <div className="metric-card-value" style={{ fontSize: 24 }}>Setup a project</div>
+                </div>
+                <div className="metric-card-icon">↗</div>
+              </div>
+              <div className="metric-card-sublabel">Analyze a folder or GitHub repo, match skills, and identify capability gaps.</div>
+            </div>
+          </Link>
+        }
+      />
 
-      {/* Setup New Project */}
-      <Link href="/projects" style={{ textDecoration: 'none', color: 'inherit' }}>
-        <div className="card" style={{ marginBottom: 12, padding: '12px 18px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10, borderLeft: '3px solid var(--green)' }}>
-          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--green-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, flexShrink: 0 }}>📁</div>
-          <div style={{ flex: 1 }}>
-            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>Setup New Project</div>
-            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Analyze a folder or GitHub repo to match skills and find gaps</div>
-          </div>
-          <span style={{ fontSize: 16, color: 'var(--text-muted)' }}>&rarr;</span>
-        </div>
-      </Link>
+      <div className="grid-5">
+        <MetricCard label="Total skills" value={summary.skills.total} sublabel={`${summary.skills.evolved} evolved • ${summary.skillTests} skill tests`} tone="purple" href="/network" icon="◆" />
+        <MetricCard label="Accepted proposals" value={summary.evolution.accepted} sublabel={`${summary.evolution.rejected} rejected`} tone="green" href="/evolution" icon="✓" />
+        <MetricCard label="Unresolved corrections" value={summary.failures.unresolved} sublabel={`out of ${summary.failures.total} captured failures`} tone={summary.failures.unresolved > 0 ? 'yellow' : 'green'} href={summary.failures.unresolved > 0 ? '#attention' : '/evolution'} icon="!" />
+        <MetricCard label="Discoveries" value={summary.buffer.discoveries} sublabel={`${summary.buffer.drafts} drafts in progress`} tone="blue" href="/research" icon="◎" />
+        <MetricCard label="Frontier candidates" value={frontier.programs.length} sublabel={`${summary.canaries} active canaries`} tone="neutral" href="/frontier" icon="▲" />
+      </div>
 
-      {/* Quick Actions */}
-      <div className="card" style={{ marginBottom: 20, padding: '14px 18px' }}>
-        <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 10 }}>
-          Quick Actions
-        </div>
+      <SectionFrame
+        eyebrow="Execution layer"
+        title="Quick actions"
+        description="Run the highest-leverage HelixEvo workflows from one place. Each action flows from signal to judgment to applied change."
+      >
         <OverviewActions
           hasSkills={graph.nodes.length > 0}
           hasFailures={failures.length > 0}
           hasEdges={graph.edges.length > 0}
-          unresolvedCount={s.failures.unresolved}
+          unresolvedCount={summary.failures.unresolved}
           skillCount={graph.nodes.length}
           projectList={listProjects()}
         />
-      </div>
-
-      {/* 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="◆" 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>
+      </SectionFrame>
 
-      {/* Unresolved Failures */}
-      {failures.filter(f => !f.resolved).length > 0 && (
-        <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})
-            </div>
-            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 14, lineHeight: 1.5 }}>
-              These are corrections you made that haven&apos;t been incorporated into skills yet.
-              Click <strong style={{ color: 'var(--text)' }}>Evolve</strong> above to improve skills based on these corrections.
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {failures.filter(f => !f.resolved).slice(0, 5).map((f, i) => (
-                <div key={`${f.id}-${i}`} style={{
-                  padding: '10px 14px', borderRadius: 'var(--radius)',
-                  background: 'var(--bg-section)',
-                  borderLeft: '3px solid var(--yellow)',
-                }}>
-                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)', marginBottom: 3 }}>
-                    {f.userRequest.slice(0, 100)}{f.userRequest.length > 100 ? '...' : ''}
+      {unresolved.length > 0 ? (
+        <SectionFrame
+          eyebrow="Attention"
+          title="Unresolved corrections"
+          description="These user corrections have been captured but not yet folded back into the skill network."
+          tone="yellow"
+          className="anchor-target"
+        >
+          <div id="attention" className="signal-list">
+            {unresolved.slice(0, 5).map((failure, index) => (
+              <div key={`${failure.id}-${index}`} className="signal-row signal-row-attention">
+                <div className="signal-dot" />
+                <div style={{ flex: 1 }}>
+                  <div className="signal-title">
+                    {failure.userRequest.slice(0, 120)}
+                    {failure.userRequest.length > 120 ? '…' : ''}
                   </div>
-                  <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.4 }}>
-                    Correction: {f.correction.slice(0, 120)}{f.correction.length > 120 ? '...' : ''}
+                  <div className="signal-text">
+                    Correction: {failure.correction.slice(0, 180)}
+                    {failure.correction.length > 180 ? '…' : ''}
                   </div>
-                  <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
-                    <span className="badge badge-yellow">{f.correctionType}</span>
-                    {f.project && <span className="badge badge-gray">{f.project}</span>}
-                    <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>
-                      {new Date(f.timestamp).toLocaleDateString()}
-                    </span>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
+                    <span className="badge badge-yellow">{failure.correctionType}</span>
+                    {failure.project ? <span className="badge badge-gray">{failure.project}</span> : null}
+                    <span className="badge badge-gray">{new Date(failure.timestamp).toLocaleDateString()}</span>
                   </div>
                 </div>
-              ))}
-              {failures.filter(f => !f.resolved).length > 5 && (
-                <div style={{ fontSize: 11, color: 'var(--text-muted)', textAlign: 'center', padding: '6px 0' }}>
-                  +{failures.filter(f => !f.resolved).length - 5} more corrections
-                </div>
-              )}
-            </div>
+              </div>
+            ))}
+            {unresolved.length > 5 ? (
+              <div className="signal-text" style={{ textAlign: 'center' }}>+{unresolved.length - 5} more unresolved corrections</div>
+            ) : null}
           </div>
-        </div>
-      )}
+        </SectionFrame>
+      ) : null}
 
       <div className="grid-2">
-        {/* Frontier */}
-        <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)}
+        <SectionFrame
+          eyebrow="Frontier"
+          title="Current leaders"
+          description="Top-performing configurations ranked by composite strength across task completion, correction alignment, and side-effect safety."
+          actions={<Link href="/frontier" className="badge badge-gray">Open frontier</Link>}
+        >
+          <div className="summary-list">
+            {frontier.programs.map((program, index) => (
+              <Link key={`${program.id}-${index}`} href="/frontier" className="summary-row">
+                <div className="summary-row-main">
+                  <div className="summary-row-title">{program.id}</div>
+                  <div className="summary-row-meta">{program.changesDescription.slice(0, 90)}{program.changesDescription.length > 90 ? '…' : ''}</div>
+                  <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
+                    <span className="score-pill" style={{ color: 'var(--green)' }}>T {(program.scores.taskCompletion * 10).toFixed(0)}</span>
+                    <span className="score-pill" style={{ color: 'var(--blue)' }}>A {(program.scores.correctionAlignment * 10).toFixed(0)}</span>
+                    <span className="score-pill" style={{ color: 'var(--purple)' }}>S {(program.scores.sideEffectFree * 10).toFixed(0)}</span>
                   </div>
                 </div>
-              ))}
-            </div>
+                <div style={{ fontSize: 26, fontWeight: 850, color: scoreColor(program.score), lineHeight: 1 }}>
+                  {(program.score * 100).toFixed(0)}
+                </div>
+              </Link>
+            ))}
+            {frontier.programs.length === 0 ? (
+              <div className="empty-state" style={{ padding: 24 }}>
+                <div className="empty-state-title">Frontier is empty</div>
+                <div className="empty-state-desc">Run <code>helixevo evolve</code> to populate candidate configurations.</div>
+              </div>
+            ) : null}
           </div>
-        </Link>
+        </SectionFrame>
 
-        {/* Recent Evolution */}
-        <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>
+        <SectionFrame
+          eyebrow="Evolution"
+          title="Recent runs"
+          description="A compact chronicle of the latest evolution loops and the proposals they generated."
+          actions={<Link href="/evolution" className="badge badge-gray">Open timeline</Link>}
+        >
+          <div className="summary-list">
+            {recentRuns.map((iteration, index) => (
+              <Link key={`${iteration.id}-${index}`} href="/evolution" className="summary-row" style={{ alignItems: 'flex-start' }}>
+                <div className="summary-row-main">
+                  <div className="summary-row-title">{iteration.id}</div>
+                  <div className="summary-row-meta">
+                    {new Date(iteration.timestamp).toLocaleDateString()} • {iteration.trigger} • {iteration.failureCount} failures
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
+                    {iteration.proposals.slice(0, 3).map((proposal) => (
+                      <div key={proposal.id} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <span style={{ width: 8, height: 8, borderRadius: 999, background: proposal.outcome === 'accepted' ? 'var(--green)' : 'var(--red)', flexShrink: 0 }} />
+                        <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--text)' }}>{proposal.targetSkill}</span>
+                        <span className="badge badge-gray">{proposal.action}</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>
+              </Link>
+            ))}
+            {recentRuns.length === 0 ? (
+              <div className="empty-state" style={{ padding: 24 }}>
+                <div className="empty-state-title">No evolution runs yet</div>
+                <div className="empty-state-desc">Start with <code>helixevo evolve</code> to create your first chronicle entry.</div>
+              </div>
+            ) : null}
           </div>
-        </Link>
+        </SectionFrame>
       </div>
 
-      {/* All Skills Summary */}
-      <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>
+      <SectionFrame
+        eyebrow="Network health"
+        title="Top skill signals"
+        description="Highest-scoring skills right now, ordered by current quality score and generation."
+        actions={<Link href="/network" className="badge badge-gray">Open skill network</Link>}
+      >
+        <div className="skill-score-grid">
+          {topSkills.map((skill) => (
+            <Link key={skill.id} href="/network" className="skill-score-row">
+              <div className="skill-score-main">
+                <div className="skill-score-name">
+                  <span>{skill.name}</span>
+                  {skill.generation > 0 ? <span className="badge badge-green">gen {skill.generation}</span> : null}
                 </div>
-              ))}
-            </div>
-          </div>
+              </div>
+              <div className="skill-score-value">
+                <div className="score-track" style={{ width: 72 }}>
+                  <div className="score-fill" style={{ width: `${skill.score * 100}%`, background: scoreColor(skill.score) }} />
+                </div>
+                <span style={{ minWidth: 34, textAlign: 'right', fontWeight: 800, color: scoreColor(skill.score) }}>
+                  {(skill.score * 100).toFixed(0)}
+                </span>
+              </div>
+            </Link>
+          ))}
         </div>
-      </Link>
+      </SectionFrame>
     </div>
   )
 }