helixevo 0.2.39 → 0.2.41

package/dashboard/app/evolution/page.tsx

@@ -1,128 +1,131 @@
 import { loadHistory } from '@/lib/data'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
 
 export const dynamic = 'force-dynamic'
 
 export default function EvolutionPage() {
   const history = loadHistory()
   const iterations = [...history.iterations].reverse()
-  const total = iterations.flatMap(i => i.proposals)
-  const accepted = total.filter(p => p.outcome === 'accepted').length
-  const rejected = total.filter(p => p.outcome === 'rejected').length
+  const totalProposals = iterations.flatMap((iteration) => iteration.proposals)
+  const accepted = totalProposals.filter((proposal) => proposal.outcome === 'accepted').length
+  const rejected = totalProposals.filter((proposal) => proposal.outcome === 'rejected').length
+  const avgAcceptance = totalProposals.length > 0 ? Math.round((accepted / totalProposals.length) * 100) : 0
 
   return (
-    <div>
-      <div className="page-header">
-        <h1 className="page-title">Evolution Timeline</h1>
-        <p className="page-desc">
-          {iterations.length} runs · {accepted} accepted · {rejected} rejected
-        </p>
-      </div>
+    <div style={{ display: 'grid', gap: 22 }}>
+      <PageHero
+        eyebrow="Run chronicle"
+        title="Evolution Timeline"
+        description="Trace each evolution loop from trigger to proposal outcome, with judge scores, regression pressure, and the logic behind what made it into the network."
+        chips={[
+          { label: `${iterations.length} runs`, tone: 'purple' },
+          { label: `${accepted} accepted`, tone: 'green' },
+          { label: `${rejected} rejected`, tone: 'red' },
+          { label: `${avgAcceptance}% acceptance rate`, tone: 'blue' },
+        ]}
+      />
 
-      {/* Summary Stats */}
-      <div className="grid-3" style={{ marginBottom: 28 }}>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--purple)' }}>{iterations.length}</div>
-          <div className="stat-label">Evolution Runs</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--green)' }}>{accepted}</div>
-          <div className="stat-label">Proposals Accepted</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: 'var(--red)' }}>{rejected}</div>
-          <div className="stat-label">Proposals Rejected</div>
-        </div>
+      <div className="grid-4">
+        <MetricCard label="Runs" value={iterations.length} sublabel="Completed evolution loops" tone="purple" icon="◎" />
+        <MetricCard label="Accepted" value={accepted} sublabel="Promotions that survived judging" tone="green" icon="✓" />
+        <MetricCard label="Rejected" value={rejected} sublabel="Proposals blocked by quality gates" tone="red" icon="✕" />
+        <MetricCard label="Acceptance rate" value={`${avgAcceptance}%`} sublabel="Across all recorded proposals" tone="blue" icon="↗" />
       </div>
 
