# S01: Import & Convert UI (View 1) — UAT

**Milestone:** M002
**Written:** 2026-03-26T05:20:14.695Z

## UAT: S01 — Import & Convert UI (View 1)

### Preconditions
- Engine running at `http://localhost:8000` with presets loaded (`GET /engine/presets` returns preset configs)
- App dev server running via `cd app && npm run dev` (Vite at localhost:5173)
- At least one test raster image available (PNG, JPG, or BMP)
- At least one test SVG file available

---

### Test 1: File Upload — Drag and Drop
1. Open `http://localhost:5173` in browser
2. Verify the Import & Convert view loads with a dashed-border upload zone on the left panel and empty preview area on the right
3. Drag a PNG file onto the upload zone
4. **Expected:** Upload zone shows the filename, file size, and a thumbnail preview of the image
5. Verify the thumbnail is visible and roughly matches the uploaded image

### Test 2: File Upload — Click Fallback
1. Click on the upload zone (not drag-and-drop)
2. **Expected:** A native file picker dialog opens
3. Select a JPG file
4. **Expected:** Same result as Test 1 — filename, size, and thumbnail displayed

### Test 3: File Upload — SVG Detection
1. Upload an SVG file (via drag or click)
2. **Expected:** File is accepted and thumbnail/filename shown
3. Observe that when trace fires, it calls `/engine/simplify` (not `/engine/trace`) — verify in browser devtools Network tab

### Test 4: Preset Selection
1. Upload a raster image (PNG)
2. Verify preset cards appear below the upload zone, fetched from the engine API
3. **Expected:** 'sign' preset is selected by default (highlighted)
4. Click a different preset card (e.g., 'technical' or 'photo')
5. **Expected:** The clicked preset becomes highlighted, the previous one unhighlights
6. **Expected:** The SVG preview updates automatically after a short debounce delay

### Test 5: Live Debounced Re-Trace
1. Upload a raster PNG with the 'sign' preset selected
2. Wait for the initial SVG preview to appear in the right panel
3. **Expected:** Preview shows a vectorized SVG version of the uploaded image
4. Move the "Detail Level" slider
5. **Expected:** After ~300ms debounce, the preview updates with the new vectorization result
6. Rapidly move sliders 3-4 times in quick succession
7. **Expected:** Only the final parameter set triggers an API call (debounce coalesces rapid changes)

### Test 6: Parameter Sliders — Potrace Mode
1. Select a preset that uses potrace mode (e.g., 'sign')
2. **Expected:** Sliders shown: Detail Level (epsilon), Noise Filter (turdsize), Smooth Curves (alphamax)
3. **Expected:** Corner Threshold slider is NOT shown (vtracer-only)
4. Each slider displays its current numeric value

### Test 7: Parameter Sliders — VTracer Mode
1. Select a preset that uses vtracer mode (if available)
2. **Expected:** Sliders shown: Detail Level (epsilon), Noise Filter (filter_speckle), Corner Threshold (corner_threshold)
3. **Expected:** Smooth Curves (alphamax) slider is NOT shown (potrace-only)

### Test 8: SVG Preview — Responsive Rendering
1. Upload an image and wait for SVG preview
2. Resize the browser window
3. **Expected:** SVG preview scales responsively (maintains aspect ratio, fills available width, max-height 70vh)
4. **Expected:** No horizontal scrollbars or overflow

### Test 9: Output Info Bar — Normal Stats
1. Upload an image, wait for vectorization to complete
2. **Expected:** Stats bar appears below the preview showing: Path Count, Total Nodes, Open Paths, Processing Time
3. **Expected:** All indicators are green for typical images with moderate complexity

### Test 10: Output Info Bar — Warning Indicators
1. Upload a complex/detailed image that produces >5000 total nodes
2. **Expected:** Total Nodes indicator turns yellow
3. If the result has open paths > 0: **Expected:** Open Paths indicator turns red
4. If engine returns warnings: **Expected:** Warnings are displayed in the info bar

### Test 11: Use This Button — Disabled State
1. Load the page fresh (no file uploaded)
2. **Expected:** "Use This" button is visible but disabled/grayed out
3. Upload a file but before the trace completes:
4. **Expected:** Button remains disabled while loading

### Test 12: Use This Button — Advances to Canvas
1. Upload a file, wait for SVG preview to appear
2. **Expected:** "Use This" button becomes enabled
3. Click the "Use This" button
4. **Expected:** View transitions from Import & Convert to the Design Canvas placeholder (shows "View 2: Design Canvas")

### Test 13: Error Handling — API Failure
1. Stop the engine server
2. Upload a file
3. **Expected:** Preview area shows an error message (not a crash or blank screen)
4. Restart the engine
5. Re-upload or change a slider
6. **Expected:** Preview recovers and shows the vectorized result

### Test 14: AbortController Cleanup
1. Upload a file and immediately upload a different file before the first trace completes
2. **Expected:** First request is aborted (visible in devtools Network tab as cancelled), second request completes normally
3. Only the second file's result is shown in the preview

### Edge Cases

### Test 15: Large File Upload
1. Upload a large image (>5MB)
2. **Expected:** Upload completes, thumbnail shown, vectorization runs (may take longer than usual)
3. No UI freezing during processing

### Test 16: Rapid Preset Switching
1. Upload a file, then rapidly click through 3-4 different presets
2. **Expected:** Intermediate requests are aborted, only the final preset's result is displayed
3. No stale results from earlier presets appear after the final result loads
