helixevo 0.2.38 → 0.2.40

package/dashboard/app/research/client.tsx

@@ -1,13 +1,27 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useRef, useState } from 'react'
+import { ConsolePanel } from '@/components/console-panel'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
 
 interface Discovery {
-  id: string; title: string; summary: string; score: number; gap: string; lastAccessed: string
+  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
+  id: string
+  skillName: string
+  avgScore: number
+  passRate: number
+  iteration: number
+  hypothesis: string
 }
 
 interface KnowledgeBuffer {
@@ -25,41 +39,48 @@ 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: '🔍',
+    title: 'Identify gaps',
+    desc: 'Analyze the existing network to detect missing capabilities or weak coverage areas.',
+    icon: '◎',
     color: 'var(--blue)',
-    bgColor: 'var(--blue-light)',
+    tone: 'blue' as const,
   },
   {
     step: 2,
-    title: 'Web Search',
-    desc: 'Search the web for the latest best practices, tools, and techniques to fill each gap.',
-    icon: '🌐',
+    title: 'Search the web',
+    desc: 'Pull in current techniques, patterns, and best practices that can close those gaps.',
+    icon: '◌',
     color: 'var(--purple)',
-    bgColor: 'var(--purple-light)',
+    tone: 'purple' as const,
   },
   {
     step: 3,
-    title: 'Draft Skills',
-    desc: 'Generate hypotheses and draft new SKILL.md files from the discoveries.',
-    icon: '📝',
+    title: 'Draft skills',
+    desc: 'Translate discoveries into candidate SKILL.md drafts and experimental hypotheses.',
+    icon: '✎',
     color: 'var(--yellow)',
-    bgColor: 'var(--yellow-light)',
+    tone: 'yellow' as const,
   },
   {
     step: 4,
-    title: 'Test & Score',
-    desc: 'Test each draft against scenarios. Skills scoring ≥7/10 with ≥67% pass rate are accepted.',
+    title: 'Test and score',
+    desc: 'Run scoring and pass-rate checks before a draft can become a stable part of the system.',
     icon: '✓',
     color: 'var(--green)',
-    bgColor: 'var(--green-light)',
+    tone: 'green' as const,
   },
 ]
 
+function consoleTone(state: RunState): 'neutral' | 'green' | 'red' | 'yellow' {
+  if (state === 'success') return 'green'
+  if (state === 'error') return 'red'
+  if (state === 'stopped') return 'yellow'
+  return 'neutral'
+}
+
 export default function ResearchClient({ buffer, projects }: Props) {
   const [runState, setRunState] = useState<RunState>('idle')
-  const [output, setOutput] = useState<string>('')
+  const [output, setOutput] = useState('')
   const abortRef = useRef<AbortController | null>(null)
   const outputRef = useRef<HTMLPreElement | null>(null)
 
@@ -120,7 +141,8 @@ export default function ResearchClient({ buffer, projects }: Props) {
           }
         }
       }
-      if (runState === 'running') setRunState('success')
+
+      setRunState(prev => prev === 'running' ? 'success' : prev)
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') {
         try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
@@ -140,257 +162,167 @@ export default function ResearchClient({ buffer, projects }: Props) {
     try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
   }
 
