helixevo 0.2.39 → 0.2.40

package/dashboard/app/projects/client.tsx

@@ -1,37 +1,123 @@
 'use client'
 
-import { useState, useRef } from 'react'
+import { useMemo, useRef, useState, type CSSProperties } from 'react'
 import Link from 'next/link'
+import { ConsolePanel } from '@/components/console-panel'
+import { MetricCard } from '@/components/metric-card'
+import { PageHero } from '@/components/page-hero'
+import { SectionFrame } from '@/components/section-frame'
 import type { ProjectProfile } from '@/lib/data'
 
-type SetupState = 'idle' | 'analyzing' | 'done' | 'error'
+type SetupState = 'idle' | 'analyzing' | 'done' | 'error' | 'cancelled'
 type InputMode = 'local' | 'github'
+type StatusTone = 'neutral' | 'green' | 'red' | 'yellow' | 'blue' | 'purple'
 
 const PIPELINE = [
   {
-    step: 1, title: 'Analyze Project', command: 'helixevo project-setup <path>',
-    desc: 'Reads README.md, package.json, CLAUDE.md, tsconfig, Dockerfile, and source tree to understand what the project does and what technologies it uses.',
-    icon: '📁', color: 'var(--blue)',
+    step: 1,
+    title: 'Analyze structure',
+    command: 'helixevo project-setup <path>',
+    desc: 'Read README, package manifests, config files, and the source tree to understand what the project is and how it is built.',
+    tone: 'blue' as const,
   },
   {
-    step: 2, title: 'Match Skills', command: '(included in project-setup)',
-    desc: 'Scores each of your existing skills 0-100% for relevance to this project. Skills below 20% relevance are excluded.',
-    icon: '🔗', color: 'var(--purple)',
+    step: 2,
+    title: 'Match capabilities',
+    command: 'match existing skills',
+    desc: 'Score your current skill network against the project so only relevant skills remain in the working set.',
+    tone: 'purple' as const,
   },
   {
-    step: 3, title: 'Find Gaps', command: '(included in project-setup)',
-    desc: 'Identifies capabilities the project needs but no skill covers. Each gap is rated high/medium/low priority with a suggested action.',
-    icon: '🔍', color: 'var(--yellow)',
+    step: 3,
+    title: 'Expose gaps',
+    command: 'detect uncovered needs',
+    desc: 'Surface capabilities the project requires but your current skills do not yet cover, with clear priority levels.',
+    tone: 'yellow' as const,
   },
   {
-    step: 4, title: 'Fill Gaps', command: 'helixevo research / specialize / create',
-    desc: 'For each gap, choose: Research (web search for best practices), Specialize (adapt a general skill), or Create (write from scratch).',
-    icon: '✓', color: 'var(--green)',
+    step: 4,
+    title: 'Route next action',
+    command: 'research • specialize • create',
+    desc: 'Turn each gap into the next best move so you can research, specialize a skill, or create a new one with intent.',
+    tone: 'green' as const,
   },
 ]
 
-interface BrowseItem { name: string; isDirectory: boolean; isProject: boolean }
-interface BrowseResult { path: string; displayPath: string; parent: string | null; items: BrowseItem[] }
+const DEFAULT_PATHS = ['.', '~/Documents/GitHub', '~/Desktop', '~/HelixEvo']
+
+interface BrowseItem {
+  name: string
+  isDirectory: boolean
+  isProject: boolean
+}
+
+interface BrowseResult {
+  path: string
+  displayPath: string
+  parent: string | null
+  items: BrowseItem[]
+}
+
+function buttonStyle(tone: StatusTone = 'neutral', filled = false): CSSProperties {
+  const tones: Record<StatusTone, { border: string; bg: string; text: string; strong: string }> = {
+    neutral: { border: 'var(--border)', bg: 'rgba(97,93,86,0.08)', text: 'var(--text-secondary)', strong: 'var(--text)' },
+    green: { border: 'var(--green-border)', bg: 'var(--green-light)', text: 'var(--green)', strong: 'var(--green)' },
+    red: { border: 'var(--red-border)', bg: 'var(--red-light)', text: 'var(--red)', strong: 'var(--red)' },
+    yellow: { border: 'var(--yellow-border)', bg: 'var(--yellow-light)', text: 'var(--yellow)', strong: 'var(--yellow)' },
+    blue: { border: 'rgba(59,130,246,0.24)', bg: 'rgba(59,130,246,0.12)', text: 'var(--blue)', strong: 'var(--blue)' },
+    purple: { border: 'rgba(107,73,223,0.24)', bg: 'rgba(107,73,223,0.12)', text: 'var(--purple)', strong: 'var(--purple)' },
+  }
+
+  const palette = tones[tone]
+
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    padding: '9px 14px',
+    borderRadius: 999,
+    border: filled ? 'none' : `1px solid ${palette.border}`,
+    background: filled ? palette.strong : palette.bg,
+    color: filled ? '#fff' : palette.text,
+    fontSize: 12,
+    fontWeight: 700,
+    textDecoration: 'none',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    boxShadow: filled ? 'var(--shadow-sm)' : 'none',
+  }
+}
+
+function statusTone(state: SetupState): StatusTone {
+  if (state === 'done') return 'green'
+  if (state === 'error') return 'red'
+  if (state === 'cancelled') return 'yellow'
+  if (state === 'analyzing') return 'blue'
+  return 'neutral'
+}
+
+function statusLabel(state: SetupState) {
+  if (state === 'analyzing') return 'Running project analysis…'
+  if (state === 'done') return 'Analysis complete — project profile saved'
+  if (state === 'error') return 'Analysis failed'
+  if (state === 'cancelled') return 'Analysis cancelled'
+  return 'Awaiting input'
+}
+
+function priorityTone(priority: 'high' | 'medium' | 'low'): StatusTone {
+  if (priority === 'high') return 'red'
+  if (priority === 'medium') return 'yellow'
+  return 'neutral'
+}
+
+function uniquePaths(paths: string[]) {
+  return Array.from(new Set(paths.filter(Boolean)))
+}
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleDateString()
+}
 
 export default function ProjectsClient({ profiles, skillCount }: { profiles: ProjectProfile[]; skillCount: number }) {
   const [inputMode, setInputMode] = useState<InputMode>('local')
@@ -40,28 +126,53 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
   const [cloneDir, setCloneDir] = useState('~/HelixEvo')
   const [setupState, setSetupState] = useState<SetupState>('idle')
   const [output, setOutput] = useState('')
+  const [projectActionMessage, setProjectActionMessage] = useState<{ tone: StatusTone; text: string } | null>(null)
+  const [specializingProject, setSpecializingProject] = useState<string | null>(null)
   const outputRef = useRef<HTMLPreElement | null>(null)
   const abortRef = useRef<AbortController | null>(null)
 
-  // Folder browser state
   const [showBrowser, setShowBrowser] = useState(false)
   const [browseData, setBrowseData] = useState<BrowseResult | null>(null)
   const [browseLoading, setBrowseLoading] = useState(false)
 
+  const quickPaths = useMemo(() => uniquePaths([...DEFAULT_PATHS, ...profiles.map(profile => profile.path)]), [profiles])
+
+  const aggregate = useMemo(() => {
+    const activeProjects = profiles.filter(profile => profile.status === 'active').length
+    const totalHighGaps = profiles.reduce((sum, profile) => sum + profile.gaps.filter(gap => gap.priority === 'high').length, 0)
+    const totalRecommendations = profiles.reduce((sum, profile) => sum + profile.recommendations.length, 0)
+    const avgCoverage = profiles.length > 0 && skillCount > 0
+      ? Math.round(profiles.reduce((sum, profile) => sum + ((profile.matchedSkills.length / skillCount) * 100), 0) / profiles.length)
+      : 0
+
+    return {
+      activeProjects,
+      totalHighGaps,
+      totalRecommendations,
+      avgCoverage,
+    }
+  }, [profiles, skillCount])
+
+  const repoName = githubUrl.match(/github\.com\/[\w-]+\/([\w.-]+)/)?.[1]?.replace(/\.git$/, '') ?? 'repo'
+  const cloneTarget = `${cloneDir}/${repoName}`
+  const canStart = inputMode === 'local' ? !!projectPath.trim() : !!githubUrl.trim()
+
   const browseTo = async (dir: string) => {
     setBrowseLoading(true)
     try {
       const res = await fetch(`/api/browse?dir=${encodeURIComponent(dir)}`)
-      const data = await res.json()
-      if (data.error) return
-      setBrowseData(data)
-    } catch {}
-    setBrowseLoading(false)
+      const data = await res.json() as BrowseResult & { error?: string }
+      if (!data.error) setBrowseData(data)
+    } catch {
+      setProjectActionMessage({ tone: 'red', text: 'Could not load folder browser contents.' })
+    } finally {
+      setBrowseLoading(false)
+    }
   }
 
   const openBrowser = () => {
     setShowBrowser(true)
-    browseTo('~')
+    void browseTo('~')
   }
 
   const selectFolder = (path: string) => {
@@ -69,38 +180,56 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
     setShowBrowser(false)
   }
 
