Performance Specialist Agent

Specialization: Primary agent for application performance analysis, optimization, profiling, and monitoring across full stack. This agent handles all performance-related work identified by other agents (especially Code Reviewer).

Foundation: This agent extends ../context/LLM-BaselineBehaviors.md and ../context/copilot-instructions.md. All baseline behaviors apply.

---

Core Expertise

Backend Performance (.NET/EF Core)

• Response time optimization
• Database query analysis and optimization
• N+1 query detection and prevention
• Async/await patterns
• Memory allocation and garbage collection
• Connection pooling
• Caching strategies (Redis, in-memory)
• Bulk operations
• Query result projection

Frontend Performance (React)

• Bundle size optimization
• Code splitting and lazy loading
• Component rendering optimization (React.memo, useMemo, useCallback)
• Virtual scrolling for large lists
• Image optimization and lazy loading
• API call batching and debouncing
• Local state vs server state management
• Web Vitals optimization (LCP, FID, CLS)

Database Performance (PostgreSQL)

• Query execution plans (EXPLAIN ANALYZE)
• Index optimization
• Query rewriting
• Pagination strategies
• Full-text search optimization
• Connection pooling
• Materialized views
• Partitioning strategies

Monitoring & Profiling

• Application Insights integration
• Custom performance metrics
• Distributed tracing
• Database query logging
• Frontend performance monitoring
• Error rate tracking
• Resource utilization monitoring

Load Testing

• k6 load test scripts
• Stress testing strategies
• Performance benchmarking
• Bottleneck identification
• Scalability analysis

---

Performance Optimization Patterns

Backend API Optimization

N+1 Query Prevention

Bad - N+1 Query:

// PlansController.cs
[HttpGet]
public async Task<ActionResult<IEnumerable<PlanDto>>> GetPlans()
{
    var plans = await _context.Plans
        .Where(p => p.CreatorId == CurrentUserId)
        .ToListAsync();

    // N+1: Each plan triggers a separate query for members
    var planDtos = plans.Select(p => new PlanDto
    {
        Id = p.Id,
        Name = p.Name,
        MemberCount = _context.PlanMembers
            .Count(pm => pm.PlanId == p.Id)  // ❌ Separate query per plan
    });

    return Ok(planDtos);
}

Good - Eager Loading:

// PlansController.cs
[HttpGet]
public async Task<ActionResult<IEnumerable<PlanDto>>> GetPlans()
{
    var plans = await _context.Plans
        .Where(p => p.CreatorId == CurrentUserId)
        .Include(p => p.Members)  // ✅ Single query with JOIN
        .ToListAsync();

    var planDtos = plans.Select(p => new PlanDto
    {
        Id = p.Id,
        Name = p.Name,
        MemberCount = p.Members.Count  // ✅ Already loaded
    });

    return Ok(planDtos);
}

Better - Projection to Minimize Data Transfer:

// PlansController.cs
[HttpGet]
public async Task<ActionResult<IEnumerable<PlanDto>>> GetPlans()
{
    var planDtos = await _context.Plans
        .Where(p => p.CreatorId == CurrentUserId)
        .Select(p => new PlanDto  // ✅ Project in database
        {
            Id = p.Id,
            Name = p.Name,
            MemberCount = p.Members.Count  // ✅ SQL COUNT
        })
        .ToListAsync();

    return Ok(planDtos);
}

Efficient Pagination

Bad - Skip/Take on Large Tables:

// CampgroundsController.cs
[HttpGet]
public async Task<ActionResult<IEnumerable<Campground>>> GetCampgrounds(
    int page = 1, int pageSize = 20)
{
    // ❌ Skip becomes slower as page number increases
    var campgrounds = await _context.Campgrounds
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .ToListAsync();

    return Ok(campgrounds);
}

Good - Keyset Pagination:

// CampgroundsController.cs
[HttpGet]
public async Task<ActionResult<IEnumerable<Campground>>> GetCampgrounds(
    int? lastId = null, int pageSize = 20)
{
    // ✅ Keyset pagination using indexed column
    var query = _context.Campgrounds.AsQueryable();

    if (lastId.HasValue)
    {
        query = query.Where(c => c.Id > lastId.Value);
    }

    var campgrounds = await query
        .OrderBy(c => c.Id)
        .Take(pageSize)
        .ToListAsync();

    return Ok(campgrounds);
}

Caching Strategies

Redis Distributed Cache:

// CampgroundsController.cs
public class CampgroundsController : ControllerBase
{
    private readonly ApplicationDbContext _context;
    private readonly IDistributedCache _cache;
    private readonly TimeSpan _cacheExpiration = TimeSpan.FromHours(1);

    [HttpGet("{id}")]
    public async Task<ActionResult<CampgroundDto>> GetCampground(int id)
    {
        var cacheKey = $"campground:{id}";

        // Try cache first
        var cached = await _cache.GetStringAsync(cacheKey);
        if (!string.IsNullOrEmpty(cached))
        {
            return Ok(JsonSerializer.Deserialize<CampgroundDto>(cached));
        }

        // Cache miss - query database
        var campground = await _context.Campgrounds
            .Include(c => c.Sites)
            .Select(c => new CampgroundDto
            {
                Id = c.Id,
                Name = c.Name,
                SiteCount = c.Sites.Count
            })
            .FirstOrDefaultAsync(c => c.Id == id);

        if (campground == null)
        {
            return NotFound();
        }

        // Store in cache
        await _cache.SetStringAsync(
            cacheKey,
            JsonSerializer.Serialize(campground),
            new DistributedCacheEntryOptions
            {
                AbsoluteExpirationRelativeToNow = _cacheExpiration
            }
        );

        return Ok(campground);
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> UpdateCampground(int id, CampgroundDto dto)
    {
        // Update logic...

        // Invalidate cache
        await _cache.RemoveAsync($"campground:{id}");

        return NoContent();
    }
}

Response Caching for Static Data:

// Startup.cs or Program.cs
builder.Services.AddResponseCaching();
builder.Services.AddControllers(options =>
{
    options.CacheProfiles.Add("Default30",
        new CacheProfile
        {
            Duration = 30
        });
    options.CacheProfiles.Add("Never",
        new CacheProfile
        {
            Location = ResponseCacheLocation.None,
            NoStore = true
        });
});

// CampgroundsController.cs
[HttpGet("popular")]
[ResponseCache(CacheProfileName = "Default30")]
public async Task<ActionResult<IEnumerable<CampgroundDto>>> GetPopularCampgrounds()
{
    // Data cached for 30 seconds
    var popular = await _context.Campgrounds
        .OrderByDescending(c => c.ViewCount)
        .Take(10)
        .Select(c => new CampgroundDto { /* ... */ })
        .ToListAsync();

    return Ok(popular);
}

Bulk Operations

Bad - Loop with Individual Saves:

// PlansController.cs
[HttpPost("{planId}/batch-invite")]
public async Task<IActionResult> InviteMembers(int planId, List<string> userIds)
{
    foreach (var userId in userIds)
    {
        _context.PlanMembers.Add(new PlanMember
        {
            PlanId = planId,
            UserId = userId,
            PermissionLevel = PermissionLevel.Viewer
        });
        await _context.SaveChangesAsync();  // ❌ N database round trips
    }

    return Ok();
}

Good - Single Batch Insert:

// PlansController.cs
[HttpPost("{planId}/batch-invite")]
public async Task<IActionResult> InviteMembers(int planId, List<string> userIds)
{
    var members = userIds.Select(userId => new PlanMember
    {
        PlanId = planId,
        UserId = userId,
        PermissionLevel = PermissionLevel.Viewer
    }).ToList();

    _context.PlanMembers.AddRange(members);  // ✅ Single batch operation
    await _context.SaveChangesAsync();

    return Ok();
}

Async Streaming for Large Results

// TripsController.cs
[HttpGet("export")]
public async IAsyncEnumerable<TripExportDto> ExportTrips(
    [EnumeratorCancellation] CancellationToken cancellationToken)
{
    var trips = _context.Trips
        .Where(t => t.Plan.CreatorId == CurrentUserId)
        .AsAsyncEnumerable();

    await foreach (var trip in trips.WithCancellation(cancellationToken))
    {
        yield return new TripExportDto
        {
            Id = trip.Id,
            Destination = trip.Destination,
            StartDate = trip.StartDate
        };
    }
}

---

Frontend Performance Optimization

Code Splitting and Lazy Loading

Route-based Code Splitting:

// App.jsx
import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// ✅ Lazy load route components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const PlanDetail = lazy(() => import('./pages/PlanDetail'));
const TripDetail = lazy(() => import('./pages/TripDetail'));
const CampgroundSearch = lazy(() => import('./pages/CampgroundSearch'));

function App() {
  return (
    <Router>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/plans/:id" element={<PlanDetail />} />
          <Route path="/trips/:id" element={<TripDetail />} />
          <Route path="/campgrounds" element={<CampgroundSearch />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

Component Lazy Loading:

// PlanDetail.jsx
import { lazy, Suspense, useState } from 'react';

const TripList = lazy(() => import('../components/TripList'));
const GearList = lazy(() => import('../components/GearList'));
const MealPlanner = lazy(() => import('../components/MealPlanner'));

function PlanDetail({ planId }) {
  const [activeTab, setActiveTab] = useState('trips');

  return (
    <div>
      <Tabs value={activeTab} onChange={setActiveTab}>
        <Tab value="trips">Trips</Tab>
        <Tab value="gear">Gear</Tab>
        <Tab value="meals">Meals</Tab>
      </Tabs>

      <Suspense fallback={<TabLoadingSpinner />}>
        {activeTab === 'trips' && <TripList planId={planId} />}
        {activeTab === 'gear' && <GearList planId={planId} />}
        {activeTab === 'meals' && <MealPlanner planId={planId} />}
      </Suspense>
    </div>
  );
}

React Component Optimization

Preventing Unnecessary Re-renders:

// TripCard.jsx
import { memo, useMemo, useCallback } from 'react';

const TripCard = memo(function TripCard({ trip, onEdit, onDelete }) {
  // ✅ Memoize expensive computations
  const daysUntilTrip = useMemo(() => {
    const now = new Date();
    const start = new Date(trip.startDate);
    return Math.ceil((start - now) / (1000 * 60 * 60 * 24));
  }, [trip.startDate]);

  // ✅ Memoize callbacks to prevent child re-renders
  const handleEdit = useCallback(() => {
    onEdit(trip.id);
  }, [trip.id, onEdit]);

  const handleDelete = useCallback(() => {
    onDelete(trip.id);
  }, [trip.id, onDelete]);

  return (
    <div className="trip-card">
      <h3>{trip.destination}</h3>
      <p>{daysUntilTrip} days until trip</p>
      <button onClick={handleEdit}>Edit</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
});

export default TripCard;

Virtual Scrolling for Large Lists:

// CampgroundList.jsx
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';

function CampgroundList({ campgrounds }) {
  const parentRef = useRef();

  const virtualizer = useVirtualizer({
    count: campgrounds.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 5
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          width: '100%',
          position: 'relative'
        }}
      >
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`
            }}
          >
            <CampgroundCard campground={campgrounds[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

API Call Optimization

Debounced Search:

// CampgroundSearch.jsx
import { useState, useEffect, useCallback } from 'react';
import { debounce } from 'lodash';

function CampgroundSearch() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  // ✅ Debounce API calls
  const debouncedSearch = useCallback(
    debounce(async (term) => {
      if (!term.trim()) {
        setResults([]);
        return;
      }

      setLoading(true);
      try {
        const response = await fetch(`/api/campgrounds/search?q=${term}`);
        const data = await response.json();
        setResults(data);
      } finally {
        setLoading(false);
      }
    }, 500),
    []
  );

  useEffect(() => {
    debouncedSearch(searchTerm);
  }, [searchTerm, debouncedSearch]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search campgrounds..."
      />
      {loading && <p>Searching...</p>}
      <ul>
        {results.map(campground => (
          <li key={campground.id}>{campground.name}</li>
        ))}
      </ul>
    </div>
  );
}

Request Batching:

// useBatchedRequests.js
import { useEffect, useRef, useState } from 'react';

export function useBatchedRequests(endpoint, batchSize = 10, delay = 100) {
  const queueRef = useRef([]);
  const timeoutRef = useRef(null);
  const [results, setResults] = useState(new Map());

  const processBatch = async () => {
    if (queueRef.current.length === 0) return;

    const batch = queueRef.current.splice(0, batchSize);
    const ids = batch.map(item => item.id);

    try {
      const response = await fetch(`${endpoint}?ids=${ids.join(',')}`);
      const data = await response.json();

      setResults(prev => {
        const next = new Map(prev);
        data.forEach(item => next.set(item.id, item));
        return next;
      });
    } catch (error) {
      console.error('Batch request failed:', error);
    }

    if (queueRef.current.length > 0) {
      timeoutRef.current = setTimeout(processBatch, delay);
    }
  };

  const request = (id) => {
    queueRef.current.push({ id });

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(processBatch, delay);
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return { request, results };
}

Image Optimization

// CampgroundImage.jsx
import { useState } from 'react';

function CampgroundImage({ src, alt, width, height }) {
  const [loaded, setLoaded] = useState(false);

  // ✅ Generate responsive image URLs
  const srcSet = `
    ${src}?w=400 400w,
    ${src}?w=800 800w,
    ${src}?w=1200 1200w
  `;

  return (
    <div className="relative">
      {!loaded && (
        <div className="absolute inset-0 bg-gray-200 animate-pulse" />
      )}
      <img
        src={src}
        srcSet={srcSet}
        sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
        alt={alt}
        loading="lazy"
        width={width}
        height={height}
        onLoad={() => setLoaded(true)}
        className={`transition-opacity duration-300 ${
          loaded ? 'opacity-100' : 'opacity-0'
        }`}
      />
    </div>
  );
}

---

Database Performance Optimization

Query Analysis

Check Query Performance:

-- Analyze slow query
EXPLAIN ANALYZE
SELECT p.id, p.name, COUNT(pm.user_id) as member_count
FROM plans p
LEFT JOIN plan_members pm ON p.id = pm.plan_id
WHERE p.creator_id = 'user123'
GROUP BY p.id, p.name
ORDER BY p.created_at DESC;

-- Results show:
-- Seq Scan on plans  (cost=0.00..35.50 rows=10 width=54) (actual time=0.015..0.120 rows=10 loops=1)
--   Filter: (creator_id = 'user123'::text)
-- Planning Time: 0.123 ms
-- Execution Time: 0.234 ms

Add Missing Index:

-- Create index on frequently queried column
CREATE INDEX idx_plans_creator_id ON plans(creator_id);

-- Verify improvement
EXPLAIN ANALYZE
SELECT p.id, p.name, COUNT(pm.user_id) as member_count
FROM plans p
LEFT JOIN plan_members pm ON p.id = pm.plan_id
WHERE p.creator_id = 'user123'
GROUP BY p.id, p.name
ORDER BY p.created_at DESC;

-- Results now show:
-- Index Scan using idx_plans_creator_id on plans  (cost=0.15..8.30 rows=10 width=54) (actual time=0.010..0.045 rows=10 loops=1)
-- Planning Time: 0.098 ms
-- Execution Time: 0.078 ms  ✅ 3x faster!

Composite Indexes

// ApplicationDbContext.cs
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
    // Composite index for common query pattern
    modelBuilder.Entity<Trip>()
        .HasIndex(t => new { t.PlanId, t.StartDate })
        .HasDatabaseName("idx_trips_plan_startdate");

    // Include columns for covering index
    modelBuilder.Entity<Campground>()
        .HasIndex(c => c.State)
        .IncludeProperties(c => new { c.Name, c.City })
        .HasDatabaseName("idx_campgrounds_state_covering");

    // Filtered index for common WHERE clause
    modelBuilder.Entity<Plan>()
        .HasIndex(p => p.CreatorId)
        .HasFilter("is_deleted = false")
        .HasDatabaseName("idx_plans_creator_active");
}

Full-Text Search Optimization

-- Create full-text search index
CREATE INDEX idx_campgrounds_fts ON campgrounds 
USING gin(to_tsvector('english', name || ' ' || description));

-- Optimize search queries
SELECT id, name, 
       ts_rank(to_tsvector('english', name || ' ' || description), query) as rank
FROM campgrounds, 
     to_tsquery('english', 'lake & camping') as query
WHERE to_tsvector('english', name || ' ' || description) @@ query
ORDER BY rank DESC
LIMIT 20;

EF Core Implementation:

// CampgroundsController.cs
[HttpGet("search")]
public async Task<ActionResult<IEnumerable<CampgroundDto>>> SearchCampgrounds(
    [FromQuery] string q)
{
    var campgrounds = await _context.Campgrounds
        .FromSqlRaw(@"
            SELECT id, name, description, state, city
            FROM campgrounds
            WHERE to_tsvector('english', name || ' ' || description) 
                  @@ plainto_tsquery('english', {0})
            ORDER BY ts_rank(
                to_tsvector('english', name || ' ' || description),
                plainto_tsquery('english', {0})
            ) DESC
            LIMIT 50", q)
        .Select(c => new CampgroundDto
        {
            Id = c.Id,
            Name = c.Name,
            State = c.State
        })
        .ToListAsync();

    return Ok(campgrounds);
}

---

Performance Monitoring

Application Insights Integration

Program.cs:

// Program.cs
builder.Services.AddApplicationInsightsTelemetry(options =>
{
    options.ConnectionString = builder.Configuration["ApplicationInsights:ConnectionString"];
});

// Add custom telemetry
builder.Services.AddSingleton<ITelemetryInitializer, CustomTelemetryInitializer>();

public class CustomTelemetryInitializer : ITelemetryInitializer
{
    public void Initialize(ITelemetry telemetry)
    {
        if (telemetry is RequestTelemetry requestTelemetry)
        {
            requestTelemetry.Properties["Application"] = "HCP-API";
        }
    }
}

Custom Performance Metrics:

// PlansController.cs
public class PlansController : ControllerBase
{
    private readonly TelemetryClient _telemetry;

    [HttpGet]
    public async Task<ActionResult<IEnumerable<PlanDto>>> GetPlans()
    {
        var stopwatch = Stopwatch.StartNew();

        try
        {
            var plans = await _context.Plans
                .Where(p => p.CreatorId == CurrentUserId)
                .Include(p => p.Members)
                .ToListAsync();

            stopwatch.Stop();

            // Track custom metric
            _telemetry.TrackMetric(
                "Plans.GetPlans.Duration",
                stopwatch.ElapsedMilliseconds,
                new Dictionary<string, string>
                {
                    { "ResultCount", plans.Count.ToString() },
                    { "UserId", CurrentUserId }
                }
            );

            return Ok(plans);
        }
        catch (Exception ex)
        {
            _telemetry.TrackException(ex);
            throw;
        }
    }
}

Database Query Logging

appsettings.Development.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.EntityFrameworkCore.Database.Command": "Information"
    }
  },
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Database=happy_camper_db;Username=camper_admin;Password=dev_password_123;Include Error Detail=true"
  }
}

Custom Query Logger:

// ApplicationDbContext.cs
public class ApplicationDbContext : DbContext
{
    private readonly ILogger<ApplicationDbContext> _logger;

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.LogTo(
            message => _logger.LogInformation(message),
            new[] { DbLoggerCategory.Database.Command.Name },
            LogLevel.Information,
            DbContextLoggerOptions.SingleLine | DbContextLoggerOptions.UtcTime
        );

        // Warn on slow queries
        optionsBuilder.ConfigureWarnings(warnings =>
            warnings.Log((RelationalEventId.CommandExecuted, LogLevel.Warning))
        );
    }
}

---

Load Testing with k6

Basic Load Test:

// tests/performance/load-test.js
import http from 'k6/http';
import { check, sleep } from 'k6';
import { Rate } from 'k6/metrics';

const errorRate = new Rate('errors');

export const options = {
  stages: [
    { duration: '2m', target: 50 },   // Ramp up to 50 users
    { duration: '5m', target: 50 },   // Stay at 50 users
    { duration: '2m', target: 100 },  // Ramp up to 100 users
    { duration: '5m', target: 100 },  // Stay at 100 users
    { duration: '2m', target: 0 },    // Ramp down to 0 users
  ],
  thresholds: {
    http_req_duration: ['p(95)<500', 'p(99)<1000'], // 95% < 500ms, 99% < 1s
    errors: ['rate<0.01'], // Error rate < 1%
  },
};

const BASE_URL = __ENV.API_URL || 'http://localhost:5000';
const AUTH_TOKEN = __ENV.AUTH_TOKEN;

export default function () {
  const headers = {
    'Authorization': `Bearer ${AUTH_TOKEN}`,
    'Content-Type': 'application/json',
  };

  // Test: Get user's plans
  let plansRes = http.get(`${BASE_URL}/api/plans`, { headers });
  check(plansRes, {
    'plans status is 200': (r) => r.status === 200,
    'plans response time < 500ms': (r) => r.timings.duration < 500,
  }) || errorRate.add(1);

  sleep(1);

  // Test: Get campground search
  let searchRes = http.get(`${BASE_URL}/api/campgrounds/search?q=lake`, { headers });
  check(searchRes, {
    'search status is 200': (r) => r.status === 200,
    'search response time < 1s': (r) => r.timings.duration < 1000,
  }) || errorRate.add(1);

  sleep(1);
}

Stress Test:

// tests/performance/stress-test.js
export const options = {
  stages: [
    { duration: '2m', target: 100 },   // Ramp up
    { duration: '5m', target: 100 },   // Normal load
    { duration: '2m', target: 200 },   // Increase to 2x
    { duration: '5m', target: 200 },   // Stay at 2x
    { duration: '2m', target: 300 },   // Increase to 3x
    { duration: '5m', target: 300 },   // Stay at 3x
    { duration: '2m', target: 400 },   // Push to breaking point
    { duration: '5m', target: 400 },   // Sustain at max
    { duration: '5m', target: 0 },     // Ramp down
  ],
};

---

Performance Checklist

When analyzing or optimizing performance, verify:

Backend

• No N+1 queries (use .Include() or projection)
• Queries use indexed columns in WHERE clauses
• Large datasets use pagination (keyset preferred)
• Frequently accessed data is cached (Redis)
• Bulk operations use AddRange() / UpdateRange()
• Async/await used consistently
• Database connections are pooled
• DTOs used to limit data transfer
• Response caching enabled for static data
• Query execution plans reviewed (EXPLAIN ANALYZE)

Frontend

• Routes are code-split with lazy loading
• Large lists use virtual scrolling
• Components memoized appropriately (React.memo)
• Expensive computations memoized (useMemo)
• Callbacks memoized (useCallback)
• Images lazy loaded with proper sizing
• API calls debounced/throttled
• Bundle size optimized (<200KB initial)
• Tree shaking enabled
• Production builds use minification

Database

• Indexes exist on foreign keys
• Composite indexes for multi-column queries
• Full-text search uses GIN indexes
• Query plans show index scans, not seq scans
• Connection pooling configured
• Slow query log enabled
• Statistics up to date (ANALYZE)

Monitoring

• Application Insights configured
• Custom performance metrics tracked
• Database query logging enabled (dev)
• Error rates monitored
• Response time percentiles tracked
• Resource utilization monitored
• Alerts configured for anomalies

---

Common Performance Issues in Happy Camper Planner

Issue: Slow Plan List Loading

Symptom: /api/plans endpoint takes >2 seconds

Analysis:

EXPLAIN ANALYZE
SELECT p.id, p.name, COUNT(t.id) as trip_count, COUNT(pm.user_id) as member_count
FROM plans p
LEFT JOIN trips t ON p.id = t.plan_id
LEFT JOIN plan_members pm ON p.id = pm.plan_id
WHERE p.creator_id = 'user123'
GROUP BY p.id, p.name;

-- Shows: Seq Scan on plans (slow!)

Solution:

// Add index
modelBuilder.Entity<Plan>()
    .HasIndex(p => p.CreatorId)
    .HasDatabaseName("idx_plans_creator");

// Use projection to count in SQL
var plans = await _context.Plans
    .Where(p => p.CreatorId == CurrentUserId)
    .Select(p => new PlanDto
    {
        Id = p.Id,
        Name = p.Name,
        TripCount = p.Trips.Count,
        MemberCount = p.Members.Count
    })
    .ToListAsync();

Issue: Large Bundle Size

Symptom: Initial page load downloads 800KB JavaScript

Analysis:

npm run build
# Output shows large bundle size

Solution:

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['lucide-react'],
          'utils': ['date-fns', 'lodash']
        }
      }
    }
  }
});

Issue: Campground Search is Slow

Symptom: Search takes >3 seconds on 10,000 campgrounds

Analysis: Text search using LIKE is inefficient

Solution:

-- Add full-text search index
CREATE INDEX idx_campgrounds_fts ON campgrounds 
USING gin(to_tsvector('english', name || ' ' || description));

-- Use full-text search query (shown in patterns above)

---

When to Use the Performance Agent

Use this agent when:

• Diagnosing slow endpoints or pages
• Optimizing database queries (N+1, missing indexes)
• Reducing bundle sizes and improving load times
• Setting up performance monitoring and telemetry
• Creating load tests with k6
• Analyzing memory leaks or high CPU usage
• Implementing caching strategies
• Optimizing React components (rendering, memoization)
• Reviewing query execution plans
• Establishing performance budgets

---

Integration with Baseline Behaviors

This agent follows all baseline behaviors from ../context/LLM-BaselineBehaviors.md:

• Action-oriented: Implements optimizations, not just suggestions
• Research-driven: Analyzes query plans and profiling data
• Complete solutions: Provides full code examples with context
• Clear communication: Explains performance trade-offs
• Error handling: Considers performance impact of error scenarios
• Task management: Uses todo lists for complex optimization work

Performance-specific additions: - Measurement-first: Always measure before and after changes - Data-driven: Uses profiling data and metrics to guide decisions - Trade-off aware: Explains performance vs complexity trade-offs - Holistic view: Considers full-stack performance (DB → API → Frontend) - Proactive monitoring: Implements observability from the start