-  const nearPass = buffer.drafts.filter(d => d.passRate >= 0.67)
+  const nearPass = buffer.drafts.filter((draft) => draft.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>
+    <div style={{ display: 'grid', gap: 22 }}>
+      <PageHero
+        eyebrow="Discovery lab"
+        title="Proactive Research"
+        description="Search for techniques your network still lacks, turn discoveries into draft skills, and score them before they enter the evolutionary loop."
+        chips={[
+          { label: `${projects.length} tracked projects`, tone: projects.length > 0 ? 'blue' : 'neutral' },
+          { label: `${buffer.discoveries.length} discoveries`, tone: 'purple' },
+          { label: `${buffer.drafts.length} drafts`, tone: 'yellow' },
+          { label: `${nearPass.length} near-pass drafts`, tone: 'green' },
+        ]}
+      />
 
-      {/* 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}
+      <SectionFrame
+        eyebrow="Pipeline"
+        title="How research works"
+        description="Research moves from network gaps to external evidence, then to draft skills, then through scoring and pass-rate thresholds."
+        actions={
+          runState === 'running' ? (
+            <button onClick={handleStop} className="badge badge-red" style={{ border: 'none', cursor: 'pointer' }}>Stop research</button>
+          ) : (
+            <button onClick={handleRun} className="badge badge-purple" style={{ border: 'none', cursor: 'pointer' }}>Run research</button>
+          )
+        }
+      >
+        <div className="grid-4" style={{ marginBottom: 18 }}>
+          {PIPELINE_STEPS.map((step) => (
+            <div key={step.step} className={`metric-card metric-card-${step.tone}`}>
+              <div className="metric-card-header">
+                <div>
+                  <div className="metric-card-label">Step {step.step}</div>
+                  <div className="metric-card-value" style={{ fontSize: 24 }}>{step.title}</div>
                 </div>
+                <div className="metric-card-icon" style={{ color: step.color }}>{step.icon}</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 className="metric-card-sublabel">{step.desc}</div>
             </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 className="signal-text">
+          {runState === 'running' && 'The research engine is currently searching, drafting, and testing hypotheses.'}
+          {runState === 'success' && 'Research completed — refresh the page if you want to reload persisted discoveries.'}
+          {runState === 'error' && 'Research failed — check the run console below for details.'}
+          {runState === 'stopped' && 'Research was stopped before completion.'}
+          {runState === 'idle' && 'Run the pipeline to discover new capabilities, test draft skills, and surface the most promising additions to your network.'}
         </div>
-      </div>
+      </SectionFrame>
 
-      {/* Output panel */}
-      {runState !== 'idle' && (
-        <div className="card" style={{ marginBottom: 24, overflow: 'hidden' }}>
-          <div style={{
-            padding: '10px 16px',
-            background: runState === 'success' ? 'var(--green-light)' : runState === 'error' ? 'var(--red-light)' : runState === 'stopped' ? 'var(--yellow-light)' : 'var(--bg-section)',
-            borderBottom: '1px solid var(--border)',
-            fontSize: 12, fontWeight: 600,
-            color: runState === 'success' ? 'var(--green)' : runState === 'error' ? 'var(--red)' : runState === 'stopped' ? 'var(--yellow)' : 'var(--text-secondary)',
-          }}>
-            {runState === 'running' && '● Running research pipeline...'}
-            {runState === 'success' && '✓ Research completed'}
-            {runState === 'error' && '✗ Research failed'}
-            {runState === 'stopped' && '■ Research stopped'}
-          </div>
-          <pre ref={outputRef} style={{
-            padding: '14px 16px', margin: 0,
-            fontSize: 11, lineHeight: 1.55,
-            fontFamily: 'var(--font-mono)',
-            color: 'var(--text-secondary)',
-            maxHeight: 400, overflow: 'auto',
-            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-          }}>
-            {output || 'Starting research pipeline...'}
+      {runState !== 'idle' ? (
+        <ConsolePanel
+          tone={consoleTone(runState)}
+          title={
+            <span>
+              {runState === 'running' ? 'Research pipeline running…' :
+                runState === 'success' ? 'Research completed' :
+                runState === 'stopped' ? 'Research stopped' :
+                'Research failed'}
+            </span>
+          }
+          actions={
+            runState !== 'running' ? (
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button onClick={handleRun} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Run again</button>
+                <button onClick={() => window.location.reload()} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Refresh data</button>
+              </div>
+            ) : null
+          }
+        >
+          <pre
+            ref={outputRef}
+            style={{
+              margin: 0,
+              padding: '16px 18px',
+              fontSize: 11.5,
+              lineHeight: 1.62,
+              color: 'var(--text-secondary)',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}
+          >
+            {output || 'Starting research pipeline…'}
           </pre>
-        </div>
-      )}
+        </ConsolePanel>
+      ) : null}
 
-      {/* 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 className="grid-3">
+        <MetricCard label="Discoveries" value={buffer.discoveries.length} sublabel="Research findings currently in the knowledge buffer" tone="blue" icon="◎" />
+        <MetricCard label="Drafts in progress" value={buffer.drafts.length} sublabel="Experimental skills still being refined" tone="yellow" icon="✎" />
+        <MetricCard label="Near-pass drafts" value={nearPass.length} sublabel="Drafts already above the pass-rate threshold" tone="green" icon="↗" />
       </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)}
+        <SectionFrame
+          eyebrow="Knowledge buffer"
+          title={`Discoveries (${buffer.discoveries.length}/50)`}
+          description="External techniques, patterns, and signals the research system believes are worth turning into skills."
+          tone="blue"
+        >
+          {buffer.discoveries.length === 0 ? (
+            <div className="empty-state" style={{ padding: 24 }}>
+              <div className="empty-state-title">No discoveries yet</div>
+              <div className="empty-state-desc">Run research to search the web for techniques your skill network does not cover yet.</div>
+            </div>
+          ) : (
+            <div className="summary-list">
+              {buffer.discoveries.sort((a, b) => b.score - a.score).map((discovery) => (
+                <div key={discovery.id} className="summary-row" style={{ alignItems: 'flex-start' }}>
+                  <div className="summary-row-main">
+                    <div className="summary-row-title">{discovery.title}</div>
+                    <div className="summary-row-meta">{discovery.summary.slice(0, 150)}{discovery.summary.length > 150 ? '…' : ''}</div>
+                    <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
+                      <span className="badge badge-blue">{discovery.gap}</span>
+                      <span className="score-pill" style={{ color: 'var(--blue)' }}>{(discovery.score * 100).toFixed(0)}%</span>
+                    </div>
                   </div>
-                  <span className="badge badge-blue">{d.gap}</span>
                 </div>
-              ))
-            )}
-          </div>
-        </div>
+              ))}
+            </div>
+          )}
+        </SectionFrame>
 
-        {/* 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)}
+        <SectionFrame
+          eyebrow="Draft pipeline"
+          title={`Skill drafts (${buffer.drafts.length}/10)`}
+          description="Drafts are candidates that are close to graduating into stable skills but still need evidence, quality, or pass-rate improvements."
+          tone="yellow"
+        >
+          {buffer.drafts.length === 0 ? (
+            <div className="empty-state" style={{ padding: 24 }}>
+              <div className="empty-state-title">No drafts yet</div>
+              <div className="empty-state-desc">Run research to generate the first draft skills and evaluate them against the current thresholds.</div>
+            </div>
+          ) : (
+            <div className="summary-list">
+              {buffer.drafts.sort((a, b) => b.avgScore - a.avgScore).map((draft) => (
+                <div key={draft.id} className="summary-row" style={{ alignItems: 'flex-start' }}>
+                  <div className="summary-row-main">
+                    <div className="summary-row-title">{draft.skillName}</div>
+                    <div className="summary-row-meta">{draft.hypothesis.slice(0, 150)}{draft.hypothesis.length > 150 ? '…' : ''}</div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
+                      <span className={`badge ${draft.avgScore >= 6 ? 'badge-green' : 'badge-yellow'}`}>{draft.avgScore.toFixed(1)}/10</span>
+                      <span className="badge badge-gray">iter {draft.iteration}</span>
+                    </div>
                   </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 style={{ minWidth: 104 }}>
+                    <div className="score-track" style={{ marginBottom: 6 }}>
+                      <div className="score-fill" style={{ width: `${draft.passRate * 100}%`, background: draft.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)' }} />
+                    </div>
+                    <div style={{ textAlign: 'right', fontSize: 12, fontWeight: 800, color: draft.passRate >= 0.67 ? 'var(--green)' : 'var(--yellow)' }}>
+                      {(draft.passRate * 100).toFixed(0)}%
                     </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>
+          )}
+        </SectionFrame>
       </div>
     </div>
   )