chore: add CODEBOT command for automated code quality analysis

[rvelaz]

Description

Adds CODEBOT, an automated code quality enforcement command that analyzes branch changes against MetaMask Mobile guidelines before PR creation.

What is CODEBOT?

CODEBOT analyzes only the changes in your current branch compared to main, providing:

1. Branch diff analysis - Detects and categorizes all changed files
2. Automated compliance checks - Validates against design system, TypeScript, controller, and testing standards
3. Risk assessment - Categorizes files by complexity and risk level
4. Actionable feedback - Reports violations with severity levels and specific fix suggestions
5. PR readiness scoring - Provides X/10 score with checklist

Features

• ✅ Design System Compliance: Detects StyleSheet.create(), raw React Native components, missing useTailwind()
• ✅ TypeScript Quality: Checks for any types, proper exports, TSDoc
• ✅ Controller Standards: Validates BaseController patterns, messenger usage, selectors
• ✅ Testing Coverage: Verifies tests exist, pass, and follow guidelines
• ✅ Code Quality: Runs linters, checks for console.log, validates error handling
• ✅ Smart Categorization: Groups files by risk level (High/Medium/Low)

Usage

In Cursor Chat

@codebot
@codebot analyze my changes
@codebot check PR readiness
@codebot am I ready for PR?## Output Example

CODEBOT generates comprehensive reports with:

• 📊 Change summary (files, lines, commits, complexity, risk)
• 📁 Files categorized by risk level
• ✅ Compliance status (pass/fail/warning for each standard)
• 🎯 Strengths identified in your changes
• ⚠️ Issues found (Blocking/Warnings/Suggestions)
• 📝 PR readiness score and checklist
• 🚀 Next steps with actionable items
• 📚 Quick commands for fixes

Benefits

1. Catch issues early - Before creating PR, not during code review
2. Proactive quality - Automated checks against all project standards
3. Faster reviews - PRs arrive with fewer issues
4. Learning tool - Explains why issues matter and how to fix them
5. Consistent standards - Everyone uses the same quality checks

Example

Analysis of #22493

🔍 Branch Analysis Report

Note: All violations include references to the specific rule violated with exact quotes from project guidelines.

📊 Change Summary

• Branch: predict/optimistic-positions
• Base: main
• Files changed: 12 modified
• Lines: +2,301 / -111
• Commits ahead: 12
• Complexity: High
• Risk level: Medium

---

📁 Files Changed

🔴 High Risk (1 file)

• app/components/UI/Predict/controllers/PredictController.ts (+3/-1 lines)

🟡 Medium Risk (5 files)

• app/components/UI/Predict/providers/polymarket/PolymarketProvider.ts (+453/-1 lines)
• app/components/UI/Predict/components/PredictPosition/PredictPosition.tsx (+29/-1 lines)
• app/components/UI/Predict/components/PredictPositionDetail/PredictPositionDetail.tsx (+27/-1 lines)
• app/components/UI/Predict/hooks/usePredictPrices.tsx (+1/-0 lines)
• app/components/UI/Predict/views/PredictTransactionsView/PredictTransactionsView.tsx (+13/-1 lines)

🟢 Low Risk (6 files)

• app/components/UI/Predict/components/PredictPosition/PredictPosition.styles.ts (+3/-0 lines)
• app/components/UI/Predict/providers/polymarket/PolymarketProvider.test.ts (+1830/-111 lines)
• app/components/UI/Predict/components/PredictPosition/PredictPosition.test.tsx (+29/-0 lines)
• app/components/UI/Predict/components/PredictPositionDetail/PredictPositionDetail.test.tsx (+22/-0 lines)
• app/components/UI/Predict/providers/types.ts (+1/-0 lines)
• app/components/UI/Predict/types/index.ts (+1/-0 lines)

---

✅ Compliance Status

Design System (UI Changes)

Check	Status	Details
Uses design system components	⚠️ PARTIAL	PredictPositionDetail ✅ / PredictPosition ❌
Uses useTailwind() hook	✅ PASS	PredictPositionDetail & PredictTransactionsView
No StyleSheet.create()	❌ FAIL	PredictPosition.styles.ts uses StyleSheet
Uses design tokens	✅ PASS	Using bg-default, text-alternative, etc.

Issues Found:

• ❌ PredictPosition.tsx uses raw View, TouchableOpacity, Image from react-native instead of design system components
  • Rule: .cursor/rules/ui-development-guidelines.mdc § Component Hierarchy
• ❌ PredictPosition.styles.ts uses StyleSheet.create() pattern
  • Rule: .cursor/rules/ui-development-guidelines.mdc § Styling Rules

TypeScript Standards

Check	Status	Details
No 'any' types	✅ PASS	All types properly defined
Proper type exports	✅ PASS	Types exported correctly
TSDoc for public APIs	✅ PASS	Controller methods documented
Type checks pass	⚠️ UNKNOWN	Cannot verify (node_modules issue)

Controller Standards

