helixevo 0.2.11 → 0.2.12

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

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server'
+import { execSync } from 'child_process'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST() {
+  try {
+    // Run the upgrade command
+    const output = execSync('npm install -g helixevo@latest 2>&1', {
+      encoding: 'utf-8',
+      timeout: 120000, // 2 minute timeout
+      env: { ...process.env },
+    })
+
+    // Get the new version
+    let newVersion = ''
+    try {
+      newVersion = execSync('helixevo --version 2>/dev/null', { encoding: 'utf-8' }).trim()
+    } catch {
+      // Try parsing from output
+      const match = output.match(/helixevo@(\d+\.\d+\.\d+)/)
+      newVersion = match?.[1] ?? 'unknown'
+    }
+
+    return NextResponse.json({
+      success: true,
+      version: newVersion,
+      output: output.slice(-500), // last 500 chars
+    })
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : String(err)
+    return NextResponse.json({
+      success: false,
+      error: message.slice(-500),
+    }, { status: 500 })
+  }
+}

package/dashboard/components/update-banner.tsx

@@ -15,10 +15,14 @@ function compareVersions(current: string, latest: string): boolean {
   return false
 }
 
+type UpdateState = 'idle' | 'updating' | 'success' | 'error'
+
 export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
   const [latestVersion, setLatestVersion] = useState<string | null>(null)
   const [dismissed, setDismissed] = useState(false)
-  const [copied, setCopied] = useState(false)
+  const [state, setState] = useState<UpdateState>('idle')
+  const [newVersion, setNewVersion] = useState<string | null>(null)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
 
   useEffect(() => {
     let mounted = true
@@ -41,14 +45,29 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
 
   if (!latestVersion || dismissed) return null
 
-  const command = 'npm install -g helixevo@latest'
+  const handleUpdate = async () => {
+    setState('updating')
+    setErrorMsg(null)
 
-  const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(command)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {}
+      const res = await fetch('/api/upgrade', { method: 'POST' })
+      const data = await res.json()
+
+      if (data.success) {
+        setState('success')
+        setNewVersion(data.version)
+        // Reload after a brief delay to show success state
+        setTimeout(() => {
+          window.location.reload()
+        }, 2000)
+      } else {
+        setState('error')
+        setErrorMsg(data.error ?? 'Update failed')
+      }
+    } catch (err) {
+      setState('error')
+      setErrorMsg('Network error — try running: npm install -g helixevo@latest')
+    }
   }
 
   return (
@@ -58,7 +77,7 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       right: 20,
       width: 320,
       background: 'var(--bg-card)',
-      border: '1px solid var(--purple-border)',
+      border: `1px solid ${state === 'success' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'}`,
       borderRadius: 'var(--radius-lg)',
       boxShadow: 'var(--shadow-xl)',
       padding: '16px 18px',
@@ -66,83 +85,168 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
       animation: 'updateSlideIn 0.4s ease-out',
     }}>
       {/* Close button */}
-      <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',
-        }}
-        aria-label="Dismiss"
-      >
-        &times;
-      </button>
+      {state !== 'updating' && (
+        <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',
+          }}
+          aria-label="Dismiss"
+        >
+          &times;
+        </button>
+      )}
 
       {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
         <div style={{
           width: 28, height: 28, borderRadius: '50%',
-          background: 'var(--purple-light)', display: 'flex',
+          background: state === 'success' ? 'var(--green-light)'
+            : state === 'error' ? 'var(--red-light)'
+            : 'var(--purple-light)',
+          display: 'flex',
           alignItems: 'center', justifyContent: 'center',
         }}>
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M12 19V5m-7 7l7-7 7 7" />
-          </svg>
+          {state === 'updating' ? (
+            <div style={{
+              width: 14, height: 14, border: '2px solid var(--purple-border)',
+              borderTopColor: 'var(--purple)', borderRadius: '50%',
+              animation: 'updateSpin 0.8s linear infinite',
+            }} />
+          ) : state === 'success' ? (
+            <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" />
+            </svg>
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--purple)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 19V5m-7 7l7-7 7 7" />
+            </svg>
+          )}
         </div>
         <div>
           <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', letterSpacing: -0.2 }}>
-            Update Available
+            {state === 'updating' ? 'Updating...'
+              : state === 'success' ? 'Updated!'
+              : state === 'error' ? 'Update Failed'
+              : 'Update Available'}
           </div>
           <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-            v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span>
+            {state === 'success'
+              ? <>Now on <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{newVersion}</span> — restarting...</>
+              : <>v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span></>
+            }
           </div>
         </div>
       </div>
 
-      {/* Command */}
-      <div
-        onClick={handleCopy}
-        style={{
+      {/* Action area */}
+      {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,
+            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" />
+          </svg>
+          Update Now
+        </button>
+      )}
+
+      {state === 'updating' && (
+        <div style={{
+          width: '100%',
+          padding: '9px 16px',
           background: 'var(--bg-section)',
-          border: '1px solid var(--border)',
           borderRadius: 'var(--radius)',
-          padding: '8px 12px',
-          fontFamily: 'var(--font-mono)',
-          fontSize: 11,
+          fontSize: 12,
           color: 'var(--text-secondary)',
-          cursor: 'pointer',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          gap: 8,
-          transition: 'border-color 0.15s',
-        }}
-        title="Click to copy"
-      >
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          $ {command}
-        </span>
-        <span style={{
-          fontSize: 10, fontFamily: 'var(--font)', fontWeight: 600,
-          color: copied ? 'var(--green)' : 'var(--purple)',
-          whiteSpace: 'nowrap',
-          flexShrink: 0,
+          textAlign: 'center',
         }}>
-          {copied ? 'Copied!' : 'Copy'}
-        </span>
-      </div>
+          Installing helixevo@latest...
+        </div>
+      )}
 
-      {/* Subtle hint */}
-      <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 8, textAlign: 'center' }}>
-        Run in terminal, then refresh dashboard
-      </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...
+        </div>
+      )}
+
+      {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',
+          }}>
+            {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',
+            }}
+          >
+            Retry
+          </button>
+        </>
+      )}
 
       <style>{`
         @keyframes updateSlideIn {
           from { opacity: 0; transform: translateY(16px) scale(0.97); }
           to { opacity: 1; transform: translateY(0) scale(1); }
         }
+        @keyframes updateSpin {
+          to { transform: rotate(360deg); }
+        }
       `}</style>
     </div>
   )

package/package.json

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