helixevo 0.2.39 → 0.2.41

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to HelixEvo are documented here.
 
+## [0.2.41] - 2026-03-23
+
+### Added
+- `helixevo dashboard` now checks npm for a newer HelixEvo release before launch and automatically updates itself before opening the dashboard
+- New `helixevo dashboard --no-auto-update` flag for users who want to skip the automatic update check
+
+### Changed
+- Dashboard launch messages now use the resolved current version more consistently after updates or relaunches
+- Commands and Guide reference pages now document the dashboard auto-update behavior and opt-out flag
+
+## [0.2.40] - 2026-03-23
+
+### Added
+- Premium dashboard shell with new shared UI primitives for sidebar navigation, page heroes, metric cards, section frames, and console panels
+- Rebuilt Overview, Evolution, Frontier, Research, Projects, and Skill Network surfaces with stronger hierarchy, warmer premium styling, and more flow-oriented layouts
+- Upgraded Project Setup into a full intake studio with improved local/GitHub setup, polished folder browser, richer streamed analysis console, and cleaner project portfolio cards
+- Redesigned Commands and Changelog pages with richer release/command summaries and premium reference layouts
+
+### Changed
+- Skill Network now has premium graph nodes, stronger graph framing, descriptive sub-view tabs, and a dedicated inspector sidebar for navigation and skill management
+- Guide page hero and table of contents were refined for better scanning, quick routing, and visual consistency with the dashboard shell
+
+### Fixed
+- Strict typing issues in dashboard network/data code paths uncovered during production build validation
+- Cleaned and revalidated production dashboard build behavior after the large redesign pass
+
 ## [0.2.39] - 2026-03-23
 
 ### Added

package/dashboard/app/changelog/page.tsx

@@ -1,6 +1,9 @@
 import { readFileSync, existsSync } from 'fs'
 import { join } from 'path'
 import { homedir } from 'os'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
 import { VERSION } from '@/lib/version'
 
 export const dynamic = 'force-dynamic'
@@ -11,7 +14,6 @@ function findChangelog(): string {
     join(homedir(), 'Documents', 'GitHub', 'helixevo', 'CHANGELOG.md'),
   ]
 
