TECHNICAL DOCUMENTATION

Comprehensive technical overview of Watch Wing AI's architecture, data flow, and error handling mechanisms.

Frontend Architecture

Core Components

  • UI Manager - Creates and manages chat interface
  • Chat Manager - Handles message flow and AI communication
  • Drag Manager - Enables window dragging functionality
  • Session Manager - Persists chat history and settings
  • Voice Manager - Handles speech recognition and synthesis

Key Features

  • Real-time screenshot capture
  • Draggable and resizable window
  • Voice input/output capabilities
  • Session persistence
  • Responsive design

Backend Architecture

Processing Pipeline

  • Request Validation - Verify input data and API keys
  • Image Processing - Handle base64 screenshot data
  • Context Building - Combine image + conversation history
  • Prompt Engineering - Create optimized AI prompts
  • Response Formatting - Clean and structure AI output

AI Integration

  • Google Gemini API integration
  • Vision capabilities for image analysis
  • Conversation context preservation
  • Real-time response generation
  • Error handling and fallbacks

Error Handling System

Error Handling System Flow

Error Types Handled

  • API Quota Exceeded - Gemini usage limits reached
  • Rate Limiting - Too many requests
  • Network Issues - Connection failures
  • Invalid Input - Malformed requests
  • Service Unavailable - Backend/AI service down

Recovery Mechanisms

  • User-friendly error messages
  • Automatic retry suggestions
  • Session preservation during failures
  • Graceful feature degradation
  • Comprehensive error logging

Error Handling System

Error Handling System Flow

Multi-Key Fallback System

  • Sequential Key Rotation - Automatically switches between Gemini API keys
  • Error Detection - Identifies "Bug" errors and quota issues
  • Smart Retry Logic - Marks faulty keys and moves to next available key
  • Cascade Failure Prevention - Multiple backup keys ensure service continuity
  • Real-time Monitoring - Continuous health checking of all API endpoints

Recovery Workflow

  • Automatic key switching on error detection
  • Error marking on faulty keys for temporary exclusion
  • Fallback to secondary and tertiary API keys
  • Continuous retry until successful response
  • Comprehensive error tracking and logging

Technical Specifications

Frontend Stack

  • Framework: Chrome Extension + Content Scripts
  • Language: JavaScript/TypeScript
  • UI: Custom CSS with Dark Theme
  • Storage: Chrome Storage API + Session Storage
  • APIs: Chrome Tabs, Web Speech, Clipboard

Backend Stack

  • Runtime: Node.js / Vercel Functions
  • AI Provider: Google Gemini API
  • Image Processing: Base64 + Vision AI
  • Authentication: API Key Validation
  • Error Handling: Comprehensive Status Codes