Agentic Workflows

You: Write a function to validate emails
AI: Here's the code [paste]
You: [Copy, paste, fix issues, test]

You: Add email validation to the signup form

Claude Code:
1. [Reads current signup form]
2. [Analyzes validation patterns in codebase]
3. [Creates validation function]
4. [Integrates into form]
5. [Adds error display]
6. [Runs tests]
7. [Fixes any issues]

Done. Email validation is now active with tests passing.

┌─────────────────────────────────────────────┐
│               UNDERSTAND                     │
│  Read files, analyze requirements            │
└──────────────────┬──────────────────────────┘
                   ▼
┌─────────────────────────────────────────────┐
│                  PLAN                        │
│  Break task into steps, identify files       │
└──────────────────┬──────────────────────────┘
                   ▼
┌─────────────────────────────────────────────┐
│                EXECUTE                       │
│  Make changes, run commands                  │
└──────────────────┬──────────────────────────┘
                   ▼
┌─────────────────────────────────────────────┐
│                VERIFY                        │
│  Check results, run tests                    │
└──────────────────┬──────────────────────────┘
                   ▼
           Success? ──No──▶ [Back to Execute]
                │
               Yes
                ▼
┌─────────────────────────────────────────────┐
│               COMPLETE                       │
│  Report results, suggest next steps          │
└─────────────────────────────────────────────┘

You: Add a favorites feature where users can save products

Claude Code: I'll implement a favorites feature. Let me first understand the current structure...

[Reads database schema, user model, product components]

Here's my plan:
1. Add favorites table to database
2. Create API routes (add/remove/list favorites)
3. Add FavoritesButton component
4. Create Favorites page
5. Add to user navigation

Proceed? [Y/n]

[After approval]

Step 1: Database migration
[Creates migration, runs it]
✓ Favorites table created

Step 2: API routes
[Creates /api/favorites route]
✓ API routes created

Step 3: FavoritesButton component
[Creates component, integrates into ProductCard]
✓ Button component created

Step 4: Favorites page
[Creates /favorites page with product grid]
✓ Page created

Step 5: Navigation update
[Adds favorites link to user menu]
✓ Navigation updated

Running tests...
✓ 12 tests passed

The favorites feature is complete. Users can now:
- Click the heart icon on any product
- View all favorites at /favorites
- Remove favorites from the list

Would you like me to add any enhancements?

You: Users report checkout is failing intermittently

Claude Code: I'll investigate the checkout issues.

[Reads checkout flow, API routes, error logs]

I found the issue. Here's what's happening:

1. The Stripe API call in /api/checkout/route.ts doesn't retry on network errors
2. When Stripe is slow, the request times out
3. The frontend doesn't show a clear error

I'll fix all three issues:

[Adds retry logic with exponential backoff]
[Increases timeout limit]
[Adds proper error handling in frontend]

Testing the fixes...
[Runs checkout flow tests]
✓ All checkout tests pass

Additional improvements made:
- Added logging for payment failures
- Created alert for repeated failures

The checkout should be stable now. Monitor /api/checkout logs for any issues.

You: Split UserProfile into smaller components - it's 500 lines

Claude Code: I'll refactor UserProfile into smaller, focused components.

[Reads UserProfile.tsx, analyzes sections]

Current structure has:
- Avatar upload (80 lines)
- Profile form (120 lines)
- Password change (100 lines)
- Notification settings (90 lines)
- Danger zone (60 lines)
- Supporting logic (50 lines)

Plan:
1. Extract AvatarUpload component
2. Extract ProfileForm component
3. Extract PasswordChange component
4. Extract NotificationSettings component
5. Extract DangerZone component
6. Create shared hooks for common logic
7. Update UserProfile to compose these

Proceed? [Y/n]

[After approval - creates 6 new files, updates imports]

Refactoring complete:
- UserProfile.tsx: 500 → 45 lines
- Created 5 focused components
- Created 2 shared hooks
- All existing tests still pass
- Added tests for new components

The code is now much more maintainable.

❌ "Make this better"
✅ "Optimize the product listing for performance - focus on:
   - Reducing unnecessary re-renders
   - Adding pagination
   - Implementing virtual scrolling for large lists"

✅ "Something is causing memory leaks in the dashboard.
   Find and fix the issue."

✅ "Add search to the products page. It should:
   - Search title and description
   - Update URL with query params
   - Show loading state
   - Handle no results
   - Debounce input
   The feature is complete when all product tests pass."

You: Create a data table component

Claude Code: [Creates initial component]

You: Add sorting to it

Claude Code: [Adds sorting]

You: Make the columns configurable

Claude Code: [Adds column configuration]

You: Add export to CSV

Claude Code: [Adds export functionality]

Claude Code: This will take several steps. I'll keep you updated.

[Step 1/5] Setting up database... ✓
[Step 2/5] Creating API routes... ✓
[Step 3/5] Building components... working...

Claude Code: I've completed the API routes. Before I create the components, would you like to review the API design?

You: Show me the API routes

Claude Code: [Shows created routes]

You: Looks good, continue

Claude Code: [Continues with components]

Claude Code: Creating the notification system...

You: Actually, use toast notifications instead of a dropdown

Claude Code: Understood. I'll switch to toast notifications.
[Adjusts approach, continues]

Claude Code: Running tests...

3 tests failed:
- testCheckoutFlow: Assertion failed
- testPaymentProcessing: Timeout
- testOrderCreation: Missing field

Let me analyze and fix these...

[Reads test output]
[Identifies issues]
[Makes fixes]

Running tests again...
All 47 tests passed. ✓

Claude Code: I'm trying to connect to the Stripe API, but the test key in .env seems invalid.

Could you:
1. Verify the STRIPE_SECRET_KEY in .env is correct
2. Or provide a valid test key

I'll wait for confirmation before continuing.

"Add user profiles" ← Good starting point
→ Claude Code asks clarifying questions
→ You refine requirements
→ Claude Code implements

Claude Code: Here's the database schema I'll use:
[Shows schema]

You: Add an index on email for faster lookups

Claude Code: Good catch. Adding index.

git status  # Check current state
claude      # Start working
# ... Claude Code makes changes ...
git diff    # Review all changes
git commit  # If satisfied

❌ [Claude Code working...]
   You: Actually nevermind
   # Leaves project in inconsistent state

✅ [Claude Code working...]
   You: [Wait for checkpoint or completion]
   You: Let's revert that and try differently

Session 1: "Create the data model for subscriptions"
Session 2: "Add API routes for subscription management"
Session 3: "Build the subscription UI"
Session 4: "Integrate with Stripe billing"

You: Review my last 3 commits and suggest improvements

Claude Code: [Reads git log, diffs]
I found several issues:
1. Missing null check in commit abc123
2. Hardcoded value in commit def456
...
Would you like me to create a fix commit?

You: The CI is failing on the main branch

Claude Code: [Reads CI logs]
The failure is in the TypeScript build. Let me fix it.
[Makes fixes]
Push these changes? [Y/n]

You: The users table needs a new column for subscription tier

Claude Code: I'll create a migration:
[Creates migration file]
[Shows migration SQL]
Run this migration? [Y/n]