Skip to main content

Commit Component

The <Commit> component creates git commits with optional notes and metadata tracking.

Basic Usage

import { Commit } from "smithers/components/Git";

<Commit
  message="feat: Add user authentication"
  onFinished={(result) => console.log("Committed:", result.commitHash)}
/>

Props

message
string
Commit message.
<Commit message="fix: Resolve login bug" />
autoGenerate
boolean
Auto-generate commit message from changes.
<Commit autoGenerate />
files
string[]
Specific files to commit.
<Commit
  message="Update config"
  files={["config.json", "settings.ts"]}
/>
all
boolean
Stage all changes (git add -A).
<Commit message="Update all" all />
notes
Record<string, any>
Add git notes to the commit.
<Commit
  message="feat: Add feature"
  notes={{
    smithers: true,
    executionId: executionId,
    prompt: "Add user authentication",
  }}
/>

Callbacks

onFinished
(result: CommitResult) => void
Called when commit completes.
onError
(error: Error) => void
Called on error.

CommitResult Type

interface CommitResult {
  commitHash: string;
  message: string;
  filesChanged: number;
  insertions: number;
  deletions: number;
}

Workflow with Commits

function CommitWorkflow() {
  const [phase, setPhase] = createSignal("implement");

  return (
    <Ralph maxIterations={5}>
      {phase() === "implement" && (
        <Claude
          allowedTools={["Edit", "Write"]}
          onFinished={() => setPhase("commit")}
        >
          Implement the feature.
        </Claude>
      )}

      {phase() === "commit" && (
        <Commit
          message="feat: Add new feature"
          all
          notes={{
            smithers: true,
            workflow: "feature-implementation",
          }}
          onFinished={(result) => {
            console.log(`Committed ${result.commitHash}`);
            setPhase("done");
          }}
          onError={(err) => {
            console.error("Commit failed:", err);
            setPhase("implement");
          }}
        />
      )}
    </Ralph>
  );
}

Auto-Generated Messages

Let Claude generate the commit message:
<Commit
  autoGenerate
  all
  notes={{ smithers: true }}
  onFinished={(result) => {
    console.log("Auto-generated message:", result.message);
  }}
/>

Database Tracking

Commits are logged to the database:
const commits = await db.vcs.getCommits(10);
// [
//   { hash: "abc123", message: "feat: Add feature", ... },
//   { hash: "def456", message: "fix: Bug fix", ... },
// ]