Component reference

ProcessGroup

Collapsible record of what the assistant did; native details owns expansion and keyboard.

Preview

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>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { ProcessGroup } from "meowtail";

<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>

Examples

The other stories that show this component.

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>
  );
}

API reference

Props

Prop	Type	Default
`title`RequiredThe group's name and size, for example "Process · 3 steps".	`Child`	–
`status`The group's state right after the name: pass the shared state badge, for example `<Status state="success" label="Completed" />`. Plain words still render as a quiet fact.	`Child`	–
`trailing`One quiet right-aligned fact, such as the total duration or "2 / 4". Not a row of dots.	`Child`	–
`open`	`boolean`	`false`

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

DOM parts

rootsummarychevrontitlestatustrailingbody

Registry

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