Files

nitrix e3ca613210 Add agent research and implementation plan docs for US-1

Research reports on datetime handling, RFC 9457, font selection.
Implementation plans for US-1 create event and post-review fixes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-05 10:57:44 +01:00

4.8 KiB

Raw Blame History

US-1 Review Fixes — Agent Instructions

Date: 2026-03-05 Origin: Code review and exploratory browser testing of US-1 "Create Event"

Context

US-1 has been implemented across all 7 phases (OpenAPI spec, DB migration, domain model, application service, persistence adapter, web adapter, frontend). All 42 tests pass. A code review with exploratory browser testing found 2 bugs and 2 minor issues that need to be fixed before the story can be committed.

Resources

Test report: .agent-tests/2026-03-05-us1-review-test/report.md — full browser test protocol with screenshots
Screenshots: .agent-tests/2026-03-05-us1-review-test/screenshots/ — visual evidence (01–08)
US-1 spec: spec/userstories.md — acceptance criteria
Implementation plan: docs/agents/plan/2026-03-04-us1-create-event.md
Design system: spec/design-system.md
Primary file to modify: frontend/src/views/EventCreateView.vue
Secondary file to modify: frontend/index.html

Fix Instructions

Fix 1: Validation errors must clear reactively (Bug — Medium)

Problem: After submitting the empty form, validation errors appear correctly. But when the user then fills in the fields, the error messages persist until the next submit. See screenshot 05-form-filled.png — all fields filled, errors still visible.

Root cause: validate() (line 125) calls clearErrors() only on submit. There is no reactive clearing on input.

Fix: Add a watch on the form reactive object that clears the corresponding field error when the value changes. Do NOT re-validate on every keystroke — just clear the error for the field that was touched.

// Clear individual field errors when the user types
watch(() => form.title, () => { errors.title = '' })
watch(() => form.dateTime, () => { errors.dateTime = '' })
watch(() => form.expiryDate, () => { errors.expiryDate = '' })

Also clear serverError when any field changes, so stale server errors don't linger.

Test: Add a test to frontend/src/views/__tests__/EventCreateView.spec.ts that:

Submits the empty form (triggers validation errors)
Types into the title field
Asserts that the title error is cleared but other errors remain

Fix 2: Network errors must show a user-visible message (Bug — High)

Problem: When the backend is unreachable, the form submits silently — no error message, no feedback. The serverError element (line 77) exists but is never populated because openapi-fetch throws an unhandled exception on network errors instead of returning an { error } object.

Root cause: handleSubmit() (line 150) has no try-catch around the api.POST() call (line 164). When fetch fails (network error), openapi-fetch throws, the promise rejects, and the function exits without setting serverError or resetting submitting.

Fix: Wrap the API call and response handling in a try-catch:

try {
  const { data, error } = await api.POST('/events', { body: { ... } })

  submitting.value = false

  if (error) {
    // ... existing error handling ...
    return
  }

  if (data) {
    // ... existing success handling ...
  }
} catch {
  submitting.value = false
  serverError.value = 'Could not reach the server. Please try again.'
}

Test: Add a test to EventCreateView.spec.ts that mocks the API to throw (simulating network failure) and asserts that serverError text appears in the DOM.

Fix 3: Page title (Minor — Low)

Problem: frontend/index.html line 7 still has <title>Vite App</title>.

Fix: Change to <title>fete</title>. Also set lang="en" on the <html> tag (line 2 currently has lang="").

File: frontend/index.html

Fix 4: Favicon (Minor — Low)

Problem: The favicon is the Vite default. The project should either have its own favicon or remove the link entirely.

Fix: For now, remove the <link rel="icon" href="/favicon.ico"> line and delete frontend/public/favicon.ico if it exists. A proper favicon can be added later as part of branding work.

File: frontend/index.html, frontend/public/favicon.ico

Execution Order

Fix 3 + Fix 4 (trivial, index.html + favicon cleanup)
Fix 1 (reactive error clearing + test)
Fix 2 (try-catch + test)
Run all frontend tests: cd frontend && npm run test:unit
Verify visually with browser-interactive-testing skill:
- Start dev server, open /create
- Submit empty → errors appear
- Fill title → title error clears, others remain
- Fill all fields → all errors gone
- Submit with no backend → "Could not reach the server" message appears

Constraints

Follow existing code style and patterns in EventCreateView.vue
Do not refactor unrelated code
Do not add dependencies
Tests must follow existing test patterns in EventCreateView.spec.ts
TDD: write/update tests first, then fix

4.8 KiB Raw Blame History Unescape Escape