frontend/src/components/OutputPanel.tsx - main - nayvok/livecoding

frontend/src/components/OutputPanel.tsx
66 строк2 KB
nayvok
fix: harden sessions and WebRTC recovery
17 июн 2026, 22:02
17 июн 2026, 22:0237b9a92
import type { RunResultPayload, Role } from '@/types/session'

export type OutputState =
  | { kind: 'idle' }
  | { kind: 'running' }
  | { kind: 'done'; payload: RunResultPayload; runBy: Role }
  | { kind: 'error'; message: string }

interface OutputPanelProps {
  state: OutputState
}

export function OutputPanel({ state }: OutputPanelProps) {
  return (
    <div className="h-full flex flex-col bg-card text-card-foreground min-h-0">
      <div className="flex items-center justify-between border-b px-3 py-2 text-xs text-muted-foreground shrink-0">
        <span className="font-medium uppercase tracking-wider">Вывод</span>
        <StatusLabel state={state} />
      </div>
      <div className="flex-1 overflow-auto p-3 font-mono text-xs whitespace-pre-wrap break-words min-h-0">
        {renderBody(state)}
      </div>
    </div>
  )
}

function renderBody(state: OutputState) {
  if (state.kind === 'idle') {
    return <span className="text-muted-foreground">Нажмите «Запустить», чтобы выполнить код.</span>
  }
  if (state.kind === 'running') {
    return <span className="text-muted-foreground">Выполнение...</span>
  }
  if (state.kind === 'error') {
    return <span className="text-destructive">{state.message}</span>
  }
  const { stdout, stderr } = state.payload
  return (
    <>
      {stdout && <div>{stdout}</div>}
      {stderr && <div className="text-destructive">{stderr}</div>}
      {!stdout && !stderr && (
        <span className="text-muted-foreground">Программа не вывела ничего.</span>
      )}
    </>
  )
}

function StatusLabel({ state }: { state: OutputState }) {
  if (state.kind === 'idle') return null
  if (state.kind === 'running') return <span>идёт выполнение...</span>
  if (state.kind === 'error') return <span className="text-destructive">ошибка</span>
  const { payload, runBy } = state
  const who = runBy === 'teacher' ? 'преподаватель' : 'студент'
  const parts: string[] = []
  parts.push(`запустил, ${who}`)
  if (payload.timedOut) {
    parts.push('прервано по таймауту')
  } else if (payload.exitCode === 0) {
    parts.push(`готово за ${payload.durationMs} мс`)
  } else {
    parts.push(`exit code ${payload.exitCode ?? '?'}, ${payload.durationMs} мс`)
  }
  if (payload.truncated) parts.push('вывод обрезан')
  return <span>{parts.join(' · ')}</span>
}