-  const effectivePath = inputMode === 'local' ? projectPath.trim() : ''
-  const canStart = inputMode === 'local' ? !!projectPath.trim() : !!githubUrl.trim()
+  const triggerSpecialize = async (projectName: string) => {
+    setSpecializingProject(projectName)
+    setProjectActionMessage({ tone: 'blue', text: `Requesting specialization workflow for ${projectName}…` })
+
+    try {
+      const res = await fetch('/api/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ command: 'specialize', project: projectName }),
+      })
+
+      if (!res.ok) throw new Error('Specialize request failed')
+      setProjectActionMessage({ tone: 'green', text: `Specialization workflow requested for ${projectName}.` })
+    } catch {
+      setProjectActionMessage({ tone: 'red', text: `Could not start specialization for ${projectName}.` })
+    } finally {
+      setSpecializingProject(null)
+    }
+  }
 
   const handleSetup = async () => {
     if (!canStart) return
 
+    setProjectActionMessage(null)
     let path = ''
-    if (inputMode === 'github') {
-      // Extract repo name from URL for clone path
-      const repoMatch = githubUrl.match(/github\.com\/[\w-]+\/([\w.-]+)/)
-      const repoName = repoMatch?.[1]?.replace(/\.git$/, '') ?? 'repo'
-      path = `${cloneDir}/${repoName}`
 
-      // Clone first
+    if (inputMode === 'github') {
+      path = cloneTarget
       setSetupState('analyzing')
-      setOutput(`Cloning ${githubUrl} to ${path}...\n`)
+      setOutput(`Repository source: ${githubUrl}\nClone target: ${path}\n\n`)
+
       try {
         const cloneRes = await fetch('/api/run', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ command: 'clone', url: githubUrl, dir: path }),
         })
-        // For now, use a simple approach
-        setOutput(prev => prev + `Clone target: ${path}\n(Note: Git clone from dashboard requires the repo to already be cloned locally)\n\n`)
-      } catch {}
+
+        setOutput(prev => prev + (cloneRes.ok
+          ? 'Clone request sent successfully. Continuing into project analysis…\n\n'
+          : 'Clone request returned a non-success status. Continuing into project analysis…\n\n'))
+      } catch {
+        setOutput(prev => prev + 'Clone request could not be confirmed. Continuing into project analysis…\n\n')
+      }
     } else {
       path = projectPath.trim()
+      setSetupState('analyzing')
+      setOutput(`Project source: ${path}\n\nLaunching project analysis…\n\n`)
     }
 
-    setSetupState('analyzing')
-    setOutput('')
-
     const controller = new AbortController()
     abortRef.current = controller
 
@@ -112,47 +241,67 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
         signal: controller.signal,
       })
 
-      if (!res.body) { setOutput('No response'); setSetupState('error'); return }
+      if (!res.body) {
+        setOutput(prev => prev ? `${prev}\nNo response received from analysis endpoint.` : 'No response received from analysis endpoint.')
+        setSetupState('error')
+        return
+      }
 
       const reader = res.body.getReader()
       const decoder = new TextDecoder()
       let sseBuffer = ''
+      let sawDoneEvent = false
 
       while (true) {
         const { done, value } = await reader.read()
         if (done) break
+
         sseBuffer += decoder.decode(value, { stream: true })
         const events = sseBuffer.split('\n\n')
         sseBuffer = events.pop() ?? ''
+
         for (const event of events) {
           const lines = event.split('\n')
-          let eventType = '', eventData = ''
+          let eventType = ''
+          let eventData = ''
+
           for (const line of lines) {
             if (line.startsWith('event: ')) eventType = line.slice(7)
             if (line.startsWith('data: ')) eventData = line.slice(6)
           }
+
           if (eventType === 'output' && eventData) {
             try {
               setOutput(prev => prev + (JSON.parse(eventData) as string))
-              setTimeout(() => { if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight }, 10)
-            } catch {}
+              setTimeout(() => {
+                if (outputRef.current) outputRef.current.scrollTop = outputRef.current.scrollHeight
+              }, 10)
+            } catch {
+              // ignore malformed output events
+            }
           }
+
           if (eventType === 'done' && eventData) {
+            sawDoneEvent = true
             try {
-              const r = JSON.parse(JSON.parse(eventData) as string) as { success: boolean }
-              setSetupState(r.success ? 'done' : 'error')
-            } catch {}
+              const result = JSON.parse(JSON.parse(eventData) as string) as { success: boolean }
+              setSetupState(result.success ? 'done' : 'error')
+            } catch {
+              setSetupState('done')
+            }
           }
         }
       }
-      if (setupState === 'analyzing') setSetupState('done')
+
+      if (!sawDoneEvent) setSetupState('done')
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') {
-        setOutput(prev => prev + '\n\n[Cancelled]')
+        setOutput(prev => prev + '\n\n[Analysis cancelled by user]')
+        setSetupState('cancelled')
       } else {
         setOutput(prev => prev || 'Network error')
+        setSetupState('error')
       }
-      setSetupState('error')
     } finally {
       abortRef.current = null
     }
