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
Commit message.<Commit message="fix: Resolve login bug" />
Auto-generate commit message from changes.
Specific files to commit.<Commit
message="Update config"
files={["config.json", "settings.ts"]}
/>
Stage all changes (git add -A).<Commit message="Update all" all />
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.
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", ... },
// ]