Component reference

ProcessStep

One row of a ProcessGroup: icon, a single truncated line, a quiet fact.

Preview

ProcessStep has no story of its own; this one draws it as part of ProcessGroup.

Collapsed step record

A process group condenses what the assistant did into one line: name and step count, the state badge, and one quiet closing fact. When expanded, each step gets one line, paths use a monospace font, and durations sit quietly on the right.

packages/meowtail/stories/process-group.stories.tsxline 56tsx

render() {
  return (
    <SchemePair width={460}>
      {() => (
        <div style={{ display: "grid", gap: "14px" }}>
          <ProcessGroup
            open
            title="Process · 3 steps"
            status={<Status state="success" label="Completed" />}
            trailing="4.2s"
          >
            <ProcessStep icon={<Icon name="search" />} meta="12 matches">
              Search content <code>workflow-prototype</code>
            </ProcessStep>
            <ProcessStep icon={<Icon name="file-text" />} meta="1.1s">
              Read file <code>docs/records/2026-09-16-workflow-prototype.md</code>
            </ProcessStep>
            <ProcessStep icon={<Icon name="file-text" />} meta="0.9s">
              Read file <code>…workflow-prototype-second-trial.md</code>
            </ProcessStep>
          </ProcessGroup>
          <ProcessGroup
            title="Process · 4 steps"
            status={<Status state="processing" label="Running" />}
            trailing="2 / 4"
          >
            <ProcessStep icon={<Icon name="terminal" />} meta="2.0s">
              Run command <code>go test ./server/...</code>
            </ProcessStep>
          </ProcessGroup>
          <ProcessGroup
            open
            title="Process · 1 step"
            status={<Status state="unknown" label="Unconfirmed" />}
          >
            <ProcessStep icon={<Icon name="folder-open" />} meta={<Tag>Not checked</Tag>}>
              View directory{" "}
              <code>
                apps/meowland/web/src/a/very/long/path/that/keeps/going/and/going/index.ts
              </code>
            </ProcessStep>
          </ProcessGroup>
        </div>
      )}
    </SchemePair>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ProcessStep } from "meowtail";

<ProcessStep icon={<Icon name="search" />} meta="12 matches">
  Search content <code>workflow-prototype</code>
</ProcessStep>

Examples

Narrow rows and long sequences

In a narrow container, the name and the closing fact stay on the first line while the state badge gets its own second line; a long sequence is summarized as a count, not a row of marks.

packages/meowtail/stories/process-group.stories.tsxline 21tsx

render() {
  return (
    <SchemePair width={340}>
      {() => (
        <ProcessGroup
          title="Process · 13 steps"
          status={<Status state="success" label="Completed" />}
          trailing="12.4s"
        >
          <ProcessStep icon={<Icon name="terminal" />} meta="2.0s">
            Run command <code>go test ./server/...</code>
          </ProcessStep>
        </ProcessGroup>
      )}
    </SchemePair>
  );
}

API reference

Props

Prop	Type	Default
`icon`	`Child`	–
`meta`Duration, count or other quiet fact at the row's end.	`Child`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

rooticonlabelmeta

Registry

The component is registered as process-step in the meowtail component registry.