helixevo 0.2.39 → 0.2.41

package/dashboard/app/guide/page.tsx

@@ -225,10 +225,25 @@ export default function GuidePage() {
     <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-header" style={{ alignItems: 'flex-start' }}>
+          <div>
+            <div className="guide-toc-title">Field Guide</div>
+            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.45 }}>
+              CLI, evolution, research, and network operations in one manual.
+            </div>
+          </div>
           <div className="guide-toc-version">v{VERSION}</div>
         </div>
+        <div style={{ padding: '14px 20px 12px', borderBottom: '1px solid var(--border)' }}>
+          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>
+            Recommended path
+          </div>
+          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+            <a href="#quickstart" className="hero-chip hero-chip-blue" style={{ textDecoration: 'none' }}>Quick Start</a>
+            <a href="#watch" className="hero-chip hero-chip-green" style={{ textDecoration: 'none' }}>Always-On</a>
+            <a href="#evolution" className="hero-chip hero-chip-purple" style={{ textDecoration: 'none' }}>Evolution</a>
+          </div>
+        </div>
         {TOC.map(item => (
           <a
             key={item.id}
@@ -253,6 +268,35 @@ export default function GuidePage() {
             Capture failures, evolve skills through multi-judge evaluation, and maintain
             a Pareto frontier of optimal configurations.
           </p>
+          <div className="hero-chip-row" style={{ marginTop: 18 }}>
+            <span className="hero-chip hero-chip-blue">v{VERSION}</span>
+            <span className="hero-chip hero-chip-purple">{TOC.length} sections</span>
+            <span className="hero-chip hero-chip-green">CLI + dashboard + network</span>
+            <span className="hero-chip hero-chip-yellow">operator reference</span>
+          </div>
+
+          <div className="grid-3" style={{ marginTop: 24, marginBottom: 24 }}>
+            <div className="card" style={{ padding: '18px 18px 16px' }}>
+              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Start here</div>
+              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', marginBottom: 6 }}>Quick Start → Watch → Evolve</div>
+              <div style={{ fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.6 }}>If you are new, this path gets HelixEvo initialized, learning from corrections, and producing measurable skill improvements.</div>
+            </div>
+            <div className="card" style={{ padding: '18px 18px 16px' }}>
+              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Core mental model</div>
+              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', marginBottom: 6 }}>Capture failures, mutate skills, validate aggressively</div>
+              <div style={{ fontSize: 12.5, color: 'var(--text-dim)', lineHeight: 1.6 }}>The system only gets better when real corrections are fed into evaluation, regression testing, and monitored deployment.</div>
+            </div>
+            <div className="card" style={{ padding: '18px 18px 16px' }}>
+              <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Fast jumps</div>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <a href="#quickstart" className="hero-chip hero-chip-blue" style={{ textDecoration: 'none' }}>Quick Start</a>
+                <a href="#commands" className="hero-chip hero-chip-purple" style={{ textDecoration: 'none' }}>Commands</a>
+                <a href="#architecture" className="hero-chip hero-chip-green" style={{ textDecoration: 'none' }}>Architecture</a>
+                <a href="#network" className="hero-chip hero-chip-yellow" style={{ textDecoration: 'none' }}>Skill Network</a>
+              </div>
+            </div>
+          </div>
+
           <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" />
@@ -406,8 +450,8 @@ helixevo status`}</Code>
               },
               {
                 cmd: 'helixevo dashboard',
-                desc: 'Open the interactive web dashboard at localhost:3847. Shows overview, skill network, evolution timeline, research, and frontier.',
-                flags: [],
+                desc: 'Open the interactive web dashboard at localhost:3847. Before launch, HelixEvo checks npm for a newer version and auto-updates itself unless you opt out.',
+                flags: ['--background', '--stop', '--no-auto-update'],
               },
               {
                 cmd: 'helixevo status',

package/dashboard/app/layout.tsx

@@ -3,91 +3,62 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 import { VERSION } from '../lib/version'
 import { UpdateBanner } from '../components/update-banner'
+import { SidebarNav } from '../components/sidebar-nav'
 
 export const metadata: Metadata = {
   title: 'HelixEvo',
   description: 'HelixEvo — Self-evolving skill ecosystem for AI agents',
 }
 
-const NAV = [
-  { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
-  { href: '/network', label: 'Skill Network', icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' },
-  { href: '/evolution', label: 'Evolution', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
-  { href: '/research', label: 'Research', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
-  { href: '/frontier', label: 'Frontier', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
-  { href: '/projects', label: 'Projects', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' },
-  { href: '/commands', label: 'Commands', icon: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' },
-  { href: '/guide', label: 'Guide', icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253' },
-]
-
-function NavIcon({ d }: { d: string }) {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-      <path d={d} />
-    </svg>
-  )
-}
-
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
-        <div style={{ display: 'flex', minHeight: '100vh' }}>
-          {/* Sidebar */}
+        <div className="app-shell">
           <nav className="sidebar">
-            {/* Logo */}
             <div className="sidebar-logo">
               <div className="logo-icon">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                   <circle cx="12" cy="12" r="3" />
                   <path d="M12 2v4m0 12v4m-7.07-15.07l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
                 </svg>
               </div>
-              <div>
-                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.3 }}>HelixEvo</div>
-                <div style={{ fontSize: 10, color: 'var(--text-muted)', letterSpacing: 0.3 }}>Co-evolving AI Skills</div>
+              <div className="sidebar-brand">
+                <div className="sidebar-title">HelixEvo</div>
+                <div className="sidebar-subtitle">Premium cockpit for evolving AI skills</div>
+                <div className="sidebar-meta">
+                  <span className="sidebar-signal">
+                    <span className="sidebar-signal-dot" />
+                    Live system
+                  </span>
+                  <span className="hero-chip hero-chip-neutral">v{VERSION}</span>
+                </div>
               </div>
             </div>
 
-            {/* Nav items */}
-            <div style={{ padding: '16px 6px', flex: 1 }}>
-              <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, padding: '0 14px 10px' }}>
-                Navigation
-              </div>
-              {NAV.map(n => (
-                <Link key={n.href} href={n.href} className="nav-item">
-                  <NavIcon d={n.icon} />
-                  {n.label}
-                </Link>
-              ))}
+            <div className="sidebar-content">
+              <SidebarNav />
             </div>
 
-            {/* Footer */}
-            <div className="sidebar-footer" style={{ flexDirection: 'column', gap: 8 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }} />
-                  <span>System Active</span>
+            <div className="sidebar-footer">
+              <div className="sidebar-footer-grid">
+                <div>
+                  <div className="sidebar-footer-label">Status</div>
+                  <div className="sidebar-footer-value">Tracking skills, failures, frontier, and experiments</div>
                 </div>
-                <code style={{ fontSize: 10, background: 'var(--bg-section)', padding: '2px 7px', borderRadius: 4, color: 'var(--text-dim)' }}>v{VERSION}</code>
+                <Link href="/changelog" className="sidebar-footer-link">
+                  Release notes
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M7 17L17 7" />
+                    <path d="M7 7h10v10" />
+                  </svg>
+                </Link>
               </div>
-              <Link href="/changelog" style={{
-                textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 5,
-                fontSize: 10, color: 'var(--text-muted)', width: '100%',
-                padding: '4px 0', transition: 'color 0.15s',
-              }}>
-                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-                  <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
-                </svg>
-                Changelog
-              </Link>
             </div>
           </nav>
 
-          {/* Main content */}
           <main className="main-content">
-            {children}
+            <div className="main-content-inner">{children}</div>
           </main>
         </div>
         <UpdateBanner currentVersion={VERSION} />