screencastgen

ProgressBar Component

Phase label + percentage progress bar with status coloring.

Source: web/frontend/src/components/ProgressBar.tsx

---

Props

{
  current: number      // Progress numerator
  total: number        // Progress denominator
  phase: string        // Current phase label
  status: JobStatus    // Job status for coloring
}

---

Behavior

• Displays phase name and percentage (e.g., “Synthesis — 45%”)
• Percentage: (current / total) * 100

Status Colors

Status	Color	Animation
running	Indigo	Pulse
pending	Indigo	Pulse
completed	Green	None
failed	Red	None

---

Used By

• JobDetail Page — Main progress display
• JobCard — Inline progress for running jobs

---

See Also

• useJobProgress Hook — Provides the progress data
• Pipeline Events — Source of progress events

This site is open source. Improve this page.