StatusBanner, ProgressLog, and RetryButtons Reference

This page documents every prop for the three UI components exported from @claritylabs/cl-pipelines/ui. All components are headless — they render semantic HTML with data-* attributes and accept className props, but ship with no built-in styles.

StatusBanner

StatusBanner is a compound component. Use StatusBanner (or StatusBanner.Root) as the wrapper, then compose the sub-components inside it. The wrapper renders null when status is "idle", "complete", or undefined.

StatusBanner.Root (StatusBanner)

The container element. Renders a <div data-status="..."> when visible.

PipelineStatus | undefined

Controls visibility and the data-status attribute. Renders null for "idle", "complete", and undefined. Visible for "running", "paused", and "error".

string

Error message string. Passed through context to StatusBanner.Description.

LogEntry[]

Log entries. Passed through context to any ProgressLog rendered as a child.

React.ReactNode

required

Sub-components: Indicator, Title, Description, Actions.

string

Class name applied to the root <div>.

StatusBanner.Indicator

An inline element that marks the status visually. Renders a <span data-indicator="..."> by default. Override with render to show a spinner or icon.

string

Class name applied to the <span>.

(status: PipelineStatus) => React.ReactNode

Custom render function. Return any React node — spinner, icon, badge — based on the current status.

<StatusBanner.Indicator
  render={(status) => (
    status === "running" ? <Spinner /> : <ErrorIcon />
  )}
/>

StatusBanner.Title

The title line. Renders a <div data-role="title"> with a default text string based on status:

Status	Default text
`"running"`	`"Running…"`
`"error"`	`"Error"`
`"paused"`	`"Paused"`

React.ReactNode

Override the default text with any content.

string

Class name applied to the <div>.

StatusBanner.Description

A secondary text line. Renders a <div data-role="description"> showing the error string from the parent Root by default.

React.ReactNode

Override the default (error string) with any content.

string

Class name applied to the <div>.

StatusBanner.Actions

A layout slot for action buttons. Renders a <div data-role="actions">.

React.ReactNode

required

Any React content — typically a RetryButtons component.

string

Class name applied to the <div>.

ProgressLog

Renders a list of LogEntry items. Renders null when entries is undefined or empty. Default list item markup:

<li data-level="info|warn|error" data-phase="phase-name">
  <time>HH:MM:SS</time>
  <span>message</span>
</li>

LogEntry[] | undefined

The log entries to display. Renders null when undefined or empty.

boolean

When true, shows only the last entry. Useful for compact status lines. Defaults to false.

number

Maximum number of entries to show. Shows the last N entries. Defaults to 10.

string

Class name applied to the <ul> container.

(entry: LogEntry, i: number) => React.ReactNode

Custom render function for each list item. Return your own <li> or any element.

<ProgressLog
  entries={job.log}
  renderEntry={(entry, i) => (
    <li key={i} className={`log-entry log-entry--${entry.level ?? "info"}`}>
      {entry.message}
    </li>
  )}
/>

RetryButtons

Renders two buttons: a resume button ("resume" mode) and a restart button ("full" mode). Default labels are “Retry” and “Restart”.

(mode: RetryMode) => void

required

Called with "resume" when the Retry button is clicked, and "full" when the Restart button is clicked.

boolean

Disables both buttons when true. Use this while an async runPipeline call is in flight.

{ resume?: string; full?: string }

Override the default button labels. Defaults to { resume: "Retry", full: "Restart" }.

<RetryButtons
  onRetry={handleRetry}
  labels={{ resume: "Try again", full: "Start over" }}
/>

(mode: RetryMode, onClick: () => void, label: string, disabled: boolean) => React.ReactNode

Custom render function for each button. Return any React node. Called once for "resume" and once for "full".

string

Class name applied to the wrapping <div data-role="retry-buttons">.

Tailwind example

<RetryButtons
  onRetry={(mode) => retryJob(jobId, mode)}
  renderButton={(mode, onClick, label, disabled) => (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`px-4 py-2 rounded font-medium transition-opacity disabled:opacity-50 ${
        mode === "full"
          ? "bg-red-500 text-white hover:bg-red-600"
          : "bg-blue-500 text-white hover:bg-blue-600"
      }`}
    >
      {label}
    </button>
  )}
/>

CSS modules example

import styles from "./PipelineActions.module.css";

<RetryButtons
  onRetry={(mode) => retryJob(jobId, mode)}
  renderButton={(mode, onClick, label, disabled) => (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={mode === "full" ? styles.restartButton : styles.retryButton}
      data-retry-mode={mode}
    >
      {label}
    </button>
  )}
/>

Full composition example

import { StatusBanner, ProgressLog, RetryButtons } from "@claritylabs/cl-pipelines/ui";

function JobStatusWidget({ jobId }: { jobId: string }) {
  const job = useJob(jobId);

  return (
    <div className="space-y-3">
      <StatusBanner
        status={job?.status}
        error={job?.error}
        className="rounded-lg border p-4"
      >
        <div className="flex items-center gap-3">
          <StatusBanner.Indicator
            render={(s) => s === "running" ? <Spinner /> : <ErrorBadge />}
          />
          <div>
            <StatusBanner.Title className="font-semibold" />
            <StatusBanner.Description className="text-sm text-gray-500" />
          </div>
        </div>
        <StatusBanner.Actions className="mt-3 flex gap-2">
          <RetryButtons
            onRetry={(mode) => retryJob(jobId, mode)}
            labels={{ full: "Start over" }}
          />
        </StatusBanner.Actions>
      </StatusBanner>

      <ProgressLog
        entries={job?.log}
        limit={5}
        className="text-sm font-mono"
      />
    </div>
  );
}

Get Started

Phase Runner

Agent Loop

Adapters & UI

Reference

StatusBanner, ProgressLog, and RetryButtons Reference

StatusBanner

StatusBanner.Root (StatusBanner)

StatusBanner.Indicator

StatusBanner.Title

StatusBanner.Description

StatusBanner.Actions

ProgressLog

RetryButtons

Tailwind example

CSS modules example

Full composition example

​StatusBanner

​StatusBanner.Root (StatusBanner)

​StatusBanner.Indicator

​StatusBanner.Title

​StatusBanner.Description

​StatusBanner.Actions

​ProgressLog

​RetryButtons

​Tailwind example

​CSS modules example

​Full composition example

StatusBanner

StatusBanner.Root (StatusBanner)

StatusBanner.Indicator

StatusBanner.Title

StatusBanner.Description

StatusBanner.Actions

ProgressLog

RetryButtons

Tailwind example

CSS modules example

Full composition example