Xzero UI
Pro library
Special componentsTraining run

Training runPro

A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar. It shows the learning rate, elapsed time, ETA and the latest evals and checkpoints, has Pause and Cancel while it runs, and ends in results with a Deploy button.

$ pnpm dlx shadcn@4.23.0 add @xzero-ui-pro/training-run
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/training-run

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { TrainingRun, QwenColorMark, HuggingFaceMark } from "@/components/xzero/training-run/training-run";

export function FineTuneJob({ job }: { job: Job }) {
  return (
    <TrainingRun
      status={job.status}
      name={job.outputName}
      model={{ name: "Qwen3.8 Max", mark: <QwenColorMark /> }}
      details={["LoRA r16", "8× H200"]}
      dataset={{ name: "arcwork/support-tickets-oct", examples: 48210, mark: <HuggingFaceMark /> }}
      step={job.step}
      totalSteps={job.totalSteps}
      epochs={job.epochs}
      loss={job.loss}
      learningRate={job.learningRate}
      elapsed={job.elapsedSeconds}
      eta={job.etaSeconds}
      events={job.events}
      error={job.error}
      onPause={() => api.pause(job.id)}
      onResume={() => api.resume(job.id)}
      onCancel={() => api.cancel(job.id)}
      onRetry={() => api.retry(job.id)}
      onDeploy={signal => api.deploy(job.id, { signal })}
    />
  );
}

API reference

TrainingRun

A fine-tuning job card with a live train and validation loss curve, epoch progress, learning rate, elapsed time and ETA, recent events, pause and cancel, and results with a Deploy button once the run completes. With no props it plays a simulated LoRA run of Qwen3.8 Max.

PropTypeDefaultDescription
status"queued" | "running" | "paused" | "completed" | "failed" | "cancelled"–Where the job is. Running with no loss samples reads as starting up. Leave it out to play the built in simulation.
namestring"Fine-tuning job"The job or output model name.
model{ name: string; mark?: ReactNode }Qwen3.8 Max with its markThe base model. The mark renders at 24px; color marks keep brand fills, mono marks use currentColor.
detailsstring[][]Short facts after the model name, such as ["LoRA r16", "8× H200"].
dataset{ name: string; examples?: number; mark?: ReactNode }–The training data, shown in the footer with an optional 14px mark (Hugging Face in the demo).
stepnumber0Optimizer steps done.
totalStepsnumber1Steps in the whole run. Fixes the x axis so the curve never rescales mid-run.
epochsnumber1Number of epochs. The axis splits into one band and one progress segment per epoch.
loss{ step: number; train?: number; val?: number }[][]Loss samples, oldest first. Train is drawn raw (faint) and smoothed; validation joins its own samples. The line eases toward each new point.
learningRatenumber–The current learning rate, shown as 1.84e-4.
elapsednumber–Seconds of training so far, excluding pauses.
etanumber–Estimated seconds left. While queued it reads as About 18m 40s.
events{ id: string; kind: TrainingEventKind; label: string; step?: number }[][]The event log, oldest first. The newest three show; kinds are start, checkpoint, eval, epoch, info, warning, error and done.
metrics{ label: string; value: string; hint?: string }[]–Up to four results that replace the live stats on completion. Defaults to final train loss, validation loss, steps and duration.
activitystring–A line over the empty chart while queued or starting, such as Waiting for 8× H200 · 2nd in queue.
errorstring–Why the run failed, shown in the footer in place of the dataset.
onPause() => void–Shows Pause while running.
onResume() => void–Shows Resume while paused.
onCancel() => void–Shows Cancel while queued, running or paused. Called after a second press on Confirm cancel within 3 seconds.
onRetry() => void–Shows Retry from checkpoint when the run failed.
onRestart() => void–Shows Run again after a run completes, fails or is cancelled.
onDeploy(signal: AbortSignal) => Promise<{ endpoint?: string } | void>–Shows Deploy on completion. The button loads while the promise runs, then the footer shows the endpoint with a copy button; a rejection shows its message and Retry deploy. Aborted if the card unmounts or the run leaves completed.
noticestring–A one-off message for screen readers, such as the result of an action.
scenario"healthy" | "oom""healthy"Demo only, when status is left out: oom fails once at step 940 so the retry path can be seen.
classNamestring–Extra class on the card.

useTrainingRunSimulation

The hook behind the demo. Returns every TrainingRun prop for a simulated run, so you can prototype against it before wiring a real job API.

PropTypeDefaultDescription
scenario"healthy" | "oom""healthy"Which simulated run to play.
activebooleantrueFreezes the simulation while false, for example when the card is off screen.

Keyboard interactions

KeysAction
TabMoves through the loss chart and the footer actions.
Left / RightOn the focused chart, steps through samples; the legend shows that step's train and validation loss.
Shift + Left / RightJumps ten samples.
Home / EndJumps to the first or latest sample.
EscapeClears the inspected step.
Enter / SpaceActivates the focused action. Cancel needs a second press on Confirm cancel.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in ai

Guidance for AI tools

Training run: A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar. It shows the learning rate, elapsed time, ETA and the latest evals and checkpoints, has Pause and Cancel while it runs, and ends in results with a Deploy button. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components