helixevo 0.2.0 → 0.2.1

package/dashboard/app/guide/page.tsx

@@ -0,0 +1,984 @@
+'use client'
+
+import { useState } from 'react'
+
+// ─── Table of Contents ──────────────────────────────────────────
+const TOC = [
+  { id: 'overview', label: 'Overview', icon: '◆' },
+  { id: 'quickstart', label: 'Quick Start', icon: '▸' },
+  { id: 'commands', label: 'Commands', icon: '⌘' },
+  { id: 'architecture', label: 'Architecture', icon: '◎' },
+  { id: 'watch', label: 'Always-On Learning', icon: '⚡' },
+  { id: 'evolution', label: 'Evolution Pipeline', icon: '⟳' },
+  { id: 'judges', label: 'Multi-Judge System', icon: '⚖' },
+  { id: 'networkhealth', label: 'Network Health', icon: '♺' },
+  { id: 'autogen', label: 'Auto-Generalization', icon: '↑' },
+  { id: 'metrics', label: 'Closed-Loop Metrics', icon: '📊' },
+  { id: 'frontier', label: 'Pareto Frontier', icon: '▲' },
+  { id: 'regression', label: 'Regression Testing', icon: '✓' },
+  { id: 'research', label: 'Proactive Research', icon: '◎' },
+  { id: 'network', label: 'Skill Network', icon: '⬡' },
+  { id: 'config', label: 'Configuration', icon: '⚙' },
+  { id: 'data', label: 'Data & Storage', icon: '◫' },
+  { id: 'manage', label: 'Skill Management', icon: '✎' },
+  { id: 'craft', label: 'Craft Agent', icon: '⚡' },
+  { id: 'faq', label: 'FAQ', icon: '?' },
+]
+
+// ─── Code Block ─────────────────────────────────────────────────
+function Code({ children, title }: { children: string; title?: string }) {
+  return (
+    <div className="guide-code-block">
+      {title && <div className="guide-code-title">{title}</div>}
+      <pre><code>{children.trim()}</code></pre>
+    </div>
+  )
+}
+
+// ─── Callout ────────────────────────────────────────────────────
+function Callout({ type, children }: { type: 'info' | 'tip' | 'warning'; children: React.ReactNode }) {
+  const styles = {
+    info: { bg: 'var(--blue-light)', border: 'var(--blue-border)', icon: 'ℹ', color: 'var(--blue)' },
+    tip: { bg: 'var(--green-light)', border: 'var(--green-border)', icon: '✦', color: 'var(--green)' },
+    warning: { bg: 'var(--yellow-light)', border: 'var(--yellow-border)', icon: '▲', color: 'var(--yellow)' },
+  }
+  const s = styles[type]
+  return (
+    <div className="guide-callout" style={{ background: s.bg, borderColor: s.border }}>
+      <span className="guide-callout-icon" style={{ color: s.color }}>{s.icon}</span>
+      <div>{children}</div>
+    </div>
+  )
+}
+
+// ─── Step ───────────────────────────────────────────────────────
+function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
+  return (
+    <div className="guide-step">
+      <div className="guide-step-number">{n}</div>
+      <div className="guide-step-content">
+        <div className="guide-step-title">{title}</div>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// ─── Feature Card ───────────────────────────────────────────────
+function FeatureCard({ icon, title, desc }: { icon: string; title: string; desc: string }) {
+  return (
+    <div className="guide-feature-card">
+      <div className="guide-feature-icon">{icon}</div>
+      <div className="guide-feature-title">{title}</div>
+      <div className="guide-feature-desc">{desc}</div>
+    </div>
+  )
+}
+
+// ─── Param Row ──────────────────────────────────────────────────
+function Param({ name, type, desc, def }: { name: string; type: string; desc: string; def?: string }) {
+  return (
+    <div className="guide-param-row">
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <code className="guide-param-name">{name}</code>
+        <span className="guide-param-type">{type}</span>
+      </div>
+      <div className="guide-param-desc">{desc}{def && <span style={{ color: 'var(--text-muted)' }}> Default: <code>{def}</code></span>}</div>
+    </div>
+  )
+}
+
+// ─── Pipeline Step ──────────────────────────────────────────────
+function PipelineStep({ icon, title, desc, color }: { icon: string; title: string; desc: string; color: string }) {
+  return (
+    <div className="guide-pipeline-step">
+      <div className="guide-pipeline-icon" style={{ background: `${color}15`, color }}>{icon}</div>
+      <div>
+        <div style={{ fontSize: 13, fontWeight: 600 }}>{title}</div>
+        <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.5, marginTop: 2 }}>{desc}</div>
+      </div>
+    </div>
+  )
+}
+
+// ─── Section ────────────────────────────────────────────────────
+function Section({ id, title, subtitle, children }: { id: string; title: string; subtitle?: string; children: React.ReactNode }) {
+  return (
+    <section id={id} className="guide-section">
+      <h2 className="guide-section-title">{title}</h2>
+      {subtitle && <p className="guide-section-subtitle">{subtitle}</p>}
+      {children}
+    </section>
+  )
+}
+
+// ─── Architecture Diagram ───────────────────────────────────────
+function ArchitectureDiagram() {
+  return (
+    <div className="guide-diagram">
+      <div className="guide-diagram-row">
+        <div className="guide-diagram-box guide-diagram-input">
+          <div className="guide-diagram-box-label">Input</div>
+          <div className="guide-diagram-box-title">Failure Capture</div>
+          <div className="guide-diagram-box-desc">Sessions, corrections, manual edits</div>
+        </div>
+        <div className="guide-diagram-arrow">→</div>
+        <div className="guide-diagram-box guide-diagram-process">
+          <div className="guide-diagram-box-label">Cluster</div>
+          <div className="guide-diagram-box-title">Pattern Detection</div>
+          <div className="guide-diagram-box-desc">Group failures by root cause</div>
+        </div>
+        <div className="guide-diagram-arrow">→</div>
+        <div className="guide-diagram-box guide-diagram-process">
+          <div className="guide-diagram-box-label">Propose</div>
+          <div className="guide-diagram-box-title">Skill Mutation</div>
+          <div className="guide-diagram-box-desc">Create, edit, merge, split</div>
+        </div>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0 20px' }}>
+        <div className="guide-diagram-arrow-down">↓</div>
+      </div>
+      <div className="guide-diagram-row" style={{ direction: 'rtl' }}>
+        <div className="guide-diagram-box guide-diagram-output" style={{ direction: 'ltr' }}>
+          <div className="guide-diagram-box-label">Deploy</div>
+          <div className="guide-diagram-box-title">Canary + Frontier</div>
+          <div className="guide-diagram-box-desc">3-day monitoring, auto-rollback</div>
+        </div>
+        <div className="guide-diagram-arrow" style={{ direction: 'ltr' }}>←</div>
+        <div className="guide-diagram-box guide-diagram-check" style={{ direction: 'ltr' }}>
+          <div className="guide-diagram-box-label">Validate</div>
+          <div className="guide-diagram-box-title">Regression Tests</div>
+          <div className="guide-diagram-box-desc">Golden cases + cross-skill</div>
+        </div>
+        <div className="guide-diagram-arrow" style={{ direction: 'ltr' }}>←</div>
+        <div className="guide-diagram-box guide-diagram-judge" style={{ direction: 'ltr' }}>
+          <div className="guide-diagram-box-label">Evaluate</div>
+          <div className="guide-diagram-box-title">3 LLM Judges</div>
+          <div className="guide-diagram-box-desc">Task, Alignment, Side-effects</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── Hierarchy Diagram ──────────────────────────────────────────
+function HierarchyDiagram() {
+  return (
+    <div className="guide-hierarchy">
+      <div className="guide-hierarchy-level guide-hierarchy-system">
+        <div className="guide-hierarchy-label">System Layer</div>
+        <div className="guide-hierarchy-desc">Global agent behaviors — applies everywhere</div>
+        <div className="guide-hierarchy-examples">error-recovery, output-formatting, safety-checks</div>
+      </div>
+      <div className="guide-hierarchy-connector">
+        <span>Generalize ↑</span>
+        <span>Specialize ↓</span>
+      </div>
+      <div className="guide-hierarchy-level guide-hierarchy-domain">
+        <div className="guide-hierarchy-label">Domain Layer</div>
+        <div className="guide-hierarchy-desc">Cross-project patterns — shared techniques</div>
+        <div className="guide-hierarchy-examples">react-best-practices, api-design, testing-patterns</div>
+      </div>
+      <div className="guide-hierarchy-connector">
+        <span>Generalize ↑</span>
+        <span>Specialize ↓</span>
+      </div>
+      <div className="guide-hierarchy-level guide-hierarchy-project">
+        <div className="guide-hierarchy-label">Project Layer</div>
+        <div className="guide-hierarchy-desc">Project-specific skills — local conventions</div>
+        <div className="guide-hierarchy-examples">myapp-auth-flow, myapp-db-schema, myapp-deploy</div>
+      </div>
+    </div>
+  )
+}
+
+// ─── Main Guide Page ────────────────────────────────────────────
+export default function GuidePage() {
+  const [activeSection, setActiveSection] = useState('overview')
+
+  return (
+    <div className="guide-layout">
+      {/* Sidebar TOC */}
+      <nav className="guide-toc">
+        <div className="guide-toc-header">
+          <div className="guide-toc-title">Documentation</div>
+          <div className="guide-toc-version">v0.2.0</div>
+        </div>
+        {TOC.map(item => (
+          <a
+            key={item.id}
+            href={`#${item.id}`}
+            className={`guide-toc-item ${activeSection === item.id ? 'active' : ''}`}
+            onClick={() => setActiveSection(item.id)}
+          >
+            <span className="guide-toc-icon">{item.icon}</span>
+            {item.label}
+          </a>
+        ))}
+      </nav>
+
+      {/* Content */}
+      <div className="guide-content">
+        {/* Hero */}
+        <div className="guide-hero">
+          <div className="guide-hero-badge">Documentation</div>
+          <h1 className="guide-hero-title">Helix Guide</h1>
+          <p className="guide-hero-desc">
+            A comprehensive guide to the self-evolving skill ecosystem for AI agents.
+            Capture failures, evolve skills through multi-judge evaluation, and maintain
+            a Pareto frontier of optimal configurations.
+          </p>
+          <div className="guide-hero-features">
+            <FeatureCard icon="⚡" title="Always-On" desc="Auto-captures corrections and triggers evolution in real-time" />
+            <FeatureCard icon="♺" title="Network Evolution" desc="Skills and projects co-evolve as an interconnected organism" />
+            <FeatureCard icon="📊" title="Closed-Loop Proof" desc="Tracks whether evolution actually reduces correction rates" />
+            <FeatureCard icon="↑" title="Auto-Generalize" desc="Cross-project patterns automatically become abstract skills" />
+          </div>
+        </div>
+
+        {/* ─── Overview ─── */}
+        <Section id="overview" title="Overview" subtitle="What Helix does and why it exists.">
+          <p className="guide-text">
+            Helix is a self-improving system that manages SKILL.md files for AI agents. When an agent makes a mistake
+            and gets corrected, Helix captures that failure, clusters similar failures together, and proposes skill
+            improvements. Every proposed change goes through rigorous multi-judge evaluation and regression testing before
+            being deployed with a 3-day canary period.
+          </p>
+          <p className="guide-text">
+            Built on ideas from <strong>EvoSkill</strong> and <strong>AutoResearch</strong>, Helix implements a
+            three-directional evolution model:
+          </p>
+          <div className="guide-directions">
+            <div className="guide-direction">
+              <div className="guide-direction-arrow" style={{ color: 'var(--purple)' }}>↑</div>
+              <div>
+                <strong>Generalize</strong>
+                <span>Detect cross-project patterns and promote them to abstract, reusable skills</span>
+              </div>
+            </div>
+            <div className="guide-direction">
+              <div className="guide-direction-arrow" style={{ color: 'var(--green)' }}>↓</div>
+              <div>
+                <strong>Specialize</strong>
+                <span>Create project-specific skills from domain skills combined with local failures</span>
+              </div>
+            </div>
+            <div className="guide-direction">
+              <div className="guide-direction-arrow" style={{ color: 'var(--blue)' }}>↔</div>
+              <div>
+                <strong>Lateral</strong>
+                <span>Merge, split, and resolve conflicts between skills at the same level</span>
+              </div>
+            </div>
+          </div>
+        </Section>
+
+        {/* ─── Quick Start ─── */}
+        <Section id="quickstart" title="Quick Start" subtitle="Get up and running in under 5 minutes.">
+          <Callout type="info">
+            <strong>Prerequisites:</strong> Node.js 18+, <a href="https://bun.sh">Bun</a> (for building),
+            and <a href="https://docs.anthropic.com/en/docs/claude-code">Claude CLI</a> with a Claude Max plan.
+          </Callout>
+
+          <Step n={1} title="Install Helix">
+            <Code title="Terminal">{`# From npm (recommended)
+npm install -g helix
+
+# Or from source
+git clone https://github.com/danielchen26/helixevo.git
+cd helixevo && npm install && npm run build && npm link`}</Code>
+          </Step>
+
+          <Step n={2} title="Initialize your skill ecosystem">
+            <Code title="Terminal">{`helixevo init`}</Code>
+            <p className="guide-text-sm">
+              This scans your existing SKILL.md files (from <code>~/.agents/skills/</code>), imports them into Helix,
+              and generates golden test cases for each skill. It also creates the data directory at <code>~/.helix/</code>.
+            </p>
+          </Step>
+
+          <Step n={3} title="Capture failures from a session">
+            <Code title="Terminal">{`helixevo capture path/to/session.json --project myapp`}</Code>
+            <p className="guide-text-sm">
+              Extracts corrections, mode switches, retries, and manual edits from Claude session files and records them
+              as structured failure records.
+            </p>
+          </Step>
+
+          <Step n={4} title="Evolve skills">
+            <Code title="Terminal">{`helixevo evolve --verbose`}</Code>
+            <p className="guide-text-sm">
+              Clusters failures, generates proposals, runs 3-judge evaluation and regression tests, then deploys
+              improvements as canaries. Use <code>--dry-run</code> to preview without applying.
+            </p>
+          </Step>
+
+          <Step n={5} title="Explore the results">
+            <Code title="Terminal">{`# View the skill network
+helixevo graph
+
+# Open this dashboard
+helixevo dashboard
+
+# Check system health
+helixevo status`}</Code>
+          </Step>
+        </Section>
+
+        {/* ─── Commands ─── */}
+        <Section id="commands" title="Commands" subtitle="Complete CLI reference for every Helix command.">
+          <div className="guide-command-grid">
+            {[
+              {
+                cmd: 'helixevo watch',
+                desc: 'Always-on learning mode. Watches for corrections in real-time, auto-captures failures, and triggers evolution when thresholds are met.',
+                flags: ['--project <name>', '--events <path>', '--verbose', '--no-evolve'],
+              },
+              {
+                cmd: 'helixevo metrics',
+                desc: 'Show correction rates per skill, trends over time, and whether each evolution actually reduced corrections. The proof that Helix works.',
+                flags: ['--verbose'],
+              },
+              {
+                cmd: 'helixevo health',
+                desc: 'Assess network health: cohesion, coverage, balance, cross-project transfer rate. Detects gaps, orphans, and generalization candidates.',
+                flags: ['--verbose'],
+              },
+              {
+                cmd: 'helixevo init',
+                desc: 'Import existing skills and generate golden test cases. Scans ~/.agents/skills/ and creates the Helix data directory.',
+                flags: ['--verbose'],
+              },
+              {
+                cmd: 'helixevo capture <session>',
+                desc: 'Extract failure records from a Claude session JSON file. Detects verbal corrections, manual edits, mode switches, and retries.',
+                flags: ['--project <name>', '--verbose'],
+              },
+              {
+                cmd: 'helixevo evolve',
+                desc: 'Run the full evolution cycle: cluster failures, generate proposals, evaluate with 3 judges, regression test, and deploy canaries.',
+                flags: ['--dry-run', '--verbose', '--max-proposals <n>'],
+              },
+              {
+                cmd: 'helixevo generalize',
+                desc: 'Promote cross-project patterns upward. Detects skills that solve similar problems across projects and creates abstract parent skills.',
+                flags: ['--dry-run', '--verbose'],
+              },
+              {
+                cmd: 'helixevo specialize --project <name>',
+                desc: 'Create project-specific skills by combining domain skills with project-level failure patterns.',
+                flags: ['--dry-run', '--verbose'],
+              },
+              {
+                cmd: 'helixevo research',
+                desc: 'Proactive web research to discover new skill opportunities. Searches for best practices, analyzes gaps, and generates experimental skills.',
+                flags: ['--project <path>', '--max-hypotheses <n>', '--dry-run', '--verbose'],
+              },
+              {
+                cmd: 'helixevo graph',
+                desc: 'Visualize the skill network. Shows nodes (skills), edges (relationships), and clusters.',
+                flags: ['--mermaid', '--obsidian <vault>', '--rebuild', '--optimize'],
+              },
+              {
+                cmd: 'helixevo dashboard',
+                desc: 'Open the interactive web dashboard at localhost:3847. Shows overview, skill network, evolution timeline, research, and frontier.',
+                flags: [],
+              },
+              {
+                cmd: 'helixevo status',
+                desc: 'Show system health: skill count, failure stats, frontier status, canary deployments, and recent evolution.',
+                flags: [],
+              },
+              {
+                cmd: 'helixevo report',
+                desc: 'Generate a detailed evolution report. Can output to file, Obsidian vault, or Craft Agent session.',
+                flags: ['--verbose'],
+              },
+            ].map(c => (
+              <div key={c.cmd} className="guide-command-card">
+                <code className="guide-command-name">{c.cmd}</code>
+                <p className="guide-command-desc">{c.desc}</p>
+                {c.flags.length > 0 && (
+                  <div className="guide-command-flags">
+                    {c.flags.map(f => <code key={f} className="guide-command-flag">{f}</code>)}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <Callout type="tip">
+            Most commands support <code>--dry-run</code> to preview changes without applying them,
+            and <code>--verbose</code> to see detailed LLM interactions and scoring.
+          </Callout>
+        </Section>
+
+        {/* ─── Architecture ─── */}
+        <Section id="architecture" title="Architecture" subtitle="How the system is structured and how data flows through it.">
+          <h3 className="guide-h3">Pipeline</h3>
+          <p className="guide-text">
+            Every evolution cycle follows this pipeline. Each stage acts as a quality gate — proposals must
+            pass all stages to be deployed.
+          </p>
+          <ArchitectureDiagram />
+
+          <h3 className="guide-h3">Three-Layer Hierarchy</h3>
+          <p className="guide-text">
+            Skills are organized into three layers. The <code>generalize</code> command promotes patterns upward,
+            while <code>specialize</code> creates project-specific variants downward.
+          </p>
+          <HierarchyDiagram />
+        </Section>
+
+        {/* ─── Always-On Learning ─── */}
+        <Section id="watch" title="Always-On Learning" subtitle="Helix watches your work, captures corrections automatically, and evolves without manual intervention.">
+          <p className="guide-text">
+            Instead of manually running <code>helixevo capture</code> after each session, <code>helixevo watch</code> runs
+            continuously in the background. It monitors your conversation events in real-time, detects when you
+            correct the agent, and feeds those corrections into the evolution pipeline automatically.
+          </p>
+          <Code title="Terminal">{`# Start always-on mode
+helixevo watch --project myapp
+
+# Watch without auto-evolution (capture only)
+helixevo watch --no-evolve
+
+# Custom events file
+helixevo watch --events path/to/events.jsonl --verbose`}</Code>
+
+          <h3 className="guide-h3">How It Works</h3>
+          <div className="guide-pipeline">
+            <PipelineStep icon="1" title="Event Monitoring" color="var(--blue)" desc="Polls events.jsonl every 3 seconds for new conversation messages." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="2" title="Correction Detection" color="var(--purple)" desc="Fast regex pre-filter (English + Chinese) checks for correction signals like 'wrong', 'not like that', 'instead use...', '不对', '改成'." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="3" title="LLM Extraction" color="var(--yellow)" desc="When a signal is detected, an LLM analyzes the recent conversation window to extract structured failure records with confidence scores." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="4" title="Auto-Evolve Check" color="var(--green)" desc="Checks if evolution should trigger: burst mode (3+ failures/hour), cross-project pattern, or standard threshold (5+ failures)." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="5" title="Metrics Update" color="var(--blue)" desc="Updates correction rates per skill, trend analysis, and evolution impact measurements." />
+          </div>
+
+          <h3 className="guide-h3">Auto-Evolve Triggers</h3>
+          <div className="guide-edge-grid">
+            {[
+              { type: 'burst', color: 'var(--red)', desc: '3+ corrections in the last hour — suggests active work with recurring problems. Triggers immediately.' },
+              { type: 'cross-project', color: 'var(--purple)', desc: 'Same failure pattern in 2+ projects — signals a missing domain-level skill. Prioritizes network-level evolution.' },
+              { type: 'threshold', color: 'var(--blue)', desc: '5+ unresolved failures accumulated. Standard trigger with 2-hour cooldown between cycles.' },
+            ].map(e => (
+              <div key={e.type} className="guide-edge-card">
+                <div className="guide-edge-type" style={{ color: e.color }}>{e.type}</div>
+                <div className="guide-edge-desc">{e.desc}</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* ─── Network Health ─── */}
+        <Section id="networkhealth" title="Network Health" subtitle="The skill network is a co-evolving organism — its health determines project success.">
+          <p className="guide-text">
+            Individual skill evolution is only part of the picture. Helix now treats the <strong>entire skill network</strong> as
+            a first-class entity that co-evolves with your projects. Network health is assessed across 4 dimensions after
+            every evolution cycle.
+          </p>
+          <Code title="Terminal">{`helixevo health --verbose`}</Code>
+
+          <h3 className="guide-h3">Health Dimensions</h3>
+          <div className="grid-2" style={{ gap: 12, marginBottom: 20 }}>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--green)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--green)', textTransform: 'uppercase', letterSpacing: 1 }}>Cohesion</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Are skills connected? Orphan skills (no edges) reduce network value.</div>
+            </div>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--blue)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--blue)', textTransform: 'uppercase', letterSpacing: 1 }}>Coverage</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>What fraction of failures map to skills? Gaps indicate missing skills.</div>
+            </div>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--purple)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--purple)', textTransform: 'uppercase', letterSpacing: 1 }}>Balance</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Is the system/domain/project hierarchy well-structured? Domain should be the backbone.</div>
+            </div>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--yellow)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--yellow)', textTransform: 'uppercase', letterSpacing: 1 }}>Transfer Rate</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>Do domain skills help across projects? Low transfer = too project-specific.</div>
+            </div>
+          </div>
+          <Callout type="info">
+            Network health is graded A-D (weighted average of all 4 dimensions) and shown in every evolution summary.
+            The <code>helixevo health</code> command also detects coverage gaps, orphan skills, and auto-generalization candidates.
+          </Callout>
+        </Section>
+
+        {/* ─── Auto-Generalization ─── */}
+        <Section id="autogen" title="Auto-Generalization" subtitle="When patterns recur across projects, Helix automatically creates abstract domain-level skills.">
+          <p className="guide-text">
+            Instead of waiting for you to run <code>helixevo generalize</code>, Helix now detects cross-project patterns
+            automatically during every evolution cycle. When the same type of correction appears in 2+ projects, it
+            creates an abstract domain-level skill and sets up parent/child inheritance.
+          </p>
+          <Code title="How auto-generalization works">{`Project A: "Use FlashList not FlatList" (React Native perf)
+Project B: "Use FlashList not FlatList" (React Native perf)
+  → Cross-project pattern detected
+  → Abstract skill created: "react-native-performance" (domain layer)
+  → Project A skill inherits from it
+  → Project B skill inherits from it
+  → Domain skill tested against all golden cases
+  → Deployed if regression passes`}</Code>
+          <Callout type="tip">
+            Auto-generalization is the key to the <strong>double helix</strong> metaphor: as projects evolve, skills
+            generalize upward; as skills generalize, they improve all projects simultaneously.
+          </Callout>
+        </Section>
+
+        {/* ─── Closed-Loop Metrics ─── */}
+        <Section id="metrics" title="Closed-Loop Metrics" subtitle="Proving that Helix actually makes the agent better — with data, not just LLM scores.">
+          <p className="guide-text">
+            The <code>helixevo metrics</code> command answers the most important question: <strong>&ldquo;Is Helix actually
+            reducing corrections?&rdquo;</strong> It tracks correction rates per skill over time and measures the real
+            impact of each evolution.
+          </p>
+          <Code title="Terminal">{`helixevo metrics --verbose`}</Code>
+
+          <h3 className="guide-h3">What It Tracks</h3>
+          <ul className="guide-list">
+            <li><strong>Per-skill correction rates:</strong> 7-day rolling windows showing how often each skill leads to corrections</li>
+            <li><strong>Trend detection:</strong> Each skill is marked as improving (↓), stable (→), or degrading (↑)</li>
+            <li><strong>Evolution impact:</strong> Before/after comparison for each evolution — failures/day in the 7 days before vs. after</li>
+            <li><strong>Verdict:</strong> &ldquo;X/Y evolutions reduced corrections&rdquo; — the bottom line</li>
+          </ul>
+
+          <Callout type="warning">
+            Metrics need time to accumulate. The system needs at least 7 days of data after an evolution to produce
+            a reliable before/after comparison. Results shown as &ldquo;Measuring&rdquo; during the first 3 days.
+          </Callout>
+        </Section>
+
+        {/* ─── Evolution Pipeline ─── */}
+        <Section id="evolution" title="Evolution Pipeline" subtitle="The step-by-step process that turns failures into improved skills.">
+          <div className="guide-pipeline">
+            <PipelineStep
+              icon="1" title="Failure Clustering" color="var(--blue)"
+              desc="Unresolved failures are clustered by root cause using an LLM. Each cluster identifies a pattern (e.g., 'missing error handling in API calls') and the relevant skills."
+            />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep
+              icon="2" title="Proposal Generation" color="var(--purple)"
+              desc="For each cluster, the system generates a proposed skill mutation: create a new skill, edit an existing one, or merge/split skills. The proposer considers related proposals from history to avoid repeating failed approaches."
+            />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep
+              icon="3" title="Replay Testing" color="var(--yellow)"
+              desc="The proposed skill is tested by replaying the original failure scenario. The agent responds using the new skill, and this response is sent to the judges."
+            />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep
+              icon="4" title="Multi-Judge Evaluation" color="var(--green)"
+              desc="Three independent LLM judges score the replay (1-10): Task Completion, Correction Alignment, and Side-Effect Check. A proposal needs consensus (2/3 judges passing) to proceed."
+            />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep
+              icon="5" title="Regression Testing" color="var(--red)"
+              desc="The modified skill is tested against all golden cases for that skill AND co-evolved partner skills. Must maintain ≥95% pass rate."
+            />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep
+              icon="6" title="Canary Deployment" color="var(--blue)"
+              desc="Accepted proposals are deployed as canaries with a 3-day monitoring period. If failure rate increases above the auto-rollback threshold, the skill is automatically reverted."
+            />
+          </div>
+        </Section>
+
+        {/* ─── Multi-Judge System ─── */}
+        <Section id="judges" title="Multi-Judge System" subtitle="Three independent judges ensure quality from different angles.">
+          <div className="guide-judges-grid">
+            <div className="guide-judge-card" style={{ borderTopColor: 'var(--green)' }}>
+              <div className="guide-judge-header">
+                <div className="guide-judge-icon" style={{ background: 'var(--green-light)', color: 'var(--green)' }}>T</div>
+                <div>
+                  <div className="guide-judge-name">Task Completion</div>
+                  <div className="guide-judge-role">Did the agent accomplish the user&apos;s goal?</div>
+                </div>
+              </div>
+              <p className="guide-text-sm">
+                Evaluates whether the replayed response with the new skill would actually complete the user&apos;s
+                original request. Scores 1-10 based on completeness, correctness, and usefulness.
+              </p>
+            </div>
+            <div className="guide-judge-card" style={{ borderTopColor: 'var(--blue)' }}>
+              <div className="guide-judge-header">
+                <div className="guide-judge-icon" style={{ background: 'var(--blue-light)', color: 'var(--blue)' }}>A</div>
+                <div>
+                  <div className="guide-judge-name">Correction Alignment</div>
+                  <div className="guide-judge-role">Does the fix match the user&apos;s correction?</div>
+                </div>
+              </div>
+              <p className="guide-text-sm">
+                Checks that the skill improvement actually addresses the specific correction the user gave.
+                Prevents generic improvements that don&apos;t fix the root cause.
+              </p>
+            </div>
+            <div className="guide-judge-card" style={{ borderTopColor: 'var(--purple)' }}>
+              <div className="guide-judge-header">
+                <div className="guide-judge-icon" style={{ background: 'var(--purple-light)', color: 'var(--purple)' }}>S</div>
+                <div>
+                  <div className="guide-judge-name">Side-Effect Check</div>
+                  <div className="guide-judge-role">Does the change break anything else?</div>
+                </div>
+              </div>
+              <p className="guide-text-sm">
+                Compares the original and modified skill content to detect unintended side effects.
+                Ensures the fix doesn&apos;t introduce new problems or remove useful behaviors.
+              </p>
+            </div>
+          </div>
+
+          <Callout type="info">
+            <strong>Consensus rule:</strong> At least {'{'}judgeConsensusMin{'}'} out of 3 judges must score ≥ {'{'}judgePassScore{'}'}/10
+            for a proposal to pass. During stagnation (no improvements for {'{'}stopAfterNoImprovement{'}'} rounds), the
+            threshold is lowered by 1 to explore more possibilities.
+          </Callout>
+        </Section>
+
+        {/* ─── Pareto Frontier ─── */}
+        <Section id="frontier" title="Pareto Frontier" subtitle="Tracking the best-performing skill configurations across multiple objectives.">
+          <p className="guide-text">
+            The Pareto frontier maintains the top-K skill configurations that are not dominated in any scoring dimension.
+            A configuration is &ldquo;dominated&rdquo; if another configuration scores higher in all three dimensions. This prevents
+            optimizing for one metric at the expense of others.
+          </p>
+
+          <h3 className="guide-h3">Scoring Dimensions</h3>
+          <div className="grid-3" style={{ marginBottom: 20 }}>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--green)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--green)', textTransform: 'uppercase', letterSpacing: 1 }}>Task Completion</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>How well does the agent complete user requests?</div>
+            </div>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--blue)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--blue)', textTransform: 'uppercase', letterSpacing: 1 }}>Correction Alignment</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>How accurately do skills reflect user corrections?</div>
+            </div>
+            <div className="guide-dimension-card" style={{ borderLeftColor: 'var(--purple)' }}>
+              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--purple)', textTransform: 'uppercase', letterSpacing: 1 }}>Side-Effect Free</div>
+              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>How clean are changes — no unintended regressions?</div>
+            </div>
+          </div>
+
+          <Callout type="tip">
+            The frontier capacity defaults to 5. When a new configuration is admitted and the frontier is full,
+            the dominated configuration with the lowest overall score is evicted.
+          </Callout>
+        </Section>
+
+        {/* ─── Regression Testing ─── */}
+        <Section id="regression" title="Regression Testing" subtitle="Golden cases and cross-skill validation ensure quality.">
+          <h3 className="guide-h3">Golden Cases</h3>
+          <p className="guide-text">
+            Golden cases are regression test scenarios tied to specific skills. They&apos;re created when:
+          </p>
+          <ul className="guide-list">
+            <li><strong>Init:</strong> Automatically generated from existing SKILL.md files during <code>helixevo init</code></li>
+            <li><strong>Evolution:</strong> When a failure is resolved, the scenario is promoted to a golden case</li>
+          </ul>
+          <p className="guide-text">
+            Each golden case stores the input, context, and expected behavior. During regression testing,
+            an LLM judge evaluates whether the modified skill would still handle each scenario correctly.
+          </p>
+
+          <h3 className="guide-h3">Cross-Skill Regression</h3>
+          <p className="guide-text">
+            When skill A is modified, Helix also tests golden cases from co-evolved, dependent, and enhancing
+            partner skills. This catches silent incompatibilities where changing one skill breaks a related skill&apos;s behavior.
+          </p>
+          <Code title="How it works">{`Skill A evolves
+  → Load skill graph edges
+  → Find partners (co-evolves, depends, enhances)
+  → Test partner golden cases against Skill A's changes
+  → Block if partner pass rate < 95%`}</Code>
+        </Section>
+
+        {/* ─── Proactive Research ─── */}
+        <Section id="research" title="Proactive Research" subtitle="Discover new skill opportunities through web research.">
+          <p className="guide-text">
+            The <code>research</code> command doesn&apos;t wait for failures — it proactively searches the web for best practices,
+            new techniques, and emerging patterns that could become valuable skills.
+          </p>
+          <div className="guide-pipeline">
+            <PipelineStep icon="1" title="Goal Understanding" color="var(--blue)" desc="Analyzes your project files (README, CLAUDE.md, package.json) and current skills to identify capability gaps." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="2" title="Frontier Scanning" color="var(--purple)" desc="Runs parallel web searches for each identified gap, focusing on 2025-2026 best practices." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="3" title="Hypothesis Generation" color="var(--yellow)" desc="Transforms discoveries into testable hypotheses with confidence scores. Only high-confidence (≥0.7) hypotheses proceed." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="4" title="Experimentation" color="var(--green)" desc="For each hypothesis: generates a SKILL.md, creates test scenarios, replays them, and judges quality. Iterates on existing drafts." />
+            <div className="guide-pipeline-connector" />
+            <PipelineStep icon="5" title="Knowledge Buffer" color="var(--blue)" desc="All discoveries are saved. Failed experiments are stored as drafts for future iteration. Nothing is wasted." />
+          </div>
+        </Section>
+
+        {/* ─── Skill Network ─── */}
+        <Section id="network" title="Skill Network" subtitle="Understanding the relationships between skills.">
+          <h3 className="guide-h3">Edge Types</h3>
+          <div className="guide-edge-grid">
+            {[
+              { type: 'inherits', color: 'var(--purple)', desc: 'Parent-child hierarchy. Project skills inherit from domain skills.' },
+              { type: 'depends', color: 'var(--blue)', desc: 'Hard dependency. Skill B requires Skill A to function correctly.' },
+              { type: 'enhances', color: 'var(--green)', desc: 'Soft relationship. Skill A makes Skill B more effective.' },
+              { type: 'conflicts', color: 'var(--red)', desc: 'Rule contradiction. Skill A\'s rules contradict Skill B\'s.' },
+              { type: 'co-evolves', color: 'var(--yellow)', desc: 'Statistical. Skills that frequently change together in evolution.' },
+            ].map(e => (
+              <div key={e.type} className="guide-edge-card">
+                <div className="guide-edge-type" style={{ color: e.color }}>{e.type}</div>
+                <div className="guide-edge-desc">{e.desc}</div>
+              </div>
+            ))}
+          </div>
+
+          <h3 className="guide-h3">Detection Methods</h3>
+          <ul className="guide-list">
+            <li><strong>Explicit:</strong> Declared in SKILL.md frontmatter (<code>parent</code>, <code>dependencies</code>, <code>enhances</code>, <code>conflicts</code>)</li>
+            <li><strong>LLM-inferred:</strong> An LLM analyzes skill descriptions to find implicit relationships</li>
+            <li><strong>Statistical:</strong> Co-evolution detected from evolution history (skills that change together)</li>
+          </ul>
+
+          <Code title="SKILL.md frontmatter example">{`---
+name: React Testing Patterns
+description: Best practices for testing React components
+layer: domain
+tags: [react, testing]
+dependencies: [react-best-practices]
+enhances: [code-review-guidelines]
+score: 0.85
+generation: 3
+---
+
+## Rules
+...`}</Code>
+        </Section>
+
+        {/* ─── Configuration ─── */}
+        <Section id="config" title="Configuration" subtitle="All configurable parameters and their defaults.">
+          <h3 className="guide-h3">Evolution</h3>
+          <div className="guide-params">
+            <Param name="model" type="string" desc="LLM model for proposals and clustering." def='"sonnet"' />
+            <Param name="judgeModel" type="string" desc="LLM model for judge evaluations." def='"sonnet"' />
+            <Param name="evolution.schedule" type="cron" desc="When to run automatic evolution." def='"0 2 * * *"' />
+            <Param name="evolution.minFailuresForEvolution" type="number" desc="Minimum unresolved failures before evolve runs." def="5" />
+            <Param name="evolution.maxFailuresPerRun" type="number" desc="Max failures to process per run." def="20" />
+            <Param name="evolution.maxProposalsPerRun" type="number" desc="Max proposals to generate per run." def="5" />
+            <Param name="evolution.stopAfterNoImprovement" type="number" desc="Rounds without improvement before stagnation mode." def="3" />
+            <Param name="evolution.frontierCapacity" type="number" desc="Maximum configurations in the Pareto frontier." def="5" />
+          </div>
+
+          <h3 className="guide-h3">Quality Gates</h3>
+          <div className="guide-params">
+            <Param name="quality.judgePassScore" type="number" desc="Minimum judge score to pass (1-10)." def="7" />
+            <Param name="quality.judgeConsensusMin" type="number" desc="Minimum judges that must pass." def="2" />
+            <Param name="quality.regressionPassRate" type="number" desc="Minimum golden case pass rate (0-1)." def="0.95" />
+            <Param name="quality.canaryDurationDays" type="number" desc="Days to monitor canary deployments." def="3" />
+            <Param name="quality.autoRollbackThreshold" type="number" desc="Failure rate multiplier triggering rollback." def="1.5" />
+            <Param name="quality.maxGoldenCases" type="number" desc="Maximum golden cases per skill." def="50" />
+          </div>
+
+          <Code title="~/.helix/config.json">{`{
+  "model": "sonnet",
+  "judgeModel": "sonnet",
+  "evolution": {
+    "schedule": "0 2 * * *",
+    "minFailuresForEvolution": 5,
+    "maxFailuresPerRun": 20,
+    "maxProposalsPerRun": 5,
+    "stopAfterNoImprovement": 3,
+    "frontierCapacity": 5
+  },
+  "quality": {
+    "judgePassScore": 7,
+    "judgeConsensusMin": 2,
+    "regressionPassRate": 0.95,
+    "canaryDurationDays": 3,
+    "autoRollbackThreshold": 1.5,
+    "maxGoldenCases": 50
+  }
+}`}</Code>
+        </Section>
+
+        {/* ─── Data & Storage ─── */}
+        <Section id="data" title="Data & Storage" subtitle="Where everything lives and how it's structured.">
+          <Code title="~/.helix/ directory structure">{`~/.helix/
+├── config.json              # Configuration
+├── failures.jsonl           # Captured failure records (append-only)
+├── frontier.json            # Pareto frontier (top-K programs)
+├── evolution-history.json   # All evolution iterations + proposals
+├── golden-cases.jsonl       # Regression test cases (append-only)
+├── skill-graph.json         # Cached network (nodes + edges)
+├── canary-registry.json     # Active canary deployments
+├── knowledge-buffer.json    # Research discoveries + drafts
+├── general/                 # Skills (SKILL.md files)
+│   ├── my-skill/SKILL.md
+│   └── ...
+├── backups/                 # Pre-canary skill backups
+└── reports/                 # Generated evolution reports`}</Code>
+
+          <h3 className="guide-h3">Key Data Formats</h3>
+          <div className="grid-2" style={{ gap: 12 }}>
+            <div className="guide-data-card">
+              <div className="guide-data-title">Failure Record</div>
+              <Code>{`{
+  "id": "f_abc123",
+  "sessionId": "session-001",
+  "project": "myapp",
+  "userRequest": "Add a login page",
+  "agentAction": "Created login.tsx",
+  "correction": "Use the existing auth hook",
+  "correctionType": "verbal",
+  "skillsActive": ["react-patterns"],
+  "resolved": false
+}`}</Code>
+            </div>
+            <div className="guide-data-card">
+              <div className="guide-data-title">Golden Case</div>
+              <Code>{`{
+  "id": "gc_react_42",
+  "skill": "react-patterns",
+  "input": "Create a form component",
+  "context": "React 19, TypeScript",
+  "expectedBehavior": "Uses useActionState for form submission...",
+  "lastResult": "pass",
+  "consecutivePasses": 5
+}`}</Code>
+            </div>
+          </div>
+        </Section>
+
+        {/* ─── Skill Management ─── */}
+        <Section id="manage" title="Skill Management" subtitle="Edit, create, promote, and delete skills directly from the dashboard.">
+          <p className="guide-text">
+            The <strong>Skill Network</strong> page in the dashboard is fully interactive. Click any skill to open its
+            detail panel, then use the action buttons to modify it. The network automatically adapts to your changes
+            and tells you when it can&apos;t.
+          </p>
+
+          <h3 className="guide-h3">Actions</h3>
+          <div className="guide-edge-grid">
+            {[
+              { type: '✎ Edit', color: 'var(--purple)', desc: 'Modify skill content inline. Dark-themed code editor with live save. Co-evolved partner skills are flagged for review.' },
+              { type: '↑ Promote', color: 'var(--blue)', desc: 'Move skill up one layer (project → domain → system). Warns about skipping layers and checks for overlap.' },
+              { type: '↓ Demote', color: 'var(--yellow)', desc: 'Move skill down one layer. Shows what depends on it and what might break.' },
+              { type: '✕ Delete', color: 'var(--red)', desc: 'Remove skill with confirmation. Shows orphaned children, broken dependencies, and coverage impact before deletion.' },
+              { type: '+ Create', color: 'var(--green)', desc: 'Create a new skill from scratch via the "+ New Skill" button. Includes slug input and SKILL.md template editor.' },
+            ].map(e => (
+              <div key={e.type} className="guide-edge-card">
+                <div className="guide-edge-type" style={{ color: e.color }}>{e.type}</div>
+                <div className="guide-edge-desc">{e.desc}</div>
+              </div>
+            ))}
+          </div>
+
+          <h3 className="guide-h3">Network Adaptation Feedback</h3>
+          <p className="guide-text">
+            After every action, the network adaptation engine analyzes the impact and shows feedback inline:
+          </p>
+          <ul className="guide-list">
+            <li><strong>Status badge:</strong> <span style={{ color: 'var(--green)' }}>ok</span> / <span style={{ color: 'var(--yellow)' }}>warning</span> / <span style={{ color: 'var(--red)' }}>action-needed</span></li>
+            <li><strong>Messages:</strong> What the change affects — orphaned skills, broken edges, co-evolved partners</li>
+            <li><strong>Suggestions:</strong> Actionable next steps — rewire children, merge with existing skills, run graph rebuild</li>
+          </ul>
+          <Callout type="info">
+            If the network <strong>cannot adapt</strong> to your change (e.g., deleting a parent skill with children),
+            it will show &ldquo;action-needed&rdquo; status and tell you exactly what to fix before proceeding.
+          </Callout>
+        </Section>
+
+        {/* ─── Craft Agent Integration ─── */}
+        <Section id="craft" title="Craft Agent Integration" subtitle="Use Helix from within Craft Agent.">
+          <p className="guide-text">
+            Helix ships with a Craft Agent skill at <code>integrations/craft-agent/</code>.
+            Install it to trigger evolution directly from your Craft Agent sessions.
+          </p>
+          <Step n={1} title="Copy the skill">
+            <Code title="Terminal">{`cp -r integrations/craft-agent/skills/skill-evolver ~/.agents/skills/`}</Code>
+          </Step>
+          <Step n={2} title="Use in a session">
+            <Code title="Craft Agent">{`[skill:skill-evolver] Run evolution on my latest session`}</Code>
+          </Step>
+          <Callout type="tip">
+            The skill-evolver skill automatically captures failures from your current Craft Agent session,
+            runs evolution, and reports results — all without leaving the conversation.
+          </Callout>
+        </Section>
+
+        {/* ─── FAQ ─── */}
+        <Section id="faq" title="FAQ" subtitle="Frequently asked questions.">
+          <FAQItem q="How many failures do I need before evolution works?">
+            By default, 5 unresolved failures are required (<code>minFailuresForEvolution</code>).
+            This ensures enough signal for meaningful pattern detection.
+          </FAQItem>
+          <FAQItem q="What LLM model does Helix use?">
+            Helix uses <code>claude --print</code> with configurable models (default: <code>sonnet</code>).
+            No API key is needed — it requires a Claude Max plan subscription. Judges and proposals can use different models.
+          </FAQItem>
+          <FAQItem q="Can I use Helix with other AI agents?">
+            Yes. Helix manages standard SKILL.md files with YAML frontmatter. Any agent that reads SKILL.md
+            files can benefit from Helix&apos;s evolution pipeline.
+          </FAQItem>
+          <FAQItem q="What happens during canary rollback?">
+            If the failure rate for a canary skill exceeds <code>autoRollbackThreshold</code> (default: 1.5x),
+            the skill is automatically reverted from the backup. The failed evolution is recorded in history.
+          </FAQItem>
+          <FAQItem q="How does cross-skill regression work?">
+            When Skill A evolves, Helix checks the skill graph for co-evolved, dependent, and enhancing
+            partners. It tests their golden cases against Skill A&apos;s changes. If partner pass rate drops below 95%,
+            the proposal is rejected.
+          </FAQItem>
+          <FAQItem q="How does the knowledge buffer work?">
+            All research discoveries are saved, even if the resulting hypothesis fails. Failed experiments above
+            a minimum score are saved as drafts. When the same hypothesis appears again, Helix iterates on
+            the draft rather than starting from scratch.
+          </FAQItem>
+          <FAQItem q="How does helixevo watch detect corrections?">
+            Two-stage detection: (1) Fast regex pre-filter checks for correction signals in English and Chinese
+            (e.g., &quot;wrong&quot;, &quot;not like that&quot;, &quot;不对&quot;, &quot;改成&quot;). (2) If a signal is detected, an LLM analyzes
+            the recent conversation window to extract structured failure records with confidence scores (&gt;0.7 required).
+          </FAQItem>
+          <FAQItem q="How do I prove Helix is working?">
+            Run <code>helixevo metrics</code>. It tracks correction rates per skill over 7-day rolling windows
+            and compares before/after rates for each evolution. The verdict shows how many evolutions actually
+            reduced corrections. This is closed-loop measurement — not LLM scores judging LLM output.
+          </FAQItem>
+          <FAQItem q="What is network health?">
+            Network health scores the entire skill network as a unit across 4 dimensions: cohesion (connectivity),
+            coverage (failure mapping), balance (hierarchy structure), and transfer rate (cross-project reuse).
+            It runs after every evolution and is shown in the summary. Run <code>helixevo health</code> to see the full report.
+          </FAQItem>
+          <FAQItem q="When does auto-generalization trigger?">
+            Automatically during <code>helixevo evolve</code> when the network health assessment detects cross-project
+            patterns — the same failure type appearing in 2+ projects. It creates a domain-level abstract skill,
+            validates with regression tests, and sets up parent/child inheritance with the source project skills.
+          </FAQItem>
+        </Section>
+
+        {/* Footer */}
+        <div className="guide-footer">
+          <div className="guide-footer-content">
+            <div style={{ fontSize: 13, fontWeight: 600 }}>Helix v0.2.0</div>
+            <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>
+              Self-evolving skill ecosystem for AI agents · MIT License
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── FAQ Item ───────────────────────────────────────────────────
+function FAQItem({ q, children }: { q: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className={`guide-faq-item ${open ? 'open' : ''}`} onClick={() => setOpen(!open)}>
+      <div className="guide-faq-question">
+        <span>{q}</span>
+        <span className="guide-faq-toggle">{open ? '−' : '+'}</span>
+      </div>
+      {open && <div className="guide-faq-answer">{children}</div>}
+    </div>
+  )
+}