helixevo 0.2.39 → 0.2.41

package/dashboard/components/update-banner.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const REGISTRY_URL = 'https://registry.npmjs.org/helixevo/latest'
 const CHECK_INTERVAL_MS = 60 * 60 * 1000
@@ -39,7 +39,10 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
     }
     check()
     const interval = setInterval(check, CHECK_INTERVAL_MS)
-    return () => { mounted = false; clearInterval(interval) }
+    return () => {
+      mounted = false
+      clearInterval(interval)
+    }
   }, [currentVersion])
 
   if (!latestVersion || dismissed) return null
@@ -56,24 +59,21 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
         setNewVersion(data.version)
         setState('reloading')
 
-        // Next.js dev mode detects config change and auto-restarts.
-        // Wait for recompilation, then poll until ready, then reload.
         let secs = 12
         setCountdown(secs)
         const timer = setInterval(async () => {
-          secs--
+          secs -= 1
           setCountdown(secs)
           if (secs <= 0) {
             clearInterval(timer)
-            // Try polling a few times before force-reloading
             for (let i = 0; i < 10; i++) {
               try {
                 const check = await fetch('/?_v=' + Date.now(), { cache: 'no-store' })
                 if (check.ok) break
               } catch {}
-              await new Promise(r => setTimeout(r, 1500))
+              await new Promise((resolve) => setTimeout(resolve, 1500))
             }
-            window.location.href = window.location.pathname + '?v=' + Date.now()
+            window.location.href = `${window.location.pathname}?v=${Date.now()}`
           }
         }, 1000)
       } else {
@@ -86,151 +86,107 @@ export function UpdateBanner({ currentVersion }: { currentVersion: string }) {
     }
   }
 
