helixevo 0.2.39 → 0.2.40

package/dashboard/components/quick-actions.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useRef, type ReactNode, type ComponentType } from 'react'
+import { useRef, useState, type ComponentType } from 'react'
+import { ConsolePanel } from './console-panel'
 
 interface Action {
   id: string
@@ -22,10 +23,17 @@ interface QuickActionsProps {
 
 type RunState = 'idle' | 'running' | 'success' | 'error' | 'stopped'
 
+function toneForState(state: RunState): 'neutral' | 'green' | 'red' | 'yellow' {
+  if (state === 'success') return 'green'
+  if (state === 'error') return 'red'
+  if (state === 'stopped') return 'yellow'
+  return 'neutral'
+}
+
 export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActionsProps) {
   const [running, setRunning] = useState<string | null>(null)
   const [state, setState] = useState<RunState>('idle')
-  const [output, setOutput] = useState<string>('')
+  const [output, setOutput] = useState('')
   const abortRef = useRef<AbortController | null>(null)
   const outputRef = useRef<HTMLPreElement | null>(null)
 
@@ -61,10 +69,8 @@ export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActions
         if (done) break
 
         buffer += decoder.decode(value, { stream: true })
-
-        // Parse SSE events from buffer
         const events = buffer.split('\n\n')
-        buffer = events.pop() ?? '' // keep incomplete event
+        buffer = events.pop() ?? ''
 
         for (const event of events) {
           const lines = event.split('\n')
@@ -80,11 +86,8 @@ export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActions
             try {
               const text = JSON.parse(eventData) as string
               setOutput(prev => prev + text)
-              // Auto-scroll to bottom
               setTimeout(() => {
-                if (outputRef.current) {
-                  outputRef.current.scrollTop = outputRef.current.scrollHeight
-                }
+                if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight
               }, 10)
             } catch {}
           }
@@ -106,8 +109,7 @@ export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActions
         }
       }
 
-      // If we reach here without a 'done' event, mark as complete
-      if (state === 'running') setState('success')
+      setState(prev => prev === 'running' ? 'success' : prev)
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') {
         try { await fetch('/api/run', { method: 'DELETE' }) } catch {}
@@ -130,176 +132,100 @@ export function QuickActions({ actions, flowDiagram: FlowDiagram }: QuickActions
   const handleClose = () => {
     setRunning(null)
     setState('idle')
-    setOutput(null)
+    setOutput('')
   }
 
-  const stateColor = state === 'success' ? 'var(--green)'
-    : state === 'error' ? 'var(--red)'
-    : state === 'stopped' ? 'var(--yellow)'
-    : 'var(--text-secondary)'
-
-  const stateBorderColor = state === 'success' ? 'var(--green-border)'
-    : state === 'error' ? 'var(--red-border)'
-    : state === 'stopped' ? 'var(--yellow-border)'
-    : 'var(--border)'
-
-  const stateBgColor = state === 'success' ? 'var(--green-light)'
-    : state === 'error' ? 'var(--red-light)'
-    : state === 'stopped' ? 'var(--yellow-light)'
-    : 'var(--bg-section)'
+  const currentAction = actions.find(action => action.id === running)
 
   return (
     <>
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 10 }}>
-        {actions.map(action => (
-          <button
-            key={action.id}
-            onClick={() => handleRun(action)}
-            disabled={action.disabled || (running !== null && running !== action.id)}
-            title={action.disabled ? action.disabledReason : action.description}
-            style={{
-              display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4,
-              padding: '14px 16px',
-              background: action.disabled ? 'var(--bg-section)' : 'var(--bg-card)',
-              border: `1px solid ${running === action.id && state === 'running' ? action.color : 'var(--border)'}`,
-              borderRadius: 'var(--radius-lg)',
-              fontSize: 12,
-              fontWeight: 600,
-              color: action.disabled ? 'var(--text-muted)' : 'var(--text-secondary)',
-              cursor: action.disabled ? 'not-allowed' : 'pointer',
-              opacity: (running !== null && running !== action.id) ? 0.4 : 1,
-              transition: 'all 0.2s',
-              textAlign: 'left',
-            }}
-          >
-            {/* Header: icon + label */}
-            <div style={{ display: 'flex', alignItems: 'center', gap: 7, width: '100%' }}>
-              {running === action.id && state === 'running' ? (
-                <span style={{
-                  width: 16, height: 16, border: '2px solid var(--border)',
-                  borderTopColor: action.color, borderRadius: '50%',
-                  animation: 'actionSpin 0.8s linear infinite',
-                  flexShrink: 0,
-                }} />
-              ) : (
-                <div style={{
-                  width: 26, height: 26, borderRadius: 7, flexShrink: 0,
-                  background: action.disabled ? 'var(--bg-hover)' : `${action.color}12`,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                }}>
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
-                    stroke={action.disabled ? 'var(--text-muted)' : action.color}
-                    strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d={action.icon} />
-                  </svg>
+      <div className="quick-actions-grid">
+        {actions.map((action) => {
+          const cardColor = action.disabled ? 'var(--text-muted)' : action.color
+          return (
+            <button
+              key={action.id}
+              onClick={() => handleRun(action)}
+              disabled={action.disabled || (running !== null && running !== action.id)}
+              title={action.disabled ? action.disabledReason : action.description}
+              className="action-card"
+              style={{
+                color: cardColor,
+                opacity: running !== null && running !== action.id ? 0.42 : 1,
+                background: action.disabled ? 'linear-gradient(180deg, rgba(239,235,228,0.88), rgba(239,235,228,0.8))' : undefined,
+                borderColor: running === action.id && state === 'running' ? action.color : undefined,
+              }}
+            >
+              <div className="action-card-header">
+                <div className="action-card-icon" style={{ color: cardColor, background: action.disabled ? 'rgba(255,255,255,0.55)' : `${action.color}18` }}>
+                  {running === action.id && state === 'running' ? (
+                    <span style={{ width: 16, height: 16, border: '2px solid rgba(97,93,86,0.28)', borderTopColor: action.color, borderRadius: '50%', animation: 'actionSpin 0.8s linear infinite' }} />
+                  ) : (
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <path d={action.icon} />
+                    </svg>
+                  )}
                 </div>
-              )}
-              <span style={{ fontSize: 13 }}>{action.label}</span>
-            </div>
-
-            {/* Subtitle */}
-            {action.subtitle && (
-              <div style={{
-                fontSize: 11, fontWeight: 400, lineHeight: 1.45,
-                color: action.disabled ? 'var(--text-muted)' : 'var(--text-dim)',
-                marginTop: 2,
-              }}>
-                {action.disabled ? action.disabledReason : action.subtitle}
+                <div className="action-card-title">{action.label}</div>
               </div>
-            )}
 
-            {/* Flow diagram */}
-            {FlowDiagram && action.flowSteps && !action.disabled && (
-              <FlowDiagram steps={action.flowSteps} color={action.color} />
-            )}
-          </button>
-        ))}
+              {action.subtitle ? (
+                <div className="action-card-subtitle">
+                  {action.disabled ? action.disabledReason : action.subtitle}
+                </div>
+              ) : null}
+
+              {FlowDiagram && action.flowSteps && !action.disabled ? (
+                <FlowDiagram steps={action.flowSteps} color={action.color} />
+              ) : null}
+            </button>
+          )
+        })}
       </div>
 
