Examples & Use Cases

You: "Add user authentication with login and registration"

Agent: "I'll implement authentication. A few questions:
- Backend framework? (Express, NestJS, etc.)
- Auth method? (JWT, sessions, OAuth?)
- Database? (MongoDB, PostgreSQL, etc.)
- Password requirements?"

You: "Express backend, JWT tokens, MongoDB, standard password requirements"

Agent: "Creating authentication system...

Backend:
✓ Created User model (models/User.ts)
✓ Added password hashing with bcrypt
✓ Created auth routes (routes/auth.ts)
✓ Implemented JWT token generation
✓ Added auth middleware

Frontend:
✓ Created login form (components/Login.tsx)
✓ Created registration form (components/Register.tsx)
✓ Added auth context (contexts/AuthContext.tsx)
✓ Implemented protected routes
✓ Added token storage

Tests:
✓ Auth API tests (15 cases)
✓ Component tests (8 cases)

All tests passing. Try logging in!"

You: "Create an analytics dashboard showing user stats, sales, and activity"

Agent: "I'll create the dashboard. What data sources?"

You: "@src/api/analytics.ts This API provides the data"

Agent: "Creating dashboard...

Components:
✓ DashboardLayout with sidebar
✓ StatsCard component for metrics
✓ UserActivityChart (Chart.js)
✓ SalesGraph (last 30 days)
✓ RecentActivityTable

Features:
✓ Real-time data updates
✓ Loading states
✓ Error handling
✓ Responsive design
✓ Export to CSV button

Dashboard ready at /dashboard"

You: "@mode debug
     Users can't login - they get 'Invalid credentials' even with correct password"

Agent: [Debug Mode]
"Investigating login issue...

Hypothesis Generation:
1. Password comparison error (70%)
2. Database query issue (20%)
3. Token generation problem (10%)

Checking password comparison logic..."

[Reads auth controller]

Agent: "Found the issue!

Root Cause:
In UserController.login(), password comparison uses:
`user.password === inputPassword`

Problem:
- Stored password is hashed
- Input password is plaintext
- Direct comparison always fails

Fix:
Use bcrypt.compare() instead:
`await bcrypt.compare(inputPassword, user.password)`

Location: controllers/UserController.ts:45

Should I apply the fix?"

You: "Yes"

Agent: "✓ Fixed password comparison
✓ Updated tests
✓ All 23 auth tests passing

Login working correctly now!"

if (user.password === inputPassword) {
  // This never works!
}

const isValid = await bcrypt.compare(inputPassword, user.password);
if (isValid) {
  // Correct comparison
}

You: "@mode debug
     App becomes slow after running for a while. Memory usage keeps growing."

Agent: [Debug Mode]
"Analyzing memory issue...

Checking for common causes:
✓ Event listeners cleanup
✓ Interval/timeout cleanup
✓ React useEffect cleanup
✓ WebSocket connections

Found 3 potential leaks:

1. UserListComponent: setInterval never cleared
2. ChatComponent: WebSocket not closed
3. DashboardComponent: Event listeners not removed

Proposing fixes..."

[Shows fixes for each]

Agent: "Applied fixes:
✓ Added cleanup to useEffect hooks
✓ Proper WebSocket close on unmount
✓ Event listener removal

Memory leak resolved!
Tested: Memory stable after 1 hour runtime"

// Before
useEffect(() => {
  const interval = setInterval(fetchData, 5000);
  // Missing cleanup!
}, []);

// After
useEffect(() => {
  const interval = setInterval(fetchData, 5000);
  return () => clearInterval(interval); // ✓ Cleanup
}, []);

You: "This controller has too much logic. Extract it to a service layer."

@src/controllers/UserController.ts

Agent: "Refactoring to service layer...

Analyzing UserController:
- 8 methods with business logic
- Database queries in controller
- Validation mixed with logic

Creating UserService:
✓ Extracted business logic
✓ Moved database operations
✓ Added proper error handling

Updated UserController:
✓ Thin controller layer
✓ Delegates to service
✓ Handles HTTP concerns only

Structure:
controllers/UserController.ts → HTTP layer
services/UserService.ts → Business logic
models/User.ts → Data model

All 45 tests still passing!"

// Controller with everything
class UserController {
  async create(req, res) {
    // Validation
    // Business logic
    // Database operations
    // Response formatting
  }
}

// Clean separation
class UserController {
  async create(req, res) {
    const user = await userService.create(req.body);
    res.json({ data: user });
  }
}

class UserService {
  async create(userData) {
    // Business logic
    // Database operations
    return user;
  }
}

You: "This UserProfile component is 500 lines. Break it into smaller components."

@src/components/UserProfile.tsx

Agent: "Refactoring UserProfile...

