# Phase 3: Wizard UI - Context

**Gathered:** 2026-03-26
**Status:** Ready for planning

<domain>
## Phase Boundary

Multi-step wizard UI from backend selection through deployment options. Delivers the full navigation shell (Backend → Remote Config → Deployment) with all form fields, state wiring to the existing store, and step-to-step navigation. Review/download is Phase 4.

</domain>

<decisions>
## Implementation Decisions

### Backend Selection Layout
- Clickable card grid — 3 cards for Azure Blob, Amazon S3, S3-Compatible
- Clicking a card auto-advances to the config step (no explicit Next button on step 1)
- Remote name field (WIZD-04) appears at the TOP of step 1, before the backend cards
- Name field validated: alphanumeric, dashes, underscores only — inline error shown after first Next attempt

### Azure Credential Toggle
- Segmented control / radio toggle to switch between "SAS URL" and "Access Key" auth methods
- Default auth method: SAS URL (pre-selected on first load)
- Switching auth method PRESERVES both fields in state (inactive field hidden but value kept) — generator must strip the inactive field at config generation time
- All password-type fields (access key, SAS URL, S3 secret) have a show/hide eye toggle

### Step Progress Indicator
- Labeled breadcrumb: **1. Backend  ›  2. Remote Config  ›  3. Deployment**
- Completed steps show checkmark + muted text (e.g., "✓ Backend") and are clickable to jump back
- Current step shown as bold/active
- Clicking a completed step navigates directly to it (not just Back button)

### Forward Navigation Validation
- Required fields: Next button blocked if required fields are empty/invalid
- Error display: errors shown ONLY after first Next click, then update live as user fixes them (no errors while initially filling)
- Inline error messages below each invalid field
- Backend change (via breadcrumb click-back): clears `remote.params` since fields differ per backend; deployment options preserved
- Remote name validation shows inline error below the field after first Next attempt

### Claude's Discretion
- Exact Tailwind styling, card visual design, color palette
- Loading/transition animations between steps
- S3 and S3-Compatible config form layout (they share most fields)
- Deployment options step layout (fields are already defined in store: includeInstall, configPath, scriptTargets)

</decisions>

<code_context>
## Existing Code Insights

### Reusable Assets
- `useWizard()` hook (src/store/context.tsx): provides `state` and `dispatch` — all wizard components use this
- `wizardReducer` actions: `SET_STEP`, `SET_BACKEND_TYPE`, `SET_REMOTE_NAME`, `SET_REMOTE_PARAMS`, `SET_DEPLOYMENT`, `RESET` — all needed actions already exist
- `BACKEND_REGISTRY` (src/schemas/registry.ts): drives config form rendering — field definitions (key, label, inputType, required, options) per backend type
- `INITIAL_STATE.deployment.scriptTargets` defaults to `['intune', 'rmm']` — users deselect rather than discover

### Established Patterns
- Tailwind v4 via `@tailwindcss/vite` plugin — no config file, utility-first
- `WizardProvider` wraps `App` — wizard state always available in all components
- `remote.params: Record<string, string>` — flat key/value map, keys must match rclone config keys from registry
- Azure has two mutually exclusive auth fields: `key` and `sas_url` — both stored in `remote.params`, only active one used by generator

### Integration Points
- `src/App.tsx`: currently a placeholder shell — wizard step routing goes here
- `src/store/reducer.ts`: `SET_BACKEND_TYPE` already resets nothing — Phase 3 must handle params reset via `SET_REMOTE_PARAMS` when backend changes
- `src/schemas/index.ts`: `BACKEND_SCHEMAS` for Zod validation — forms use these schemas for react-hook-form validation

</code_context>

<specifics>
## Specific Ideas

- Backend cards should follow WIZD-01 ordering: Azure Blob and S3 appear first
- The toggle between SAS URL and Access Key is a UI-level concern — registry has both fields; generator (Phase 2 complete) already handles which field is present
- Step 3 (Deployment Options) maps directly to `state.deployment` — `includeInstall` toggle, `configPath` radio, `scriptTargets` checkboxes

</specifics>

<deferred>
## Deferred Ideas

None — discussion stayed within phase scope.

</deferred>

---

*Phase: 03-wizard-ui*
*Context gathered: 2026-03-26*