Fix improve part

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to QyverixAI
 
-Thank you for wanting to contribute! QyverixAI is a GSSoC 2026 project and welcomes all levels of contributors — from first-timers to veterans.
+Thank you for wanting to contribute! QyverixAI is a GSSoC 2026 project and welcomes all levels of contributors - from first-timers to veterans.
 
 ---
 
@@ -19,7 +19,7 @@ git checkout -b feat/your-feature-name
 cd backend
 pip install -r requirements.txt
 
-# 5. Run tests — all must pass before submitting
+# 5. Run tests - all must pass before submitting
 pytest -v
 
 # 6. Start the dev server
@@ -30,11 +30,11 @@ uvicorn app.main:app --reload
 
 ## Ways to Contribute
 
-### 🐛 Bug Fixes
+### Bug Fixes
 - Open an issue first if the bug isn't already reported
 - Include the code snippet that triggers it + expected vs actual behavior
 
-### ✨ New Bug Detection Patterns
+### New Bug Detection Patterns
 Bug patterns live in `backend/app/services/code_assistant.py` in the `BUG_PATTERNS` list.
 
 Each pattern is a `BugPattern` dataclass:
@@ -44,7 +44,7 @@ BugPattern(
     name="Pattern Name",
     pattern=r"regex_to_match",
     description="What the bug is and why it's a problem.",
-    suggestion="How to fix it — be specific and actionable.",
+    suggestion="How to fix it - be specific and actionable.",
     severity="error",        # "error" | "warning" | "info"
     languages=["Python"],    # which languages this applies to
 )