@@ -160,551 +309,784 @@ export default function ProjectsClient({ profiles, skillCount }: { profiles: Pro
 
   return (
     <div>
-      <div className="page-header">
-        <h1 className="page-title">Project Setup</h1>
-        <p className="page-desc">
-          Analyze any project to match your {skillCount} skills, identify gaps, and prepare for work
-        </p>
+      <PageHero
+        eyebrow="Project orchestration"
+        title="Project Setup"
+        description={`Analyze local folders or GitHub repositories, map them against your ${skillCount} skills, and turn uncovered capability gaps into an execution plan.`}
+        chips={[
+          { label: `${profiles.length} analyzed project${profiles.length === 1 ? '' : 's'}`, tone: 'blue' },
+          { label: `${aggregate.activeProjects} active`, tone: 'green' },
+          { label: `${aggregate.totalHighGaps} high-priority gap${aggregate.totalHighGaps === 1 ? '' : 's'}`, tone: aggregate.totalHighGaps > 0 ? 'red' : 'neutral' },
+          { label: `${aggregate.avgCoverage}% avg coverage`, tone: 'purple' },
+        ]}
+        actions={
+          <div style={{ display: 'grid', gap: 12 }}>
+            <div className="hero-note-card">
+              <div className="hero-note-label">Current routing</div>
+              <div className="hero-note-title">Analyze → Match → Gap scan → Action</div>
+              <div className="hero-note-copy">Run a profile, review the skill fit, then send uncovered needs into Research or the Skill Network.</div>
+            </div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+              <Link href="/network" style={buttonStyle('purple')}>
+                Open Skill Network
+              </Link>
+              <Link href="/research" style={buttonStyle('blue')}>
+                Open Research
+              </Link>
+            </div>
+          </div>
+        }
+      />
+
+      <div className="grid-4" style={{ marginBottom: 24 }}>
+        <MetricCard
+          label="Portfolio"
+          value={profiles.length}
+          sublabel={`${aggregate.activeProjects} active, ${Math.max(0, profiles.length - aggregate.activeProjects)} archived/analyzed`}
+          tone="blue"
+        />
+        <MetricCard
+          label="Coverage"
+          value={`${aggregate.avgCoverage}%`}
+          sublabel={`Average matched-skill coverage across ${profiles.length || 1} project${profiles.length === 1 ? '' : 's'}`}
+          tone="purple"
+        />
+        <MetricCard
+          label="High-priority gaps"
+          value={aggregate.totalHighGaps}
+          sublabel={aggregate.totalHighGaps > 0 ? 'Capability needs requiring near-term attention' : 'No critical gaps recorded right now'}
+          tone={aggregate.totalHighGaps > 0 ? 'red' : 'green'}
+        />
+        <MetricCard
+          label="Recommended next steps"
+          value={aggregate.totalRecommendations}
+          sublabel="Follow-on actions generated from prior project analysis runs"
+          tone="yellow"
+        />
       </div>
 
-      {/* Pipeline Visualization */}
-      <div className="card" style={{ marginBottom: 24, padding: '22px 26px' }}>
-        <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 16 }}>
-          How Project Setup Works
+      {projectActionMessage ? (
+        <div style={{
+          marginBottom: 20,
+          padding: '12px 16px',
+          borderRadius: 18,
+          border: `1px solid ${buttonStyle(projectActionMessage.tone).border ?? 'var(--border)'}`,
+          background: projectActionMessage.tone === 'green'
+            ? 'var(--green-light)'
+            : projectActionMessage.tone === 'red'
+              ? 'var(--red-light)'
+              : projectActionMessage.tone === 'blue'
+                ? 'rgba(59,130,246,0.12)'
+                : 'var(--bg-card)',
+          color: projectActionMessage.tone === 'green'
+            ? 'var(--green)'
+            : projectActionMessage.tone === 'red'
+              ? 'var(--red)'
+              : projectActionMessage.tone === 'blue'
+                ? 'var(--blue)'
+                : 'var(--text-secondary)',
+          fontSize: 12.5,
+          fontWeight: 600,
+        }}>
+          {projectActionMessage.text}
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
-          {PIPELINE.map((step, i) => (
-            <div key={step.step} style={{ display: 'flex', alignItems: 'flex-start' }}>
-              <div style={{ flex: 1 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
-                  <div style={{
-                    width: 32, height: 32, borderRadius: 9,
-                    background: `${step.color}15`,
-                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    fontSize: 14, flexShrink: 0,
-                  }}>{step.icon}</div>
-                  <div>
-                    <div style={{ fontSize: 9, fontWeight: 600, color: step.color, letterSpacing: 0.5 }}>STEP {step.step}</div>
-                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{step.title}</div>
-                  </div>
-                </div>
-                <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5, paddingRight: 12, marginBottom: 6 }}>
-                  {step.desc}
-                </div>
-                <code style={{ fontSize: 9, padding: '2px 6px', background: 'var(--bg-section)', borderRadius: 3, color: 'var(--text-muted)' }}>
-                  {step.command}
-                </code>
-              </div>
-              {i < 3 && (
-                <span style={{ padding: '12px 6px 0', color: 'var(--text-muted)', fontSize: 14 }}>&rarr;</span>
-              )}
+      ) : null}
+
+      <div className="grid-2" style={{ alignItems: 'start', marginBottom: 24 }}>
+        <SectionFrame
+          eyebrow="Workspace intake"
+          title="Project intake studio"
+          description="Choose a local folder or GitHub repository, then run a profile pass that streams live analysis output below."
+          tone="purple"
+        >
+          <div style={{ display: 'grid', gap: 18 }}>
+            <div style={{ display: 'inline-flex', padding: 4, borderRadius: 999, background: 'rgba(97,93,86,0.08)', border: '1px solid var(--border)', width: 'fit-content' }}>
+              <button
+                onClick={() => setInputMode('local')}
+                style={{
+                  ...buttonStyle(inputMode === 'local' ? 'purple' : 'neutral', inputMode === 'local'),
+                  padding: '9px 16px',
+                  minWidth: 130,
+                }}
+              >
+                Local folder
+              </button>
+              <button
+                onClick={() => setInputMode('github')}
+                style={{
+                  ...buttonStyle(inputMode === 'github' ? 'blue' : 'neutral', inputMode === 'github'),
+                  padding: '9px 16px',
+                  minWidth: 130,
+                }}
+              >
+                GitHub URL
+              </button>
             </div>
-          ))}
-        </div>
-      </div>
 
-      {/* Input Section */}
-      <div className="card" style={{ marginBottom: 24, padding: '20px 24px' }}>
-        {/* Mode Toggle */}
-        <div style={{ display: 'flex', gap: 0, marginBottom: 16 }}>
-          <button
-            onClick={() => setInputMode('local')}
-            style={{
-              padding: '7px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
-              background: inputMode === 'local' ? 'var(--bg-card)' : 'var(--bg-section)',
-              border: `1px solid ${inputMode === 'local' ? 'var(--border-focus)' : 'var(--border)'}`,
-              borderRadius: '8px 0 0 8px', color: inputMode === 'local' ? 'var(--text)' : 'var(--text-dim)',
-            }}
-          >
-            📁 Local Folder
-          </button>
-          <button
-            onClick={() => setInputMode('github')}
-            style={{
-              padding: '7px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer',
-              background: inputMode === 'github' ? 'var(--bg-card)' : 'var(--bg-section)',
-              borderTop: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
-              borderRight: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
-              borderBottom: `1px solid ${inputMode === 'github' ? 'var(--border-focus)' : 'var(--border)'}`,
-              borderLeft: 'none',
-              borderRadius: '0 8px 8px 0',
-              color: inputMode === 'github' ? 'var(--text)' : 'var(--text-dim)',
-            }}
-          >
-            GitHub URL
-          </button>
-        </div>
+            {inputMode === 'local' ? (
+              <div style={{ display: 'grid', gap: 14 }}>
+                <div>
+                  <label style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', display: 'block', marginBottom: 6, letterSpacing: 0.3 }}>
+                    Project folder path
+                  </label>
+                  <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
+                    <input
+                      value={projectPath}
+                      onChange={event => setProjectPath(event.target.value)}
+                      placeholder="/path/to/your/project"
+                      disabled={setupState === 'analyzing'}
+                      style={{
+                        flex: 1,
+                        padding: '12px 16px',
+                        border: '1px solid var(--border)',
+                        borderRadius: 18,
+                        fontSize: 13,
+                        fontFamily: 'var(--font-mono)',
+                        background: 'var(--bg-input)',
+                        color: 'var(--text)',
+                        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3)',
+                      }}
+                    />
+                    <button
+                      onClick={openBrowser}
+                      disabled={setupState === 'analyzing'}
+                      style={{ ...buttonStyle('neutral'), minWidth: 116 }}
+                    >
+                      Browse
+                    </button>
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 8, lineHeight: 1.5 }}>
+                    Use the folder browser to jump directly into likely project roots. Project directories are highlighted for faster intake.
+                  </div>
+                </div>
 