Check	Status	Details
Extends BaseController	✅ PASS	PredictController extends BaseController
Has default state function	✅ PASS	getDefaultPredictControllerState exists
Uses messenger pattern	✅ PASS	Messenger properly configured
Has state metadata	✅ PASS	State metadata defined
Uses selectors (not getters)	✅ PASS	No getter methods found

Testing

Check	Status	Details
Unit tests present	✅ PASS	Tests added for optimistic updates
Tests pass	⚠️ UNKNOWN	Cannot verify (node_modules issue)
Coverage threshold met	⚠️ UNKNOWN	Cannot verify
No skipped tests	✅ PASS	No .skip or .only found

Test Quality:

• ✅ Tests follow AAA pattern (.cursor/rules/unit-testing-guidelines.mdc)
• ✅ No "should" in test names (.cursor/rules/unit-testing-guidelines.mdc)
• ✅ Tests are well-structured
• ✅ Tests cover optimistic update scenarios
• ✅ Proper mocking used (.cursor/rules/unit-testing-guidelines.mdc)

Documentation

Check	Status	Details
TSDoc added/updated	✅ PASS	Methods documented
README updated	✅ N/A	No README changes needed
Complex logic commented	✅ PASS	Optimistic update logic explained
Manual test steps clear	⚠️ PENDING	Need to define for PR

Code Quality

Check	Status	Details
Lint checks pass	✅ PASS	No linter errors found
No console.log statements	✅ PASS	Uses DevLogger/Logger
No unresolved TODOs	✅ PASS	One TODO found (expected)
Proper error handling	✅ PASS	Try-catch blocks present

---

🎯 Strengths

1. Comprehensive Optimistic Updates Implementation

   • Well-structured optimistic position tracking system
   • Handles CREATE, UPDATE, REMOVE operations
   • Timeout-based cleanup (1 minute)
   • Size-based confirmation of API updates

2. Excellent Test Coverage

   • Tests added for optimistic behavior in PredictPosition
   • Tests added for optimistic behavior in PredictPositionDetail
   • Tests follow MetaMask unit testing guidelines
   • No "should" in test names ✅

3. Good Controller Practices

   • Follows BaseController pattern correctly (MetaMask Core Guidelines)
   • State metadata properly defined
   • Messenger pattern used correctly
   • Proper error context for Sentry

4. Strong Type Safety

   • No any types used
   • Proper TypeScript interfaces
   • optimistic field added to PredictPosition type

5. Proper Logging

   • Uses DevLogger for development
   • Uses Logger.error for Sentry
   • Good error context provided

---

⚠️ Issues Found

🔴 Blocking (Must Fix)

1. Design System Violations (PredictPosition.tsx)

• Rule Violated: .cursor/rules/ui-development-guidelines.mdc - Component Hierarchy (STRICT ORDER)
• Problem: Uses raw React Native components (View, TouchableOpacity, Image) instead of design system
• Location: PredictPosition.tsx:2, 48, 51, 75
• Rule Quote:

  "1. FIRST: Use @metamask/design-system-react-native components
  2. SECOND: Use app/component-library components only if design system lacks the component
  3. LAST RESORT: Custom components with StyleSheet (avoid unless absolutely necessary)"

• Fix:

  // ❌ CURRENT
  import { Image, TouchableOpacity, View } from 'react-native';
  <TouchableOpacity style={styles.positionContainer} ...>
    <View style={styles.positionImageContainer}>
      <Image source={{ uri: icon }} style={styles.positionImage} />
    </View>
  </TouchableOpacity>
  
  // ✅ SHOULD BE
  import { Box } from '@metamask/design-system-react-native';
  import { ButtonBase } from '@metamask/design-system-react-native';
  <ButtonBase onPress={...} twClassName="flex-row items-start py-2 gap-4 w-full">
    <Box twClassName="pt-1">
      <Image source={{ uri: icon }} style={tw.style('w-10 h-10 rounded-full')} />
    </Box>
  </ButtonBase>

• Priority: HIGH
• Files: PredictPosition.tsx, PredictPosition.styles.ts

2. StyleSheet.create() Usage (PredictPosition.styles.ts)

• Rule Violated: .cursor/rules/ui-development-guidelines.mdc - Styling Rules (ENFORCE STRICTLY)
• Problem: Uses StyleSheet.create() pattern which violates design system guidelines
• Location: PredictPosition.styles.ts:4-61
• Rule Quote:

  "❌ NEVER SUGGEST:

  • StyleSheet.create() (use Tailwind classes)"

• Fix: Convert all styles to Tailwind classes

  // ❌ CURRENT
  const styleSheet = () => StyleSheet.create({
    positionContainer: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      paddingVertical: 8,
      gap: 16,
      width: '100%',
    },
    // ...
  });
  
  // ✅ SHOULD BE
  // Use twClassName prop directly in components:
  twClassName="flex-row items-start py-2 gap-4 w-full"

• Priority: HIGH

---

🟡 Warnings (Should Fix)

1. Cannot Verify Runtime Quality

