Separate into components

web/app/challenges/[id]/components/attempt-composer.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import Button from '@/app/components/base/button'
+import Textarea from '@/app/components/base/textarea'
+import { RiLoader4Line } from '@remixicon/react'
+import type { AttemptResult, LiveOutputState, Translate } from './types'
+import LiveOutputCard from './live-output-card'
+import AttemptHistory from './attempt-history'
+
+type AttemptComposerProps = {
+  userInput: string
+  onUserInputChange: (value: string) => void
+  onSubmit: () => Promise<void> | void
+  submitting: boolean
+  t: Translate
+  liveOutput: LiveOutputState
+  attempts: AttemptResult[]
+}
+
+export default function AttemptComposer({
+  userInput,
+  onUserInputChange,
+  onSubmit,
+  submitting,
+  t,
+  liveOutput,
+  attempts,
+}: AttemptComposerProps) {
+  return (
+    <div className='rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-xs'>
+      <h2 className='mb-4 text-lg font-semibold text-text-primary'>
+        {t('challenges.player.yourAttempt')}
+      </h2>
+
+      <Textarea
+        value={userInput}
+        onChange={event => onUserInputChange(event.target.value)}
+        placeholder='Enter your response here...'
+        rows={8}
+        className='mb-4 w-full'
+      />
+
+      <Button
+        type='primary'
+        onClick={onSubmit}
+        loading={submitting}
+        disabled={submitting || !userInput.trim()}
+        className='w-full'
+      >
+        {submitting ? (
+          <>
+            <RiLoader4Line className='mr-2 h-4 w-4 animate-spin' />
+            {t('challenges.player.processing', 'Processing…')}
+          </>
+        ) : (
+          t('challenges.player.submitButton', 'Submit')
+        )}
+      </Button>
+
+      <LiveOutputCard liveOutput={liveOutput} t={t} />
+      <AttemptHistory attempts={attempts} t={t} />
+    </div>
+  )
+}

web/app/challenges/[id]/components/attempt-history-item.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { RiCheckLine, RiCloseLine } from '@remixicon/react'
+import type { AttemptResult, Translate } from './types'
+
+type AttemptHistoryItemProps = {
+  attempt: AttemptResult
+  t: Translate
+}
+
+export default function AttemptHistoryItem({ attempt, t }: AttemptHistoryItemProps) {
+  return (
+    <div className={`rounded-lg border p-4 ${attempt.success ? 'border-util-colors-green-green-500 bg-util-colors-green-green-50' : 'border-util-colors-orange-orange-500 bg-util-colors-orange-orange-50'}`}>
+      <div className='flex items-start gap-3'>
+        {attempt.success ? (
+          <RiCheckLine className='h-5 w-5 shrink-0 text-util-colors-green-green-600' />
+        ) : (
+          <RiCloseLine className='h-5 w-5 shrink-0 text-util-colors-orange-orange-600' />
+        )}
+        <div className='flex-1'>
+          <div className='flex items-center justify-between'>
+            <div className={`mb-1 font-medium ${attempt.success ? 'text-util-colors-green-green-700' : 'text-util-colors-orange-orange-700'}`}>
+              {attempt.success ? t('challenges.player.status.success') : t('challenges.player.status.failed')}
+            </div>
+            <div className='text-xs text-text-tertiary'>
+              {new Date(attempt.timestamp).toLocaleTimeString()}
+            </div>
+          </div>
+          {attempt.thinking && (
+            <div className='bg-components-panel-bg/60 mt-3 space-y-2 rounded-md border border-divider-subtle p-3'>
+              <div className='text-xs font-medium uppercase tracking-wide text-text-tertiary'>
+                {t('challenges.player.modelThinking', 'Thinking')}
+              </div>
+              <div className='whitespace-pre-wrap text-sm text-text-secondary'>{attempt.thinking}</div>
+            </div>
+          )}
+          {attempt.message && (
+            <div className='mt-3 whitespace-pre-wrap text-sm text-text-secondary'>{attempt.message}</div>
+          )}
+          {attempt.rating !== undefined && (
+            <div className='mt-2 text-sm text-text-tertiary'>
+              {t('challenges.leaderboard.rating')}: {attempt.rating}/10
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

web/app/challenges/[id]/components/attempt-history.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import type { AttemptResult, Translate } from './types'
+import AttemptHistoryItem from './attempt-history-item'
+
+type AttemptHistoryProps = {
+  attempts: AttemptResult[]
+  t: Translate
+}
+
+export default function AttemptHistory({ attempts, t }: AttemptHistoryProps) {
+  return (
+    <div className='mt-6 rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-xs'>
+      <div className='mb-3 text-sm font-medium uppercase tracking-wide text-text-tertiary'>
+        {t('challenges.player.attemptHistory', 'Attempts')}
+      </div>
+      {attempts.length === 0 ? (
+        <div className='bg-components-panel-bg/60 rounded-lg border border-divider-subtle p-4 text-sm text-text-secondary'>
+          {t('challenges.player.noAttempts')}
+        </div>
+      ) : (
+        <div className='space-y-4'>
+          {attempts.map(attempt => (
+            <AttemptHistoryItem key={attempt.timestamp} attempt={attempt} t={t} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

web/app/challenges/[id]/components/challenge-header.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import type { ChallengeDetail } from './types'
+
+type ChallengeHeaderProps = {
+  challenge: ChallengeDetail
+}
+
+export default function ChallengeHeader({ challenge }: ChallengeHeaderProps) {
+  return (
+    <div className='mb-8'>
+      <h1 className='mb-2 text-3xl font-bold text-text-primary'>{challenge.name}</h1>
+      {challenge.description && (
+        <p className='text-lg text-text-secondary'>{challenge.description}</p>
+      )}
+    </div>
+  )
+}

web/app/challenges/[id]/components/challenge-not-found.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+type ChallengeNotFoundStateProps = {
+  message: string
+}
+
+export default function ChallengeNotFoundState({ message }: ChallengeNotFoundStateProps) {
+  return (
+    <div className='flex min-h-screen items-center justify-center bg-components-panel-bg'>
+      <div className='text-text-secondary'>{message}</div>
+    </div>
+  )
+}

web/app/challenges/[id]/components/goal-card.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import type { Translate } from './types'
+
+type GoalCardProps = {
+  goal: string
+  t: Translate
+}
+
+export default function GoalCard({ goal, t }: GoalCardProps) {
+  return (
+    <div className='mb-6 rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-xs'>
+      <h2 className='mb-2 text-sm font-medium uppercase tracking-wide text-text-tertiary'>
+        {t('challenges.player.goal')}
+      </h2>
+      <p className='text-text-primary'>{goal}</p>
+    </div>
+  )
+}

web/app/challenges/[id]/components/leaderboard-section.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import Leaderboard from '@/app/components/challenge/leaderboard'
+import type { LeaderboardEntry } from './types'
+
+type LeaderboardSectionProps = {
+  leaderboard: LeaderboardEntry[]
+  scoringStrategy?: string
+  emptyHint: string
+}
+
+export default function LeaderboardSection({ leaderboard, scoringStrategy, emptyHint }: LeaderboardSectionProps) {
+  if (leaderboard.length > 0)
+    return <Leaderboard entries={leaderboard} strategy={scoringStrategy} />
+
+  return (
+    <div className='rounded-xl border border-divider-subtle bg-components-panel-bg p-6 text-sm text-text-secondary shadow-xs'>
+      {emptyHint}
+    </div>
+  )
+}

web/app/challenges/[id]/components/live-output-card.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { RiLoader4Line } from '@remixicon/react'
+import type { LiveOutputState, Translate } from './types'
+
+type LiveOutputCardProps = {
+  liveOutput: LiveOutputState
+  t: Translate
+}
+
+export default function LiveOutputCard({ liveOutput, t }: LiveOutputCardProps) {
+  const { streamingThinking, streamingText, hasStreamingResult } = liveOutput
+  const hasContent = hasStreamingResult || Boolean(streamingThinking) || Boolean(streamingText)
+
+  if (!hasContent)
+    return null
+
+  return (
+    <div className='bg-components-panel-bg/60 mt-4 rounded-lg border border-divider-subtle p-4'>
+      <div className='flex items-center gap-2 text-sm font-medium text-text-secondary'>
+        {t('challenges.player.liveOutput')}
+        {hasStreamingResult && (
+          <RiLoader4Line className='h-4 w-4 animate-spin text-text-tertiary' />
+        )}
+      </div>
+      {streamingThinking && (
+        <div className='mt-3 space-y-2 rounded-md border border-divider-subtle bg-components-panel-bg p-3'>
+          <div className='text-xs font-medium uppercase tracking-wide text-text-tertiary'>
+            {t('challenges.player.modelThinking', 'Thinking')}
+          </div>
+          <div className='whitespace-pre-wrap text-sm text-text-secondary'>{streamingThinking}</div>
+        </div>
+      )}
+      {streamingText && (
+        <div className='mt-3 whitespace-pre-wrap text-sm text-text-primary'>
+          {streamingText}
+        </div>
+      )}
+      {!streamingThinking && !streamingText && (
+        <div className='mt-3 text-sm text-text-secondary'>
+          {t('challenges.player.awaitingResponse')}
+        </div>
+      )}
+    </div>
+  )
+}

web/app/challenges/[id]/components/loading-state.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+type LoadingStateProps = {
+  message: string
+}
+
+export default function LoadingState({ message }: LoadingStateProps) {
+  return (
+    <div className='flex min-h-screen items-center justify-center bg-components-panel-bg'>
+      <div className='text-text-tertiary'>{message}</div>
+    </div>
+  )
+}

web/app/challenges/[id]/components/session-summary-card.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import type { AttemptResult, Translate } from './types'
+
+type SessionSummaryCardProps = {
+  t: Translate
+  attemptsTotal: number
+  successCount: number
+  failureCount: number
+  mostRecentAttempt?: AttemptResult
+}
+
+export default function SessionSummaryCard({ t, attemptsTotal, successCount, failureCount, mostRecentAttempt }: SessionSummaryCardProps) {
+  return (
+    <div className='rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-xs'>
+      <div className='mb-3 text-sm font-medium uppercase tracking-wide text-text-tertiary'>
+        {t('challenges.player.sessionSummary', 'Session Summary')}
+      </div>
+      <div className='space-y-3 text-sm text-text-secondary'>
+        <div className='flex items-center justify-between'>
+          <span>{t('challenges.player.totalAttempts', 'Total attempts')}</span>
+          <span className='font-medium text-text-primary'>{attemptsTotal}</span>
+        </div>
+        <div className='flex items-center justify-between'>
+          <span>{t('challenges.player.successfulAttempts', 'Successful')}</span>
+          <span className='font-medium text-util-colors-green-green-600'>{successCount}</span>
+        </div>
+        <div className='flex items-center justify-between'>
+          <span>{t('challenges.player.failedAttempts', 'Failed')}</span>
+          <span className='font-medium text-util-colors-orange-orange-600'>{failureCount}</span>
+        </div>
+        {mostRecentAttempt && (
+          <div className='bg-components-panel-bg/60 rounded-md border border-divider-subtle p-3 text-xs text-text-tertiary'>
+            <div className='mb-1 font-medium uppercase tracking-wide text-text-tertiary'>
+              {t('challenges.player.lastAttempt', 'Last attempt')}
+            </div>
+            <div className='text-text-secondary'>
+              {new Date(mostRecentAttempt.timestamp).toLocaleTimeString()} · {mostRecentAttempt.success
+                ? t('challenges.player.status.success')
+                : t('challenges.player.status.failed')}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

web/app/challenges/[id]/components/types.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps } from 'react'
+import type { useTranslation } from 'react-i18next'
+import type Leaderboard from '@/app/components/challenge/leaderboard'
+
+export type Translate = ReturnType<typeof useTranslation>['t']
+
+export type LeaderboardEntry = ComponentProps<typeof Leaderboard>['entries'][number]
+
+export type ChallengeDetail = {
+  id: string
+  name: string
+  description?: string
+  goal?: string
+  app_id?: string
+  app_site_code?: string
+  app_mode?: string
+  scoring_strategy?: string
+}
+
+export type AttemptResult = {
+  success: boolean
+  message?: string
+  rating?: number
+  thinking?: string
+  timestamp: number
+}
+
+export type LiveOutputState = {
+  streamingText: string
+  streamingThinking: string
+  hasStreamingResult: boolean
+}