-        {/* Local Folder Input */}
-        {inputMode === 'local' && (
-          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
-            <div style={{ flex: 1 }}>
-              <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 5 }}>
-                Project folder path
-              </label>
-              <div style={{ display: 'flex', gap: 6 }}>
-                <input
-                  value={projectPath}
-                  onChange={e => setProjectPath(e.target.value)}
-                  placeholder="/path/to/your/project"
-                  disabled={setupState === 'analyzing'}
-                  style={{
-                    flex: 1, padding: '9px 14px',
-                    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                    fontSize: 13, fontFamily: 'var(--font-mono)',
-                    background: 'var(--bg-input)', color: 'var(--text)',
-                  }}
-                />
-                <button onClick={openBrowser} disabled={setupState === 'analyzing'} style={{
-                  padding: '9px 14px', border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                  background: 'var(--bg-card)', cursor: 'pointer', fontSize: 12, fontWeight: 600,
-                  color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: 5,
-                  whiteSpace: 'nowrap',
-                }}>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                  </svg>
-                  Browse
-                </button>
-              </div>
-              <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 6, display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                <span>Quick select:</span>
-                {['.', '~/Documents/GitHub', '~/Desktop', '~/HelixEvo', ...profiles.map(p => p.path).filter(p => !['.',  '~/Documents/GitHub', '~/Desktop', '~/HelixEvo'].includes(p))].map(p => (
-                  <button key={p} onClick={() => setProjectPath(p)} style={{
-                    padding: '1px 8px', fontSize: 10, background: projectPath === p ? 'var(--green-light)' : 'var(--bg-section)',
-                    border: `1px solid ${projectPath === p ? 'var(--green-border)' : 'var(--border-subtle)'}`,
-                    borderRadius: 4, cursor: 'pointer', color: projectPath === p ? 'var(--green)' : 'var(--text-dim)',
-                    fontFamily: 'var(--font-mono)',
-                  }}>{p}</button>
-                ))}
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', marginBottom: 8, letterSpacing: 0.3 }}>
+                    Quick select
+                  </div>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                    {quickPaths.map(path => {
+                      const active = projectPath === path
+                      return (
+                        <button
+                          key={path}
+                          onClick={() => setProjectPath(path)}
+                          disabled={setupState === 'analyzing'}
+                          style={{
+                            padding: '7px 11px',
+                            borderRadius: 999,
+                            border: `1px solid ${active ? 'rgba(16,185,129,0.26)' : 'var(--border)'}`,
+                            background: active ? 'var(--green-light)' : 'rgba(97,93,86,0.07)',
+                            color: active ? 'var(--green)' : 'var(--text-dim)',
+                            fontSize: 11,
+                            fontWeight: 600,
+                            fontFamily: 'var(--font-mono)',
+                            cursor: 'pointer',
+                          }}
+                        >
+                          {path}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
               </div>
-            </div>
-            {setupState !== 'analyzing' ? (
-              <button onClick={handleSetup} disabled={!canStart} style={{
-                padding: '9px 20px', border: 'none', borderRadius: 'var(--radius)',
-                background: canStart ? 'var(--green)' : 'var(--bg-section)',
-                color: canStart ? '#fff' : 'var(--text-muted)',
-                fontSize: 13, fontWeight: 600, cursor: canStart ? 'pointer' : 'default',
-                whiteSpace: 'nowrap',
-              }}>
-                Analyze Project
-              </button>
             ) : (
-              <button onClick={() => abortRef.current?.abort()} style={{
-                padding: '9px 20px', border: 'none', borderRadius: 'var(--radius)',
-                background: 'var(--red)', color: '#fff',
-                fontSize: 13, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap',
-              }}>
-                Stop
-              </button>
+              <div style={{ display: 'grid', gap: 14 }}>
+                <div>
+                  <label style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', display: 'block', marginBottom: 6, letterSpacing: 0.3 }}>
+                    GitHub repository URL
+                  </label>
+                  <input
+                    value={githubUrl}
+                    onChange={event => setGithubUrl(event.target.value)}
+                    placeholder="https://github.com/user/repo"
+                    disabled={setupState === 'analyzing'}
+                    style={{
+                      width: '100%',
+                      padding: '12px 16px',
+                      border: '1px solid var(--border)',
+                      borderRadius: 18,
+                      fontSize: 13,
+                      fontFamily: 'var(--font-mono)',
+                      background: 'var(--bg-input)',
+                      color: 'var(--text)',
+                    }}
+                  />
+                </div>
+                <div>
+                  <label style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', display: 'block', marginBottom: 6, letterSpacing: 0.3 }}>
+                    Clone destination
+                  </label>
+                  <input
+                    value={cloneDir}
+                    onChange={event => setCloneDir(event.target.value)}
+                    placeholder="~/HelixEvo"
+                    disabled={setupState === 'analyzing'}
+                    style={{
+                      width: '100%',
+                      padding: '12px 16px',
+                      border: '1px solid var(--border)',
+                      borderRadius: 18,
+                      fontSize: 13,
+                      fontFamily: 'var(--font-mono)',
+                      background: 'var(--bg-input)',
+                      color: 'var(--text)',
+                    }}
+                  />
+                  <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-dim)' }}>
+                    Target path: <code style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{cloneTarget}</code>
+                  </div>
+                </div>
+              </div>
             )}
-          </div>
-        )}
 
-        {/* GitHub URL Input */}
-        {inputMode === 'github' && (
-          <div>
-            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', marginBottom: 10 }}>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 5 }}>
-                  GitHub repository URL
-                </label>
-                <input
-                  value={githubUrl}
-                  onChange={e => setGithubUrl(e.target.value)}
-                  placeholder="https://github.com/user/repo"
-                  disabled={setupState === 'analyzing'}
-                  style={{
-                    width: '100%', padding: '9px 14px',
-                    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                    fontSize: 13, fontFamily: 'var(--font-mono)',
-                    background: 'var(--bg-input)', color: 'var(--text)',
-                  }}
-                />
-              </div>
-            </div>
-            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
-              <div style={{ flex: 1 }}>
-                <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)', display: 'block', marginBottom: 5 }}>
-                  Clone to directory
-                </label>
-                <input
-                  value={cloneDir}
-                  onChange={e => setCloneDir(e.target.value)}
-                  placeholder="~/projects"
-                  disabled={setupState === 'analyzing'}
-                  style={{
-                    width: '100%', padding: '9px 14px',
-                    border: '1px solid var(--border)', borderRadius: 'var(--radius)',
-                    fontSize: 13, fontFamily: 'var(--font-mono)',
-                    background: 'var(--bg-input)', color: 'var(--text)',
-                  }}
-                />
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 16,
+              flexWrap: 'wrap',
+              paddingTop: 4,
+            }}>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <span className={`hero-chip hero-chip-${inputMode === 'local' ? 'purple' : 'blue'}`}>
+                  {inputMode === 'local' ? 'Local analysis' : 'GitHub intake'}
+                </span>
+                <span className="hero-chip hero-chip-neutral">
+                  {setupState === 'idle' ? 'Ready to run' : statusLabel(setupState)}
+                </span>
               </div>
-              {setupState !== 'analyzing' ? (
-                <button onClick={handleSetup} disabled={!canStart} style={{
-                  padding: '9px 20px', border: 'none', borderRadius: 'var(--radius)',
-                  background: canStart ? 'var(--green)' : 'var(--bg-section)',
-                  color: canStart ? '#fff' : 'var(--text-muted)',
-                  fontSize: 13, fontWeight: 600, cursor: canStart ? 'pointer' : 'default',
-                  whiteSpace: 'nowrap',
-                }}>
-                  Clone &amp; Analyze
+
+              {setupState === 'analyzing' ? (
+                <button onClick={() => abortRef.current?.abort()} style={buttonStyle('red', true)}>
+                  Stop analysis
                 </button>
               ) : (
-                <button onClick={() => abortRef.current?.abort()} style={{
-                  padding: '9px 20px', border: 'none', borderRadius: 'var(--radius)',
-                  background: 'var(--red)', color: '#fff',
-                  fontSize: 13, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap',
+                <button onClick={handleSetup} disabled={!canStart} style={{
+                  ...buttonStyle(inputMode === 'local' ? 'green' : 'blue', true),
+                  opacity: canStart ? 1 : 0.55,
+                  cursor: canStart ? 'pointer' : 'not-allowed',
                 }}>
-                  Stop
+                  {inputMode === 'local' ? 'Analyze project' : 'Clone & analyze'}
                 </button>
               )}
             </div>
-            <div style={{ fontSize: 10, color: 'var(--text-muted)', marginTop: 6 }}>
-              The repository will be cloned to <code style={{ fontSize: 9 }}>{cloneDir}/{githubUrl.match(/\/([\w.-]+?)(?:\.git)?$/)?.[1] ?? 'repo'}</code>, then analyzed
-            </div>
           </div>
-        )}
-      </div>
+        </SectionFrame>
+
+        <SectionFrame
+          eyebrow="Execution flow"
+          title="Capability mapping pipeline"
+          description="Every setup pass follows the same four-step sequence so analysis remains consistent and actionable."
+          tone="blue"
+        >
+          <div style={{ display: 'grid', gap: 12, marginBottom: 16 }}>
+            {PIPELINE.map((step, index) => (
+              <div key={step.step} style={{
+                position: 'relative',
+                padding: '16px 18px',
+                borderRadius: 18,
+                border: '1px solid var(--border)',
+                background: 'linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,241,235,0.92))',
+                boxShadow: 'var(--shadow-sm)',
+              }}>
+                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+                  <div style={{
+                    width: 34,
+                    height: 34,
+                    borderRadius: 12,
+                    background: step.tone === 'blue'
+                      ? 'rgba(59,130,246,0.14)'
+                      : step.tone === 'purple'
+                        ? 'rgba(107,73,223,0.14)'
+                        : step.tone === 'yellow'
+                          ? 'rgba(245,158,11,0.14)'
+                          : 'rgba(16,185,129,0.14)',
+                    color: step.tone === 'blue'
+                      ? 'var(--blue)'
+                      : step.tone === 'purple'
+                        ? 'var(--purple)'
+                        : step.tone === 'yellow'
+                          ? 'var(--yellow)'
+                          : 'var(--green)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 13,
+                    fontWeight: 800,
+                    flexShrink: 0,
+                  }}>
+                    {step.step}
+                  </div>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, marginBottom: 6 }}>
+                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>{step.title}</div>
+                      <span className={`hero-chip hero-chip-${step.tone}`} style={{ whiteSpace: 'nowrap' }}>step {step.step}</span>
+                    </div>
+                    <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6, marginBottom: 8 }}>{step.desc}</div>
+                    <code style={{ fontSize: 10.5, color: 'var(--text-secondary)', background: 'rgba(97,93,86,0.08)', padding: '4px 8px', borderRadius: 999 }}>
+                      {step.command}
+                    </code>
+                  </div>
+                </div>
+                {index < PIPELINE.length - 1 ? (
+                  <div style={{
+                    position: 'absolute',
+                    left: 33,
+                    bottom: -14,
+                    width: 2,
+                    height: 18,
+                    background: 'linear-gradient(180deg, rgba(107,73,223,0.45), rgba(16,185,129,0.12))',
+                  }} />
+                ) : null}
+              </div>
+            ))}
+          </div>
 