-  // Also check npm global install
   try {
     const { execSync } = require('child_process')
     const globalPrefix = execSync('npm prefix -g', { encoding: 'utf-8' }).trim()
@@ -19,10 +21,8 @@ function findChangelog(): string {
     candidates.push(join(globalPrefix, 'node_modules', 'helixevo', 'CHANGELOG.md'))
   } catch {}
 
-  for (const p of candidates) {
-    if (existsSync(p)) {
-      return readFileSync(p, 'utf-8')
-    }
+  for (const path of candidates) {
+    if (existsSync(path)) return readFileSync(path, 'utf-8')
   }
   return ''
 }
@@ -47,12 +47,14 @@ function parseChangelog(md: string): ChangelogEntry[] {
       currentSection = null
       continue
     }
+
     const sectionMatch = line.match(/^### (.+)/)
     if (sectionMatch && current) {
       currentSection = { title: sectionMatch[1], items: [] }
       current.sections.push(currentSection)
       continue
     }
+
     if (line.startsWith('- ') && current) {
       if (!currentSection) {
         currentSection = { title: 'Changes', items: [] }
@@ -61,82 +63,205 @@ function parseChangelog(md: string): ChangelogEntry[] {
       currentSection.items.push(line.slice(2))
     }
   }
+
   if (current) entries.push(current)
   return entries
 }
 
 export default function ChangelogPage() {
-  const md = findChangelog()
-  const entries = parseChangelog(md)
+  const markdown = findChangelog()
+  const entries = parseChangelog(markdown)
+  const latestEntry = entries[0]
+  const installedEntry = entries.find(entry => entry.version === VERSION)
+  const totalItems = entries.reduce((sum, entry) => sum + entry.sections.reduce((sectionSum, section) => sectionSum + section.items.length, 0), 0)
 
   return (
     <div>
-      <div className="page-header">
-        <h1 className="page-title">Changelog</h1>
-        <p className="page-desc">
-          What changed in each version of HelixEvo — currently on v{VERSION}
-        </p>
+      <PageHero
+        eyebrow="Release history"
+        title="Changelog"
+        description={`A version-by-version ledger of what changed in HelixEvo. You are currently running v${VERSION}.`}
+        chips={[
+          { label: `${entries.length} release${entries.length === 1 ? '' : 's'}`, tone: 'blue' },
+          { label: `${totalItems} logged changes`, tone: 'purple' },
+          { label: `installed v${VERSION}`, tone: 'green' },
+          latestEntry ? { label: `latest v${latestEntry.version}`, tone: latestEntry.version === VERSION ? 'green' : 'yellow' } : { label: 'changelog unavailable', tone: 'red' },
+        ]}
+        actions={
+          latestEntry ? (
+            <div className="hero-note-card">
+              <div className="hero-note-label">Current release lens</div>
+              <div className="hero-note-title">Latest published version: v{latestEntry.version}</div>
+              <div className="hero-note-copy">Use this page to compare the installed version against recent releases and scan the release narrative over time.</div>
+            </div>
+          ) : null
+        }
+      />
+
+      <div className="grid-4" style={{ marginBottom: 24 }}>
+        <MetricCard label="Release entries" value={entries.length} sublabel="Parsed from CHANGELOG.md across the local package or repository." tone="blue" />
+        <MetricCard label="Installed version" value={`v${VERSION}`} sublabel={installedEntry ? `Found in changelog dated ${installedEntry.date || 'undated'}.` : 'Current version is not present in the parsed changelog.'} tone="green" />
+        <MetricCard label="Latest release" value={latestEntry ? `v${latestEntry.version}` : '—'} sublabel={latestEntry?.date || 'No changelog date available'} tone={latestEntry?.version === VERSION ? 'green' : 'yellow'} />
+        <MetricCard label="Tracked changes" value={totalItems} sublabel="Bulleted items parsed across every changelog section." tone="purple" />
       </div>
 
       {entries.length === 0 ? (
-        <div className="card">
+        <SectionFrame
+          eyebrow="Missing release log"
+          title="No changelog found"
+          description="CHANGELOG.md was not found in the current package installation or repository checkout."
+          tone="red"
+        >
           <div className="empty-state">
             <div className="empty-state-title">No changelog found</div>
             <div className="empty-state-desc">
-              CHANGELOG.md was not found in the package installation.
+              Ensure <code>CHANGELOG.md</code> is bundled with the package or available in the working repository.
             </div>
           </div>
-        </div>
+        </SectionFrame>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {entries.map((entry, i) => (
-            <div key={entry.version} className="card" style={{
-              borderLeft: i === 0 ? '3px solid var(--green)' : undefined,
-            }}>
-              <div className="card-body">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
-                  <span style={{
-                    fontSize: 15, fontWeight: 700, color: 'var(--text)',
-                    fontFamily: 'var(--font-mono)',
-                  }}>
-                    v{entry.version}
-                  </span>
-                  {i === 0 && (
-                    <span className="badge badge-green">latest</span>
-                  )}
-                  {entry.version === VERSION && (
-                    <span className="badge badge-blue">installed</span>
-                  )}
-                  {entry.date && (
-                    <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{entry.date}</span>
-                  )}
+        <>
+          {latestEntry ? (
+            <SectionFrame
+              eyebrow="Release spotlight"
+              title={`v${latestEntry.version}`}
+              description={latestEntry.date || 'Current top entry in the parsed release history.'}
+              tone={latestEntry.version === VERSION ? 'green' : 'yellow'}
+            >
+              <div className="grid-2" style={{ alignItems: 'start' }}>
+                <div style={{ display: 'grid', gap: 12 }}>
+                  {latestEntry.sections.map((section, index) => (
+                    <div key={`${latestEntry.version}-${section.title}-${index}`} style={{
+                      padding: '16px 18px',
+                      borderRadius: 20,
+                      border: '1px solid var(--border)',
+                      background: 'rgba(255,255,255,0.76)',
+                    }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', marginBottom: 10, flexWrap: 'wrap' }}>
+                        <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--text)', textTransform: 'uppercase', letterSpacing: 0.7 }}>
+                          {section.title}
+                        </div>
+                        <span className="hero-chip hero-chip-neutral">{section.items.length} item{section.items.length === 1 ? '' : 's'}</span>
+                      </div>
+                      <div style={{ display: 'grid', gap: 8 }}>
+                        {section.items.map((item, itemIndex) => (
+                          <div key={`${latestEntry.version}-${section.title}-${itemIndex}`} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+                            <span style={{ color: 'var(--green)', fontWeight: 800, fontSize: 14 }}>•</span>
+                            <span style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.65 }}>{item}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                <div style={{
+                  padding: '18px 20px',
+                  borderRadius: 22,
+                  border: '1px solid var(--border)',
+                  background: 'linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,242,236,0.96))',
+                  boxShadow: 'var(--shadow-sm)',
+                }}>
+                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>
+                    Release context
+                  </div>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
+                    <span className={`hero-chip hero-chip-${latestEntry.version === VERSION ? 'green' : 'yellow'}`}>{latestEntry.version === VERSION ? 'Installed now' : 'Ahead of installed version'}</span>
+                    {latestEntry.date ? <span className="hero-chip hero-chip-blue">{latestEntry.date}</span> : null}
+                  </div>
+                  <div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.7, marginBottom: 12 }}>
+                    The spotlight release gives you the fastest read on the current product narrative: what changed most recently, how many grouped sections shipped, and whether your installed build matches the latest logged release.
+                  </div>
+                  <div className="grid-2" style={{ gap: 10 }}>
+                    <div style={{ padding: '12px 14px', borderRadius: 16, background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.16)' }}>
+                      <div style={{ fontSize: 10, color: 'var(--green)', textTransform: 'uppercase', fontWeight: 700, letterSpacing: 0.5, marginBottom: 4 }}>Sections</div>
+                      <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--green)' }}>{latestEntry.sections.length}</div>
+                    </div>
+                    <div style={{ padding: '12px 14px', borderRadius: 16, background: 'rgba(107,73,223,0.08)', border: '1px solid rgba(107,73,223,0.16)' }}>
+                      <div style={{ fontSize: 10, color: 'var(--purple)', textTransform: 'uppercase', fontWeight: 700, letterSpacing: 0.5, marginBottom: 4 }}>Items</div>
+                      <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--purple)' }}>{latestEntry.sections.reduce((sum, section) => sum + section.items.length, 0)}</div>
+                    </div>
+                  </div>
                 </div>
+              </div>
+            </SectionFrame>
+          ) : null}
+
+          <SectionFrame
+            eyebrow="Release ledger"
+            title="Version history"
+            description="A clean timeline of every parsed release entry, with the newest releases first."
+            tone="blue"
+          >
+            <div style={{ display: 'grid', gap: 14 }}>
+              {entries.map((entry, index) => {
+                const isLatest = index === 0
+                const isInstalled = entry.version === VERSION
+                const itemCount = entry.sections.reduce((sum, section) => sum + section.items.length, 0)
 
-                {entry.sections.map((section, j) => (
-                  <div key={j} style={{ marginBottom: j < entry.sections.length - 1 ? 12 : 0 }}>
+                return (
+                  <article key={entry.version} className="card" style={{
+                    overflow: 'hidden',
+                    borderColor: isLatest ? 'rgba(16,185,129,0.22)' : isInstalled ? 'rgba(59,130,246,0.22)' : undefined,
+                  }}>
                     <div style={{
-                      fontSize: 10, fontWeight: 700, color: 'var(--text-muted)',
-                      textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 6,
+                      padding: '16px 18px',
+                      borderBottom: '1px solid var(--border-subtle)',
+                      background: isLatest
+                        ? 'linear-gradient(135deg, rgba(16,185,129,0.08), rgba(255,255,255,0.88))'
+                        : isInstalled
+                          ? 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(255,255,255,0.88))'
+                          : 'linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,241,236,0.82))',
                     }}>
-                      {section.title}
+                      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+                        <div>
+                          <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginBottom: 8 }}>
+                            <code style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 800, color: 'var(--text)' }}>v{entry.version}</code>
+                            {isLatest ? <span className="hero-chip hero-chip-green">latest</span> : null}
+                            {isInstalled ? <span className="hero-chip hero-chip-blue">installed</span> : null}
+                          </div>
+                          <div style={{ fontSize: 12.5, color: 'var(--text-dim)' }}>{entry.date || 'Undated release entry'}</div>
+                        </div>
+                        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                          <span className="hero-chip hero-chip-neutral">{entry.sections.length} section{entry.sections.length === 1 ? '' : 's'}</span>
+                          <span className="hero-chip hero-chip-purple">{itemCount} item{itemCount === 1 ? '' : 's'}</span>
+                        </div>
+                      </div>
                     </div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                      {section.items.map((item, k) => (
-                        <div key={k} style={{
-                          fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5,
-                          paddingLeft: 12,
-                          borderLeft: '2px solid var(--border)',
+
+                    <div className="card-body" style={{ display: 'grid', gap: 14 }}>
+                      {entry.sections.map((section, sectionIndex) => (
+                        <div key={`${entry.version}-${section.title}-${sectionIndex}`} style={{
+                          padding: '14px 16px',
+                          borderRadius: 18,
+                          background: 'rgba(255,255,255,0.72)',
+                          border: '1px solid var(--border)',
                         }}>
-                          {item}
+                          <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>
+                            {section.title}
+                          </div>
+                          <div style={{ display: 'grid', gap: 8 }}>
+                            {section.items.map((item, itemIndex) => (
+                              <div key={`${entry.version}-${section.title}-${itemIndex}`} style={{
+                                paddingLeft: 12,
+                                borderLeft: '2px solid var(--border)',
+                                fontSize: 12.5,
+                                color: 'var(--text-secondary)',
+                                lineHeight: 1.65,
+                              }}>
+                                {item}
+                              </div>
+                            ))}
+                          </div>
                         </div>
                       ))}
                     </div>
-                  </div>
-                ))}
-              </div>
+                  </article>
+                )
+              })}
             </div>
-          ))}
-        </div>
+          </SectionFrame>
+        </>
       )}
     </div>
   )