Steps

A collapsible numbered/bulleted timeline for tool traces or multi-step agent runs. Vertical bar marks the active section. Built on spartan's brain collapsible.

Examples

Default open

Steps default to expanded; click the trigger row to collapse.

Resolved the package manifest.

Walked the dependency graph.

Wrote the lockfile to disk.

<pk-steps>
  <pk-steps-trigger>3 steps completed</pk-steps-trigger>
  <pk-steps-content>
    <pk-steps-item>Resolved the package manifest.</pk-steps-item>
    <pk-steps-item>Walked the dependency graph.</pk-steps-item>
    <pk-steps-item>Wrote the lockfile to disk.</pk-steps-item>
  </pk-steps-content>
</pk-steps>

Initially collapsed

Pass [defaultOpen]=false to start collapsed.

Read inbox.txt

Tokenized into 5 messages

Generated 1024-d embeddings

Inserted rows into vectors table

Refreshed the HNSW index

<pk-steps [defaultOpen]="false">
  <pk-steps-trigger>5 messages indexed</pk-steps-trigger>
  <pk-steps-content>
    <pk-steps-item>Read inbox.txt</pk-steps-item>
    <!-- ...more steps... -->
  </pk-steps-content>
</pk-steps>

Installation

Add the steps component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:steps

Component API

PkSteps

Prop	Type	Default	Description
open	`model<boolean>`	—	Two-way bound open state. Leave unbound for uncontrolled.
defaultOpen	`boolean`	true	Initial state when uncontrolled.
class	`string`	—	Extra classes for the wrapper.

PkStepsTrigger

Prop	Type	Default	Description
leftIcon	`boolean`	false	Reserve space for a left-icon slot (project via [leftIcon] attribute).
swapIconOnHover	`boolean`	true	Swap leftIcon for the chevron on hover.
class	`string`	—	Extra classes for the trigger button.

PkStepsContent

Prop	Type	Default	Description
class	`string`	—	Extra classes for the collapsing wrapper.

PkStepsItem

Prop	Type	Default	Description
class	`string`	—	Extra classes for the item.