# Gate B Fix — Select Photos Click Path

## Problem
"Select Photos" button dead-clicked on deployed host (https://192.168.1.202/ and https://100.64.0.9/).

## Root Causes
1. **Missing label/input association**: `<label>` had no `for=` attribute, `<input>` had no `id=`. Clicking the label did nothing.
2. **Svelte 5 event directive mismatch**: All event handlers used Svelte 4 syntax (`on:change`, `on:click`, `on:input`) which does not work in Svelte 5 runes mode. Must use native DOM properties (`onchange`, `onclick`, `oninput`).

## Fix Applied
- Added `id="photo-file-input"` to file input, `for="photo-file-input"` to label
- Converted all event directives to Svelte 5 syntax across entire `+page.svelte`:
  - `on:change` → `onchange`
  - `on:click` → `onclick`
  - `on:input` → `oninput`
- Added Playwright BVT suite confirming the click path works

## Test Results

### Local BVT (compiled build)
- 4/4 passed
- Tests verify: label association, file selection → mask step advance, button enabled, full flow with knobs

### Remote BVT (deployed host https://100.64.0.9)
- 4/4 passed
- Same test suite runs against live deployed instance
- Confirms Select Photos → file picker → photo loads → mask step

### Evidence
- Playwright HTML report: `test-results/gate-b-2026-09-07-fix/playwright-report/`
- Test suite: `frontend/test/bvt/`
- Test image: `frontend/test/bvt/test-slab.png` (100x60 PNG, green border + white interior)

## Deployment
- Branch: `gate-b`
- Commit: `17b6e6c`
- Pushed to: `origin/gate-b`
- Redeployed on: ubuDual5060 (Tailscale 100.64.0.9, LAN 192.168.1.202)
- Frontend container `deploy-frontend-1` rebuilt and started

## Status
- Select Photos button now opens file picker on deployed host
- File selection processes images and advances to mask step
- All event handlers (buttons, selects, ranges) use Svelte 5 syntax
- **Gate B not green** — remaining product-state issues (TV-3/6/7/10) are separate

---

## Mask UX Fix (issue #55) — 2026-09-07

### Problem
iPad @ https://192.168.1.202/: (1) mask preview nearly solid green — slab not visible;
(2) Sensitivity/Edge/Feather sliders take forever to respond.

### Root Causes
1. **Overlay too opaque**: max alpha 140/255 (~55% green wash) made the photo hard to see.
2. **Auto-sheet fallback wrong**: when border was ambiguous, defaulted to green; if no green
   pixels existed, mask became all-slab (all 255) → entire canvas green.
3. **No debounce**: `applyMaskKnobs` called full O(n²) remask on every `oninput` event
   (every slider tick), blocking the UI thread.

### Fix Applied
- **Translucent overlay**: green from (0,200,0) → (60,220,60), max alpha 140 → 80 (~31% opacity)
- **Auto-sheet fallback**: when ambiguous, try both green and black; pick whichever produces
  non-trivial slab area (1%-99%). Falls back to green if both degenerate.
- **Knob debounce**: oninput → cheap overlay redraw with previous mask (rAF-limited);
  onchange (release) → immediate full remask; 150ms debounced remask during drag.
- **Playwright E2E tests**: overlay visual, sensitivity knob 38ms, edge offset knob 38ms,
  sheet switch 21ms.

### Evidence
- Screenshot: `frontend/test-results/mask-ux-evidence/mask-overlay-translucent.png`
  (translucent light green overlay, photo visible underneath)
- Playwright timing: sensitivity knob 38ms, edge offset 38ms, sheet switch 21ms — all <300ms

### Deployment
- Commits: `a1d4a96` (fix), `866de43` (Playwright tests)
- Branch: `gate-b`
- Pushed to: `origin/gate-b`
- Redeployed on: ubuDual5060
- Health: `GET https://192.168.1.202/api/health` → 200 `{"status":"ok"}`

### Status
- **Gate B not green** — mask UX is usable; remaining product-state issues are separate.

### Pending
- Issue #55 on Gitea needs manual comment with tip `adc5054`
  (issue tracker requires auth; no API key available for automated update)