-      {/* Timeline */}
-      <div style={{ paddingLeft: 20, position: 'relative' }}>
-        <div style={{ position: 'absolute', left: 9, top: 0, bottom: 0, width: 2, background: 'var(--border)' }} />
-
-        {iterations.map((iter, idx) => (
-          <div key={`${iter.id}-${idx}`} style={{ position: 'relative', marginBottom: 24, paddingLeft: 28 }}>
-            {/* Timeline dot */}
-            <div style={{
-              position: 'absolute', left: -1, top: 4, width: 14, height: 14,
-              borderRadius: '50%', background: 'var(--purple)', border: '3px solid var(--bg)',
-              boxShadow: '0 0 0 2px var(--purple-light)',
-            }} />
-
-            {/* Run Header */}
-            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
-              <span style={{ fontSize: 15, fontWeight: 700 }}>{iter.id}</span>
-              <span style={{ fontSize: 12, color: 'var(--text-dim)' }}>
-                {new Date(iter.timestamp).toLocaleString()} · {iter.trigger} · {iter.failureCount} failures
-              </span>
-            </div>
-
-            {/* Clusters */}
-            {iter.failureClusters.length > 0 && (
-              <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
-                {iter.failureClusters.map((c, i) => (
-                  <span key={i} className="badge badge-blue">{c.type} ({c.count})</span>
-                ))}
-              </div>
-            )}
-
-            {/* Proposals */}
-            {iter.proposals.map(p => (
-              <div key={p.id} className="proposal-card" style={{
-                borderLeft: `3px solid ${p.outcome === 'accepted' ? 'var(--green)' : 'var(--red)'}`,
-              }}>
-                <div style={{ padding: '12px 16px' }}>
-                  {/* Proposal Header */}
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                      <span className={`badge ${p.outcome === 'accepted' ? 'badge-green' : 'badge-red'}`}>
-                        {p.outcome}
-                      </span>
-                      <span style={{ fontSize: 14, fontWeight: 600 }}>{p.targetSkill}</span>
-                      <span className="badge badge-gray">{p.action}</span>
+      <SectionFrame
+        eyebrow="Timeline"
+        title="Recent evolution runs"
+        description="Each run groups the trigger context, clustered failures, and proposal outcomes into a compact chronicle block."
+      >
+        {iterations.length === 0 ? (
+          <div className="empty-state" style={{ padding: 24 }}>
+            <div className="empty-state-title">No evolution runs yet</div>
+            <div className="empty-state-desc">Run <code>helixevo evolve</code> to start the evolution loop.</div>
+          </div>
+        ) : (
+          <div className="chronicle-list">
+            {iterations.map((iteration, index) => (
+              <div key={`${iteration.id}-${index}`} className="chronicle-item">
+                <div className="chronicle-marker" />
+                <article className="chronicle-card">
+                  <div className="chronicle-card-header">
+                    <div>
+                      <div className="chronicle-title">{iteration.id}</div>
+                      <div className="chronicle-meta">
+                        <span>{new Date(iteration.timestamp).toLocaleString()}</span>
+                        <span>•</span>
+                        <span>{iteration.trigger}</span>
+                        <span>•</span>
+                        <span>{iteration.failureCount} failures</span>
+                      </div>
+                    </div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+                      <span className="badge badge-green">{iteration.proposals.filter((proposal) => proposal.outcome === 'accepted').length} accepted</span>
+                      <span className="badge badge-red">{iteration.proposals.filter((proposal) => proposal.outcome === 'rejected').length} rejected</span>
                     </div>
                   </div>
 
-                  {/* Description */}
-                  <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 10, lineHeight: 1.5 }}>
-                    {p.description.slice(0, 200)}
-                  </p>
+                  <div className="chronicle-body">
+                    {iteration.failureClusters.length > 0 ? (
+                      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 14 }}>
+                        {iteration.failureClusters.map((cluster, clusterIndex) => (
+                          <span key={`${cluster.type}-${clusterIndex}`} className="badge badge-blue">
+                            {cluster.type} ({cluster.count})
+                          </span>
+                        ))}
+                      </div>
+                    ) : null}
+
+                    {iteration.proposals.map((proposal) => (
+                      <div key={proposal.id} className="proposal-card" style={{ borderLeft: `3px solid ${proposal.outcome === 'accepted' ? 'var(--green)' : 'var(--red)'}` }}>
+                        <div style={{ padding: '14px 16px' }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 10 }}>
+                            <div>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                                <span className={`badge ${proposal.outcome === 'accepted' ? 'badge-green' : 'badge-red'}`}>{proposal.outcome}</span>
+                                <span style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-0.02em' }}>{proposal.targetSkill}</span>
+                                <span className="badge badge-gray">{proposal.action}</span>
+                              </div>
+                              <div style={{ marginTop: 8, color: 'var(--text-secondary)', fontSize: 12.5, lineHeight: 1.65 }}>
+                                {proposal.description.slice(0, 260)}
+                                {proposal.description.length > 260 ? '…' : ''}
+                              </div>
+                            </div>
+                            <div style={{ minWidth: 92, textAlign: 'right' }}>
+                              <div style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Regression</div>
+                              <div style={{ marginTop: 6, fontSize: 22, fontWeight: 850, lineHeight: 1, color: proposal.regressionResult.total > 0 && proposal.regressionResult.passed === proposal.regressionResult.total ? 'var(--green)' : 'var(--text)' }}>
+                                {proposal.regressionResult.total > 0 ? `${proposal.regressionResult.passed}/${proposal.regressionResult.total}` : '—'}
+                              </div>
+                            </div>
+                          </div>
 
-                  {/* Judge Scores */}
-                  <div style={{ display: 'flex', gap: 10, marginBottom: 6 }}>
-                    {[
-                      { label: 'Task', score: p.judges.taskCompletion.score, color: 'var(--green)' },
-                      { label: 'Align', score: p.judges.correctionAlignment.score, color: 'var(--blue)' },
-                      { label: 'Side-effects', score: p.judges.sideEffectCheck.score, color: 'var(--purple)' },
-                    ].map(j => (
-                      <div key={j.label} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
-                        <span style={{ color: 'var(--text-dim)' }}>{j.label}:</span>
-                        <b style={{ color: j.score >= 7 ? j.color : 'var(--red)' }}>{j.score}/10</b>
+                          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 10 }}>
+                            {[
+                              { label: 'Task', score: proposal.judges.taskCompletion.score, color: 'var(--green)' },
+                              { label: 'Align', score: proposal.judges.correctionAlignment.score, color: 'var(--blue)' },
+                              { label: 'Side-effects', score: proposal.judges.sideEffectCheck.score, color: 'var(--purple)' },
+                            ].map((judge) => (
+                              <span key={judge.label} className="score-pill" style={{ color: judge.score >= 7 ? judge.color : 'var(--red)' }}>
+                                {judge.label} {judge.score}/10
+                              </span>
+                            ))}
+                          </div>
+
+                          <div style={{ color: 'var(--text-dim)', fontSize: 11.5, lineHeight: 1.55 }}>
+                            {proposal.outcomeReason}
+                          </div>
+                        </div>
                       </div>
                     ))}
-                    {p.regressionResult.total > 0 && (
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
-                        <span style={{ color: 'var(--text-dim)' }}>Regression:</span>
-                        <b>{p.regressionResult.passed}/{p.regressionResult.total}</b>
-                      </div>
-                    )}
                   </div>
-
-                  {/* Outcome Reason */}
-                  <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.4 }}>{p.outcomeReason}</div>
-                </div>
+                </article>
               </div>
             ))}
           </div>
-        ))}
-
-        {iterations.length === 0 && (
-          <div className="card" style={{ marginLeft: 28 }}>
-            <div className="empty-state">
-              <div className="empty-state-title">No evolution runs yet</div>
-              <div className="empty-state-desc">Run <code>helixevo evolve</code> to start the evolution loop</div>
-            </div>
-          </div>
         )}
