---
phase: 07-validation-ux-polish
plan: "02"
subsystem: ui
tags: [react, typescript, vitest, tooltips, ux, rclone, wizard]

# Dependency graph
requires:
  - phase: 07-01
    provides: tooltipText field on FieldDef interface + VALID-01 regex validation in buildZodSchema

provides:
  - tooltipText populated for azureblob.sas_url, azureblob.key, onedrive.token in BACKEND_REGISTRY
  - ⓘ toggle button + inline tooltip panel in FieldRenderer (text/select branches)
  - ⓘ toggle button + inline tooltip panel in PasswordField (tooltipText prop)
  - AzureAuthToggle reads tooltipText from BACKEND_REGISTRY and passes to PasswordField
  - SftpAuthToggle showAuthTip state with ⓘ button above segmented auth-method control

affects: [future wizard UI phases, any phase using PasswordField or FieldRenderer]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "tooltipText sourced from BACKEND_REGISTRY, passed as prop to PasswordField — single source of truth"
    - "showTooltip useState per FieldRenderer/PasswordField instance — no global tooltip state"
    - "showAuthTip useState in SftpAuthToggle for section-level tooltip above segmented control"
    - "ⓘ button outside label element (sibling in flex container) to avoid label text contamination"

key-files:
  created: []
  modified:
    - src/schemas/registry.ts
    - src/components/ui/FieldRenderer.tsx
    - src/components/ui/PasswordField.tsx
    - src/components/wizard/AzureAuthToggle.tsx
    - src/components/wizard/SftpAuthToggle.tsx

key-decisions:
  - "ⓘ button placed as sibling (outside) label element in a flex container — prevents aria-label text from contaminating label, keeps accessible aria-label on button"
  - "AzureAuthToggle reads tooltipText from BACKEND_REGISTRY at runtime (not hardcoded) — ensures tooltip stays in sync with registry"
  - "SFTP auth-method tooltip is section-level (above segmented control), not field-level — represents explanation of the whole auth strategy choice"

patterns-established:
  - "Per-field tooltip: tooltipText on FieldDef → FieldRenderer passes to PasswordField or renders inline for text/select"
  - "Section-level tooltip: showAuthTip state in SftpAuthToggle above segmented control"

requirements-completed: [UX-01]

# Metrics
duration: 2min
completed: 2026-03-31
---

# Phase 7 Plan 02: UX Tooltips Summary

**Contextual ⓘ tooltips wired to BACKEND_REGISTRY for SAS URL, access key, SFTP auth method, and OneDrive OAuth token fields**

## Performance

- **Duration:** 2 min
- **Started:** 2026-03-31T11:32:35Z
- **Completed:** 2026-03-31T11:33:46Z
- **Tasks:** 2 (Task 3 is checkpoint — awaiting human verify)
- **Files modified:** 5

## Accomplishments
- BACKEND_REGISTRY populated with tooltipText for azureblob.sas_url, azureblob.key, and onedrive.token
- PasswordField and FieldRenderer render ⓘ buttons with toggle panels when tooltipText is present
- AzureAuthToggle reads tooltipText from BACKEND_REGISTRY and passes to PasswordField calls
- SftpAuthToggle adds showAuthTip state with ⓘ button above the Password/Private Key segmented control
- All 159 tests pass (33 in RemoteConfigStep including all UX-01 tooltip toggle tests)

## Task Commits

Each task was committed atomically:

1. **Task 1: Populate tooltipText in registry + add ⓘ to FieldRenderer and PasswordField** - `9aae9e3` (feat)
2. **Task 2: Wire AzureAuthToggle + add SFTP auth-method tooltip** - `7c10600` (feat)

_Note: Task 1 was pre-implemented from Plan 07-01 preparation and committed as part of that work session. Task 2 (SftpAuthToggle showAuthTip state) was the remaining piece implemented in this plan._

## Files Created/Modified
- `src/schemas/registry.ts` - tooltipText populated for azureblob.sas_url, azureblob.key, onedrive.token
- `src/components/ui/FieldRenderer.tsx` - ⓘ button + conditional tooltip panel for text/select; passes tooltipText to PasswordField
- `src/components/ui/PasswordField.tsx` - tooltipText prop + showTooltip state + ⓘ button + tooltip panel
- `src/components/wizard/AzureAuthToggle.tsx` - reads sasUrlTooltip/keyTooltip from BACKEND_REGISTRY, passes to PasswordField
- `src/components/wizard/SftpAuthToggle.tsx` - showAuthTip state + ⓘ button + explanation panel above segmented control

## Decisions Made
- ⓘ button placed as sibling to label (not inside) in a flex container — prevents label text contamination; aria-label on the button itself
- AzureAuthToggle reads tooltipText from BACKEND_REGISTRY at runtime instead of hardcoding — keeps tooltip content in sync with registry as single source of truth
- SFTP auth-method tooltip is section-level (one ⓘ above the whole segmented control), not field-level — correctly scoped to the auth method choice, not a specific credential field

## Deviations from Plan

None - plan executed exactly as written. Task 1 (registry + FieldRenderer + PasswordField) was already complete from Plan 07-01 work. Task 2 (AzureAuthToggle was done; SftpAuthToggle showAuthTip implemented cleanly).

## Issues Encountered

None.

## User Setup Required

None - no external service configuration required.

## Next Phase Readiness
- Phase 7 automated tasks complete (VALID-01 + UX-01 implemented and tested)
- Task 3 (human verify checkpoint) awaits: dev server verification of tooltip toggle and inline validation in browser
- After human approval, Phase 7 is complete and UX-01 requirement satisfied

---
*Phase: 07-validation-ux-polish*
*Completed: 2026-03-31*