-      {/* Output */}
-      {setupState !== 'idle' && (
-        <div className="card" style={{ marginBottom: 24, overflow: 'hidden' }}>
           <div style={{
-            padding: '10px 16px',
-            background: setupState === 'done' ? 'var(--green-light)' : setupState === 'error' ? 'var(--red-light)' : 'var(--bg-section)',
-            borderBottom: '1px solid var(--border)',
-            fontSize: 12, fontWeight: 600,
-            color: setupState === 'done' ? 'var(--green)' : setupState === 'error' ? 'var(--red)' : 'var(--text-secondary)',
+            padding: '14px 16px',
+            borderRadius: 18,
+            background: 'rgba(107,73,223,0.08)',
+            border: '1px solid rgba(107,73,223,0.16)',
           }}>
-            {setupState === 'analyzing' && '● Running project analysis...'}
-            {setupState === 'done' && '✓ Analysis complete — project profile saved'}
-            {setupState === 'error' && '✗ Analysis failed'}
+            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--purple)', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>
+              Best follow-through
+            </div>
+            <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.6 }}>
+              After a profile finishes, inspect its strongest matched skills in the <strong>Skill Network</strong> and route uncovered gaps into <strong>Research</strong> for capability expansion.
+            </div>
           </div>
-          <pre ref={outputRef} style={{
-            padding: '14px 16px', margin: 0,
-            fontSize: 11, lineHeight: 1.55,
-            fontFamily: 'var(--font-mono)',
-            color: 'var(--text-secondary)',
-            maxHeight: 500, overflow: 'auto',
-            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-          }}>
-            {output || 'Starting project analysis...'}
-          </pre>
-          {setupState === 'done' && (
-            <div style={{ padding: '12px 16px', borderTop: '1px solid var(--border)', display: 'flex', gap: 8 }}>
-              <button onClick={() => window.location.reload()} style={{
-                padding: '7px 14px', background: 'var(--green)', color: '#fff', border: 'none',
-                borderRadius: 'var(--radius)', fontSize: 12, fontWeight: 600, cursor: 'pointer',
-              }}>
-                Refresh to see results
+        </SectionFrame>
+      </div>
+
+      {(setupState !== 'idle' || output) ? (
+        <SectionFrame
+          eyebrow="Live execution"
+          title="Project analysis console"
+          description="Streamed output from the active project-setup run."
+          tone={statusTone(setupState)}
+          actions={setupState === 'done' ? (
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+              <button onClick={() => window.location.reload()} style={buttonStyle('green', true)}>
+                Refresh results
               </button>
-              <Link href="/network" style={{ textDecoration: 'none' }}>
-                <button style={{
-                  padding: '7px 14px', background: 'var(--bg-section)', border: '1px solid var(--border)',
-                  borderRadius: 'var(--radius)', fontSize: 12, fontWeight: 600, cursor: 'pointer', color: 'var(--text-secondary)',
-                }}>
-                  View Skill Network
-                </button>
+              <Link href="/network" style={buttonStyle('purple')}>
+                View skill network
               </Link>
-              <Link href="/research" style={{ textDecoration: 'none' }}>
-                <button style={{
-                  padding: '7px 14px', background: 'var(--bg-section)', border: '1px solid var(--border)',
-                  borderRadius: 'var(--radius)', fontSize: 12, fontWeight: 600, cursor: 'pointer', color: 'var(--text-secondary)',
-                }}>
-                  Research Gaps
-                </button>
+              <Link href="/research" style={buttonStyle('blue')}>
+                Research gaps
               </Link>
             </div>
-          )}
-        </div>
-      )}
+          ) : null}
+        >
+          <ConsolePanel tone={statusTone(setupState)} title={statusLabel(setupState)}>
+            <pre ref={outputRef} style={{
+              margin: 0,
+              fontSize: 11.5,
+              lineHeight: 1.65,
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--text-secondary)',
+              minHeight: 140,
+              maxHeight: 520,
+              overflow: 'auto',
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+            }}>
+              {output || 'Console standing by…'}
+            </pre>
+          </ConsolePanel>
+        </SectionFrame>
+      ) : null}
 