-      </div>
+      </SectionFrame>
     </div>
   )
 }

package/dashboard/app/frontier/page.tsx

@@ -1,128 +1,131 @@
-import { loadFrontier, loadCanaries } from '@/lib/data'
+import { loadCanaries, loadFrontier } from '@/lib/data'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
 
 export const dynamic = 'force-dynamic'
 
+function scoreTone(value: number): 'green' | 'yellow' | 'red' {
+  if (value >= 0.8) return 'green'
+  if (value >= 0.6) return 'yellow'
+  return 'red'
+}
+
 export default function FrontierPage() {
   const frontier = loadFrontier()
   const canaries = loadCanaries()
+  const topScore = frontier.programs[0]?.score ?? 0
 
   return (
-    <div>
-      <div className="page-header">
-        <h1 className="page-title">Pareto Frontier</h1>
-        <p className="page-desc">
-          Top {frontier.capacity} skill configurations ranked by composite score
-        </p>
-      </div>
-
-      {/* Frontier Programs */}
-      <div style={{ display: 'grid', gap: 12, marginBottom: 28 }}>
-        {frontier.programs.map((p, rank) => (
-          <div key={`${p.id}-${rank}`} className="card" style={{ overflow: 'hidden' }}>
-            <div className="card-body" style={{ position: 'relative' }}>
-              {/* Rank Badge */}
-              <div style={{
-                position: 'absolute', top: 0, right: 0,
-                padding: '4px 16px',
-                background: rank === 0 ? 'var(--purple)' : rank === 1 ? 'var(--blue)' : 'var(--bg-section)',
-                color: rank <= 1 ? '#fff' : 'var(--text-dim)',
-                borderBottomLeftRadius: 10, fontSize: 12, fontWeight: 700,
-              }}>
-                #{rank + 1}
-              </div>
+    <div style={{ display: 'grid', gap: 22 }}>
+      <PageHero
+        eyebrow="Candidate board"
+        title="Pareto Frontier"
+        description="Compare the strongest skill configurations currently competing on the frontier and inspect which canaries are still proving themselves in the wild."
+        chips={[
+          { label: `${frontier.programs.length}/${frontier.capacity} frontier slots filled`, tone: 'green' },
+          { label: `${canaries.entries.length} active canaries`, tone: canaries.entries.length > 0 ? 'yellow' : 'neutral' },
+          { label: `Top score ${(topScore * 100).toFixed(0)}`, tone: 'purple' },
+        ]}
+      />
 
-              {/* Header */}
-              <div style={{ marginBottom: 16 }}>
-                <div style={{ fontSize: 17, fontWeight: 700 }}>{p.id}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 2 }}>
-                  gen {p.generation} · {new Date(p.createdAt).toLocaleDateString()}
-                </div>
-              </div>
+      <div className="grid-3">
+        <MetricCard label="Frontier size" value={frontier.programs.length} sublabel={`Capacity ${frontier.capacity}`} tone="purple" icon="▲" />
+        <MetricCard label="Top composite" value={`${(topScore * 100).toFixed(0)}`} sublabel="Best current composite score" tone="green" icon="★" />
+        <MetricCard label="Canary pipeline" value={canaries.entries.length} sublabel="Configs still under validation" tone={canaries.entries.length > 0 ? 'yellow' : 'blue'} icon="◌" />
+      </div>
 
-              {/* Score Grid */}
-              <div className="grid-4" style={{ marginBottom: 16 }}>
-                {[
-                  { label: 'Composite', value: p.score, color: 'var(--purple)' },
-                  { label: 'Task', value: p.scores.taskCompletion, color: 'var(--green)' },
-                  { label: 'Alignment', value: p.scores.correctionAlignment, color: 'var(--blue)' },
-                  { label: 'Side-Effect Free', value: p.scores.sideEffectFree, color: 'var(--yellow)' },
-                ].map(s => (
-                  <div key={s.label} style={{
-                    padding: '10px 12px',
-                    background: 'var(--bg-section)',
-                    borderRadius: 10,
-                  }}>
-                    <div style={{
-                      fontSize: 9, color: 'var(--text-muted)', textTransform: 'uppercase',
-                      letterSpacing: 1, marginBottom: 4, fontWeight: 600,
-                    }}>{s.label}</div>
-                    <div style={{
-                      fontSize: 22, fontWeight: 800, lineHeight: 1,
-                      color: s.value >= 0.8 ? 'var(--green)' : s.value >= 0.6 ? 'var(--yellow)' : 'var(--red)',
-                    }}>
-                      {(s.value * 100).toFixed(0)}
+      <SectionFrame
+        eyebrow="Leaderboard"
+        title="Current frontier programs"
+        description="Each candidate is scored across task completion, correction alignment, and side-effect safety before it earns frontier placement."
+      >
+        {frontier.programs.length === 0 ? (
+          <div className="empty-state" style={{ padding: 24 }}>
+            <div className="empty-state-title">Frontier empty</div>
+            <div className="empty-state-desc">Run <code>helixevo evolve</code> to populate the frontier.</div>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gap: 14 }}>
+            {frontier.programs.map((program, rank) => (
+              <article key={`${program.id}-${rank}`} className="section-frame section-frame-neutral" style={{ overflow: 'hidden' }}>
+                <div className="section-frame-body" style={{ paddingTop: 24 }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 18, marginBottom: 18, flexWrap: 'wrap' }}>
+                    <div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+                        <span className={`badge ${rank === 0 ? 'badge-purple' : rank === 1 ? 'badge-blue' : 'badge-gray'}`}>#{rank + 1}</span>
+                        <span style={{ fontSize: 20, fontWeight: 850, letterSpacing: '-0.03em' }}>{program.id}</span>
+                      </div>
+                      <div style={{ marginTop: 8, color: 'var(--text-dim)', fontSize: 12.5 }}>
+                        gen {program.generation} • created {new Date(program.createdAt).toLocaleDateString()}
+                      </div>
                     </div>
-                    <div className="score-track" style={{ height: 4, marginTop: 6 }}>
-                      <div className="score-fill" style={{
-                        width: `${s.value * 100}%`,
-                        background: s.value >= 0.8 ? 'var(--green)' : s.value >= 0.6 ? 'var(--yellow)' : 'var(--red)',
-                      }} />
+                    <div style={{ textAlign: 'right' }}>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Composite</div>
+                      <div style={{ marginTop: 6, fontSize: 34, fontWeight: 850, lineHeight: 1, color: scoreTone(program.score) === 'green' ? 'var(--green)' : scoreTone(program.score) === 'yellow' ? 'var(--yellow)' : 'var(--red)' }}>
+                        {(program.score * 100).toFixed(0)}
+                      </div>
                     </div>
                   </div>
-                ))}
-              </div>
 
-              {/* Description */}
-              <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
-                {p.changesDescription.slice(0, 200)}
-              </div>
-            </div>
-          </div>
-        ))}
+                  <div className="grid-4" style={{ marginBottom: 16 }}>
+                    {[
+                      { label: 'Composite', value: program.score, tone: 'purple' as const },
+                      { label: 'Task', value: program.scores.taskCompletion, tone: 'green' as const },
+                      { label: 'Alignment', value: program.scores.correctionAlignment, tone: 'blue' as const },
+                      { label: 'Side-effect free', value: program.scores.sideEffectFree, tone: 'yellow' as const },
+                    ].map((score) => (
+                      <MetricCard
+                        key={score.label}
+                        label={score.label}
+                        value={(score.value * 100).toFixed(0)}
+                        sublabel={<div className="score-track" style={{ marginTop: 4 }}><div className="score-fill" style={{ width: `${score.value * 100}%`, background: scoreTone(score.value) === 'green' ? 'var(--green)' : scoreTone(score.value) === 'yellow' ? 'var(--yellow)' : 'var(--red)' }} /></div>}
+                        tone={score.tone}
+                      />
+                    ))}
+                  </div>
 
-        {frontier.programs.length === 0 && (
-          <div className="card">
-            <div className="empty-state">
-              <div className="empty-state-title">Frontier empty</div>
-              <div className="empty-state-desc">Run <code>helixevo evolve</code> to populate the frontier</div>
-            </div>
+                  <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.7 }}>
+                    {program.changesDescription.slice(0, 260)}
+                    {program.changesDescription.length > 260 ? '…' : ''}
+                  </div>
+                </div>
+              </article>
+            ))}
           </div>
         )}
