SlabUploader/test-results/gate-b-2026-09-07-fix/RESULTS.md

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.