-      {/* Existing Profiles */}
-      {profiles.length > 0 && (
-        <div>
-          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 12 }}>
-            Analyzed Projects ({profiles.length})
+      <SectionFrame
+        eyebrow="Portfolio"
+        title={profiles.length > 0 ? `Analyzed projects (${profiles.length})` : 'No analyzed projects yet'}
+        description={profiles.length > 0
+          ? 'Review project coverage, examine high-priority gaps, and jump directly into the next capability-building action.'
+          : `Run your first project profile above. HelixEvo will compare the project against your ${skillCount} skills and surface what needs to be filled next.`}
+        tone="yellow"
+      >
+        {profiles.length === 0 ? (
+          <div className="empty-state">
+            <div className="empty-state-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+              </svg>
+            </div>
+            <div className="empty-state-title">No analyzed projects yet</div>
+            <div className="empty-state-desc">
+              Start with a local folder or GitHub repository. The resulting profile will show matched skills, uncovered gaps, and recommended next steps.
+            </div>
           </div>
-          <div style={{ display: 'grid', gap: 14 }}>
-            {profiles.map(p => {
-              const highGaps = p.gaps.filter(g => g.priority === 'high')
-              const matchedPct = skillCount > 0 ? Math.round((p.matchedSkills.length / skillCount) * 100) : 0
+        ) : (
+          <div style={{ display: 'grid', gap: 18 }}>
+            {profiles.map(profile => {
+              const highGaps = profile.gaps.filter(gap => gap.priority === 'high')
+              const matchedPct = skillCount > 0 ? Math.round((profile.matchedSkills.length / skillCount) * 100) : 0
 
               return (
-                <div key={p.name} className="card">
-                  <div className="card-body">
-                    {/* Header */}
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
-                      <div>
-                        <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 4 }}>{p.name}</div>
-                        <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 6 }}>{p.description}</div>
-                        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-                          {p.techStack.map(t => <span key={t} className="badge badge-gray">{t}</span>)}
-                          {p.domains.map(d => <span key={d} className="badge badge-blue">{d}</span>)}
+                <article key={profile.name} className="card" style={{ overflow: 'hidden' }}>
+                  <div style={{
+                    padding: '20px 24px 18px',
+                    background: 'linear-gradient(135deg, rgba(255,251,235,0.95), rgba(248,244,238,0.88))',
+                    borderBottom: '1px solid var(--border)',
+                  }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+                      <div style={{ maxWidth: 760 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
+                          <span className={`hero-chip hero-chip-${profile.status === 'active' ? 'green' : 'blue'}`}>{profile.status}</span>
+                          <span className="hero-chip hero-chip-neutral">Analyzed {formatDate(profile.analyzedAt)}</span>
+                          <span className={`hero-chip hero-chip-${highGaps.length > 0 ? 'red' : 'green'}`}>{highGaps.length} high-priority gap{highGaps.length === 1 ? '' : 's'}</span>
+                        </div>
+                        <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--text)', marginBottom: 8 }}>{profile.name}</div>
+                        <div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.7, marginBottom: 12 }}>{profile.description}</div>
+                        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                          {profile.techStack.map(tech => <span key={tech} className="badge badge-gray">{tech}</span>)}
+                          {profile.domains.map(domain => <span key={domain} className="badge badge-blue">{domain}</span>)}
                         </div>
                       </div>
-                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
-                        <span className={`badge ${p.status === 'active' ? 'badge-green' : 'badge-blue'}`}>{p.status}</span>
-                        <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>{new Date(p.analyzedAt).toLocaleDateString()}</span>
+
+                      <div style={{ minWidth: 240, display: 'grid', gap: 10 }}>
+                        <div style={{
+                          padding: '14px 16px',
+                          borderRadius: 18,
+                          background: 'rgba(255,255,255,0.7)',
+                          border: '1px solid var(--border)',
+                        }}>
+                          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>
+                            Skill coverage
+                          </div>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
+                            <div style={{ fontSize: 30, fontWeight: 800, color: matchedPct >= 70 ? 'var(--green)' : matchedPct >= 40 ? 'var(--yellow)' : 'var(--red)' }}>
+                              {matchedPct}%
+                            </div>
+                            <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{profile.matchedSkills.length}/{skillCount || 1} skills</div>
+                          </div>
+                          <div className="score-track" style={{ height: 6 }}>
+                            <div className="score-fill" style={{
+                              width: `${matchedPct}%`,
+                              background: matchedPct >= 70 ? 'linear-gradient(90deg, #34d399, #059669)' : matchedPct >= 40 ? 'linear-gradient(90deg, #fbbf24, #f59e0b)' : 'linear-gradient(90deg, #fda4af, #ef4444)',
+                            }} />
+                          </div>
+                        </div>
+
+                        <div style={{
+                          padding: '12px 14px',
+                          borderRadius: 18,
+                          background: 'rgba(97,93,86,0.07)',
+                          border: '1px solid var(--border)',
+                        }}>
+                          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>
+                            Workspace path
+                          </div>
+                          <div style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)', lineHeight: 1.6, wordBreak: 'break-all' }}>
+                            {profile.path}
+                          </div>
+                        </div>
                       </div>
                     </div>
+                  </div>
 
-                    {/* Stats */}
-                    <div className="grid-3" style={{ gap: 10, marginBottom: 16 }}>
-                      <div style={{ padding: '12px 14px', background: 'var(--bg-section)', borderRadius: 'var(--radius)' }}>
-                        <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--green)' }}>{p.matchedSkills.length}</div>
-                        <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Skills matched ({matchedPct}%)</div>
+                  <div className="card-body" style={{ display: 'grid', gap: 18 }}>
+                    <div className="grid-3">
+                      <div style={{ padding: '14px 16px', borderRadius: 18, background: 'rgba(16,185,129,0.08)', border: '1px solid rgba(16,185,129,0.16)' }}>
+                        <div style={{ fontSize: 11, color: 'var(--green)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.4 }}>Matched skills</div>
+                        <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--green)', marginBottom: 4 }}>{profile.matchedSkills.length}</div>
+                        <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>Capability matches strong enough to activate for this project.</div>
                       </div>
-                      <div style={{ padding: '12px 14px', background: 'var(--bg-section)', borderRadius: 'var(--radius)' }}>
-                        <div style={{ fontSize: 24, fontWeight: 800, color: highGaps.length > 0 ? 'var(--red)' : 'var(--green)' }}>{p.gaps.length}</div>
-                        <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>Gaps ({highGaps.length} high priority)</div>
+                      <div style={{ padding: '14px 16px', borderRadius: 18, background: highGaps.length > 0 ? 'var(--red-light)' : 'rgba(16,185,129,0.08)', border: `1px solid ${highGaps.length > 0 ? 'var(--red-border)' : 'rgba(16,185,129,0.16)'}` }}>
+                        <div style={{ fontSize: 11, color: highGaps.length > 0 ? 'var(--red)' : 'var(--green)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.4 }}>High-priority gaps</div>
+                        <div style={{ fontSize: 26, fontWeight: 800, color: highGaps.length > 0 ? 'var(--red)' : 'var(--green)', marginBottom: 4 }}>{highGaps.length}</div>
+                        <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>{profile.gaps.length} total uncovered capability area{profile.gaps.length === 1 ? '' : 's'}.</div>
                       </div>
-                      <div style={{ padding: '12px 14px', background: 'var(--bg-section)', borderRadius: 'var(--radius)' }}>
-                        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 4 }}>Path</div>
-                        <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)', wordBreak: 'break-all' }}>{p.path}</div>
+                      <div style={{ padding: '14px 16px', borderRadius: 18, background: 'rgba(107,73,223,0.08)', border: '1px solid rgba(107,73,223,0.16)' }}>
+                        <div style={{ fontSize: 11, color: 'var(--purple)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: 0.4 }}>Recommendations</div>
+                        <div style={{ fontSize: 26, fontWeight: 800, color: 'var(--purple)', marginBottom: 4 }}>{profile.recommendations.length}</div>
+                        <div style={{ fontSize: 12, color: 'var(--text-dim)' }}>Guided next actions distilled from the analysis pass.</div>
                       </div>
                     </div>
 
-                    {/* Matched Skills */}
-                    {p.matchedSkills.length > 0 && (
-                      <div style={{ marginBottom: 14 }}>
-                        <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6 }}>MATCHED SKILLS</div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                          {p.matchedSkills.sort((a, b) => b.relevance - a.relevance).slice(0, 8).map(m => (
-                            <div key={m.slug} style={{
-                              display: 'flex', alignItems: 'center', gap: 10,
-                              padding: '6px 10px', background: 'var(--bg-section)', borderRadius: 'var(--radius)',
-                            }}>
-                              <Link href="/network" style={{ textDecoration: 'none', fontWeight: 600, fontSize: 12, color: 'var(--text)' }}>{m.slug}</Link>
-                              <div style={{ flex: 1 }}>
-                                <div className="score-track" style={{ height: 4 }}>
+                    {profile.matchedSkills.length > 0 ? (
+                      <div>
+                        <div className="section-label">Matched skills</div>
+                        <div style={{ display: 'grid', gap: 8 }}>
+                          {profile.matchedSkills
+                            .slice()
+                            .sort((a, b) => b.relevance - a.relevance)
+                            .slice(0, 8)
+                            .map(match => (
+                              <div key={match.slug} style={{
+                                padding: '12px 14px',
+                                borderRadius: 16,
+                                border: '1px solid var(--border)',
+                                background: 'rgba(255,255,255,0.66)',
+                              }}>
+                                <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', marginBottom: 8 }}>
+                                  <Link href="/network" style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', textDecoration: 'none' }}>
+                                    {match.slug}
+                                  </Link>
+                                  <span className={`hero-chip hero-chip-${match.relevance >= 70 ? 'green' : match.relevance >= 40 ? 'yellow' : 'neutral'}`}>
+                                    {match.relevance}% relevance
+                                  </span>
+                                </div>
+                                <div className="score-track" style={{ height: 5, marginBottom: 8 }}>
                                   <div className="score-fill" style={{
-                                    width: `${m.relevance}%`,
-                                    background: m.relevance >= 70 ? 'var(--green)' : m.relevance >= 40 ? 'var(--yellow)' : 'var(--text-muted)',
+                                    width: `${match.relevance}%`,
+                                    background: match.relevance >= 70 ? 'linear-gradient(90deg, #34d399, #059669)' : match.relevance >= 40 ? 'linear-gradient(90deg, #fbbf24, #f59e0b)' : 'linear-gradient(90deg, #d1d5db, #9ca3af)',
                                   }} />
                                 </div>
+                                <div style={{ fontSize: 11.5, color: 'var(--text-dim)', lineHeight: 1.55 }}>{match.reason}</div>
                               </div>
-                              <span style={{ fontSize: 12, fontWeight: 700, color: m.relevance >= 70 ? 'var(--green)' : 'var(--yellow)', minWidth: 32 }}>{m.relevance}%</span>
-                              <span style={{ fontSize: 10, color: 'var(--text-dim)', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.reason}</span>
-                            </div>
-                          ))}
-                          {p.matchedSkills.length > 8 && (
-                            <div style={{ fontSize: 10, color: 'var(--text-muted)', paddingLeft: 10 }}>+{p.matchedSkills.length - 8} more skills</div>
-                          )}
+                            ))}
                         </div>
                       </div>
-                    )}
-
-                    {/* Gaps with Action Buttons */}
-                    {p.gaps.length > 0 && (
-                      <div style={{ marginBottom: 14 }}>
-                        <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6 }}>GAPS — CLICK TO FILL</div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                          {p.gaps.map((g, i) => (
-                            <div key={i} style={{
-                              padding: '10px 14px', borderRadius: 'var(--radius)',
-                              background: g.priority === 'high' ? 'var(--red-light)' : g.priority === 'medium' ? 'var(--yellow-light)' : 'var(--bg-section)',
-                              borderLeft: `3px solid ${g.priority === 'high' ? 'var(--red)' : g.priority === 'medium' ? 'var(--yellow)' : 'var(--text-muted)'}`,
+                    ) : null}
+
+                    {profile.gaps.length > 0 ? (
+                      <div>
+                        <div className="section-label">Gap routing</div>
+                        <div style={{ display: 'grid', gap: 10 }}>
+                          {profile.gaps.map((gap, index) => (
+                            <div key={`${gap.area}-${index}`} style={{
+                              padding: '14px 16px',
+                              borderRadius: 18,
+                              border: `1px solid ${gap.priority === 'high' ? 'var(--red-border)' : gap.priority === 'medium' ? 'var(--yellow-border)' : 'var(--border)'}`,
+                              background: gap.priority === 'high' ? 'var(--red-light)' : gap.priority === 'medium' ? 'var(--yellow-light)' : 'rgba(255,255,255,0.7)',
                             }}>
-                              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
+                              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap', marginBottom: 8 }}>
                                 <div>
-                                  <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)' }}>{g.area}</span>
-                                  <span className={`badge ${g.priority === 'high' ? 'badge-red' : g.priority === 'medium' ? 'badge-yellow' : 'badge-gray'}`} style={{ marginLeft: 6 }}>{g.priority}</span>
+                                  <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginBottom: 6 }}>
+                                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>{gap.area}</div>
+                                    <span className={`hero-chip hero-chip-${priorityTone(gap.priority)}`}>{gap.priority} priority</span>
+                                    <span className={`hero-chip hero-chip-${gap.suggestedAction === 'research' ? 'blue' : gap.suggestedAction === 'specialize' ? 'green' : 'purple'}`}>
+                                      {gap.suggestedAction}
+                                    </span>
+                                  </div>
+                                  <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{gap.description}</div>
                                 </div>
-                                {g.suggestedAction === 'research' && (
-                                  <Link href="/research" style={{ textDecoration: 'none' }}>
-                                    <button style={{
-                                      padding: '4px 12px', fontSize: 10, fontWeight: 600,
-                                      background: 'var(--blue)', color: '#fff', border: 'none',
-                                      borderRadius: 'var(--radius)', cursor: 'pointer',
-                                    }}>
-                                      Research this gap
+
+                                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                                  {gap.suggestedAction === 'research' ? (
+                                    <Link href="/research" style={buttonStyle('blue')}>
+                                      Research gap
+                                    </Link>
+                                  ) : null}
+                                  {gap.suggestedAction === 'specialize' ? (
+                                    <button
+                                      onClick={() => void triggerSpecialize(profile.name)}
+                                      disabled={specializingProject === profile.name}
+                                      style={{
+                                        ...buttonStyle('green'),
+                                        opacity: specializingProject === profile.name ? 0.65 : 1,
+                                      }}
+                                    >
+                                      {specializingProject === profile.name ? 'Starting…' : 'Specialize skill'}
                                     </button>
-                                  </Link>
-                                )}
-                                {g.suggestedAction === 'specialize' && (
-                                  <button style={{
-                                    padding: '4px 12px', fontSize: 10, fontWeight: 600,
-                                    background: 'var(--green)', color: '#fff', border: 'none',
-                                    borderRadius: 'var(--radius)', cursor: 'pointer',
-                                  }}>
-                                    Specialize a skill
-                                  </button>
-                                )}
-                                {g.suggestedAction === 'create' && (
-                                  <Link href="/network" style={{ textDecoration: 'none' }}>
-                                    <button style={{
-                                      padding: '4px 12px', fontSize: 10, fontWeight: 600,
-                                      background: 'var(--bg-section)', color: 'var(--text-secondary)',
-                                      border: '1px solid var(--border)',
-                                      borderRadius: 'var(--radius)', cursor: 'pointer',
-                                    }}>
+                                  ) : null}
+                                  {gap.suggestedAction === 'create' ? (
+                                    <Link href="/network" style={buttonStyle('purple')}>
                                       Create manually
-                                    </button>
-                                  </Link>
-                                )}
-                              </div>
-                              <div style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.5 }}>
-                                {g.description}
+                                    </Link>
+                                  ) : null}
+                                </div>
                               </div>
                             </div>
                           ))}
                         </div>
                       </div>
-                    )}
-
-                    {/* Recommendations */}
-                    {p.recommendations.length > 0 && (
-                      <div style={{ padding: '10px 14px', background: 'var(--bg-section)', borderRadius: 'var(--radius)' }}>
-                        <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-muted)', marginBottom: 4 }}>RECOMMENDED NEXT STEPS</div>
-                        {p.recommendations.map((r, i) => (
-                          <div key={i} style={{ fontSize: 11, color: 'var(--text-dim)', lineHeight: 1.6 }}>→ {r}</div>
-                        ))}
-                      </div>
-                    )}
-
-                    {/* Re-analyze button */}
-                    <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
-                      <button onClick={() => { setProjectPath(p.path); setInputMode('local'); window.scrollTo(0, 0) }} style={{
-                        padding: '6px 12px', fontSize: 11, fontWeight: 600,
-                        background: 'var(--bg-section)', border: '1px solid var(--border)',
-                        borderRadius: 'var(--radius)', cursor: 'pointer', color: 'var(--text-secondary)',
+                    ) : null}
+
+                    {profile.recommendations.length > 0 ? (
+                      <div style={{
+                        padding: '16px 18px',
+                        borderRadius: 18,
+                        background: 'rgba(97,93,86,0.07)',
+                        border: '1px solid var(--border)',
                       }}>
+                        <div className="section-label" style={{ marginBottom: 10 }}>Recommended next steps</div>
+                        <div style={{ display: 'grid', gap: 8 }}>
+                          {profile.recommendations.map((recommendation, index) => (
+                            <div key={`${profile.name}-recommendation-${index}`} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+                              <span style={{ color: 'var(--purple)', fontWeight: 800, fontSize: 14 }}>•</span>
+                              <span style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.65 }}>{recommendation}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+                      <button
+                        onClick={() => {
+                          setProjectPath(profile.path)
+                          setInputMode('local')
+                          window.scrollTo({ top: 0, behavior: 'smooth' })
+                        }}
+                        style={buttonStyle('neutral')}
+                      >
                         Re-analyze
                       </button>
-                      <Link href="/network" style={{ textDecoration: 'none' }}>
-                        <button style={{
-                          padding: '6px 12px', fontSize: 11, fontWeight: 600,
-                          background: 'var(--bg-section)', border: '1px solid var(--border)',
-                          borderRadius: 'var(--radius)', cursor: 'pointer', color: 'var(--text-secondary)',
-                        }}>
-                          View in Skill Network
-                        </button>
+                      <button
+                        onClick={() => void triggerSpecialize(profile.name)}
+                        disabled={specializingProject === profile.name}
+                        style={{ ...buttonStyle('green'), opacity: specializingProject === profile.name ? 0.65 : 1 }}
+                      >
+                        {specializingProject === profile.name ? 'Starting specialization…' : 'Specialize for project'}
+                      </button>
+                      <Link href="/network" style={buttonStyle('purple')}>
+                        View in skill network
+                      </Link>
+                      <Link href="/research" style={buttonStyle('blue')}>
+                        Open research
                       </Link>
                     </div>
                   </div>
-                </div>
+                </article>
               )
             })}
           </div>
-        </div>
-      )}
+        )}
+      </SectionFrame>
 