@@ -60,18 +60,18 @@ def test_debug_detects_your_pattern():
     assert "Pattern Name" in types
 ```
 
-### 💡 New Suggestion Rules
+### New Suggestion Rules
 Suggestion logic is in the `run_suggestions()` function in `code_assistant.py`. Add a new `if` block that appends to the `suggestions` list.
 
-### 🎨 Frontend Improvements
-The entire frontend is `frontend/index.html` — one self-contained file. No build step, no Node.js required. Just edit and open in your browser.
+### Frontend Improvements
+The entire frontend is `frontend/index.html` - one self-contained file. No build step, no Node.js required. Just edit and open in your browser.
 
-### 📖 Documentation
+### Documentation
 - Fix typos, improve clarity, add examples
 - Update the README if you add/change a feature
 - Add docstrings to functions that lack them
 
-### 🧪 Tests
+### Tests
 - Add test cases for edge cases
 - Improve coverage for existing features
 - Parametrize tests where appropriate
@@ -88,6 +88,116 @@ The entire frontend is `frontend/index.html` — one self-contained file. No bui
 
 ---
 
+## Optional LLM / API Key setup (safe for open-source)
+
+QyverixAI can run fully offline using the built-in rule-based engine. If you opt-in to richer LLM-powered replies, follow these steps to provide an API key safely.
+
+- Use the provided example file: copy `.env.example` to `.env` and edit values locally. The repo already includes `.env.example` and `.gitignore` ignores `.env`.
+
+    ```bash
+    # from repo root (Unix/macOS)
+    cp .env.example .env
+    # or on Windows PowerShell
+    Copy-Item .env.example .env
+    ```
+
+- Edit `backend/.env` (or `backend/.env.local`) and set these values:
+
+    ```text
+    LLM_ENABLED=true
+    LLM_API_KEY=sk_your_openai_key_here
+    LLM_BASE_URL=https://api.openai.com/v1
+    LLM_MODEL=gpt-4o-mini
+    ```
+
+- Important: do NOT commit `.env`. The repository `.gitignore` already excludes `.env`. To be safe, check with:
+
+    ```bash
+    git status --ignored -- .env
+    ```
+
+- Alternative: set env vars only for your shell session (no file written):
+
+    PowerShell (temporary for session):
+    ```powershell
+    $env:LLM_ENABLED = "true"
+    $env:LLM_API_KEY = "sk_..."
+    cd backend
+    python -m uvicorn app.main:app --reload
+    ```
+
+    Unix / macOS (temporary for session):
+    ```bash
+    export LLM_ENABLED=true
+    export LLM_API_KEY=sk_...
+    cd backend
+    python -m uvicorn app.main:app --reload
+    ```
+
+- CI / Deployment: configure the provider's secrets or environment variables (GitHub Actions Secrets, Render dashboard, Docker secrets, etc.) rather than storing keys in the repo. Example for GitHub Actions `workflow.yml`:
+
+    ```yaml
+    env:
+        LLM_ENABLED: true
+    secrets:
+        LLM_API_KEY: ${{ secrets.LLM_API_KEY }}
+    ```
+
+- Local LLM option: If you prefer no external keys, you can run an on-host LLM (Ollama, local Llama) and set `LLM_BASE_URL` to the local endpoint. This keeps everything on your machine.
+
+- If you want us to improve the built-in fallback (rule-based) to provide more detailed, actionable answers without an API key, we can do that — it's the default behavior.
+
+If you want, I can add a short `LLM_SETUP.md` with screenshots and copy-ready snippets for Render/GitHub Actions — tell me which host you'd like docs for.
+
+---
+
+## Large Files Policy
+
+CI automatically rejects PRs that contain files larger than **5 MB**. This keeps the repo lean and CI fast.
+
+### What to do if your PR fails
+
+- Check which files triggered the failure in the CI logs
+- Remove the oversized files from the commit
+- For large assets (screenshots, datasets, binaries), use **Git LFS** or an external hosting service and link to them in the README
+
+### Configure exceptions
+
+If you believe a file legitimately needs to exceed 5 MB (e.g., a bundled model or a large screenshot), add an exception to the check by modifying the comparison in `.github/workflows/check-large-files.yml`.
+
+---
+
+## Code Formatting
+
+CI enforces consistent Python formatting on every pull request using `black` and `isort`. PRs with improperly formatted code will fail the `format` check automatically.
+
+### Install the tools
+
+```bash
+cd backend
+pip install black==24.10.0 isort==5.13.2
+```
+
+### Format before every PR
+
+Run both from the repo root:
+
+```bash
+black backend/
+isort backend/
+```
+
+To check without modifying files (mirrors exactly what CI runs):
+
+```bash
+black --check backend/
+isort --check-only backend/
+```
+
+Both tools are pre-configured in `pyproject.toml` at the repo root so they stay compatible with each other — no manual flag juggling needed.
+
+---
+
 ## Pull Request Checklist
 
 Before opening a PR, confirm:
@@ -115,4 +225,4 @@ Be respectful, inclusive, and constructive. We're here to learn and build togeth
 
 ---
 
-Thank you for contributing! 🚀
+Thank you for contributing!

FEATURE_LINE_HIGHLIGHTING.md

@@ -0,0 +1,179 @@
+# Line Highlighting Feature - Implementation Complete ✓
+
+## Feature Summary
+Implemented visual line highlighting in the code editor to mark detected issue lines during code analysis. Issues are highlighted with color-coded severity levels and interactive hover tooltips.
+
+## What Was Enhanced
+
+### 1. **Visual Line Highlighting** 
+- Lines with detected issues are now highlighted directly in the code editor
+- Highlights appear behind the text with semi-transparent backgrounds
+- 3px left border accent for easy visibility
+- Smooth opacity transitions on hover
+
+### 2. **Color-Coded Severity Levels**
+- **Errors** (Red): `rgba(239, 68, 68, 0.15)` with `#ef4444` accent
+- **Warnings** (Yellow): `rgba(234, 179, 8, 0.15)` with `#eab308` accent  
+- **Info** (Blue): `rgba(59, 130, 246, 0.15)` with `#3b82f6` accent
+
+### 3. **Interactive Tooltips**
+- Hover over any highlighted line to reveal a tooltip
+- Tooltip shows: Issue Type, Description, Fix Suggestion
+- Styled to match the app's design with proper contrast
+
+### 4. **Automatic Lifecycle Management**
+- **Applied**: When debug analysis completes
+- **Updated**: Highest severity takes precedence if multiple issues on same line
+- **Cleared**: When code is edited, new analysis runs, or Clear button is clicked
+
+## Files Modified
+
+### `frontend/style.css`
+Added comprehensive styling for:
+- `.editor-wrap` - Main editor container with line numbers
+- `.line-numbers` - Line number gutter display
+- `.code-editor-shell` - Container for highlights overlay
+- `.issue-line-highlights` - Highlight decorator container
+- `.issue-line-highlight` - Individual highlight decorations
+- `.issue-tooltip` - Hover tooltip styling
+- Light theme color scheme support
+
+### `frontend/script.js`
+Added new functions:
+- `applyLineHighlights(issues)` - Processes issues and creates visual decorations
+- `clearLineHighlights()` - Removes all highlights from editor
+
+Updated existing code:
+- Changed all `codeInput` references to `codeEditor` (sync with HTML)
+- Integrated highlights clearing into:
+  - Input event listener (when code is edited)
+  - Clear button handler
+  - RunAnalysis startup
+  - Code upload handler
+
+### `frontend/index.html`
+- Already had proper HTML structure prepared with `issue-line-highlights` div
+- Line numbers gutter already present
+
+## How to Use
+
+1. **Paste or upload code** into the editor
+2. **Select "Debug" mode** from the mode tabs or select "Full" for comprehensive analysis
+3. **Click "Analyze Code"** button
+4. **Visual highlights appear** on lines with detected issues
+5. **Hover over any highlighted line** to see issue details
+6. **Edit code** to automatically clear highlights
+7. **Run new analysis** to update highlights
+
+## API Integration
+
+Backend returns issues with these fields (already supported):
+```python
+class Issue(BaseModel):
+    type: str           # e.g., "SyntaxError", "NameError"
+    line: int | None    # Line number where issue occurs
+    description: str    # Detailed issue description
+    suggestion: str     # How to fix the issue
+    severity: str       # "error", "warning", or "info"
+    code_snippet: str   # Optional code snippet
+    code_context: str   # Optional additional context
+```
+
+## Technical Details
+
+### Z-Index Layering
+- Highlights container: `z-index: 0` (behind text)
+- Code editor textarea: `z-index: 1` (on top)
+- Tooltips: `z-index: 1000` (above everything)
+
+### Line Height Calculation
+- Line height: 1.7 (from CSS)
+- Font size: 13px
+- Highlight height: `calc(1.7 * 13px)` = 22.1px per line
+- Padding adjustment: 16px top padding on editor
+
+### Hover Behavior
+- Highlights have 0% opacity by default
+- Hover reveals highlight at 60% opacity (class: `.active`)
+- Tooltip displays on hover with full opacity
+- Smooth transitions via `var(--transition)` (0.18s ease)
+
+### Theme Support
+- Dark mode: Default colors (see above)
+- Light theme: CSS variables adapt automatically
+- All colors maintain proper contrast ratios
+
+## Edge Cases Handled
+
+1. **Multiple issues on same line**
+   - Only highest severity is highlighted
+   - Priority: error (3) > warning (2) > info (1)
+
+2. **Missing line numbers**
+   - Issues without line numbers are skipped
+   - Invalid line numbers (0 or negative) are ignored
+
+3. **Code editing**
+   - Highlights clear immediately on input
+   - Prevents stale highlights during editing
+
+4. **Theme switching**
+   - Highlights update with theme change
+   - Tooltip colors adapt to theme
+
+5. **Empty code**
+   - No highlights applied to empty editor
+   - Error message shown instead
+
+## Performance Considerations
+
+- Highlights use CSS transforms (GPU-accelerated)
+- Tooltip creation deferred until hover
+- Container innerHTML cleared instead of individual removals
+- No scroll sync required (CSS positioned absolutely)
+
+## Browser Compatibility
+
+- Works with all modern browsers supporting:
+  - CSS Grid and Flexbox
+  - CSS Custom Properties (CSS Variables)
+  - ES6 JavaScript (const, arrow functions, template literals)
+  - Event listeners and DOM manipulation
+
+## Future Enhancement Ideas
+
+1. **Gutter Decorations**
+   - Add small icons in line number gutter for each issue
+   - Click to jump to issue details
+
+2. **Inline Code Actions**
+   - Quick fix buttons directly in highlights
+   - Apply suggestions with one click
+
+3. **Filter/Search Issues**
+   - Filter highlights by severity
+   - Search for specific issue types
+
+4. **Keyboard Navigation**
+   - Arrow keys to navigate between issues
+   - Keyboard shortcuts to apply fixes
+
+5. **Copy/Export**
+   - Export highlighted issues as report
+   - Copy highlighted section with annotations
+
+## Testing Checklist
+
+- [ ] Paste Python code with syntax errors and run Debug analysis
+- [ ] Verify error lines are highlighted in red
+- [ ] Hover over highlight to see tooltip
+- [ ] Edit code and verify highlights clear
+- [ ] Run new analysis to see updated highlights
+- [ ] Test with warnings and info-level issues
+- [ ] Verify light theme colors are visible and accessible
+- [ ] Test with multiple issues on same line (should show highest severity)
+- [ ] Test with code that has no issues (should show "No issues" message)
+- [ ] Test keyboard shortcut (Ctrl+Enter) to run analysis
+
+## Status
+✅ **IMPLEMENTATION COMPLETE** - Ready for testing and deployment