# Harmonize Watchlist Design - Align with Main Page

## TL;DR

> **Quick Summary**: Harmonize the visual design of watchlist page to match /web page while keeping watchlist as separate autonomous page.

> **Deliverables**:
> - Update watchlist.html to use same background gradient and styling as /web
> - Unify header design (colors, layout, icons)
> - Align button styles to match /web patterns
> - Maintain watchlist functionality (no breaking changes)

> **Estimated Effort**: Medium
> **Parallel Execution**: NO - single task
> **Critical Path**: CSS updates → styling verification → commit

---

## Context

### Original Request Summary
User identified that watchlist (/watchlist) page has a completely different design from the main page (/web), creating UX inconsistency:
- Watchlist has dark violet gradient background, /web has cleaner light gradient
- Watchlist has custom header "📋 Ma Watchlist", /web has unified navigation tabs
- Watchlist has its own navigation button, /web has tab-based navigation
- Different color schemes, layouts, and styling patterns

### User's Decision
User chose **Option 2: Harmonize watchlist design** - adapt watchlist visual design to match /web styling while keeping it as a separate page.

### Key Findings
- /web uses light gradient background (135deg, #1e1e2e 0%, #2d1b69 0%, #1e1e2e 100%)
- Watchlist currently uses dark violet gradient background
- /web has tab-based navigation (Accueil, Anime, Série, Fournisseurs, Watchlist)
- Watchlist has standalone page design

---

## Work Objectives

### Core Objective
Harmonize the visual design of templates/watchlist.html to match the styling and patterns of templates/index.html (/web), creating visual consistency across the application.

### Concrete Deliverables
- Updated `templates/watchlist.html` background to match /web
- Unified header design colors and layout
- Aligned button styles (btn-primary, btn-secondary)
- Consistent typography and spacing
- Maintained all watchlist functionality (scheduler, stats, search, add/remove items)

### Definition of Done
- [ ] Watchlist background gradient matches /web
- [ ] Header text color and styling matches /web
- [ ] Button styles (btn-primary, btn-secondary) match /web
- [ ] Overall visual appearance is consistent with /web
- [ ] All watchlist features still work (no breaking changes)

### Must Have
- Harmonize visual design with /web
- Match background gradient colors
- Align header styling (fonts, colors, icons)
- Unify button class styles
- Maintain all existing watchlist functionality

### Must NOT Have (Guardrails)
- **DO NOT remove watchlist functionality** - scheduler, stats, notifications must still work
- **DO NOT change /web design** - only adapt watchlist to match
- **DO NOT break existing URL routes** - /watchlist and /web must both work
- **DO NOT modify JavaScript files** - only HTML/CSS changes
- **DO NOT add new features** - this is visual harmonization only

---

## Verification Strategy

### Test Decision
- **Infrastructure exists**: YES (uvicorn server)
- **Automated tests**: NO (visual changes, manual QA)
- **Framework**: None - manual browser verification
- **Rationale**: This is visual CSS/template change, requires manual browser verification

### QA Policy
Visual verification required for design changes:
- Use dev-browser (playwright) to load both pages
- Compare visual appearance side-by-side
- Verify no functionality broken
- Evidence saved to `.sisyphus/evidence/`

---

## Execution Strategy

### Sequential Execution

```
Task 1: Update Watchlist Background Gradient
- Modify templates/watchlist.html
- Replace dark violet gradient with /web's light gradient
- Verify page loads and looks correct

Task 2: Harmonize Header Design
- Update header colors, fonts, layout
- Match /web navigation header styling
- Ensure text colors are consistent
- [ ] 2. Harmonize Header Design
Task 3: Align Button Styles
- Update button classes to use same styles as /web
- Verify hover states and interactions
- Ensure responsive behavior matches

- [ ] 4. Final Verification
- Load both /web and /watchlist in browser
- Take screenshots for comparison
- Verify all functionality works
```

### Agent Dispatch Summary

- **1**: **1** — T1 (visual-engineering)
- **2**: **1** — T2 (visual-engineering)
- **3**: **1** — T3 (visual-engineering)
- **4**: **1** — T4 (visual-engineering)

---

## TODOs

- [ ] 1. Update Watchlist Background Gradient

  **What to do**:
  - Read `templates/watchlist.html` to find current background styling
  - Read `templates/index.html` to get the light gradient background
  - Replace watchlist's dark violet gradient: `background: linear-gradient(135deg, #1e1e2e 0%, #2d1b69 0%, #1e1e2e 100%)`
  - With /web's light gradient: Need to check index.html for exact colors

  **Must NOT do**:
  - Remove watchlist functionality (scheduler, stats, search)
  - Change the structure of the page
  - Modify JavaScript files

  **Recommended Agent Profile**:
  - **Category**: `visual-engineering`
    - Reason: CSS styling update for visual consistency
  - **Skills**: []
    - No special skills needed - CSS gradient change

  **Parallelization**:
  - **Can Run In Parallel**: NO
  - **Parallel Group**: Single task
  - **Blocks**: Task 2
  - **Blocked By**: None (can start immediately)

  **References**:

  **Pattern References**:
  - `templates/index.html` - Reference for correct background gradient
  - `templates/watchlist.html` - File to modify

  **Acceptance Criteria**:

  ```bash
  # Watchlist uses light gradient like /web
  grep -c "linear-gradient(135deg" templates/watchlist.html
  Expected: 1
  ```

  **QA Scenarios (MANDATORY — task is INCOMPLETE without these):**

  ```
  Scenario: Watchlist page uses light gradient background
    Tool: dev-browser (playwright)
    Preconditions: Server running on port 3000
    Steps:
      1. Navigate to http://localhost:3000/watchlist
      2. Wait for page to load (timeout 10s)
      3. Take screenshot of page background
      4. Navigate to http://localhost:3000/web
      5. Take screenshot for comparison
    Expected Result: Watchlist background matches /web's light gradient
    Failure Indicators: Background still dark violet, colors don't match
    Evidence: .sisyphus/evidence/task-1-background-gradient.png
  ```

  **Commit**: NO
  - Groups with Task 2, 3

- [ ] 2. Harmonize Header Design

  **What to do**:
  - Read `templates/watchlist.html` to check current header styling
  - Read `templates/index.html` to get header reference
  - Update watchlist header colors to match /web's color scheme
  - Update fonts to match /web typography
  - Ensure header layout and spacing match /web
  - Keep "📋 Ma Watchlist" title but update colors

  **Must NOT do**:
  - Remove header functionality
  - Change header text/title
  - Remove the "Retour à l'accueil" button added earlier

  **Recommended Agent Profile**:
  - **Category**: `visual-engineering`
    - Reason: Header styling harmonization
  - **Skills**: []
    - CSS styling task

  **Parallelization**:
  - **Can Run In Parallel**: NO
  - **Parallel Group**: Single task
  - **Blocks**: Task 3
  - **Blocked By**: Task 1 (background must be updated first)

  **References**:

  **Pattern References**:
  - `templates/index.html` - Reference for header styling
  - `templates/watchlist.html` - File to modify

  **Acceptance Criteria**:

  ```bash
  # Header uses same colors as /web
  # Verify no dark violet colors remain
  ```

  **QA Scenarios (MANDATORY):**

  ```
  Scenario: Header design matches /web
    Tool: dev-browser (playwright)
    Preconditions: Tasks 1 complete, server running
    Steps:
      1. Navigate to http://localhost:3000/watchlist
      2. Take screenshot of header section
      3. Navigate to http://localhost:3000/web
      4. Take screenshot of navigation header
      5. Compare screenshots side-by-side
    Expected Result: Watchlist header colors, fonts, layout match /web
    Failure Indicators: Different colors, fonts mismatched, layout differences
    Evidence: .sisyphus/evidence/task-2-header-harmonization.png
  ```

  **Commit**: NO
  - Groups with Task 3

- [ ] 3. Align Button Styles

  **What to do**:
  - Read `templates/watchlist.html` to identify all button elements
  - Read `templates/index.html` to get button class references
  - Ensure all buttons use consistent classes (btn-primary, btn-secondary)
  - Verify hover states and interactions work correctly
  - Make sure "Retour à l'accueil" button style is aligned

  **Must NOT do**:
  - Change button functionality or behavior
  - Remove any buttons
  - Modify JavaScript event handlers

  **Recommended Agent Profile**:
  - **Category**: `visual-engineering`
    - Reason: Button styling alignment
  - **Skills**: []
    - CSS class updates

  **Parallelization**:
  - **Can Run In Parallel**: NO
  - **Parallel Group**: Single task
  - **Blocks**: Task 4
  - **Blocked By**: Task 2 (header must be updated first)

  **References**:

  **Pattern References**:
  - `templates/index.html` - Reference for button styles
  - `templates/watchlist.html` - File to modify
  - `static/css/style.css` - Button class definitions (if exists)

  **Acceptance Criteria**:

  ```bash
  # All buttons use btn-primary or btn-secondary classes
  grep -o "class=\"btn-" templates/watchlist.html | sort | uniq
  Expected: btn-primary, btn-secondary (or similar consistent classes)
  ```

  **QA Scenarios (MANDATORY):**

  ```
  Scenario: Button styles are consistent with /web
    Tool: dev-browser (playwright)
    Preconditions: Tasks 1, 2 complete
    Steps:
      1. Navigate to http://localhost:3000/watchlist
      - [ ] 3. Align Button Styles
      3. Click buttons, verify interactions work
      4. Check no console errors
    Expected Result: All buttons have consistent styling with /web, hover states work
    Failure Indicators: Different button styles, broken interactions, console errors
    Evidence: .sisyphus/evidence/task-3-button-alignment.png
  ```

  **Commit**: YES
  - Message: `style(ui): Harmonize watchlist design to match /web`
  - Files: `templates/watchlist.html`

- [ ] 4. Final Verification

  **What to do**:
  - Start server if not running: `uvicorn main:app --host 0.0.0.0 --port 3000`
  - Navigate to `/web` and verify page works
  - Navigate to `/watchlist` and verify page works
  - Take comparison screenshots
  - Verify navigation works both ways
  - Check browser console for errors
  - Verify watchlist features (search, scheduler, stats, add/remove items) still work

  **Must NOT do**:
  - Make any code changes
  - Modify functionality

  **Recommended Agent Profile**:
  - **Category**: `unspecified-high`
    - Reason: Final integration verification
  - **Skills**: [`dev-browser`]
    - dev-browser: Use Playwright for browser automation and screenshots

  **Parallelization**:
  - **Can Run In Parallel**: NO
  - **Parallel Group**: Final task
  - **Blocks**: None
  - **Blocked By**: Tasks 1, 2, 3 (all tasks must complete)

  **References**:

  **Pattern References**:
  - `templates/index.html` - Reference for expected design
  - `templates/watchlist.html` - File being modified

  **Acceptance Criteria**:

  ```bash
  # Both pages work
  curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/web
  curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/watchlist
  Expected: 200 for both
  ```

  **QA Scenarios (MANDATORY):**

  ```
  Scenario: Visual design is harmonized between /web and /watchlist
    Tool: dev-browser (playwright)
    Preconditions: All styling tasks complete, server running
    Steps:
      1. Navigate to http://localhost:3000/web
      2. Take full page screenshot
      3. Navigate to http://localhost:3000/watchlist
      4. Take full page screenshot
      5. Compare side-by-side
      6. Verify backgrounds match
      7. Verify header styles match
      8. Verify button styles match
    Expected Result: Visual design is consistent between both pages
    Failure Indicators: Color mismatch, style differences, broken features
    Evidence: .sisyphus/evidence/task-4-verification-screenshot.png
  ```

  **Commit**: NO
  - This is verification only, no code changes

---

## Final Verification Wave (MANDATORY — after ALL implementation tasks)

> 3 review agents run in PARALLEL. ALL must APPROVE. Rejection → fix → re-run.

- [ ] F1. **Visual Design Review** — `visual-engineering`
  Compare watchlist and /web designs side-by-side. Verify colors, gradients, typography, spacing, and layout are harmonized. Check for any visual inconsistencies.

  Output: `Background [MATCH/MISMATCH] | Header [MATCH/MISMATCH] | Buttons [MATCH/MISMATCH] | VERDICT: APPROVE/REJECT`

- [ ] F2. **Functionality Verification** — `unspecified-high` (+ `dev-browser` skill)
  Navigate to /watchlist and verify all features work: search, scheduler controls, stats display, add/remove items, navigation. Check browser console for errors.

  Output: `Features [N/N working] | Console Errors [0/N] | VERDICT: APPROVE/REJECT`

- [ ] F3. **Code Quality Check** — `quick`
  Check for CSS syntax errors, invalid colors, or broken HTML structure.

  Output: `CSS [VALID/INVALID] | HTML [VALID/INVALID] | VERDICT: APPROVE/REJECT`

---

## Commit Strategy

- **1**: `style(ui): Harmonize watchlist design to match /web`
  - Files: `templates/watchlist.html`

---

## Success Criteria

### Verification Commands
```bash
# Watchlist uses light gradient
grep -c "linear-gradient(135deg" templates/watchlist.html
# Expected: 1

# Both pages work
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/web
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/watchlist
# Expected: 200 for both
```

### Final Checklist
- [ ] Watchlist background matches /web
- [ ] Header design harmonized with /web
- [ ] Button styles aligned with /web
- [ ] All watchlist features still work
- [ ] Both pages load without errors
- [ ] Visual design is consistent