-      {/* Empty state */}
-      {profiles.length === 0 && setupState === 'idle' && (
-        <div className="card">
-          <div className="empty-state">
-            <div className="empty-state-icon">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-                <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-              </svg>
-            </div>
-            <div className="empty-state-title">No projects analyzed yet</div>
-            <div className="empty-state-desc">
-              Enter a project folder path or GitHub URL above. HelixEvo will analyze it against your {skillCount} skills,
-              identify which ones match, and tell you what gaps need filling.
-            </div>
-          </div>
-        </div>
-      )}
-      {/* Folder Browser Modal */}
-      {showBrowser && (
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 9999,
-          background: 'rgba(0,0,0,0.3)', display: 'flex',
-          alignItems: 'center', justifyContent: 'center',
-        }} onClick={() => setShowBrowser(false)}>
-          <div onClick={e => e.stopPropagation()} style={{
-            width: 520, maxHeight: '70vh', background: 'var(--bg-card)',
-            borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)',
-            border: '1px solid var(--border)', overflow: 'hidden',
-            display: 'flex', flexDirection: 'column',
-          }}>
-            {/* Header */}
+      {showBrowser ? (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            background: 'rgba(31, 27, 24, 0.34)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+            backdropFilter: 'blur(8px)',
+          }}
+          onClick={() => setShowBrowser(false)}
+        >
+          <div
+            onClick={event => event.stopPropagation()}
+            style={{
+              width: 'min(880px, 100%)',
+              maxHeight: '78vh',
+              background: 'linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,243,238,0.98))',
+              borderRadius: 28,
+              boxShadow: 'var(--shadow-xl)',
+              border: '1px solid var(--border)',
+              overflow: 'hidden',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
             <div style={{
-              padding: '14px 18px', borderBottom: '1px solid var(--border)',
-              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+              padding: '18px 22px',
+              borderBottom: '1px solid var(--border)',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-start',
+              gap: 18,
+              flexWrap: 'wrap',
             }}>
               <div>
-                <div style={{ fontSize: 14, fontWeight: 700 }}>Browse Folders</div>
-                <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
-                  {browseData?.displayPath ?? '~'}
+                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6 }}>
+                  Folder browser
+                </div>
+                <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--text)', marginBottom: 6 }}>Choose a project root</div>
+                <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6, marginBottom: 10 }}>
+                  Browse into a workspace and select a directory. Project-like folders are highlighted to speed up intake.
+                </div>
+                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                  <span className="hero-chip hero-chip-neutral">{browseData?.displayPath ?? '~'}</span>
+                  <span className="hero-chip hero-chip-green">{browseData?.items.filter(item => item.isProject).length ?? 0} project candidate{(browseData?.items.filter(item => item.isProject).length ?? 0) === 1 ? '' : 's'}</span>
+                  <span className="hero-chip hero-chip-blue">{browseData?.items.filter(item => item.isDirectory).length ?? 0} folder{(browseData?.items.filter(item => item.isDirectory).length ?? 0) === 1 ? '' : 's'}</span>
                 </div>
               </div>
-              <div style={{ display: 'flex', gap: 6 }}>
-                {browseData?.parent && (
-                  <button onClick={() => browseTo(browseData.parent!)} style={{
-                    padding: '5px 10px', fontSize: 11, fontWeight: 600,
-                    background: 'var(--bg-section)', border: '1px solid var(--border)',
-                    borderRadius: 'var(--radius)', cursor: 'pointer', color: 'var(--text-secondary)',
-                  }}>
-                    ↑ Up
+
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                {browseData?.parent ? (
+                  <button onClick={() => void browseTo(browseData.parent!)} style={buttonStyle('neutral')}>
+                    Go up
                   </button>
-                )}
-                <button onClick={() => selectFolder(browseData?.path ?? '~')} style={{
-                  padding: '5px 12px', fontSize: 11, fontWeight: 600,
-                  background: 'var(--green)', color: '#fff', border: 'none',
-                  borderRadius: 'var(--radius)', cursor: 'pointer',
-                }}>
-                  Select This Folder
+                ) : null}
+                <button onClick={() => selectFolder(browseData?.path ?? '~')} style={buttonStyle('green', true)}>
+                  Select this folder
                 </button>
-                <button onClick={() => setShowBrowser(false)} style={{
-                  padding: '5px 10px', fontSize: 14, background: 'none',
-                  border: 'none', cursor: 'pointer', color: 'var(--text-dim)',
-                }}>
-                  &times;
+                <button onClick={() => setShowBrowser(false)} style={buttonStyle('neutral')}>
+                  Close
                 </button>
               </div>
             </div>
 
-            {/* Content */}
-            <div style={{ overflow: 'auto', flex: 1, padding: '8px 0' }}>
+            <div style={{ overflow: 'auto', flex: 1, padding: '10px 12px 16px' }}>
               {browseLoading ? (
-                <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-dim)', fontSize: 12 }}>Loading...</div>
+                <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-dim)', fontSize: 13 }}>Loading folder contents…</div>
               ) : browseData?.items.length === 0 ? (
-                <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-dim)', fontSize: 12 }}>Empty directory</div>
+                <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-dim)', fontSize: 13 }}>This directory is empty.</div>
               ) : (
-                browseData?.items.map(item => (
-                  <div
-                    key={item.name}
-                    onClick={() => {
-                      if (item.isDirectory) {
-                        if (item.isProject) {
-                          selectFolder(browseData.path + '/' + item.name)
-                        } else {
-                          browseTo(browseData.path + '/' + item.name)
-                        }
-                      }
-                    }}
-                    style={{
-                      padding: '7px 18px', display: 'flex', alignItems: 'center', gap: 10,
-                      cursor: item.isDirectory ? 'pointer' : 'default',
-                      fontSize: 13, color: item.isDirectory ? 'var(--text)' : 'var(--text-dim)',
-                      background: item.isProject ? 'var(--green-light)' : 'transparent',
-                      borderLeft: item.isProject ? '3px solid var(--green)' : '3px solid transparent',
-                    }}
-                    onMouseOver={e => { if (item.isDirectory) (e.currentTarget.style.background = item.isProject ? 'var(--green-light)' : 'var(--bg-hover)') }}
-                    onMouseOut={e => { e.currentTarget.style.background = item.isProject ? 'var(--green-light)' : 'transparent' }}
-                  >
-                    <span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>
-                      {item.isProject ? '📦' : item.isDirectory ? '📁' : '📄'}
-                    </span>
-                    <span style={{ flex: 1, fontWeight: item.isProject ? 600 : 400 }}>{item.name}</span>
-                    {item.isProject && (
-                      <span style={{ fontSize: 10, color: 'var(--green)', fontWeight: 600 }}>project</span>
-                    )}
-                    {item.isDirectory && !item.isProject && (
-                      <span style={{ fontSize: 10, color: 'var(--text-muted)' }}>&rarr;</span>
-                    )}
-                  </div>
-                ))
+                <div style={{ display: 'grid', gap: 8 }}>
+                  {browseData?.items.map(item => {
+                    const itemPath = `${browseData.path}/${item.name}`
+                    const interactive = item.isDirectory
+
+                    return (
+                      <div
+                        key={item.name}
+                        onClick={() => {
+                          if (!interactive) return
+                          if (item.isProject) {
+                            selectFolder(itemPath)
+                          } else {
+                            void browseTo(itemPath)
+                          }
+                        }}
+                        style={{
+                          padding: '14px 16px',
+                          borderRadius: 18,
+                          border: `1px solid ${item.isProject ? 'rgba(16,185,129,0.24)' : 'var(--border)'}`,
+                          background: item.isProject ? 'var(--green-light)' : 'rgba(255,255,255,0.68)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 14,
+                          cursor: interactive ? 'pointer' : 'default',
+                          transition: 'transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease',
+                          boxShadow: item.isProject ? 'var(--shadow-sm)' : 'none',
+                        }}
+                      >
+                        <div style={{
+                          width: 38,
+                          height: 38,
+                          borderRadius: 14,
+                          background: item.isProject ? 'rgba(16,185,129,0.16)' : item.isDirectory ? 'rgba(59,130,246,0.12)' : 'rgba(97,93,86,0.08)',
+                          color: item.isProject ? 'var(--green)' : item.isDirectory ? 'var(--blue)' : 'var(--text-muted)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          fontSize: 16,
+                          fontWeight: 800,
+                          flexShrink: 0,
+                        }}>
+                          {item.isProject ? 'P' : item.isDirectory ? 'D' : 'F'}
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>{item.name}</div>
+                          <div style={{ fontSize: 11.5, color: 'var(--text-dim)' }}>
+                            {item.isProject ? 'Looks like a project root — click to select immediately.' : item.isDirectory ? 'Directory — click to continue browsing.' : 'File'}
+                          </div>
+                        </div>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+                          {item.isProject ? <span className="hero-chip hero-chip-green">project</span> : null}
+                          {item.isDirectory && !item.isProject ? <span className="hero-chip hero-chip-blue">folder</span> : null}
+                          {!item.isDirectory ? <span className="hero-chip hero-chip-neutral">file</span> : null}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
               )}
             </div>
           </div>
         </div>
-      )}
+      ) : null}
     </div>
   )
 }