docs(10-02): complete live remote name preview plan

- Create 10-02-SUMMARY.md with task details and deviations - Update STATE.md: add decision, session info, update progress to 100% - Update ROADMAP.md: phase 10 marked complete (3/3 summaries) - Update REQUIREMENTS.md: mark UX-02 complete
2026-04-01 12:58:27 +02:00
parent 58d96cbb48
commit 74fa072e10
4 changed files with 102 additions and 11 deletions
@@ -0,0 +1,90 @@
+---
+phase: 10-content-clarity
+plan: "02"
+subsystem: wizard-ui
+tags: [live-preview, ux, form-fields, tdd]
+dependency_graph:
+  requires: []
+  provides: [RemoteNamePreview component, live config preview in BackendSelectionStep]
+  affects: [src/components/wizard/BackendSelectionStep.tsx]
+tech_stack:
+  added: []
+  patterns: [stateless display component, react-hook-form watch(), TDD red-green]
+key_files:
+  created:
+    - src/components/ui/RemoteNamePreview.tsx
+    - src/components/ui/RemoteNamePreview.test.tsx
+  modified:
+    - src/components/wizard/BackendSelectionStep.tsx
+    - src/components/wizard/BackendSelectionStep.test.tsx
+    - src/components/wizard/RemoteConfigStep.test.tsx
+decisions:
+  - "RemoteNamePreview renders only div/span — no form controls, preserving single-textbox selector contract"
+  - "watch('name') from useForm used for live preview — no useWatch, per plan spec"
+  - "helpText uses full sentence explaining rclone.conf syntax and naming constraints"
+metrics:
+  duration_minutes: 8
+  tasks_completed: 2
+  files_created: 2
+  files_modified: 3
+  completed_date: "2026-04-01"
+requirements_satisfied: [UX-02]
+---
+
+# Phase 10 Plan 02: Live Remote Name Preview Summary
+
+**One-liner:** Stateless RemoteNamePreview component with empty/value states integrated into BackendSelectionStep via watch('name') and enriched with helpText.
+
+## Tasks Completed
+
+| # | Task | Commit | Status |
+|---|------|--------|--------|
+| 1 | Create RemoteNamePreview component with TDD | 3c9c5fd | Done |
+| 2 | Integrate RemoteNamePreview and helpText into BackendSelectionStep | fefab65 | Done |
+
+## What Was Built
+
+**RemoteNamePreview component** (`src/components/ui/RemoteNamePreview.tsx`):
+- Stateless functional component accepting `{ value: string }`
+- Empty/whitespace state: displays grayed `[my-remote]` placeholder with "Type a name to see how it appears in your config" guidance
+- Value state: displays `[typed-value]` in on-surface-variant color
+- Container styling: `mt-2 rounded-md bg-surface-variant px-3 py-2 text-xs font-mono`
+- Renders only div/span elements — never form controls
+
+**BackendSelectionStep integration**:
+- Added `watch` to useForm destructure
+- Added `const remoteName = watch('name')` for reactive updates
+- Added `helpText` prop to remote name TextFieldMD3: full sentence explaining rclone.conf [name] syntax
+- Added `<RemoteNamePreview value={remoteName} />` below the TextFieldMD3
+- Note: description paragraph and RemoteNamePreview import were committed as part of Plan 10-01 linter sweep (commit 4b837b1)
+
+## Tests
+
+- `RemoteNamePreview.test.tsx`: 9 tests (empty state x3, value state x3, element type constraints x3)
+- `BackendSelectionStep.test.tsx`: 2 new integration tests (empty-state placeholder, live update on type)
+- Full suite: 202 tests pass
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Fixed getByText(/required/i) ambiguity in BackendSelectionStep.test.tsx**
+- **Found during:** Task 2
+- **Issue:** New description paragraph ("...credentials are required in the next step") caused `getByText(/required/i)` to match two elements, breaking existing "shows inline error" test
+- **Fix:** Changed to `screen.getByRole('alert').textContent.toMatch(/required/i)` for precise alert text assertion
+- **Files modified:** `src/components/wizard/BackendSelectionStep.test.tsx`
+- **Commit:** fefab65
+
+**2. [Rule 1 - Bug] Fixed getByLabelText ambiguity in RemoteConfigStep.test.tsx**
+- **Found during:** Task 2 (full suite run)
+- **Issue:** Linter-added paragraphs in RemoteConfigStep, combined with partial `{ selector: 'input' }` fix from 10-03 commits, left GCS, B2, and S3-region VALID-01 tests failing with "Found multiple elements"
+- **Fix:** Added `{ selector: 'input' }` to all remaining `getByLabelText` calls in BACK-03, BACK-04, and VALID-01 sections
+- **Files modified:** `src/components/wizard/RemoteConfigStep.test.tsx`
+- **Commit:** fefab65 (included in Task 2 commit via linter application)
+
+## Self-Check: PASSED
+
+- src/components/ui/RemoteNamePreview.tsx: FOUND
+- src/components/ui/RemoteNamePreview.test.tsx: FOUND
+- Commit 3c9c5fd (Task 1): FOUND
+- Commit fefab65 (Task 2): FOUND