mirror-magi-meta-agent/docs/guides/CLAUDE_COMMIT_INTEGRATION.md

AI-powered development planning and execution system with Supabase integration

# 🤖 Claude Response Integration for Git Commits

## Overview

Mirror Magi can use Claude's implementation summaries to create more meaningful git commit messages. Since Claude often ends responses with helpful summaries like "I've successfully created the dashboard component with...", these make excellent commit messages!

---

## 🚀 Quick Start

### 1. Save Claude's Response After Implementation

When Claude finishes implementing a task:

```bash
# Copy Claude's last message and save it
npm run plan:save-response task_001 "I've successfully created the user dashboard component with statistics display, recipe management, and favorites sections. The component uses React Query for data fetching and includes loading states and error handling."

# Or save from a file
npm run plan:save-response task_001 --file claude-response.txt
```

### 2. Complete Task with Auto-Commit

```bash
# The system will use Claude's summary
npm run plan:complete task_001 --commit

# Output:
🤖 Claude's summary:
   "I've successfully created the user dashboard component with statistics display..."

💬 Suggested commit message:
   feat(ui): Created the user dashboard component with statistics display (task_001)

Options:
1. Use suggested message
2. Use Claude's summary
3. Custom message
4. Skip commit
> 1

✅ Changes committed!
```

---

## 📝 How It Works

### 1. Summary Extraction

The system looks for common patterns in Claude's responses:

- "I've successfully..."
- "I've created..."
- "I've implemented..."
- "Successfully..."
- "This creates/implements..."

### 2. Smart Formatting

Claude's summary is automatically cleaned up:

```
Original: "I've successfully created the dashboard with charts"
Formatted: "feat(ui): Created the dashboard with charts (task_001)"
```

### 3. Detailed Commit Bodies

The full commit includes:

```
feat(ui): Created the dashboard with charts (task_001)

I've successfully created the dashboard component with Chart.js integration,
responsive grid layout, and real-time data updates.

Task Details:
- componentName: DashboardPage
- filePath: src/app/dashboard/page.tsx

Files changed:
- Added: src/app/dashboard/page.tsx
- Modified: src/components/index.ts
```

---

## 🎯 Best Practices

### 1. Save Response Immediately

Right after Claude implements:

```bash
# Copy the response while it's fresh
npm run plan:save-response task_001 "Claude's response..."
```

### 2. Use Interactive Mode for Review

```bash
# Enable interactive mode
npm run plan:config interactive true

# Now you can review and choose
npm run plan:complete task_001 --commit
```

### 3. Set Up Auto-Commit Workflow

```bash
# Enable auto-commit
npm run plan:config autoCommit true

# Now completing tasks auto-commits with Claude's summary
npm run plan:complete task_001
```

---

## 🔧 Configuration Options

### View Current Settings

```bash
npm run plan:config

# Output:
{
  "autoCommit": false,
  "interactive": true,
  "includeTaskId": true,
  "showGitInstructions": true
}
```

### Available Settings

| Setting | Default | Description |
|---------|---------|-------------|
| `autoCommit` | `false` | Automatically commit when completing tasks |
| `interactive` | `true` | Show commit message options |
| `includeTaskId` | `true` | Add (task_001) to commit messages |
| `showGitInstructions` | `true` | Show git tips after each task |

---

## 💡 Workflow Examples

### Example 1: Quick Implementation

```bash
# 1. Get task
npm run plan:continue

# 2. Implement with Claude
# Claude responds: "I've successfully implemented the user authentication..."

# 3. Save and commit in one go
npm run plan:save-response task_001 "I've successfully implemented the user authentication with JWT tokens, refresh token rotation, and proper error handling. The system now supports login, logout, and token refresh operations."

npm run plan:complete task_001 --commit
```

### Example 2: Batch Processing

```bash
# Complete multiple tasks, then commit each
npm run plan:save-response task_001 --file responses/task001.txt
npm run plan:save-response task_002 --file responses/task002.txt

# Commit with meaningful messages
npm run plan:complete task_001 --commit
npm run plan:complete task_002 --commit
```

### Example 3: Manual Review

```bash
# Save response
npm run plan:save-response task_001 "Claude's implementation summary"

# Review what will be committed
git diff

# Complete with custom message if needed
npm run plan:complete task_001 --commit --message "feat: Add dashboard with advanced features

Implemented comprehensive dashboard including:
- Real-time statistics
- Interactive charts
- Responsive design
- Error boundaries"
```

---

## 🎨 Commit Message Examples

### From Claude's Summaries

**Claude says:** "I've successfully created the API integration for user data fetching with proper error handling and retry logic."

**Becomes:** `feat(api): Created the API integration for user data fetching (task_001)`

---

**Claude says:** "I've implemented the dashboard migration that creates user_stats view and adds necessary indexes for performance."

**Becomes:** `feat(db): Implemented the dashboard migration that creates user_stats view (task_001)`

---

**Claude says:** "Successfully added comprehensive test coverage for the authentication flow."

**Becomes:** `test: Added comprehensive test coverage for the authentication flow (task_001)`

---

## 🛠️ Troubleshooting

### No Summary Found

If the system can't extract a summary:

```bash
# Fallback to task description
feat(ui): Create dashboard page component (task_001)
```

### Response Not Saved

```bash
# Check if response exists
ls meta-agent/state/claude-responses.json

# Try saving again
npm run plan:save-response task_001 "Response text"
```

### Custom Patterns

If Claude uses different patterns, the system still extracts the last meaningful sentence as a fallback.

---

## 🚀 Advanced: Automation Script

Create a helper script `save-and-complete.sh`:

```bash
#!/bin/bash
TASK_ID=$1
RESPONSE_FILE=$2

# Save Claude's response
npm run plan:save-response $TASK_ID --file $RESPONSE_FILE

# Complete with commit
npm run plan:complete $TASK_ID --commit

# Continue to next task
npm run plan:continue
```

Usage:
```bash
./save-and-complete.sh task_001 claude-response.txt
```

---

## 📈 Benefits

1. **Meaningful Commits**: Claude's summaries are descriptive and accurate
2. **Time Saving**: No need to write commit messages manually
3. **Consistency**: All commits follow the same format
4. **Traceability**: Task IDs link commits to plan
5. **Context**: Full implementation details in commit body

---

*With Claude's help, every commit tells the complete story of what was implemented!* 🎯