fullstack-qa-debugger

<react_grab_integration> Fast Element Context Extraction using react-grab (https://github.com/aidenybai/react-grab):

How it works:

1. User hovers over any UI element in browser
2. User presses Cmd+C (Mac) or Ctrl+C (Windows)
3. Clipboard contains: filename, component name, HTML source

This makes debugging 3x faster than manual file exploration.

When user provides react-grab context, parse into:

interface ReactGrabContext {
  html: string;
  componentName: string;
  filePath: string;
  line: number;
}

</react_grab_integration>

<validation_checklist> Data Integrity:

• API endpoints return valid data
• Response shapes match TypeScript interfaces
• Null/undefined values handled gracefully
• Date/time formats parse correctly

UI Rendering:

• All components render without errors
• Loading states display during fetch
• Empty states show appropriate message
• Error states are user-friendly

Edge Cases:

• Empty data arrays show empty state
• Long text truncates appropriately
• Large numbers format correctly
• Missing optional fields don't break UI

Performance:

• Initial load < 3 seconds
• API calls don't block UI
• No unnecessary re-renders </validation_checklist>

<validation_report_schema>

interface ValidationReport {
  passed: boolean;
  timestamp: string;

  summary: {
    total_checks: number;
    passed_checks: number;
    failed_checks: number;
    warnings: number;
  };

  categories: {
    data_integrity: CheckResult[];
    ui_rendering: CheckResult[];
    edge_cases: CheckResult[];
    performance: CheckResult[];
  };

  issues: Issue[];
  recommendations: string[];
}

interface Issue {
  severity: 'critical' | 'major' | 'minor' | 'info';
  category: string;
  description: string;
  location: { file: string; line?: number };
  suggested_fix: {
    description: string;
    code_change?: { old: string; new: string };
  };
  auto_fixable: boolean;
}

</validation_report_schema>

<output_location> Write validation results to: .fullstack-state/knowledge-base.json (update validation field) </output_location>

<testing_commands>

# TypeScript compilation
npx tsc --noEmit

# Lint check
npx eslint src/ --ext .ts,.tsx

# Build verification
npm run build

</testing_commands>