helixevo 0.2.39 → 0.2.40

package/dashboard/components/SkillFlowNode.tsx

@@ -20,170 +20,128 @@ interface SkillNodeData {
 
 const CATEGORY_STYLES = {
   generalized: {
-    border: '#c4b5fd',
-    bg: 'linear-gradient(180deg, #faf5ff 0%, #f5f0ff 100%)',
-    headerBg: '#ede9fe',
-    accent: '#7c3aed',
+    border: '#c7b8ff',
+    accent: '#6b49df',
     label: 'GENERALIZED',
+    bg: 'linear-gradient(180deg, rgba(250,245,255,0.98) 0%, rgba(244,238,255,0.95) 100%)',
+    header: 'linear-gradient(180deg, rgba(237,230,255,0.98), rgba(247,242,255,0.88))',
   },
   evolved: {
-    border: '#86efac',
-    bg: 'linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%)',
-    headerBg: '#dcfce7',
-    accent: '#16a34a',
+    border: '#b4dfd2',
+    accent: '#0f8363',
     label: 'EVOLVED',
+    bg: 'linear-gradient(180deg, rgba(241,252,247,0.98) 0%, rgba(236,249,243,0.95) 100%)',
+    header: 'linear-gradient(180deg, rgba(223,245,236,0.98), rgba(243,252,248,0.9))',
   },
   original: {
-    border: '#d1d5db',
-    bg: 'linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%)',
-    headerBg: '#f3f4f6',
-    accent: '#6b7280',
+    border: '#ddd6cd',
+    accent: '#676259',
     label: 'ORIGINAL',
+    bg: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(249,246,241,0.95) 100%)',
+    header: 'linear-gradient(180deg, rgba(244,240,235,0.96), rgba(255,255,255,0.92))',
   },
   project: {
-    border: '#fcd34d',
-    bg: 'linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%)',
-    headerBg: '#fef3c7',
-    accent: '#b45309',
+    border: '#ecd28f',
+    accent: '#b67b12',
     label: 'PROJECT',
+    bg: 'linear-gradient(180deg, rgba(255,252,242,0.98) 0%, rgba(255,247,228,0.95) 100%)',
+    header: 'linear-gradient(180deg, rgba(255,243,208,0.98), rgba(255,250,240,0.9))',
   },
+} as const
+
+function metricPill(label: string, value: number, color: string) {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', borderRadius: 999, background: 'rgba(255,255,255,0.76)', border: '1px solid rgba(123,109,91,0.12)', fontSize: 9.5, fontWeight: 700, color }}>
+      <span>{label}</span>
+      <span>{value}</span>
+    </span>
+  )
 }
 
 function SkillFlowNode({ data }: { data: SkillNodeData }) {
   const style = CATEGORY_STYLES[data.category]
   const scorePercent = Math.round(data.score * 100)
-  const scoreColor = data.score >= 0.8 ? '#059669' : data.score >= 0.6 ? '#d97706' : '#dc2626'
+  const scoreColor = data.score >= 0.8 ? '#0f8363' : data.score >= 0.6 ? '#c18a17' : '#cb4f40'
+  const summary = data.evolutionSummary[0] ?? data.description
+  const relationCount = data.inheritsFrom.length + data.children.length + data.enhances.length + data.conflicts.length
 
   return (
-    <div style={{
-      background: style.bg,
-      border: `1.5px solid ${style.border}`,
-      borderRadius: 14,
-      width: 280,
-      fontFamily: '-apple-system, BlinkMacSystemFont, SF Pro Display, system-ui, sans-serif',
-      boxShadow: '0 2px 8px rgba(0,0,0,0.06), 0 0px 1px rgba(0,0,0,0.04)',
-      overflow: 'hidden',
-      transition: 'box-shadow 0.2s ease',
-    }}>
+    <div
+      style={{
+        width: 304,
+        borderRadius: 18,
+        overflow: 'hidden',
+        border: `1.5px solid ${style.border}`,
+        background: style.bg,
+        boxShadow: '0 18px 34px rgba(48, 30, 12, 0.12), 0 2px 8px rgba(48, 30, 12, 0.05)',
+        backdropFilter: 'blur(12px)',
+        color: '#171613',
+        fontFamily: 'Inter, system-ui, sans-serif',
+      }}
+    >
       <Handle type="target" position={Position.Top} style={{ background: style.border, width: 8, height: 8, border: '2px solid #fff' }} />
       <Handle type="source" position={Position.Bottom} style={{ background: style.border, width: 8, height: 8, border: '2px solid #fff' }} />
       <Handle type="target" position={Position.Left} id="left" style={{ background: style.border, width: 6, height: 6, border: '2px solid #fff' }} />
       <Handle type="source" position={Position.Right} id="right" style={{ background: style.border, width: 6, height: 6, border: '2px solid #fff' }} />
 
-      {/* Header */}
-      <div style={{
-        padding: '10px 16px',
-        background: style.headerBg,
-        borderBottom: `1px solid ${style.border}40`,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-      }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{
-            fontSize: 9,
-            fontWeight: 700,
-            letterSpacing: 1.5,
-            color: style.accent,
-            textTransform: 'uppercase',
-            marginBottom: 3,
-          }}>
-            {style.label}
-          </div>
-          <div style={{
-            fontSize: 14,
-            fontWeight: 700,
-            color: '#1a1d2e',
-            lineHeight: 1.3,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}>
-            {data.name}
+      <div style={{ padding: '14px 16px 12px', background: style.header, borderBottom: `1px solid ${style.border}` }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start' }}>
+          <div style={{ minWidth: 0, flex: 1 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6, flexWrap: 'wrap' }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', padding: '3px 8px', borderRadius: 999, background: `${style.accent}14`, color: style.accent, border: `1px solid ${style.accent}22`, fontSize: 9.5, fontWeight: 800, letterSpacing: '0.1em' }}>
+                {style.label}
+              </span>
+              <span style={{ fontSize: 9.5, color: '#6d675f', fontWeight: 700, letterSpacing: '0.08em' }}>
+                {data.layer.toUpperCase()}
+              </span>
+            </div>
+            <div style={{ fontSize: 15, fontWeight: 800, lineHeight: 1.22, letterSpacing: '-0.03em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {data.name}
+            </div>
           </div>
-        </div>
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          marginLeft: 10,
-          flexShrink: 0,
-        }}>
-          <div style={{
-            fontSize: 20,
-            fontWeight: 800,
-            color: scoreColor,
-            lineHeight: 1,
-          }}>
-            {scorePercent}
+
+          <div style={{ minWidth: 64, textAlign: 'right' }}>
+            <div style={{ fontSize: 24, fontWeight: 850, lineHeight: 1, color: scoreColor }}>{scorePercent}</div>
+            <div style={{ marginTop: 4, fontSize: 8.5, fontWeight: 800, letterSpacing: '0.16em', color: '#8f877d' }}>SCORE</div>
           </div>
-          <div style={{ fontSize: 8, color: '#9ca3af', marginTop: 1, fontWeight: 500 }}>SCORE</div>
         </div>
-      </div>
 
-      {/* Body */}
-      <div style={{ padding: '10px 16px 12px' }}>
-        {/* Score Bar */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
-          <div style={{ flex: 1, height: 4, background: '#e5e7eb', borderRadius: 2, overflow: 'hidden' }}>
-            <div style={{ width: `${scorePercent}%`, height: '100%', background: `linear-gradient(90deg, ${style.accent}80, ${scoreColor})`, borderRadius: 2, transition: 'width 0.5s ease' }} />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
+          <div style={{ flex: 1, height: 6, borderRadius: 999, overflow: 'hidden', background: 'rgba(108,99,90,0.14)' }}>
+            <div style={{ width: `${scorePercent}%`, height: '100%', borderRadius: 999, background: `linear-gradient(90deg, ${style.accent}, ${scoreColor})` }} />
           </div>
-          {data.generation > 0 && (
-            <span style={{
-              fontSize: 9, fontWeight: 700, padding: '1px 6px', borderRadius: 4,
-              background: '#dcfce7', color: '#059669',
-            }}>gen {data.generation}</span>
-          )}
+          {data.generation > 0 ? (
+            <span style={{ flexShrink: 0, padding: '3px 8px', borderRadius: 999, background: 'rgba(15,131,99,0.12)', color: '#0f8363', fontSize: 9.5, fontWeight: 800 }}>
+              gen {data.generation}
+            </span>
+          ) : null}
         </div>
+      </div>
 
-        {/* Evolution Summary or Description */}
-        {data.evolutionSummary.length > 0 ? (
-          <div style={{ marginBottom: 8 }}>
-            {data.evolutionSummary.slice(0, 2).map((s, i) => (
-              <div key={i} style={{
-                fontSize: 10, color: '#4b5563', lineHeight: 1.4, marginBottom: 3,
-                paddingLeft: 8, borderLeft: `2px solid ${style.accent}40`,
-              }}>
-                {s.slice(0, 70)}{s.length > 70 ? '...' : ''}
-              </div>
-            ))}
-          </div>
-        ) : data.description ? (
-          <div style={{ fontSize: 10, color: '#6b7280', lineHeight: 1.4, marginBottom: 8 }}>
-            {data.description.slice(0, 90)}{data.description.length > 90 ? '...' : ''}
+      <div style={{ padding: '14px 16px 16px' }}>
+        {summary ? (
+          <div style={{ marginBottom: 12, padding: '10px 11px', borderRadius: 12, background: 'rgba(255,255,255,0.72)', border: '1px solid rgba(123,109,91,0.12)', fontSize: 10.5, lineHeight: 1.55, color: '#4d4942' }}>
+            {summary.slice(0, 118)}{summary.length > 118 ? '…' : ''}
           </div>
         ) : null}
 
-        {/* Connection Indicators */}
-        {(data.inheritsFrom.length > 0 || data.children.length > 0 || data.enhances.length > 0 || data.conflicts.length > 0) && (
-          <div style={{ display: 'flex', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
-            {data.inheritsFrom.length > 0 && (
-              <span style={{ fontSize: 9, color: '#818cf8', fontWeight: 500 }}>↑ {data.inheritsFrom.length}</span>
-            )}
-            {data.children.length > 0 && (
-              <span style={{ fontSize: 9, color: '#818cf8', fontWeight: 500 }}>↓ {data.children.length}</span>
-            )}
-            {data.enhances.length > 0 && (
-              <span style={{ fontSize: 9, color: '#22c55e', fontWeight: 500 }}>↔ {data.enhances.length}</span>
-            )}
-            {data.conflicts.length > 0 && (
-              <span style={{ fontSize: 9, color: '#ef4444', fontWeight: 500 }}>⚡ {data.conflicts.length}</span>
-            )}
-          </div>
-        )}
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: data.tags.length > 0 ? 10 : 0 }}>
+          {data.inheritsFrom.length > 0 ? metricPill('↑ parents', data.inheritsFrom.length, '#6b49df') : null}
+          {data.children.length > 0 ? metricPill('↓ children', data.children.length, '#2d66d8') : null}
+          {data.enhances.length > 0 ? metricPill('↔ enhances', data.enhances.length, '#0f8363') : null}
+          {data.conflicts.length > 0 ? metricPill('⚡ conflicts', data.conflicts.length, '#cb4f40') : null}
+          {relationCount === 0 ? metricPill('• isolated', 0, '#8c877f') : null}
+        </div>
 
-        {/* Tags */}
-        {data.tags.length > 0 && (
-          <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
-            {data.tags.slice(0, 4).map(t => (
-              <span key={t} style={{
-                fontSize: 9, padding: '1px 6px', borderRadius: 4,
-                background: `${style.accent}10`, color: style.accent, fontWeight: 500,
-                border: `1px solid ${style.accent}20`,
-              }}>{t}</span>
+        {data.tags.length > 0 ? (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+            {data.tags.slice(0, 4).map((tag) => (
+              <span key={tag} style={{ display: 'inline-flex', alignItems: 'center', padding: '3px 8px', borderRadius: 999, background: `${style.accent}10`, color: style.accent, border: `1px solid ${style.accent}20`, fontSize: 9.5, fontWeight: 700 }}>
+                {tag}
+              </span>
             ))}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   )

package/dashboard/components/console-panel.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+export function ConsolePanel({
+  title,
+  tone = 'neutral',
+  actions,
+  children,
+}: {
+  title: ReactNode
+  tone?: 'neutral' | 'green' | 'red' | 'yellow' | 'blue' | 'purple'
+  actions?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className={`console-panel console-panel-${tone}`}>
+      <div className="console-panel-header">
+        <div className="console-panel-title">{title}</div>
+        {actions ? <div className="console-panel-actions">{actions}</div> : null}
+      </div>
+      <div className="console-panel-body">{children}</div>
+    </div>
+  )
+}

package/dashboard/components/metric-card.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+
+function toneClass(tone?: string) {
+  return tone ? `metric-card-${tone}` : 'metric-card-neutral'
+}
+
+export function MetricCard({
+  label,
+  value,
+  sublabel,
+  icon,
+  tone = 'neutral',
+  href,
+}: {
+  label: string
+  value: ReactNode
+  sublabel?: ReactNode
+  icon?: ReactNode
+  tone?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red'
+  href?: string
+}) {
+  const content = (
+    <div className={`metric-card ${toneClass(tone)} ${href ? 'metric-card-link' : ''}`}>
+      <div className="metric-card-header">
+        <div>
+          <div className="metric-card-label">{label}</div>
+          <div className="metric-card-value">{value}</div>
+        </div>
+        {icon ? <div className="metric-card-icon">{icon}</div> : null}
+      </div>
+      {sublabel ? <div className="metric-card-sublabel">{sublabel}</div> : null}
+    </div>
+  )
+
+  if (!href) return content
+
+  return (
+    <Link href={href} className="metric-card-anchor">
+      {content}
+    </Link>
+  )
+}

package/dashboard/components/overview-actions.tsx

@@ -11,105 +11,94 @@ interface OverviewActionsProps {
   projectList: string[]
 }
 
-// Small inline SVG flow diagrams for each action
 function FlowDiagram({ steps, color }: { steps: string[]; color: string }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 0, marginTop: 8, marginBottom: 2, flexWrap: 'wrap', rowGap: 4 }}>
-      {steps.map((step, i) => (
-        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
-          <div style={{
-            fontSize: 9, fontWeight: 600, padding: '2px 6px',
-            background: i === steps.length - 1 ? `${color}18` : 'var(--bg-section)',
-            color: i === steps.length - 1 ? color : 'var(--text-dim)',
-            borderRadius: 4, whiteSpace: 'nowrap',
-            border: i === steps.length - 1 ? `1px solid ${color}30` : '1px solid var(--border-subtle)',
-          }}>
+    <div className="flow-diagram">
+      {steps.map((step, index) => (
+        <div key={`${step}-${index}`} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span className={`flow-step ${index === steps.length - 1 ? 'flow-step-terminal' : ''}`} style={{ color: index === steps.length - 1 ? color : 'var(--text-secondary)', background: index === steps.length - 1 ? `${color}16` : undefined }}>
             {step}
-          </div>
-          {i < steps.length - 1 && (
-            <span style={{ fontSize: 9, color: 'var(--text-muted)', padding: '0 2px' }}>&rarr;</span>
-          )}
+          </span>
+          {index < steps.length - 1 ? <span className="flow-connector">→</span> : null}
         </div>
       ))}
     </div>
   )
 }
 
-export function OverviewActions({ hasFailures, hasSkills, hasEdges, unresolvedCount, skillCount, projectList }: OverviewActionsProps) {
+export function OverviewActions({ hasFailures, hasSkills, hasEdges, unresolvedCount, skillCount }: OverviewActionsProps) {
   const actions = [
     {
       id: 'graph-rebuild',
       label: 'Organize Skills',
-      subtitle: `Analyze ${skillCount} skills to discover how they relate — dependencies, enhancements, and conflicts.`,
+      subtitle: `Map how your ${skillCount} skills support, inherit from, or conflict with each other.`,
       command: 'graph-rebuild',
       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',
       color: 'var(--purple)',
-      description: 'Use LLM to infer relationships between skills',
+      description: 'Use LLM analysis to infer relationships between skills',
       disabled: !hasSkills,
-      disabledReason: 'No skills imported yet — run helixevo init first',
-      flowSteps: [`${skillCount} skills`, 'LLM analysis', 'Skill graph'],
+      disabledReason: 'No skills imported yet — run helixevo init first.',
+      flowSteps: [`${skillCount} skills`, 'Relationship scan', 'Network map'],
     },
     {
       id: 'generalize',
       label: 'Generalize',
-      subtitle: 'Find common patterns across your skills and create higher-level abstract skills.',
+      subtitle: 'Promote repeated patterns upward into clearer, reusable abstractions.',
       command: 'generalize',
       icon: 'M5 10l7-7m0 0l7 7m-7-7v18',
       color: 'var(--blue)',
       description: 'Promote cross-skill patterns to abstract parent skills',
       disabled: !hasSkills,
-      disabledReason: 'No skills imported yet',
-      flowSteps: ['All skills', 'Pattern detection', 'Abstract skills'],
+      disabledReason: 'No skills imported yet.',
+      flowSteps: ['Patterns', 'Abstraction', 'Higher-level skills'],
     },
     {
       id: 'evolve',
-      label: `Evolve${unresolvedCount > 0 ? ` (${unresolvedCount})` : ''}`,
+      label: unresolvedCount > 0 ? `Evolve (${unresolvedCount})` : 'Evolve',
       subtitle: hasFailures
-        ? `Use ${unresolvedCount} correction${unresolvedCount !== 1 ? 's' : ''} to propose and test skill improvements.`
-        : 'Use your corrections to improve skills. Corrections are captured automatically when you use Craft Agent.',
+        ? `Turn ${unresolvedCount} unresolved correction${unresolvedCount === 1 ? '' : 's'} into proposed, tested skill improvements.`
+        : 'Use captured corrections to propose, judge, and apply improvements.',
       command: 'evolve',
       icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6',
       color: 'var(--green)',
       description: 'Evolve skills based on captured corrections',
       disabled: !hasFailures,
-      disabledReason: 'No corrections yet — use Craft Agent normally. When you correct its output, those corrections are captured automatically.',
-      flowSteps: hasFailures
-        ? [`${unresolvedCount} corrections`, 'Propose changes', 'Judge & test', 'Apply']
-        : ['Corrections', 'Propose', 'Judge', 'Apply'],
+      disabledReason: 'No corrections captured yet — once you correct Craft Agent output, they are recorded automatically.',
+      flowSteps: hasFailures ? [`${unresolvedCount} corrections`, 'Propose', 'Judge + regress', 'Apply'] : ['Corrections', 'Propose', 'Judge', 'Apply'],
     },
     {
       id: 'health',
       label: 'Health Check',
-      subtitle: 'Assess your skill network for coverage gaps, cohesion issues, and imbalances.',
+      subtitle: 'Assess coverage gaps, cohesion, balance, and transfer potential across the network.',
       command: 'health',
       icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
       color: 'var(--yellow)',
       description: 'Assess network cohesion and coverage',
       disabled: !hasSkills,
-      disabledReason: 'No skills imported yet',
-      flowSteps: ['Skill network', 'Coverage analysis', 'Health report'],
+      disabledReason: 'No skills imported yet.',
+      flowSteps: ['Network', 'Coverage scan', 'Health report'],
     },
     {
       id: 'graph-optimize',
       label: 'Optimize Network',
-      subtitle: 'Find skills that should be merged, split, or that conflict with each other.',
+      subtitle: 'Detect skill overlaps, fragmentation, and merge/split opportunities.',
       command: 'graph-optimize',
       icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
       color: 'var(--text-secondary)',
-      description: 'Detect merge/split opportunities',
+      description: 'Detect merge and split opportunities in the skill graph',
       disabled: !hasEdges,
-      disabledReason: 'Run "Organize Skills" first to discover relationships between skills.',
-      flowSteps: ['Relationships', 'Detect overlaps', 'Merge/split/flag'],
+      disabledReason: 'Run Organize Skills first to generate relationships.',
+      flowSteps: ['Relationships', 'Overlap scan', 'Merge / split / flag'],
     },
     {
       id: 'research',
       label: 'Discover New Skills',
-      subtitle: `Search the web for techniques your ${skillCount} skills don't cover yet, then draft new skills.`,
+      subtitle: `Search for techniques your current ${skillCount} skills still don’t cover.`,
       command: 'research',
       icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
       color: 'var(--purple)',
-      description: 'Proactive web research → discover → draft → test',
-      flowSteps: ['Find gaps', 'Web search', 'Draft skills', 'Test & score'],
+      description: 'Run proactive research to discover and draft new skills',
+      flowSteps: ['Find gaps', 'Web research', 'Draft skills', 'Score'],
     },
   ]
 

package/dashboard/components/page-hero.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+interface HeroChip {
+  label: string
+  tone?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red'
+}
+
+export function PageHero({
+  eyebrow,
+  title,
+  description,
+  chips,
+  actions,
+}: {
+  eyebrow?: string
+  title: string
+  description: ReactNode
+  chips?: HeroChip[]
+  actions?: ReactNode
+}) {
+  return (
+    <section className="page-hero-card">
+      <div className="page-hero-grid">
+        <div>
+          {eyebrow && <div className="page-eyebrow">{eyebrow}</div>}
+          <h1 className="page-title">{title}</h1>
+          <p className="page-desc">{description}</p>
+          {chips && chips.length > 0 && (
+            <div className="hero-chip-row">
+              {chips.map((chip, index) => (
+                <span key={`${chip.label}-${index}`} className={`hero-chip hero-chip-${chip.tone ?? 'neutral'}`}>
+                  {chip.label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+        {actions ? <div className="page-hero-actions">{actions}</div> : null}
+      </div>
+    </section>
+  )
+}