kawa
0c27818030
- Create 11-02-SUMMARY.md documenting POLISH-03 and POLISH-04 completion - Update STATE.md: phase 11 complete, 100% progress, new decisions added - Update ROADMAP.md: phase 11 plan progress (2/2 complete) - Update REQUIREMENTS.md: mark POLISH-03 and POLISH-04 complete
121 lines
6.8 KiB
Markdown
121 lines
6.8 KiB
Markdown
# Roadmap: Ready2Blob
|
||
|
||
## Milestones
|
||
|
||
- ✅ **v1.0 MVP** — Phases 1–4 (shipped 2026-03-27)
|
||
- ✅ **v1.1 Backlog & Tech Debt** — Phases 5–7 (shipped 2026-03-31)
|
||
- **v1.2 UI Polish & Clarity** — Phases 8–11 (in progress)
|
||
|
||
## Phases
|
||
|
||
<details>
|
||
<summary>✅ v1.0 MVP (Phases 1–4) — SHIPPED 2026-03-27</summary>
|
||
|
||
- [x] Phase 1: Foundation (4/4 plans) — completed 2026-03-26
|
||
- [x] Phase 2: Generators (4/4 plans) — completed 2026-03-26
|
||
- [x] Phase 3: Wizard UI (5/5 plans) — completed 2026-03-27
|
||
- [x] Phase 4: Review, Download & Security (5/5 plans) — completed 2026-03-27
|
||
|
||
Full phase details: [.planning/milestones/v1.0-ROADMAP.md](milestones/v1.0-ROADMAP.md)
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary>✅ v1.1 Backlog & Tech Debt (Phases 5–7) — SHIPPED 2026-03-31</summary>
|
||
|
||
- [x] Phase 5: Tech Debt (4/4 plans) — completed 2026-03-30
|
||
- [x] Phase 6: New Backends (4/4 plans) — completed 2026-03-31
|
||
- [x] Phase 7: Validation & UX Polish (3/3 plans) — completed 2026-03-31
|
||
|
||
Full phase details: [.planning/milestones/v1.1-ROADMAP.md](milestones/v1.1-ROADMAP.md)
|
||
|
||
</details>
|
||
|
||
### v1.2 UI Polish & Clarity (In Progress)
|
||
|
||
**Milestone Goal:** Transform the bare functional wizard into a polished, self-explanatory experience with Material Design 3 styling, dark mode, contextual help, and responsive layout.
|
||
|
||
- [x] **Phase 8: Theme Foundation** - MD3 color token system and dark mode infrastructure (completed 2026-04-01)
|
||
- [x] **Phase 9: MD3 Components** - UI primitives and component migration to semantic tokens (completed 2026-04-01)
|
||
- [x] **Phase 10: Content & Clarity** - Intro section, step descriptions, and contextual help (completed 2026-04-01)
|
||
- [x] **Phase 11: Polish & Responsiveness** - Mobile layout, focus states, transitions, scroll-to-error (completed 2026-04-01)
|
||
|
||
## Phase Details
|
||
|
||
### Phase 8: Theme Foundation
|
||
**Goal**: App has a complete MD3 color token system and working dark mode toggle with no flash of unstyled content
|
||
**Depends on**: Phase 7 (v1.1 complete)
|
||
**Requirements**: THEME-01, THEME-02
|
||
**Success Criteria** (what must be TRUE):
|
||
1. All color values in the app flow from CSS custom properties defined in a single token file, not from hardcoded Tailwind color classes
|
||
2. User can toggle between System, Light, and Dark themes via a visible control, and the entire UI responds immediately
|
||
3. Theme preference persists in localStorage and applies on reload without any flash of wrong theme
|
||
4. Tailwind v4 `@theme` directive maps MD3 token names to utility classes (e.g., `bg-surface`, `text-on-primary`)
|
||
**Plans:** 2/2 plans complete
|
||
Plans:
|
||
- [ ] 08-01-PLAN.md — Token system, flash prevention, ThemeToggle component
|
||
- [ ] 08-02-PLAN.md — Color class migration across all components
|
||
|
||
### Phase 9: MD3 Components
|
||
**Goal**: All interactive elements use MD3-styled primitives with consistent visual language across the entire wizard
|
||
**Depends on**: Phase 8
|
||
**Requirements**: COMP-01, COMP-02, COMP-03, COMP-04, DEBT-01
|
||
**Success Criteria** (what must be TRUE):
|
||
1. Text inputs render as outlined fields with floating labels that animate on focus and when the field has content
|
||
2. Buttons visually distinguish primary (filled), secondary (outlined), and tertiary (text) actions across all wizard steps
|
||
3. Backend selection cards and output blocks display MD3 elevation with tonal surface tint and consistent shape tokens
|
||
4. Step indicator shows numbered circles connected by lines, with checkmarks on completed steps, highlight on current, and muted future steps
|
||
5. FieldRenderer produces identical `aria-label` attributes for both text-branch and select-branch inputs
|
||
**Plans:** 5/5 plans complete
|
||
Plans:
|
||
- [x] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix
|
||
- [x] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors
|
||
- [x] 09-03-PLAN.md — Integration: wire TextFieldMD3 + button styles + elevation into all wizard steps
|
||
- [x] 09-04-PLAN.md — Gap closure: Replace BackendSelectionStep plain input with TextFieldMD3
|
||
- [x] 09-05-PLAN.md — Gap closure: Tooltip hover behavior + icon placement beside helpText
|
||
|
||
### Phase 10: Content & Clarity
|
||
**Goal**: A first-time visitor understands what Ready2Blob does and what each wizard step expects without external documentation
|
||
**Depends on**: Phase 8 (tokens needed for consistent styling of new content)
|
||
**Requirements**: UX-01, UX-02, UX-03, UX-04
|
||
**Success Criteria** (what must be TRUE):
|
||
1. Landing view shows an intro section explaining what Ready2Blob does with a clear call-to-action to start the wizard
|
||
2. Remote name field displays a placeholder example, help text, and a live preview showing how the name appears in `[remote-name]` config syntax
|
||
3. Every wizard step has a 1-2 sentence description below the heading explaining what the user is doing and why
|
||
4. All backend credential fields have contextual help text explaining what to enter and where to find the value
|
||
**Plans:** 3/3 plans complete
|
||
Plans:
|
||
- [ ] 10-01-PLAN.md — Intro section with CTA and step descriptions for all 4 steps
|
||
- [ ] 10-02-PLAN.md — Remote name live config preview with helpText
|
||
- [ ] 10-03-PLAN.md — Credential field tooltipText and helpText enrichment
|
||
|
||
### Phase 11: Polish & Responsiveness
|
||
**Goal**: The wizard feels production-ready on any device with smooth interactions and accessible keyboard navigation
|
||
**Depends on**: Phase 9, Phase 10
|
||
**Requirements**: POLISH-01, POLISH-02, POLISH-03, POLISH-04
|
||
**Success Criteria** (what must be TRUE):
|
||
1. On a mobile viewport (< 640px), backend cards stack vertically, form fields span full width, step indicator collapses, and buttons stretch to fill width
|
||
2. Every interactive element shows a visible 3px MD3 focus outline when navigated via keyboard (using `focus-visible`)
|
||
3. Step transitions use a subtle fade/slide animation that is suppressed when the user has `prefers-reduced-motion` enabled
|
||
4. When form validation fails, the view auto-scrolls to the first field with an error
|
||
**Plans:** 2/2 plans complete
|
||
Plans:
|
||
- [ ] 11-01-PLAN.md — Mobile responsive layout + MD3 focus-visible indicators
|
||
- [ ] 11-02-PLAN.md — Step transition animation + auto-scroll to first error
|
||
|
||
## Progress
|
||
|
||
| Phase | Milestone | Plans Complete | Status | Completed |
|
||
|-------|-----------|----------------|--------|-----------|
|
||
| 1. Foundation | v1.0 | 4/4 | Complete | 2026-03-26 |
|
||
| 2. Generators | v1.0 | 4/4 | Complete | 2026-03-26 |
|
||
| 3. Wizard UI | v1.0 | 5/5 | Complete | 2026-03-27 |
|
||
| 4. Review, Download & Security | v1.0 | 5/5 | Complete | 2026-03-27 |
|
||
| 5. Tech Debt | v1.1 | 4/4 | Complete | 2026-03-30 |
|
||
| 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 |
|
||
| 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 |
|
||
| 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
|
||
| 9. MD3 Components | v1.2 | 5/5 | Complete | 2026-04-01 |
|
||
| 10. Content & Clarity | v1.2 | 3/3 | Complete | 2026-04-01 |
|
||
| 11. Polish & Responsiveness | 2/2 | Complete | 2026-04-01 | - |
|