Phase 7 Week 3 KICKOFF: Team Features & Dashboard¶

Date: November 13, 2025 Phase: Phase 7 - Auto-Fix PR Creation Week: Week 3 of 3 Status: Starting Now

Week 2 Summary (What We Built)¶

Delivered Components ✅¶

Week 2 Day 1: API Endpoint - Created /api/teams/[teamId]/create-fix-pr endpoint - Authentication, authorization, quota checks - Integration with FixPRQueue from Week 1 - Tests: 15 tests (10+ passing)

Week 2 Day 2: Webhook Integration - Auto-fix CTA comments on PRs - Webhook event handling (opened, synchronized, closed) - PR lifecycle tracking - Tests: 14 tests (all passing)

Week 2 Day 3: Error Handling & Edge Cases - GitHub API error classification (10+ types) - Smart retry strategies (rate limits, network errors) - Syntax validation for fixed code - Tests: 33 tests (all passing)

Week 2 Day 4: Quota Management - Plan-based quota limits (Free: 0, Team: 10, Enterprise: unlimited) - Monthly auto-reset logic - Database tracking (autoFixPrsUsed, autoFixQuotaResetAt) - Tests: 21 tests (all passing)

Week 2 Day 5: Monitoring & Logging - PostHog telemetry (5 events: requested, created, merged, failed, quota_exceeded) - Structured JSON logging for Vercel - Error context enrichment - Tests: 42 tests (19 telemetry + 23 logger, all passing)

Total Week 2 Deliverables¶

Code Written: ~1,500 lines (implementation + tests) Tests Created: 110+ tests (all passing) Components: 5 major modules (API, webhook, error handler, quota manager, telemetry) Status: ✅ Production-ready API infrastructure

Week 3 Overview¶

Goal¶

Build the Team Dashboard UI that enables users to: 1. View auto-fix PR history 2. Trigger auto-fix PR creation (one-click) 3. Monitor quota usage 4. Configure auto-fix settings

Why This Matters: Week 2 delivered API-only features. Week 3 makes them user-testable with visual interfaces.

Week 3 Daily Plan¶

Day 1: Team Dashboard - Auto-Fix PRs Section¶

Objective: Create "Auto-Fix PRs" section in team dashboard with recent fix PR history

Components to Build: 1. src/components/dashboard/AutoFixPRsSection.tsx - Main container 2. src/components/dashboard/FixPRTable.tsx - Table of recent fix PRs 3. src/components/dashboard/CreateFixPRButton.tsx - CTA button 4. src/app/api/teams/[teamId]/fix-prs/route.ts - API to fetch fix PR history

Features: - Display recent fix PRs (last 10) - Show status (pending, creating, completed, failed, merged) - Show files fixed, vulnerabilities fixed - Link to GitHub PR - Loading/error states - Responsive design

Estimated Time: 6-8 hours Tests: 8+ tests (component rendering, API calls, states)

Day 2: Create Fix PR Flow¶

Objective: Build UI for triggering fix PR creation from dashboard

Components to Build: 1. src/components/dashboard/CreateFixPRModal.tsx - Modal dialog 2. src/components/dashboard/PRUrlInput.tsx - Input field with validation 3. src/components/dashboard/QuotaIndicator.tsx - Shows X/10 used 4. Update CreateFixPRButton.tsx - Open modal

Features: - Modal with PR URL input - GitHub PR URL validation (regex) - Real-time quota check - Loading state during creation - Success/error messages - Redirect to GitHub PR after creation

Estimated Time: 4-6 hours Tests: 10+ tests (validation, quota checks, error states)

Day 3: Quota Display & Analytics¶

Objective: Show quota usage and basic analytics

Components to Build: 1. src/components/dashboard/QuotaWidget.tsx - Quota usage card 2. src/components/dashboard/FixPRStats.tsx - Basic statistics 3. src/app/api/teams/[teamId]/quota/route.ts - Quota API endpoint

Features: - Quota card (X/10 used, resets on [date]) - Plan upgrade CTA if at limit (Free → Team) - Basic stats: - Total fix PRs created - Success rate (% merged) - Total vulnerabilities fixed - Visual progress bar for quota

Estimated Time: 4-6 hours Tests: 6+ tests (quota calculation, plan limits)

Day 4: Settings & Preferences¶

Objective: Allow teams to configure auto-fix behavior

Components to Build: 1. src/components/dashboard/AutoFixSettings.tsx - Settings panel 2. src/app/api/teams/[teamId]/settings/route.ts - Settings API

