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

phase, slug, status, nyquist_compliant, wave_0_complete, created, audited

phase	slug	status	nyquist_compliant	wave_0_complete	created	audited
10	ux-interaction	complete	true	true	2026-06-14	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)

• frontend/src/components/ui/__tests__/AppIcon.test.js — covers CODE-05 (name→path, unknown name warn)
• frontend/src/components/ui/__tests__/EmptyState.test.js — covers UX-01 (props, CTA slot)
• frontend/src/components/ui/__tests__/BreadcrumbBar.test.js — covers UX-12 (last segment, navigate emit)
• frontend/src/stores/__tests__/toast.test.js — covers UX-10 (show, auto-dismiss, dismiss on click)
• 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.