kite/.planning/milestones/v0.2-phases/10-ux-interaction/10-VALIDATION.md

---
phase: 10
slug: ux-interaction
status: complete
nyquist_compliant: true
wave_0_complete: true
created: 2026-06-14
audited: 2026-06-16
---

# Phase 10 — Validation Strategy

> Per-phase validation contract for feedback sampling during execution.

---

## Test Infrastructure

| Property | Value |
|----------|-------|
| **Framework** | Vitest ^4.1.7 |
| **Config file** | `frontend/vite.config.js` |
| **Quick run command** | `cd frontend && npm run test -- --run` |
| **Full suite command** | `cd frontend && npm run test` |
| **Estimated runtime** | ~30 seconds |

---

## Sampling Rate

- **After every task commit:** Run `cd frontend && npm run test -- --run [component-name]`
- **After every plan wave:** Run `cd frontend && npm run test -- --run`
- **Before `/gsd:verify-work`:** Full suite must be green
- **Max feedback latency:** 30 seconds

---

## Per-Task Verification Map

| Task ID | Plan | Wave | Requirement | Threat Ref | Secure Behavior | Test Type | Automated Command | File Exists | Status |
|---------|------|------|-------------|------------|-----------------|-----------|-------------------|-------------|--------|
| AppIcon foundation | W0 | 0 | CODE-05 | — | Unknown names warn; render nothing | unit | `npm run test -- --run AppIcon` | ✅ | COVERED |
| EmptyState foundation | W0 | 0 | UX-01 | — | Props render; CTA slot optional | unit | `npm run test -- --run EmptyState` | ✅ | COVERED |
| BreadcrumbBar foundation | W0 | 0 | UX-12 | — | Last segment non-clickable; navigate emitted | unit | `npm run test -- --run BreadcrumbBar` | ✅ | COVERED |
| Toast store + container | W0 | 0 | UX-10 | — | auto-dismiss 4s; dismiss on click | unit | `npm run test -- --run toast` | ✅ | COVERED |
| StorageBrowser skeleton | W1 | 1 | UX-02 | — | skeleton renders when loading=true | unit | `npm run test -- --run StorageBrowser` | ✅ | COVERED |
| AppSidebar skeleton + empty | W1 | 1 | UX-03 | — | skeleton rows replace Loading text | unit | `npm run test -- --run AppSidebar` | ✅ | COVERED |
| Admin table skeletons | W1 | 1 | UX-04 | — | skeleton rows in users + audit | unit | `npm run test -- --run Admin` | ✅ | COVERED |
| EmptyState wiring | W1 | 1 | UX-01 | — | EmptyState shown in all 7+ contexts | unit | `npm run test -- --run EmptyState` | ✅ | COVERED |
| Toast call sites | W1 | 1 | UX-10 | — | show() called on upload/delete/move | unit | `npm run test -- --run toast` | ✅ | COVERED |
| BreadcrumbBar wiring | W1 | 1 | UX-12 | — | admin/settings views pass static segments | unit | `npm run test -- --run BreadcrumbBar` | ✅ | COVERED |
| UX-14 sidebar removal | W1 | 1 | UX-14 | — | "New" button absent from AppSidebar | unit | `npm run test -- --run AppSidebar` | ✅ | COVERED |
| Keyboard shortcuts | W2 | 2 | UX-05..08 | — | guard fires; no input bleed | unit | `npm run test -- --run keyboard` | ✅ | COVERED |
| OS drag overlay | W2 | 2 | UX-09 | — | overlay on Files dragenter; hide on leave | unit | `npm run test -- --run OsDragOverlay` | ✅ | COVERED |
| Drag-to-move toast | W3 | 3 | UX-11 | — | ring-2 ring-inset ring-amber-300 on hover | unit | `npm run test -- --run StorageBrowser` | ✅ | COVERED |
| Dropdown clipping fixes | W3 | 3 | UX-13 | — | picker renders via Teleport at correct pos | unit | `npm run test -- --run dropdown` | ✅ | COVERED |
| SVG migration | W3 | 3 | CODE-05 | — | all 29 files use AppIcon; no inline svg | unit | `npm run test -- --run AppIcon` | ✅ | COVERED |

---

## Key Behavioral Contracts

| Contract | Value | Test Type |
|---|---|---|
| Toast auto-dismiss timing | 4000ms (locked by Phase 8 stub) | unit (mock timers) |
| Toast manual dismiss | click anywhere on toast | unit |
| Keyboard guard: `/` inside focused input | does NOT redirect to search | unit |
| Keyboard guard: `N` inside focused input | does NOT trigger folder creation | unit |
| Breadcrumb last segment | non-clickable (no @click/@navigate on last) | unit |
| OS drag detection | `dataTransfer.types.includes('Files')` required | unit |
| Drag-to-move ring highlight | `ring-2 ring-inset ring-amber-300` class on hover | unit |
| AppIcon unknown name | `console.warn` in dev; renders nothing | unit |

---

## Wave 0 Test Stubs (REQUIRED — create before implementation)

- [x] `frontend/src/components/ui/__tests__/AppIcon.test.js` — covers CODE-05 (name→path, unknown name warn)
- [x] `frontend/src/components/ui/__tests__/EmptyState.test.js` — covers UX-01 (props, CTA slot)
- [x] `frontend/src/components/ui/__tests__/BreadcrumbBar.test.js` — covers UX-12 (last segment, navigate emit)
- [x] `frontend/src/stores/__tests__/toast.test.js` — covers UX-10 (show, auto-dismiss, dismiss on click)
- [x] `frontend/src/components/ui/__tests__/ToastContainer.test.js` — covers UX-10 visual rendering

---

## Manual Validation Checkpoints

These require human observation:
- UX-03: Sidebar skeleton visual appearance (match TreeItem indent level)
- UX-04: Admin table skeleton row column alignment
- Toast stacking with multiple simultaneous toasts
- OS drag-and-drop actual file upload end-to-end
- Keyboard `N` in cloud folder view (must no-op silently)
- Human checkpoint UAT: all 15 requirements exercised by a real user

---

## Validation Audit 2026-06-16

| Metric | Count |
|--------|-------|
| Tasks audited | 16 |
| Gaps found | 0 |
| COVERED | 16 |
| PARTIAL | 0 |
| MISSING | 0 |
| Escalated to manual-only | 0 |

**Test suite result:** 211 tests pass across 28 files (0 failures).

All Phase 10 test files were present and green at audit time. VALIDATION.md promoted from `draft` to `complete`; `nyquist_compliant` set to `true`.