Settings Options: - Auto-fix Mode: - Manual only (default): Show CTA, wait for user click - Auto-create for Critical/High: Automatically create fix PR for severe issues - Auto-create for all fixable: Create fix PR for any fixable issue - Notification Preferences: - Email on fix PR created - Email on fix PR merged - Email on fix PR failed - Branch Naming: - Default: codeslick/fix-[pr-name]-[id] - Custom prefix

Estimated Time: 6-8 hours Tests: 8+ tests (settings persistence, validation)

Day 5: Polish & Documentation¶

Objective: Finish UI polish, create user documentation, prepare for testing

Tasks: 1. UI Polish (2-3 hours): - Empty states (no fix PRs yet) - Loading skeletons - Error boundaries - Mobile responsiveness - Accessibility (ARIA labels)

User Documentation (2-3 hours):
Create /help/auto-fix-prs page
How to trigger auto-fix
How quotas work
Troubleshooting guide
Video walkthrough (Loom, 2-3 min)
Update Landing Page (1-2 hours):
Add "Auto-Fix PRs" to features section
Update pricing page (clarify quota limits)
Screenshots of dashboard
User Testing Guide (1-2 hours):
Update PHASE_7_USER_TESTING_GUIDE.md
Add Week 3 UI testing scenarios
Screenshot expectations

Estimated Time: 6-8 hours Tests: 5+ tests (empty states, error boundaries)

Week 3 Deliverables¶

By end of Week 3, we will have:

✅ Team Dashboard UI (/teams/[teamId])
Auto-Fix PRs section
Recent fix PR history
Create Fix PR button
✅ Create Fix PR Flow
Modal dialog with PR URL input
Real-time validation
Quota indicator
✅ Quota Display
Usage widget (X/10 used)
Stats dashboard
Upgrade CTAs
✅ Settings Panel
Auto-fix mode configuration
Notification preferences
Custom branch naming
✅ Documentation
Help center page
Video walkthrough
User testing guide

Total New Tests: 37+ tests Total Phase 7 Tests: 242+ tests (Week 1: 95, Week 2: 110, Week 3: 37+)

Prerequisites Verification¶

✅ Week 1 Complete (Foundation)¶

✅ Week 2 Complete (API & Automation)¶

API endpoint (/api/teams/[teamId]/create-fix-pr)
Webhook integration (auto-fix CTA comments)
Error handling (10+ error types)
Quota management (plan-based limits)
Telemetry & logging (PostHog + structured logs)
110+ tests passing

✅ Existing Infrastructure¶

Team dashboard exists (/teams/[teamId])
NextAuth authentication working
Team member authorization
Stripe billing integration
GitHub App integration

⚠️ Missing (Week 3 Will Build)¶

Success Criteria¶

Functional Requirements¶

User can view recent fix PRs in dashboard
User can trigger fix PR creation with one click
User sees quota usage (X/10 used)
User can configure auto-fix settings
All UI components are responsive (mobile/tablet)
Loading/error states work correctly

Technical Requirements¶

37+ new tests passing (total 242+ for Phase 7)
No breaking changes to existing dashboard
API endpoints properly secured (auth + authorization)
Database queries optimized (indexes on foreign keys)
Accessibility standards met (WCAG 2.1 AA)

User Experience Requirements¶

User can complete workflow without documentation
Error messages are clear and actionable
Loading states prevent user confusion
Empty states guide user to first action
Success states provide next steps

Technical Architecture¶

Database Schema (Existing)¶

-- From Week 1
CREATE TABLE fix_prs (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  team_id UUID NOT NULL REFERENCES teams(id),

  -- Source PR
  source_owner VARCHAR(255),
  source_repo VARCHAR(255),
  source_pr_number INTEGER,
  source_branch VARCHAR(255),

  -- Fix PR
  fix_pr_number INTEGER,
  fix_branch VARCHAR(255),
  fix_pr_url VARCHAR(500),

  -- Results
  files_fixed INTEGER,
  vulnerabilities_fixed INTEGER,
  vulnerabilities_skipped INTEGER,

  -- Status
  status VARCHAR(20), -- pending, creating, completed, failed, merged
  created_at TIMESTAMP DEFAULT NOW(),
  completed_at TIMESTAMP,

  -- Metadata
  commit_count INTEGER,
  error_message TEXT
);

-- From Week 2 Day 4
ALTER TABLE teams ADD COLUMN auto_fix_prs_used INTEGER DEFAULT 0;
ALTER TABLE teams ADD COLUMN auto_fix_quota_reset_at TIMESTAMP DEFAULT NOW();

