Back to components

AI Interfaces

Reasoning Checkpoint Rail

An ordered run rail that makes intent, evidence, tool planning, and answer readiness visible at a glance.

reasoningworkflowstatus

Installation

Copy and paste the code into your project.

Accessibility notes

The checkpoint sequence is an ordered list and each stage exposes its status as text rather than color alone.

Reasoning rail

Run checkpoints

  1. 1

    Intent

    done

    Scope resolved

  2. 2

    Evidence

    done

    4 sources grounded

  3. 3

    Tool plan

    active

    2 calls approved

  4. 4

    Final answer

    queued

    Waiting on tool result

Preview accent

TypeScript
const checkpoints = [{ label: "Intent", status: "done" }, { label: "Evidence", status: "done" }, { label: "Tool plan", status: "active" }, { label: "Final answer", status: "queued" }];

export function ReasoningCheckpointRail() {
  return <ol>{checkpoints.map((checkpoint, index) => <li key={checkpoint.label}>{index + 1}. {checkpoint.label} · {checkpoint.status}</li>)}</ol>;
}
Usage
<ReasoningCheckpointRail />

Related components

Approval

Publish launch prompt

pending
DesignLegalOps

AI Interfaces

Approval Action Panel

Intermediate

A review panel with assignee chips and paired approval actions for launch workflows.

approvalreviewworkflow
View component

Pipeline

1Input
2Clean
3Ship

AI Interfaces

Data Pipeline Card

Intermediate

A simple horizontal pipeline for data prep, agent workflows, and release steps.

pipelinedataworkflow
View component

Human handoff

Ready to escalate?

75%

complete

  • Decision summary

    Generated

  • Supporting evidence

    4 sources attached

  • Open risks

    1 needs review

  • Next owner

    Support lead

AI Interfaces

Handoff Readiness Card

Intermediate

A pre-escalation checklist for packaging AI decisions, evidence, risks, and ownership for human review.

handoffreviewworkflow
View component