Ready2Blob/.planning/phases/10-content-clarity/10-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
10-content-clarity	02	execute	1		src/components/ui/RemoteNamePreview.tsx src/components/ui/RemoteNamePreview.test.tsx src/components/wizard/BackendSelectionStep.tsx src/components/wizard/BackendSelectionStep.test.tsx	true	UX-02	truths artifacts key_links Remote name field displays help text explaining what the name is and giving examples A live config preview below the field updates as user types, showing [remote-name] syntax When field is empty, preview shows grayed-out [my-remote] placeholder with guidance text When field has content, preview shows [typed-value] in monospace code style path provides exports min_lines src/components/ui/RemoteNamePreview.tsx Stateless display component for rclone config preview RemoteNamePreview 15 path provides contains src/components/ui/RemoteNamePreview.test.tsx Tests for empty-state and value-state rendering RemoteNamePreview path provides contains src/components/wizard/BackendSelectionStep.tsx watch('name') integration and RemoteNamePreview placement RemoteNamePreview from to via pattern src/components/wizard/BackendSelectionStep.tsx src/components/ui/RemoteNamePreview.tsx watch('name') value passed as prop watch('name') from to via pattern src/components/wizard/BackendSelectionStep.tsx TextFieldMD3 helpText prop on remote name field helpText=

Add a live rclone config preview below the remote name field and enrich the field with help text.

Purpose: Users immediately see how their chosen name will appear in the generated rclone.conf, reducing confusion about naming conventions. Output: RemoteNamePreview component, integrated into BackendSelectionStep with watch(), helpText on remote name field.

<execution_context> @C:/Users/SebastienQUEROL/.claude/get-shit-done/workflows/execute-plan.md @C:/Users/SebastienQUEROL/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/10-content-clarity/10-CONTEXT.md @.planning/phases/10-content-clarity/10-RESEARCH.md

From src/components/wizard/BackendSelectionStep.tsx (existing useForm destructure):

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm<RemoteNameFormValues>({
  resolver: zodResolver(remoteNameSchema),
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: { name: state.remote.name },
});

Add watch to the destructure: const { register, handleSubmit, watch, formState: { errors } } = useForm<...>(...) Then: const remoteName = watch('name');

From src/components/ui/TextFieldMD3.tsx (props interface — supports helpText):

// TextFieldMD3 accepts helpText prop — renders as small text below input
// CRITICAL: Do NOT pass a visible placeholder prop. TextFieldMD3 uses placeholder=" " 
// (single space) for the floating label CSS trick. The "e.g. my-backup" example
// must be conveyed through helpText, NOT native placeholder.

MD3 token classes for preview block (same as ReviewStep OutputBlock):

• bg-surface-variant — tinted background
• text-on-surface-variant — readable text on that background
• font-mono — code appearance

From BackendSelectionStep.test.tsx (selector pattern):

// Uses screen.getByRole('textbox') — single textbox assertion
// RemoteNamePreview MUST NOT render any form controls (input, textarea, contenteditable)

Task 1: Create RemoteNamePreview component with tests src/components/ui/RemoteNamePreview.tsx, src/components/ui/RemoteNamePreview.test.tsx - When value is empty string or whitespace-only, renders "[my-remote]" as placeholder with "Type a name to see how it appears in your config" guidance text - When value is "my-backup", renders "[my-backup]" in monospace style - When value is "azure-prod", renders "[azure-prod]" - Component renders only display elements (div, span) — never form controls Create `RemoteNamePreview` as a stateless functional component accepting `{ value: string }`.

Empty state: Show grayed-out [my-remote] text with a guidance message "Type a name to see how it appears in your config" below it. Use text-on-surface-variant/50 for the placeholder and text-on-surface-variant/40 for the guidance.

Value state: Show [{value}] in text-on-surface-variant color.

Container styling: mt-2 rounded-md bg-surface-variant px-3 py-2 text-xs font-mono

Write tests FIRST (RED), then implement (GREEN). Test file uses @testing-library/react render + screen assertions.

CRITICAL: RemoteNamePreview must render ONLY div/span elements. No input, textarea, or contenteditable — this would break BackendSelectionStep.test.tsx's getByRole('textbox') single-match assertion. npx vitest run src/components/ui/RemoteNamePreview.test.tsx RemoteNamePreview renders empty-state placeholder when value is empty, and [value] when value is provided. All tests pass.

Task 2: Integrate RemoteNamePreview and helpText into BackendSelectionStep src/components/wizard/BackendSelectionStep.tsx, src/components/wizard/BackendSelectionStep.test.tsx In BackendSelectionStep.tsx: 1. Add `watch` to the useForm destructure 2. Add `const remoteName = watch('name');` after the useForm call 3. Add `helpText` prop to the remote name TextFieldMD3: `"This becomes the section header [name] in your rclone.conf. Example: azure-prod, backup-s3. Letters, numbers, dashes, underscores only."` (per user decision) 4. Import and render `` directly below the TextFieldMD3

In BackendSelectionStep.test.tsx: Add a test case that verifies the live preview updates:

1. Render BackendSelectionStep
2. Assert that the empty-state placeholder text is visible (e.g., "[my-remote]")
3. Type "test-remote" into the textbox
4. Assert that "[test-remote]" is visible in the DOM

IMPORTANT: Do NOT add a visible placeholder prop to TextFieldMD3. The floating label CSS trick depends on placeholder=" ". The "e.g. my-backup" example is conveyed via helpText. IMPORTANT: Do NOT use useWatch — plain watch('name') from useForm is correct here. npx vitest run src/components/wizard/BackendSelectionStep.test.tsx Remote name field shows helpText. RemoteNamePreview renders below the field and updates live as user types. All BackendSelectionStep tests pass.

1. `npx vitest run src/components/ui/RemoteNamePreview.test.tsx` — preview component tests pass 2. `npx vitest run src/components/wizard/BackendSelectionStep.test.tsx` — integration tests pass 3. `npx vitest run` — full suite green 4. Empty field shows [my-remote] placeholder with guidance text 5. Typing a name shows [typed-name] in real-time

<success_criteria>

• RemoteNamePreview component exists and is tested
• BackendSelectionStep shows helpText on remote name field
• Live preview below field updates as user types
• Empty state shows grayed placeholder with guidance
• No existing tests broken (especially getByRole('textbox') single match) </success_criteria>

After completion, create `.planning/phases/10-content-clarity/10-02-SUMMARY.md`