-- Week 3 Addition (Day 4)
ALTER TABLE teams ADD COLUMN auto_fix_mode VARCHAR(20) DEFAULT 'manual';
ALTER TABLE teams ADD COLUMN auto_fix_notifications JSONB DEFAULT '{"created": true, "merged": true, "failed": true}';
ALTER TABLE teams ADD COLUMN auto_fix_branch_prefix VARCHAR(50) DEFAULT 'codeslick';

API Endpoints¶

Existing (Week 2): - POST /api/teams/[teamId]/create-fix-pr - Trigger fix PR creation

New (Week 3): - GET /api/teams/[teamId]/fix-prs - Fetch recent fix PRs - GET /api/teams/[teamId]/quota - Get quota usage - GET /api/teams/[teamId]/settings - Get auto-fix settings - PATCH /api/teams/[teamId]/settings - Update auto-fix settings

Component Structure¶

src/components/dashboard/
├── AutoFixPRsSection.tsx         # Main container (Day 1)
├── FixPRTable.tsx                # Table of fix PRs (Day 1)
├── CreateFixPRButton.tsx         # CTA button (Day 1)
├── CreateFixPRModal.tsx          # Modal dialog (Day 2)
├── PRUrlInput.tsx                # Input with validation (Day 2)
├── QuotaIndicator.tsx            # X/10 used (Day 2)
├── QuotaWidget.tsx               # Quota card (Day 3)
├── FixPRStats.tsx                # Statistics (Day 3)
└── AutoFixSettings.tsx           # Settings panel (Day 4)

Known Limitations¶

What We're NOT Building (Out of Scope)¶

GitHub PR Browsing: User must copy/paste PR URL (no GitHub repo browser)
Selective Fixing: Can't choose which vulnerabilities to fix (all or nothing)
Custom Fix Logic: Can't customize how fixes are applied
Advanced Analytics: No charts/graphs (just basic stats)
Team Collaboration: No commenting/reviewing fixes in dashboard
Webhook UI: Can't view webhook logs in dashboard

Why: These are Phase 7.5 features (v2). Week 3 focuses on MVP usability.

Risk Assessment¶

Risk 1: UI Complexity (MEDIUM)¶

Risk: Dashboard becomes cluttered, users confused

Mitigation: - Single-page design (no complex navigation) - Clear visual hierarchy (primary CTA prominent) - Progressive disclosure (settings in separate panel) - User testing before launch

Risk 2: API Performance (LOW)¶

Risk: Fetching fix PR history is slow (joins across tables)

Mitigation: - Add database indexes (team_id, created_at) - Limit results to last 10 fix PRs - Cache quota data (1-minute TTL) - Lazy load settings panel

Risk 3: User Confusion About Quotas (MEDIUM)¶

Risk: Users don't understand monthly reset, get frustrated when blocked

Mitigation: - Clear messaging ("Resets on Dec 1, 2025") - Upgrade CTA when quota reached - Email notification at 80% usage - FAQ section in help docs

Next Steps (Day 1)¶

Immediate Tasks¶

✅ Create Week 3 kickoff document (this file)
⏳ Start Day 1: Team Dashboard UI
⏳ Create AutoFixPRsSection.tsx
⏳ Create FixPRTable.tsx
⏳ Create CreateFixPRButton.tsx
⏳ Create /api/teams/[teamId]/fix-prs endpoint
⏳ Write 8+ tests for Day 1 components
⏳ Update version.json
⏳ Create PHASE_7_WEEK_3_DAY_1_COMPLETE.md

Timeline¶

Week 3 Start: November 13, 2025 (Today) Week 3 End: November 18, 2025 (Expected) Phase 7 Complete: November 18, 2025 (Expected)

Total Phase 7 Timeline: 3 weeks (Oct 28 - Nov 18)

Success Metrics (Post-Launch)¶

User Adoption¶

Target: 30% of teams try auto-fix PRs within first month
Measure: % of teams that create at least 1 fix PR

User Satisfaction¶

Target: 80% merge rate (high approval = feature works well)
Measure: % of fix PRs that get merged to original PR

Business Impact¶

Target: 20% conversion (Free → Team) attributed to auto-fix
Measure: Survey question "Did auto-fix influence your upgrade decision?"

Technical Performance¶

Target: <2s API response time (create-fix-pr endpoint)
Measure: Vercel Analytics p95 latency

Status: ✅ Ready to Start Day 1 Next: Build Team Dashboard - Auto-Fix PRs Section

Created: November 13, 2025, 15:45 Madrid Time Author: Claude (Phase 7 Week 3)