Identified sections:
1. Profile header (avatar, name, stats)
2. About section (bio, location, links)
3. Activity feed
4. Settings panel

Creating components:
✓ ProfileHeader.tsx
✓ ProfileAbout.tsx
✓ ProfileActivity.tsx
✓ ProfileSettings.tsx
✓ Updated UserProfile.tsx (now 80 lines)

Each component:
✓ Single responsibility
✓ Reusable
✓ Tested independently

Refactoring complete!"

You: "Generate comprehensive tests for the shopping cart logic"

@src/services/CartService.ts

Agent: "Generating test suite for CartService...

Analyzing CartService methods:
- addItem
- removeItem
- updateQuantity
- calculateTotal
- applyDiscount
- clearCart

Creating tests:

✓ Happy path tests (12 cases)
✓ Edge cases (18 cases)
✓ Error scenarios (10 cases)
✓ Integration tests (8 cases)

Generated 48 test cases covering:
- Empty cart operations
- Invalid inputs
- Boundary conditions
- Concurrent updates
- Discount calculations
- Total accuracy

Coverage: 96%
All tests passing!"

describe('CartService', () => {
  describe('addItem', () => {
    it('should add item to empty cart')
    it('should increase quantity if item exists')
    it('should handle invalid quantity')
    it('should validate product ID')
  })

  describe('calculateTotal', () => {
    it('should calculate with no discount')
    it('should apply percentage discount')
    it('should handle multiple discounts')
    it('should round to 2 decimals')
  })

  // ... 40 more test cases
})

You: "Add tests to this old code that has zero tests"

@src/legacy/PaymentProcessor.js

Agent: "Adding tests to PaymentProcessor...

Challenges detected:
- Tightly coupled code
- External dependencies
- No injection points

Strategy:
1. Create mocks for external services
2. Add minimal refactoring for testability
3. Generate comprehensive tests

Changes:
✓ Added dependency injection
✓ Created mock payment gateway
✓ Generated 35 test cases

Tests cover:
- Successful payments
- Failed payments
- Network errors
- Invalid card data
- Refund scenarios

Coverage: 87% (previously 0%)"

You: "@mode ask
     @src/algorithms/recommendation.ts
     How does this recommendation algorithm work?"

Agent: [Ask Mode]
"This recommendation algorithm uses collaborative filtering
with matrix factorization. Let me break it down:

## High-Level Flow

1. User-Item Matrix
   - Rows: Users
   - Columns: Items
   - Values: Ratings/interactions

2. Matrix Factorization
   - Decomposes into user/item feature matrices
   - Finds latent factors

3. Similarity Calculation
   - Cosine similarity between users
   - Weighted by confidence scores

4. Recommendation Generation
   - Finds similar users
   - Aggregates their preferences
   - Ranks items by predicted score

## Key Functions

### buildUserItemMatrix()
```typescript
// Creates sparse matrix from user interactions
const matrix = users.map(user => {
  return items.map(item =>
    user.ratings[item.id] || 0
  );
});

// For target user
const similarUsers = findSimilarUsers(targetUser);
const recommendations = aggregatePreferences(similarUsers);
return rankByPredictedScore(recommendations);

---

### Example 10: Architecture Explanation

**Conversation:**

graph LR
    A[API Gateway] --> B[Auth Service]
    A --> C[User Service]
    A --> D[Order Service]
    B -.-> E[RabbitMQ]
    C -.-> E
    D -.-> E
    E -.-> F[Notification Service]
    E -.-> G[Analytics Service]

{
  "event": "order.created",
  "timestamp": "2024-03-20T10:30:00Z",
  "data": {
    "orderId": "123",
    "userId": "456",
    "total": 99.99
  }
}

---

## Database & API Work

### Example 11: Database Schema Design

**Conversation:**

erDiagram
    User ||--o{ Post : writes
    User ||--o{ Comment : writes
    Post ||--o{ Comment : has
    Post }o--o{ Tag : tagged

    User {
        uuid id PK
        string email UK
        string username UK
        string passwordHash
        timestamp createdAt
    }

    Post {
        uuid id PK
        uuid authorId FK
        string title
        string slug UK
        text content
        enum status
        timestamp publishedAt
    }

    Comment {
        uuid id PK
        uuid postId FK
        uuid authorId FK
        uuid parentId FK
        text content
    }

    Tag {
        uuid id PK
        string name UK
    }

    PostTag {
        uuid postId FK
        uuid tagId FK
    }

CREATE INDEX idx_posts_author ON posts(authorId);
CREATE INDEX idx_posts_slug ON posts(slug);
CREATE INDEX idx_posts_published ON posts(publishedAt)
  WHERE status = 'published';
CREATE INDEX idx_comments_post ON comments(postId);

---

### Example 12: API Endpoint Creation

**Conversation:**

**Example Usage:**
```bash
# List posts
GET /api/posts?limit=10&status=published&sort=-createdAt