+  const tone = state === 'reloading' ? 'var(--green-border)' : state === 'error' ? 'var(--red-border)' : 'var(--purple-border)'
+  const progress = state === 'reloading' ? `${((12 - countdown) / 12) * 100}%` : '0%'
+
   return (
-    <div style={{
-      position: 'fixed',
-      bottom: 20,
-      right: 20,
-      width: 320,
-      background: 'var(--bg-card)',
-      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 */}
-      {(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',
-          }}
-        >&times;</button>
-      )}
-
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
-        <div style={{
-          width: 28, height: 28, borderRadius: '50%',
-          background: state === 'reloading' ? 'var(--green-light)' : state === 'error' ? 'var(--red-light)' : 'var(--purple-light)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-        }}>
-          {(state === 'updating' || state === 'reloading') ? (
-            <div style={{
-              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 === '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)' }}>
-            {state === 'updating' ? 'Installing...'
-              : state === 'reloading' ? 'Reloading...'
-              : state === 'error' ? 'Update Failed'
-              : 'Update Available'}
-          </div>
-          <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>
-            {state === 'reloading'
-              ? <>v{newVersion} installed — refreshing in {countdown}s</>
-              : <>v{currentVersion} &rarr; <span style={{ color: 'var(--green)', fontWeight: 600 }}>v{latestVersion}</span></>
-            }
+    <div
+      style={{
+        position: 'fixed',
+        right: 18,
+        bottom: 18,
+        width: 300,
+        zIndex: 9999,
+        borderRadius: 20,
+        border: `1px solid ${tone}`,
+        background: 'linear-gradient(180deg, rgba(255,255,255,0.95), rgba(249,245,239,0.94))',
+        boxShadow: 'var(--shadow-xl)',
+        overflow: 'hidden',
+        backdropFilter: 'blur(18px)',
+      }}
+    >
+      <div style={{ padding: '14px 16px 12px' }}>
+        {(state === 'idle' || state === 'error') ? (
+          <button
+            onClick={() => setDismissed(true)}
+            style={{
+              position: 'absolute',
+              top: 10,
+              right: 12,
+              border: 'none',
+              background: 'transparent',
+              color: 'var(--text-muted)',
+              fontSize: 16,
+              cursor: 'pointer',
+            }}
+          >
+            ×
+          </button>
+        ) : null}
+
+        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+          <div style={{ width: 34, height: 34, borderRadius: 12, background: state === 'error' ? 'var(--red-light)' : state === 'reloading' ? 'var(--green-light)' : 'var(--purple-light)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            {(state === 'updating' || state === 'reloading') ? (
+              <span style={{ width: 16, height: 16, border: `2px solid ${state === 'reloading' ? 'var(--green-border)' : 'var(--purple-border)'}`, borderTopColor: state === 'reloading' ? 'var(--green)' : 'var(--purple)', borderRadius: '50%', display: 'inline-block', animation: 'updateSpin 0.8s linear infinite' }} />
+            ) : state === 'error' ? (
+              <span style={{ color: 'var(--red)', fontWeight: 800 }}>!</span>
+            ) : (
+              <span style={{ color: 'var(--purple)', fontWeight: 800 }}>↑</span>
+            )}
           </div>
-        </div>
-      </div>
 
-      {/* 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,
-        }}>
-          <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>
-          Update Now
-        </button>
-      )}
-
-      {/* Updating */}
-      {state === 'updating' && (
-        <div style={{
-          padding: '9px 16px', background: 'var(--bg-section)',
-          borderRadius: 'var(--radius)', fontSize: 12,
-          color: 'var(--text-secondary)', textAlign: 'center',
-        }}>
-          Installing helixevo@latest...
-        </div>
-      )}
-
-      {/* Reloading with countdown */}
-      {state === 'reloading' && (
-        <div>
-          <div style={{
-            padding: '9px 16px', background: 'var(--green-light)',
-            borderRadius: 'var(--radius)', fontSize: 12,
-            color: 'var(--green)', textAlign: 'center', fontWeight: 600,
-            marginBottom: 8,
-          }}>
-            Dashboard will refresh automatically
-          </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 style={{ minWidth: 0 }}>
+            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--text)' }}>
+              {state === 'updating' ? 'Installing update…' : state === 'reloading' ? 'Reloading dashboard…' : state === 'error' ? 'Update failed' : 'Update available'}
+            </div>
+            <div style={{ marginTop: 4, fontSize: 11.5, color: 'var(--text-dim)', lineHeight: 1.5 }}>
+              {state === 'reloading'
+                ? <>v{newVersion} installed — refreshing in {countdown}s</>
+                : <>v{currentVersion} → <span style={{ color: 'var(--green)', fontWeight: 700 }}>v{latestVersion}</span></>}
+            </div>
           </div>
         </div>
-      )}
-
-      {/* Error */}
-      {state === 'error' && (
-        <>
-          <div style={{
-            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
+
+        {state === 'idle' ? (
+          <button
+            onClick={handleUpdate}
+            className="badge badge-purple"
+            style={{ marginTop: 14, border: 'none', cursor: 'pointer', width: '100%', justifyContent: 'center', padding: '10px 12px' }}
+          >
+            Update now
           </button>
-        </>
-      )}
+        ) : null}
+
+        {state === 'updating' ? (
+          <div style={{ marginTop: 14, fontSize: 11.5, color: 'var(--text-dim)' }}>Installing <code>helixevo@latest</code> and preparing the dashboard refresh.</div>
+        ) : null}
+
+        {state === 'reloading' ? (
+          <div style={{ marginTop: 14 }}>
+            <div style={{ height: 5, borderRadius: 999, background: 'rgba(97,93,86,0.14)', overflow: 'hidden' }}>
+              <div style={{ height: '100%', width: progress, background: 'linear-gradient(90deg, var(--green), var(--blue))', borderRadius: 999, transition: 'width 1s linear' }} />
+            </div>
+          </div>
+        ) : null}
+
+        {state === 'error' ? (
+          <>
+            <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 12, background: 'var(--red-light)', color: 'var(--red)', fontSize: 11.5, lineHeight: 1.55 }}>
+              {errorMsg}
+            </div>
+            <button
+              onClick={handleUpdate}
+              className="badge badge-gray"
+              style={{ marginTop: 12, border: 'none', cursor: 'pointer', width: '100%', justifyContent: 'center', padding: '10px 12px' }}
+            >
+              Retry update
+            </button>
+          </>
+        ) : null}
+      </div>
 
       <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); }
-        }
+        @keyframes updateSpin { to { transform: rotate(360deg); } }
       `}</style>
     </div>
   )

package/dashboard/lib/data.ts

@@ -90,9 +90,9 @@ export function loadHistory(): { iterations: Iteration[] } {
 }
 
 export function loadSkillTests(): { id: string; skill: string; input: string }[] {
-  const newFile = readJsonl('skill-tests.jsonl')
+  const newFile = readJsonl<{ id: string; skill: string; input: string }>('skill-tests.jsonl')
   if (newFile.length > 0) return newFile
-  return readJsonl('golden-cases.jsonl')
+  return readJsonl<{ id: string; skill: string; input: string }>('golden-cases.jsonl')
 }
 
 export function loadBuffer(): KnowledgeBuffer {