helixevo 0.2.28 → 0.2.29

package/dashboard/app/api/upgrade/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server'
 import { execSync } from 'child_process'
-import { existsSync, cpSync, readdirSync, rmSync, writeFileSync, mkdirSync } from 'fs'
+import { existsSync, cpSync, readdirSync, rmSync, writeFileSync, readFileSync, mkdirSync } from 'fs'
 import { join } from 'path'
 import { homedir } from 'os'
 
@@ -45,8 +45,15 @@ function copyDashboardFiles(sourceDir: string, newVersion: string): void {
   // Write version marker
   writeFileSync(join(HELIX_DASHBOARD_DIR, '.helixevo-version'), newVersion)
 
-  // Also write .env.local — survives copyToHelix overwrites from old CLIs
+  // Write .env.local — survives copyToHelix overwrites from old CLIs
   writeFileSync(join(HELIX_DASHBOARD_DIR, '.env.local'), `HELIXEVO_VERSION=${newVersion}\n`)
+
+  // Touch next.config.mjs to trigger Next.js dev mode auto-restart
+  const configPath = join(HELIX_DASHBOARD_DIR, 'next.config.mjs')
+  if (existsSync(configPath)) {
+    const content = readFileSync(configPath, 'utf-8')
+    writeFileSync(configPath, content) // rewrite same content = new mtime
+  }
 }
 
 export async function POST() {

package/dashboard/components/update-banner.tsx

@@ -15,7 +15,7 @@ function compareVersions(current: string, latest: string): boolean {
   return false
 }
 
-type UpdateState = 'idle' | 'updating' | 'installed' | 'error'
+type UpdateState = 'idle' | 'updating' | 'reloading' | 'error'
 
 export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [latestVersion, setLatestVersion] = useState<string | null>(null)
@@ -23,7 +23,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [state, setState] = useState<UpdateState>('idle')
   const [newVersion, setNewVersion] = useState<string | null>(null)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const [copied, setCopied] = useState(false)
+  const [countdown, setCountdown] = useState(0)
 
   useEffect(() => {
     let mounted = true
@@ -53,8 +53,22 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       const data = await res.json()
 
       if (data.success) {
-        setState('installed')
         setNewVersion(data.version)
+        setState('reloading')
+
+        // Next.js dev mode detects config change and auto-restarts.
+        // Wait for it to recompile, then reload.
+        let secs = 8
+        setCountdown(secs)
+        const timer = setInterval(() => {
+          secs--
+          setCountdown(secs)
+          if (secs <= 0) {
+            clearInterval(timer)
+            // Hard reload with cache busting
+            window.location.href = window.location.pathname + '?v=' + Date.now()
+          }
+        }, 1000)
       } else {
         setState('error')
         setErrorMsg(data.error ?? 'Update failed')
@@ -65,65 +79,47 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
     }
   }
 
-  const restartCmd = 'helixevo dashboard'
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(restartCmd)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {}
-  }
-
   return (
     <div style={{
       position: 'fixed',
       bottom: 20,
       right: 20,
-      width: 340,
+      width: 320,
       background: 'var(--bg-card)',
-      border: `1px solid ${state === 'installed' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
+      border: `1px solid ${state === 'reloading' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
       borderRadius: 'var(--radius-lg)',
       boxShadow: 'var(--shadow-xl)',
       padding: '16px 18px',
       zIndex: 9999,
       animation: 'updateSlideIn 0.4s ease-out',
     }}>
-      {/* Close button */}
-      {state !== 'updating' && (
+      {/* Close */}
+      {(state === 'idle' || state === 'error') && (
         <button
           onClick={() => setDismissed(true)}
           style={{
             position: 'absolute', top: 8, right: 10,
             background: 'none', border: 'none', cursor: 'pointer',
-            color: 'var(--text-dim)', fontSize: 18, lineHeight: 1,
-            padding: '2px 4px',
+            color: 'var(--text-dim)', fontSize: 18, lineHeight: 1, padding: '2px 4px',
           }}
-          aria-label="Dismiss"
-        >
-          &times;
-        </button>
+        >&times;</button>
       )}
 
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
         <div style={{
           width: 28, height: 28, borderRadius: '50%',
-          background: state === 'installed' ? 'var(--green-light)'
-            : state === 'error' ? 'var(--red-light)'
-            : 'var(--purple-light)',
-          display: 'flex',
-          alignItems: 'center', justifyContent: 'center',
+          background: state === 'reloading' ? 'var(--green-light)' : state === 'error' ? 'var(--red-light)' : 'var(--purple-light)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
         }}>
-          {state === 'updating' ? (
+          {(state === 'updating' || state === 'reloading') ? (
             <div style={{
-              width: 14, height: 14, border: '2px solid var(--purple-border)',
-              borderTopColor: 'var(--purple)', borderRadius: '50%',
+              width: 14, height: 14,
+              border: `2px solid ${state === 'reloading' ? 'var(--green-border)' : 'var(--purple-border)'}`,
+              borderTopColor: state === 'reloading' ? 'var(--green)' : 'var(--purple)',
+              borderRadius: '50%',
               animation: 'updateSpin 0.8s linear infinite',
             }} />
-          ) : state === 'installed' ? (
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--green)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M20 6L9 17l-5-5" />
-            </svg>
           ) : state === 'error' ? (
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--red)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M18 6L6 18M6 6l12 12" />
@@ -135,41 +131,29 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
           )}
         </div>
         <div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.2 }}>
+          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>
             {state === 'updating' ? 'Installing...'
-              : state === 'installed' ? 'Installed!'
+              : state === 'reloading' ? 'Reloading...'
               : state === 'error' ? 'Update Failed'
               : 'Update Available'}
           </div>
           <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-            {state === 'installed'
-              ? <>v{newVersion} is ready</>
+            {state === 'reloading'
+              ? <>v{newVersion} installed — refreshing in {countdown}s</>
               : <>v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span></>
             }
           </div>
         </div>
       </div>
 
-      {/* Idle — Update Now button */}
+      {/* Idle */}
       {state === 'idle' && (
-        <button
-          onClick={handleUpdate}
-          style={{
-            width: '100%',
-            padding: '9px 16px',
-            background: 'var(--purple)',
-            color: '#fff',
-            border: 'none',
-            borderRadius: 'var(--radius)',
-            fontSize: 13,
-            fontWeight: 600,
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 6,
-          }}
-        >
+        <button onClick={handleUpdate} style={{
+          width: '100%', padding: '9px 16px',
+          background: 'var(--purple)', color: '#fff', border: 'none',
+          borderRadius: 'var(--radius)', fontSize: 13, fontWeight: 600, cursor: 'pointer',
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+        }}>
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M12 19V5m-7 7l7-7 7 7" />
           </svg>
@@ -177,62 +161,36 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         </button>
       )}
 
-      {/* Updating spinner */}
+      {/* Updating */}
       {state === 'updating' && (
         <div style={{
-          width: '100%',
-          padding: '9px 16px',
-          background: 'var(--bg-section)',
-          borderRadius: 'var(--radius)',
-          fontSize: 12,
-          color: 'var(--text-secondary)',
-          textAlign: 'center',
+          padding: '9px 16px', background: 'var(--bg-section)',
+          borderRadius: 'var(--radius)', fontSize: 12,
+          color: 'var(--text-secondary)', textAlign: 'center',
         }}>
           Installing helixevo@latest...
         </div>
       )}
 
-      {/* Installed — restart instructions */}
-      {state === 'installed' && (
+      {/* Reloading with countdown */}
+      {state === 'reloading' && (
         <div>
           <div style={{
-            padding: '10px 14px',
-            background: 'var(--green-light)',
-            borderRadius: 'var(--radius)',
-            fontSize: 12,
-            color: 'var(--green)',
-            fontWeight: 600,
-            marginBottom: 10,
-            textAlign: 'center',
+            padding: '9px 16px', background: 'var(--green-light)',
+            borderRadius: 'var(--radius)', fontSize: 12,
+            color: 'var(--green)', textAlign: 'center', fontWeight: 600,
+            marginBottom: 8,
           }}>
-            v{newVersion} installed successfully
+            Dashboard will refresh automatically
           </div>
-          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 8, lineHeight: 1.5 }}>
-            Restart the dashboard to load the new version:
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-              1. Press <kbd style={{ padding: '1px 5px', background: 'var(--bg-section)', borderRadius: 3, fontFamily: 'var(--font-mono)', fontSize: 10, border: '1px solid var(--border)' }}>Ctrl+C</kbd> in the terminal running the dashboard
-            </div>
-            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-              2. Run:
-            </div>
-            <div
-              onClick={handleCopy}
-              style={{
-                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                padding: '7px 12px',
-                background: 'var(--bg-section)', border: '1px solid var(--border)',
-                borderRadius: 'var(--radius)',
-                fontFamily: 'var(--font-mono)', fontSize: 11,
-                color: 'var(--text)', cursor: 'pointer',
-              }}
-            >
-              <span>$ {restartCmd}</span>
-              <span style={{ fontSize: 10, color: copied ? 'var(--green)' : 'var(--purple)', fontWeight: 600, fontFamily: 'var(--font)' }}>
-                {copied ? 'Copied!' : 'Copy'}
-              </span>
-            </div>
+          {/* Progress bar */}
+          <div style={{ height: 3, background: 'var(--bg-section)', borderRadius: 2, overflow: 'hidden' }}>
+            <div style={{
+              height: '100%', background: 'var(--green)',
+              borderRadius: 2,
+              width: `${((8 - countdown) / 8) * 100}%`,
+              transition: 'width 1s linear',
+            }} />
           </div>
         </div>
       )}
@@ -241,32 +199,18 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       {state === 'error' && (
         <>
           <div style={{
-            width: '100%',
-            padding: '8px 12px',
-            background: 'var(--red-light)',
-            borderRadius: 'var(--radius)',
-            fontSize: 11,
-            color: 'var(--red)',
-            marginBottom: 8,
-            maxHeight: 60,
-            overflow: 'auto',
+            padding: '8px 12px', background: 'var(--red-light)',
+            borderRadius: 'var(--radius)', fontSize: 11, color: 'var(--red)',
+            marginBottom: 8, maxHeight: 60, overflow: 'auto',
           }}>
             {errorMsg}
           </div>
-          <button
-            onClick={handleUpdate}
-            style={{
-              width: '100%',
-              padding: '7px 12px',
-              background: 'var(--bg-section)',
-              color: 'var(--text-secondary)',
-              border: '1px solid var(--border)',
-              borderRadius: 'var(--radius)',
-              fontSize: 12,
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-          >
+          <button onClick={handleUpdate} style={{
+            width: '100%', padding: '7px 12px',
+            background: 'var(--bg-section)', color: 'var(--text-secondary)',
+            border: '1px solid var(--border)', borderRadius: 'var(--radius)',
+            fontSize: 12, fontWeight: 600, cursor: 'pointer',
+          }}>
             Retry
           </button>
         </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helixevo",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "Self-evolving skill ecosystem for AI agents. Skills and projects co-evolve through multi-judge evaluation and a Pareto frontier.",
   "type": "module",
   "bin": {