# Create post
POST /api/posts
{
  "title": "My Post",
  "content": "...",
  "tags": ["tech", "tutorial"]
}

# Update post
PUT /api/posts/123
{
  "title": "Updated Title"
}

You: "Create a responsive navigation bar with mobile menu"

Agent: "Creating responsive navigation...

Desktop View:
✓ Horizontal nav bar
✓ Logo left, links right
✓ Dropdown for user menu
✓ Search bar

Mobile View (<768px):
✓ Hamburger menu
✓ Slide-in drawer
✓ Touch-friendly spacing
✓ Search in drawer

Features:
✓ Smooth animations
✓ Accessibility (ARIA labels)
✓ Keyboard navigation
✓ Active route highlighting

Components:
- Navbar.tsx (main component)
- MobileMenu.tsx
- NavLink.tsx
- UserMenu.tsx

Ready to use!"

<Navbar>
  <NavLogo />
  <NavLinks /> {/* Hidden on mobile */}
  <SearchBar />
  <UserMenu />
  <MobileMenuButton /> {/* Visible on mobile */}
</Navbar>

<MobileDrawer isOpen={isOpen}>
  <NavLinks vertical />
  <SearchBar />
</MobileDrawer>

You: "Create a user registration form with validation and good UX"

Agent: "Creating registration form...

Fields:
✓ Email (with email validation)
✓ Password (strength indicator)
✓ Confirm password (match validation)
✓ Username (availability check)
✓ Terms acceptance

Validation:
✓ Real-time field validation
✓ Clear error messages
✓ Success indicators
✓ Async username check

UX Features:
✓ Auto-focus first field
✓ Tab navigation
✓ Show/hide password
✓ Disabled submit until valid
✓ Loading states
✓ Success/error feedback

Accessibility:
✓ Proper labels
✓ Error announcements
✓ Focus management

Form ready!"

You: "This product list is slow with 1000 items. Optimize it."

@src/components/ProductList.tsx

Agent: "Analyzing ProductList performance...

Issues Found:
1. Renders all 1000 items (heavy DOM)
2. No memoization on item components
3. Expensive filter on every render
4. Images loaded eagerly

Optimization:
✓ Added virtualization (react-window)
  - Renders only visible items (~20)
  - 50x faster scrolling

✓ Memoized ProductItem component
  - Prevents unnecessary re-renders

✓ Memoized filter calculation
  - Computed once per data change

✓ Lazy loading images
  - Loads as user scrolls

Performance Results:
- Initial render: 2.3s → 180ms (12x faster)
- Scroll FPS: 15 → 60 (smooth)
- Memory usage: -75%

Optimized!"

{products.map(product => (
  <ProductItem key={product.id} {...product} />
))}

<VirtualList
  height={600}
  itemCount={products.length}
  itemSize={100}
>
  {({ index }) => (
    <MemoizedProductItem {...products[index]} />
  )}
</VirtualList>

You: "@mode debug
     API responses are slow (2-3 seconds per request)"

Agent: [Debug Mode]
"Analyzing API performance...

Diagnosis:
✓ Database queries: 450ms
✓ Data processing: 120ms
✓ N+1 query problem detected!

Issues:
1. Fetches users in loop (N+1)
2. No database indexes
3. Sends unnecessary data
4. No caching

Solutions Applied:
✓ JOIN instead of N+1 queries
  - 50 queries → 1 query

✓ Added indexes
  - userId, createdAt fields

✓ Selected only needed fields
  - Reduced payload 70%

✓ Added Redis caching
  - 5min cache for lists

Results:
- Response time: 2.3s → 180ms
- Database queries: 50 → 1
- Payload size: -70%

Performance optimized!"

You: "Convert this JavaScript file to TypeScript"

@src/utils/helpers.js

Agent: "Converting to TypeScript...

✓ Added type definitions
✓ Created interfaces for objects
✓ Typed all function parameters
✓ Added return type annotations
✓ Fixed type errors (3 found)
✓ Updated imports
✓ Renamed to helpers.ts

Changes:
- Added 8 interfaces
- Typed 15 functions
- Fixed potential runtime errors
- 100% type coverage

TypeScript conversion complete!"

You: "Generate API documentation for all endpoints"

@src/routes

Agent: "Generating API documentation...

Analyzing routes:
✓ Found 24 endpoints
✓ Extracted parameters
✓ Identified request/response formats
✓ Documented error codes

Created:
✓ README.md with overview
✓ OpenAPI/Swagger spec
✓ Postman collection
✓ Example requests for each endpoint

Documentation includes:
- Endpoint descriptions
- Request examples
- Response schemas
- Error handling
- Authentication requirements

Docs ready in docs/api/"