-      </div>
+      </SectionFrame>
 
-      {/* Canaries */}
-      <div className="card">
-        <div className="card-body">
-          <div className="card-header-label">Active Canaries</div>
-          {canaries.entries.length > 0 ? (
-            canaries.entries.map((c, i) => {
-              const daysLeft = Math.max(0, Math.ceil((new Date(c.expiresAt).getTime() - Date.now()) / (24 * 60 * 60 * 1000)))
+      <SectionFrame
+        eyebrow="Validation"
+        title="Active canaries"
+        description="Canary deployments remain under observation before they graduate fully into the frontier."
+        tone="yellow"
+      >
+        {canaries.entries.length > 0 ? (
+          <div className="summary-list">
+            {canaries.entries.map((entry, index) => {
+              const daysLeft = Math.max(0, Math.ceil((new Date(entry.expiresAt).getTime() - Date.now()) / (24 * 60 * 60 * 1000)))
               return (
-                <div key={i} style={{
-                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                  padding: '10px 0', borderBottom: i < canaries.entries.length - 1 ? '1px solid var(--border-subtle)' : 'none',
-                }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <div style={{
-                      width: 8, height: 8, borderRadius: '50%',
-                      background: daysLeft > 0 ? 'var(--yellow)' : 'var(--green)',
-                    }} />
-                    <span style={{ fontWeight: 500, fontSize: 13 }}>{c.skillSlug}</span>
-                    <span style={{ color: 'var(--text-muted)', fontSize: 11 }}>{c.version}</span>
+                <div key={`${entry.skillSlug}-${index}`} className="summary-row">
+                  <div className="summary-row-main">
+                    <div className="summary-row-title">{entry.skillSlug}</div>
+                    <div className="summary-row-meta">{entry.version} • deployed {new Date(entry.deployedAt).toLocaleDateString()}</div>
                   </div>
                   <span className={`badge ${daysLeft > 0 ? 'badge-yellow' : 'badge-green'}`}>
                     {daysLeft > 0 ? `${daysLeft}d remaining` : 'Ready to promote'}
                   </span>
                 </div>
               )
-            })
-          ) : (
-            <div style={{ color: 'var(--text-dim)', fontSize: 13, textAlign: 'center', padding: 20 }}>
-              No active canaries
-            </div>
-          )}
-        </div>
-      </div>
+            })}
+          </div>
+        ) : (
+          <div className="empty-state" style={{ padding: 24 }}>
+            <div className="empty-state-title">No active canaries</div>
+            <div className="empty-state-desc">When new candidate configurations are staged, they will appear here until their evaluation window ends.</div>
+          </div>
+        )}
+      </SectionFrame>
     </div>
   )
 }