• Problem: Node modules issue prevents running linter, type checker, and tests
• Fix: Run quality checks manually before PR:

  yarn lint:eslint app/components/UI/Predict/**/*.{ts,tsx}
  yarn tsc --noEmit
  yarn jest --findRelatedTests app/components/UI/Predict/

• Priority: MEDIUM

2. Large File Addition (PolymarketProvider.test.ts)

• Problem: +1830 lines in test file - very large addition
• Impact: Test file now quite large, may need splitting
• Suggestion: Consider splitting tests by functionality area
• Priority: LOW

---

💡 Suggestions (Nice to Have)

1. Consider Skeleton Loader Component

• Current: Hardcoded skeleton widths in components
• Better: Create reusable <PositionSkeleton /> component
• Priority: LOW

2. Add JSDoc to Optimistic Update Methods

• Current: Methods are well-named but lack documentation
• Better: Add JSDoc comments explaining the optimistic update flow
• Example:

  /**
   * Creates or updates an optimistic position after a successful BUY order.
   * The optimistic position is shown immediately while waiting for API confirmation.
   * 
   * @param params - Parameters including market details and amounts
   * @returns Promise that resolves when optimistic position is stored
   */
  private async createOrUpdateOptimisticPosition(...) { ... }

• Priority: LOW

---

📝 PR Readiness

Readiness Score: 6/10

Status: ⚠️ Ready with changes

Checklist

• All blocking issues resolved (Design System violations)
• Tests added and cover new functionality
• ⚠️ Lint and type checks pass (cannot verify)
• Documentation complete
• Changes are focused (optimistic updates feature)
• Manual testing steps identified
• Screenshots ready (UI changes require screenshots)

---

Suggested PR Title

feat(predict): implement optimistic position updates for instant UI feedback

Suggested PR Description Template

## Description
Implements optimistic position updates for Predict positions, providing instant UI feedback while waiting for API confirmation.

## Changes
- Added optimistic update tracking system to PolymarketProvider
- Added `optimistic` field to PredictPosition type
- Updated PredictPosition and PredictPositionDetail to show skeleton loaders for optimistic positions
- Added comprehensive tests for optimistic update behavior

## How it works
1. When user places a BUY order, create optimistic position immediately
2. Show skeleton loaders for currentValue and percentPnl while optimistic
3. Poll API for actual position updates
4. Replace optimistic position with real data once API confirms
5. Automatically clean up stale optimistic updates after 1 minute timeout

## Testing
- [x] Unit tests added for optimistic UI behavior
- [ ] Manual testing: Place buy order and verify instant UI update
- [ ] Manual testing: Verify skeleton loaders disappear after API confirms
- [ ] Manual testing: Verify optimistic updates are removed after timeout

## Screenshots
<!-- Add screenshots showing:
1. Optimistic position with skeleton loaders
2. Position after API confirmation
-->

## Related Issues
<!-- Add issue numbers if applicable -->

---

🚀 Next Steps

Required Actions (Before PR)

1. Fix Design System Violations (BLOCKING)

   • Convert PredictPosition.tsx to use design system components
   • Remove PredictPosition.styles.ts or convert to Tailwind
   • Use Box instead of View
   • Use ButtonBase instead of TouchableOpacity
   • Apply Tailwind classes via twClassName prop

2. Verify Quality Checks (RECOMMENDED)

   • Run lint: yarn lint:eslint app/components/UI/Predict/**/*.{ts,tsx}
   • Run type check: yarn tsc --noEmit
   • Run tests: yarn jest --findRelatedTests app/components/UI/Predict/
   • Verify all pass before creating PR

3. Add Manual Testing Steps (RECOMMENDED)

   • Document how to test optimistic updates manually
   • Include expected behavior
   • Add screenshots showing before/after

4. Create PR (When ready)

   • Use suggested PR title and description
   • Request review from team
   • Address any additional feedback

---

📚 References & Rules Applied

Workspace Rules (Enforced)

• UI Development: .cursor/rules/ui-development-guidelines.mdc
  • Component Hierarchy (STRICT ORDER)
  • Styling Rules (ENFORCE STRICTLY)
  • Required Imports for React Native
• Unit Testing: .cursor/rules/unit-testing-guidelines.mdc
  • Test Naming Rules
  • Test Structure and Organization (MANDATORY)
  • Mocking Rules (CRITICAL)
  • Test Isolation and Focus (MANDATORY)
• PR Creation: .cursor/rules/pr-creation-guidelines.mdc

Project Guidelines

• Coding Guidelines: .github/guidelines/CODING_GUIDELINES.md
• Controller Guidelines: MetaMask Core
• TypeScript Guidelines: MetaMask TypeScript Standards

---

[github-actions]

CLA Signature Action:

Thank you for your submission, we really appreciate it. We ask that you read and sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just by adding a comment to this pull request with this exact sentence:

I have read the CLA Document and I hereby sign the CLA

By commenting with the above message you are agreeing to the terms of the CLA. Your account will be recorded as agreeing to our CLA so you don't need to sign it again for future contributions to this repository.

0 out of 1 committers have signed the CLA.
❌ @rvelaz

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud