helixevo 0.2.26 → 0.2.27

package/dashboard/components/update-banner.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 
 const REGISTRY_URL = 'https://registry.npmjs.org/helixevo/latest'
-const CHECK_INTERVAL_MS = 60 * 60 * 1000 // re-check every hour
+const CHECK_INTERVAL_MS = 60 * 60 * 1000
 
 function compareVersions(current: string, latest: string): boolean {
   const c = current.split('.').map(Number)
@@ -15,7 +15,7 @@ function compareVersions(current: string, latest: string): boolean {
   return false
 }
 
-type UpdateState = 'idle' | 'updating' | 'success' | 'error'
+type UpdateState = 'idle' | 'updating' | 'installed' | 'error'
 
 export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [latestVersion, setLatestVersion] = useState<string | null>(null)
@@ -23,10 +23,10 @@ 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)
 
   useEffect(() => {
     let mounted = true
-
     async function check() {
       try {
         const res = await fetch(REGISTRY_URL)
@@ -37,7 +37,6 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         }
       } catch {}
     }
-
     check()
     const interval = setInterval(check, CHECK_INTERVAL_MS)
     return () => { mounted = false; clearInterval(interval) }
@@ -54,49 +53,35 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       const data = await res.json()
 
       if (data.success) {
-        setState('success')
+        setState('installed')
         setNewVersion(data.version)
-
-        // Tell server to restart, then wait and reload
-        try {
-          await fetch('/api/restart', { method: 'POST' })
-        } catch {}
-
-        // Wait for: shutdown (2s) + port release (2s) + restart + compile (~8s)
-        // Then try to reload, retrying if server isn't ready
-        await new Promise(r => setTimeout(r, 6000))
-
-        for (let attempt = 0; attempt < 20; attempt++) {
-          try {
-            const check = await fetch('/?_bust=' + Date.now(), { cache: 'no-store' })
-            if (check.ok) {
-              window.location.href = window.location.pathname + '?updated=' + Date.now()
-              return
-            }
-          } catch {}
-          await new Promise(r => setTimeout(r, 2000))
-        }
-
-        // Final fallback
-        window.location.href = window.location.pathname + '?updated=' + Date.now()
       } else {
         setState('error')
         setErrorMsg(data.error ?? 'Update failed')
       }
-    } catch (err) {
+    } catch {
       setState('error')
       setErrorMsg('Network error — try running: npm install -g helixevo@latest')
     }
   }
 
+  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: 320,
+      width: 340,
       background: 'var(--bg-card)',
-      border: `1px solid ${state === 'success' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
+      border: `1px solid ${state === 'installed' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
       borderRadius: 'var(--radius-lg)',
       boxShadow: 'var(--shadow-xl)',
       padding: '16px 18px',
@@ -123,7 +108,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
         <div style={{
           width: 28, height: 28, borderRadius: '50%',
-          background: state === 'success' ? 'var(--green-light)'
+          background: state === 'installed' ? 'var(--green-light)'
             : state === 'error' ? 'var(--red-light)'
             : 'var(--purple-light)',
           display: 'flex',
@@ -135,7 +120,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
               borderTopColor: 'var(--purple)', borderRadius: '50%',
               animation: 'updateSpin 0.8s linear infinite',
             }} />
-          ) : state === 'success' ? (
+          ) : 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>
@@ -151,21 +136,21 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         </div>
         <div>
           <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.2 }}>
-            {state === 'updating' ? 'Updating...'
-              : state === 'success' ? 'Updated!'
+            {state === 'updating' ? 'Installing...'
+              : state === 'installed' ? 'Installed!'
               : state === 'error' ? 'Update Failed'
               : 'Update Available'}
           </div>
           <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-            {state === 'success'
-              ? <>Now on <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{newVersion}</span> — restarting...</>
+            {state === 'installed'
+              ? <>v{newVersion} is ready</>
               : <>v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span></>
             }
           </div>
         </div>
       </div>
 
-      {/* Action area */}
+      {/* Idle — Update Now button */}
       {state === 'idle' && (
         <button
           onClick={handleUpdate}
@@ -183,18 +168,16 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
             alignItems: 'center',
             justifyContent: 'center',
             gap: 6,
-            transition: 'opacity 0.15s',
           }}
-          onMouseOver={e => (e.currentTarget.style.opacity = '0.9')}
-          onMouseOut={e => (e.currentTarget.style.opacity = '1')}
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" />
+            <path d="M12 19V5m-7 7l7-7 7 7" />
           </svg>
           Update Now
         </button>
       )}
 
+      {/* Updating spinner */}
       {state === 'updating' && (
         <div style={{
           width: '100%',
@@ -209,21 +192,52 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         </div>
       )}
 
-      {state === 'success' && (
-        <div style={{
-          width: '100%',
-          padding: '9px 16px',
-          background: 'var(--green-light)',
-          borderRadius: 'var(--radius)',
-          fontSize: 12,
-          color: 'var(--green)',
-          textAlign: 'center',
-          fontWeight: 600,
-        }}>
-          Restarting dashboard...
+      {/* Installed — restart instructions */}
+      {state === 'installed' && (
+        <div>
+          <div style={{
+            padding: '10px 14px',
+            background: 'var(--green-light)',
+            borderRadius: 'var(--radius)',
+            fontSize: 12,
+            color: 'var(--green)',
+            fontWeight: 600,
+            marginBottom: 10,
+            textAlign: 'center',
+          }}>
+            v{newVersion} installed successfully
+          </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>
+          </div>
         </div>
       )}
 
+      {/* Error */}
       {state === 'error' && (
         <>
           <div style={{

package/package.json

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