feat(web): rebuild skill selector with new skills lineup

Replace code-review/security-audit (passive, removed from product) with
interactive skills: eli5, pair-debug, hot-seat, test-me (all coming soon).
Uses shared Card/Chip/Button components with Direction E styling.

Author: mariuspruvot

apps/web/src/features/session/SkillSelector.test.tsx

@@ -20,22 +20,20 @@ describe('SkillSelector', () => {
       expect(screen.getByTestId(`skill-card-${skill.name}`)).toBeTruthy()
       expect(screen.getByText(skill.label)).toBeTruthy()
       expect(screen.getByText(skill.description)).toBeTruthy()
-      expect(screen.getByText(skill.duration)).toBeTruthy()
     }
   })
 
   test('renders repo and PR info in header', () => {
     render(<SkillSelector {...defaultProps} />)
 
     expect(screen.getByTestId('skill-selector')).toBeTruthy()
-    // Use getAllByText since repo name may appear in multiple places
     const repoElements = screen.getAllByText('acme/helprs')
     expect(repoElements.length).toBeGreaterThan(0)
     const prElements = screen.getAllByText('#42')
     expect(prElements.length).toBeGreaterThan(0)
   })
 
-  test('calls onSelectSkill when an available skill card is clicked', () => {
+  test('calls onSelectSkill when challenge-me card is clicked', () => {
     const onSelectSkill = vi.fn()
     render(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
 
@@ -47,16 +45,23 @@ describe('SkillSelector', () => {
     const onSelectSkill = vi.fn()
     render(<SkillSelector {...defaultProps} onSelectSkill={onSelectSkill} />)
 
-    fireEvent.click(screen.getByTestId('skill-card-code-review'))
-    fireEvent.click(screen.getByTestId('skill-card-security-audit'))
+    fireEvent.click(screen.getByTestId('skill-card-eli5'))
+    fireEvent.click(screen.getByTestId('skill-card-pair-debug'))
+    fireEvent.click(screen.getByTestId('skill-card-hot-seat'))
+    fireEvent.click(screen.getByTestId('skill-card-test-me'))
     expect(onSelectSkill).not.toHaveBeenCalled()
   })
 
-  test('shows Coming soon badge for unreleased skills', () => {
+  test('shows "soon" badge for unreleased skills', () => {
     render(<SkillSelector {...defaultProps} />)
 
-    const badges = screen.getAllByText('Coming soon')
-    expect(badges.length).toBe(2)
+    const badges = screen.getAllByText('soon')
+    expect(badges.length).toBe(4)
+  })
+
+  test('shows DEFAULT badge for challenge-me', () => {
+    render(<SkillSelector {...defaultProps} />)
+    expect(screen.getByText('DEFAULT')).toBeTruthy()
   })
 
   test('disables cards when disabled prop is true', () => {
@@ -82,10 +87,9 @@ describe('SkillSelector', () => {
     expect(brandElements.length).toBeGreaterThan(0)
   })
 
-  test('renders disclaimer text', () => {
-    render(<SkillSelector {...defaultProps} />)
-    expect(
-      screen.getByText(/AI-generated content may be inaccurate/),
-    ).toBeTruthy()
+  test('renders 5 skills total (1 active + 4 coming soon)', () => {
+    expect(SKILLS.length).toBe(5)
+    expect(SKILLS.filter(s => !s.comingSoon).length).toBe(1)
+    expect(SKILLS.filter(s => s.comingSoon).length).toBe(4)
   })
 })

apps/web/src/features/session/SkillSelector.tsx

@@ -1,30 +1,44 @@
 /**
- * SkillSelector — displays available skills as cards with a Run button.
- *
- * Hardcoded skill list for now (will be dynamic later).
+ * SkillSelector — displays available skills as cards.
+ * Skills per spec: challenge-me (active), eli5/pair-debug/hot-seat/test-me (coming soon).
  */
 
+import { Button, Card, Chip, Overline } from '../../shared/components'
 import type { Skill } from './containerTypes'
 
 const SKILLS: Skill[] = [
   {
     name: 'challenge-me',
     label: 'Challenge Me',
-    description: 'Socratic quiz -- tests your understanding of your own PR changes',
+    description: 'Socratic quiz — tests your understanding of your own PR changes. 3 questions targeting failure modes, system knowledge, and design trade-offs.',
     duration: '5-10 min',
   },
   {
-    name: 'code-review',
-    label: 'Code Review',
-    description: 'Multi-layer adversarial code review',
-    duration: '3-5 min',
+    name: 'eli5',
+    label: 'ELI5',
+    description: 'Explain Like I\'m 5 — can you vulgarize your own code? Picks complex sections and asks you to explain them simply.',
+    duration: '5-8 min',
     comingSoon: true,
   },
   {
-    name: 'security-audit',
-    label: 'Security Audit',
-    description: 'Vulnerability scan on your diff',
-    duration: '1-3 min',
+    name: 'pair-debug',
+    label: 'Pair Debug',
+    description: 'Find the subtle bug Claude injected into your code. Ask questions, narrow it down, submit your diagnosis.',
+    duration: '5-12 min',
+    comingSoon: true,
+  },
+  {
+    name: 'hot-seat',
+    label: 'Hot Seat',
+    description: 'Architecture hot seat — defend your design choices under pressure. Claude plays devil\'s advocate on your decisions.',
+    duration: '5-10 min',
+    comingSoon: true,
+  },
+  {
+    name: 'test-me',
+    label: 'Test Me',
+    description: 'Predict whether test cases pass or fail on your code. Claude writes tests, you predict the outcome and explain why.',
+    duration: '5-8 min',
     comingSoon: true,
   },
 ]
@@ -47,93 +61,66 @@ export default function SkillSelector({
   return (
     <div
       data-testid="skill-selector"
-      className="min-h-screen bg-primary text-text-primary font-sans flex flex-col items-center justify-center px-6"
+      className="min-h-screen bg-bg text-ink font-sans flex flex-col items-center justify-center px-6 py-12"
     >
       {/* Header */}
       <div className="text-center mb-10 max-w-lg">
-        <h1 className="font-mono text-[24px] font-bold mb-2">
-          <span style={{ color: '#E2A039' }}>helPRs</span>
-        </h1>
-        <p className="text-text-secondary text-[14px]">
-          <span className="font-mono text-text-primary">{repoFullName}</span>
-          {' '}
-          <span className="text-text-muted">#{prNumber}</span>
+        <h1 className="font-mono text-lg font-bold text-accent mb-2">helPRs</h1>
+        <p className="text-ink2 text-sm">
+          Run something on{' '}
+          <span className="font-mono text-ink">{repoFullName}</span>
+          <span className="text-dim">#{prNumber}</span>
         </p>
-        <p className="text-text-muted text-[13px] mt-2">Select a skill to run against this PR</p>
       </div>
 
       {/* Skill cards */}
-      <div className="grid gap-4 w-full max-w-lg">
+      <div className="grid gap-3 w-full max-w-lg">
         {SKILLS.map((skill) => (
-          <button
+          <Card
             key={skill.name}
-            data-testid={`skill-card-${skill.name}`}
-            onClick={() => !skill.comingSoon && onSelectSkill(skill.name)}
-            disabled={disabled || skill.comingSoon}
-            className="text-left p-5 rounded-[10px] transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-            style={{
-              background: '#1a1717',
-              boxShadow: '0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 24px -8px rgba(0, 0, 0, 0.3)',
-            }}
-            onMouseEnter={(e) => {
-              if (!disabled) {
-                e.currentTarget.style.boxShadow = '0 0 0 1px rgba(226, 160, 57, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 48px -12px rgba(0, 0, 0, 0.4)'
-              }
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.boxShadow = '0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 24px -8px rgba(0, 0, 0, 0.3)'
-            }}
+            hover={!skill.comingSoon}
+            className={`${skill.comingSoon ? 'opacity-60' : 'cursor-pointer'}`}
           >
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 min-w-0">
-                <h2 className="font-mono text-[15px] font-medium text-text-primary mb-1">
-                  {skill.label}
-                </h2>
-                <p className="text-text-secondary text-[13px] leading-relaxed">
-                  {skill.description}
-                </p>
-              </div>
-              <div className="flex flex-col items-end gap-2 shrink-0">
-                <span
-                  className="text-[11px] font-mono px-2 py-0.5 rounded-full"
-                  style={{
-                    color: 'rgba(255, 255, 255, 0.5)',
-                    background: 'rgba(255, 255, 255, 0.04)',
-                    border: '1px solid rgba(255, 255, 255, 0.06)',
-                  }}
-                >
-                  {skill.duration}
-                </span>
-                {skill.comingSoon ? (
-                  <span
-                    className="text-[11px] font-mono px-2 py-0.5 rounded-full"
-                    style={{
-                      color: 'rgba(226, 160, 57, 0.7)',
-                      background: 'rgba(226, 160, 57, 0.08)',
-                      border: '1px solid rgba(226, 160, 57, 0.15)',
-                    }}
-                  >
-                    Coming soon
-                  </span>
-                ) : (
-                  <span
-                    className="text-[12px] font-semibold font-mono"
-                    style={{ color: '#E2A039' }}
-                  >
-                    Run &rarr;
-                  </span>
-                )}
+            <button
+              data-testid={`skill-card-${skill.name}`}
+              onClick={() => !skill.comingSoon && onSelectSkill(skill.name)}
+              disabled={disabled || skill.comingSoon}
+              className="w-full text-left disabled:cursor-not-allowed cursor-pointer"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h2 className="font-mono text-sm font-semibold text-ink">
+                      {skill.label}
+                    </h2>
+                    {!skill.comingSoon && (
+                      <Chip variant="accent">DEFAULT</Chip>
+                    )}
+                  </div>
+                  <p className="text-ink2 text-[13px] leading-relaxed">
+                    {skill.description}
+                  </p>
+                </div>
+                <div className="flex flex-col items-end gap-2 shrink-0">
+                  <Chip>{skill.duration}</Chip>
+                  {skill.comingSoon ? (
+                    <Chip variant="warn">soon</Chip>
+                  ) : (
+                    <Button variant="ghost" className="text-accent text-xs font-semibold px-0">
+                      Run &rarr;
+                    </Button>
+                  )}
+                </div>
               </div>
-            </div>
-          </button>
+            </button>
+          </Card>
         ))}
       </div>
 
-      {/* Footer disclaimer */}
-      <p className="text-text-muted text-[11px] mt-8 text-center max-w-md">
-        Skills run in ephemeral containers using your configured Claude credentials.
-        AI-generated content may be inaccurate -- verify important findings.
-      </p>
+      {/* Footer */}
+      <Overline className="mt-8 text-center max-w-md">
+        // skills run in ephemeral containers using your configured Claude credentials
+      </Overline>
     </div>
   )
 }