Integrate AI-Powered Plan Analysis & Tuning Recommendations

[shane-borden]

Integrate AI-Powered Plan Analysis & Tuning Recommendations

This pull request introduces a new AI Plan Analyzer feature to PEV2. It allows users to get automated query tuning advice, index suggestions, and bottleneck analysis from Google Gemini, OpenAI, Anthropic, or local Ollama instances directly in their browser.

🚀 Key Features

• AI Provider Flexibility: Support for Google Gemini (default), OpenAI, Anthropic Claude, and Ollama (local LLM).
• Zero Backend Overhead: Queries are made directly from the user's browser (API keys are stored strictly in the user's local storage).
• Execution History: Automatically stores up to 30 past analysis reports in browser history per plan hash, enabling easy comparison between models/providers or tracking progress.
• Custom Markdown Rendering: A secure helper component (ai-service.ts) parses the markdown response returned by the AI into styled HTML with custom classes.
• Interactive Configuration UI: Configurable custom models, API keys (with visibility toggles), and custom API endpoints / proxy URLs (especially useful for Anthropic CORS bypass or local Ollama/gateway configurations).

---

🛠️ Detailed Code Changes

1. New Components & Services

• src/components/AiAnalysis.vue:
  • Implements the configuration panel (API keys, custom endpoints, model selector).
  • Houses execution state, errors, loading screens, and markdown report display.
  • Implements history management (saving, loading, selection, and deletion).
• src/services/ai-service.ts:
  • hashString(): Generates a stable base-36 hash of the execution plan source to organize local history.
  • parseMarkdown(): Safely converts standard markdown (headers, code blocks, lists, bold/italics) to styled HTML.

2. Integration with Main UI

• src/components/Plan.vue:
  • Added a new AI Analysis tab to the navigation header.
  • Implemented a "new" badge next to the AI Analysis tab until the user visits it for the first time.
• src/components/index.ts:
  • Exported the new AiAnalysis component.

3. Security & Policy Configurations

• index.html:
  • Updated the Content-Security-Policy (connect-src) to allow browser requests to:
    • Google Gemini (https://generativelanguage.googleapis.com)
    • OpenAI (https://api.openai.com)
    • Anthropic (https://api.anthropic.com)
    • Local Ollama (http://localhost:11434)
• src/services/ai-service.ts:
  • Strictly HTML-escapes raw plan data before formatting/parsing Markdown to prevent potential XSS injection vulnerabilities from malicious plan payloads.

4. Tests & Documentation

• src/services/__tests__/ai-service.spec.ts:
  • Comprehensive test suite for hashString and parseMarkdown (testing escaping, headers, bold/italic rendering, list structures, and paragraph wrapper logics).
• README.md:
  • Reorganized and restructured screenshots into collapsible feature drawers.
  • Added updated visual mockups for Grid, Stats, AI Setup, AI Loading, and AI Report screens.