Separate into components

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>
+  )
+}