-      {/* Output panel */}
-      {running && state !== 'idle' && (
-        <div style={{
-          marginTop: 14,
-          background: 'var(--bg-card)',
-          border: `1px solid ${stateBorderColor}`,
-          borderRadius: 'var(--radius-lg)',
-          overflow: 'hidden',
-        }}>
-          <div style={{
-            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-            padding: '10px 14px',
-            background: stateBgColor,
-            borderBottom: '1px solid var(--border)',
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600 }}>
-              {state === 'running' && (
-                <span style={{
-                  width: 12, height: 12, border: '2px solid var(--border)',
-                  borderTopColor: 'var(--purple)', borderRadius: '50%',
-                  animation: 'actionSpin 0.8s linear infinite',
-                }} />
-              )}
-              {state === 'success' && <span style={{ color: 'var(--green)' }}>&#10003;</span>}
-              {state === 'error' && <span style={{ color: 'var(--red)' }}>&#10007;</span>}
-              {state === 'stopped' && <span style={{ color: 'var(--yellow)' }}>&#9632;</span>}
-              <span style={{ color: stateColor }}>
-                {state === 'running' ? `Running ${actions.find(a => a.id === running)?.label}...`
-                  : state === 'success' ? 'Completed'
-                  : state === 'stopped' ? 'Stopped'
-                  : 'Failed'}
+      {running && state !== 'idle' ? (
+        <div style={{ marginTop: 16 }}>
+          <ConsolePanel
+            tone={toneForState(state)}
+            title={
+              <span>
+                {state === 'running' ? `Running ${currentAction?.label ?? 'Action'}…` :
+                  state === 'success' ? `${currentAction?.label ?? 'Action'} completed` :
+                  state === 'stopped' ? `${currentAction?.label ?? 'Action'} stopped` :
+                  `${currentAction?.label ?? 'Action'} failed`}
               </span>
-            </div>
-            <div style={{ display: 'flex', gap: 6 }}>
-              {state === 'running' && (
-                <button onClick={handleStop} style={{
-                  background: 'var(--red)', color: '#fff', border: 'none', borderRadius: 'var(--radius)',
-                  padding: '3px 12px', fontSize: 11, fontWeight: 600, cursor: 'pointer',
-                  display: 'flex', alignItems: 'center', gap: 4,
-                }}>
-                  <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-                    <rect x="4" y="4" width="16" height="16" rx="2" />
-                  </svg>
-                  Stop
-                </button>
-              )}
-              {state !== 'running' && (
-                <>
-                  <button onClick={() => { window.location.reload() }} style={{
-                    background: 'none', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                    padding: '3px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer',
-                    color: 'var(--text-secondary)',
-                  }}>
-                    Refresh
-                  </button>
-                  <button onClick={handleClose} style={{
-                    background: 'none', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                    padding: '3px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer',
-                    color: 'var(--text-secondary)',
-                  }}>
-                    Close
-                  </button>
-                </>
-              )}
-            </div>
-          </div>
-
-          <pre ref={outputRef} style={{
-            padding: '12px 14px', margin: 0,
-            fontSize: 11, lineHeight: 1.5,
-            fontFamily: 'var(--font-mono)',
-            color: 'var(--text-secondary)',
-            maxHeight: 400, overflow: 'auto',
-            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-          }}>
-            {output || (state === 'running' ? 'Starting...' : 'No output')}
-          </pre>
+            }
+            actions={
+              state === 'running' ? (
+                <button onClick={handleStop} className="badge badge-red" style={{ border: 'none', cursor: 'pointer' }}>Stop</button>
+              ) : (
+                <div style={{ display: 'flex', gap: 8 }}>
+                  <button onClick={() => window.location.reload()} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Refresh</button>
+                  <button onClick={handleClose} className="badge badge-gray" style={{ border: 'none', cursor: 'pointer' }}>Close</button>
+                </div>
+              )
+            }
+          >
+            <pre
+              ref={outputRef}
+              style={{
+                margin: 0,
+                padding: '16px 18px',
+                fontSize: 11.5,
+                lineHeight: 1.62,
+                color: 'var(--text-secondary)',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+              }}
+            >
+              {output || (state === 'running' ? 'Starting…' : 'No output')}
+            </pre>
+          </ConsolePanel>
         </div>
-      )}
+      ) : null}
 
       <style>{`
-        @keyframes actionSpin {
-          to { transform: rotate(360deg); }
-        }
+        @keyframes actionSpin { to { transform: rotate(360deg); } }
       `}</style>
     </>
   )

package/dashboard/components/section-frame.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+export function SectionFrame({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  tone = 'neutral',
+  className = '',
+}: {
+  eyebrow?: string
+  title: string
+  description?: ReactNode
+  actions?: ReactNode
+  children: ReactNode
+  tone?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red'
+  className?: string
+}) {
+  return (
+    <section className={`section-frame section-frame-${tone} ${className}`.trim()}>
+      <div className="section-frame-header">
+        <div>
+          {eyebrow ? <div className="section-frame-eyebrow">{eyebrow}</div> : null}
+          <div className="section-frame-title">{title}</div>
+          {description ? <div className="section-frame-description">{description}</div> : null}
+        </div>
+        {actions ? <div className="section-frame-actions">{actions}</div> : null}
+      </div>
+      <div className="section-frame-body">{children}</div>
+    </section>
+  )
+}

package/dashboard/components/sidebar-nav.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+interface NavItem {
+  href: string
+  label: string
+  icon: string
+}
+
+const WORKSPACE_NAV: NavItem[] = [
+  { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
+  { href: '/network', label: 'Skill Network', icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' },
+  { href: '/evolution', label: 'Evolution', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
+  { href: '/research', label: 'Research', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
+  { href: '/frontier', label: 'Frontier', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  { href: '/projects', label: 'Projects', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' },
+]
+
+const REFERENCE_NAV: NavItem[] = [
+  { href: '/commands', label: 'Commands', icon: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' },
+  { href: '/guide', label: 'Guide', icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253' },
+  { href: '/changelog', label: 'Changelog', icon: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8' },
+]
+
+function NavIcon({ d }: { d: string }) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {d.split(' M').map((segment, idx) => (
+        <path key={idx} d={idx === 0 ? segment : `M${segment}`} />
+      ))}
+    </svg>
+  )
+}
+
+function isActive(pathname: string, href: string) {
+  if (href === '/') return pathname === '/'
+  return pathname === href || pathname.startsWith(`${href}/`)
+}
+
+function NavGroup({ title, items, pathname }: { title: string; items: NavItem[]; pathname: string }) {
+  return (
+    <div className="sidebar-group">
+      <div className="sidebar-group-label">{title}</div>
+      <div className="sidebar-group-items">
+        {items.map((item) => {
+          const active = isActive(pathname, item.href)
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`nav-item ${active ? 'active' : ''}`}
+              aria-current={active ? 'page' : undefined}
+            >
+              <span className="nav-icon"><NavIcon d={item.icon} /></span>
+              <span>{item.label}</span>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export function SidebarNav() {
+  const pathname = usePathname() || '/'
+
+  return (
+    <>
+      <NavGroup title="Workspace" items={WORKSPACE_NAV} pathname={pathname} />
+      <NavGroup title="Reference" items={REFERENCE_NAV} pathname={pathname} />
+    </>
+  )
+}