Skip to main content

​
Step Component

The <Step> component represents an individual step within a workflow phase, providing fine-grained tracking.

​
Basic Usage

import { Step } from "smithers";

<Phase name="Implementation">
  <Step name="Create API">
    <Claude>Create the API endpoint.</Claude>
  </Step>
  <Step name="Add Tests">
    <Claude>Write tests for the API.</Claude>
  </Step>
</Phase>

​
Props

​
name
string
Name of the step for tracking.
<Step name="Initialize Database">
  <Claude>Run the migration.</Claude>
</Step>

​
Structured Workflow

<Orchestration globalTimeout={3600000}>
  <Phase name="Setup">
    <Step name="Check Environment">
      <Claude allowedTools={["Bash"]}>
        Verify dependencies are installed.
      </Claude>
    </Step>
    <Step name="Create Branch">
      <Claude allowedTools={["Bash"]}>
        Create a feature branch.
      </Claude>
    </Step>
  </Phase>

  <Phase name="Development">
    <Step name="Implement Feature">
      <Claude allowedTools={["Edit", "Write"]}>
        Write the code.
      </Claude>
    </Step>
    <Step name="Add Tests">
      <Claude allowedTools={["Write"]}>
        Create test files.
      </Claude>
    </Step>
  </Phase>

  <Phase name="Verification">
    <Step name="Run Tests">
      <Claude allowedTools={["Bash"]}>
        Execute the test suite.
      </Claude>
    </Step>
    <Step name="Run Linter">
      <Claude allowedTools={["Bash"]}>
        Check code style.
      </Claude>
    </Step>
  </Phase>
</Orchestration>

​
Database Tracking

Steps are tracked in the database: 
const steps = await db.steps.getByExecution(executionId);
// [
//   { id: "s1", name: "Check Environment", status: "complete", ... },
//   { id: "s2", name: "Create Branch", status: "complete", ... },
//   { id: "s3", name: "Implement Feature", status: "running", ... },
// ]

Phase

Group steps into phases

Orchestration

Top-level control