231 lines
13 KiB
Markdown
231 lines
13 KiB
Markdown
# Session log
|
||
|
||
This file tracks work completed across Claude Code sessions. Every agent MUST
|
||
read this file before starting work and update it after completing work.
|
||
|
||
> Earlier sessions (2026-03-24 through 2026-03-26d) archived in
|
||
> `docs/memory/archive/sessions-through-2026-03-26.md`
|
||
|
||
## Format
|
||
|
||
Each entry follows this structure:
|
||
```
|
||
### Session [date] — [brief description]
|
||
**Agent(s):** [which agents were active]
|
||
**Work completed:**
|
||
- [bullet points of what was done]
|
||
**Decisions made:**
|
||
- [any design/architecture decisions with brief rationale]
|
||
**Open questions:**
|
||
- [anything unresolved that needs human input]
|
||
**Next steps:**
|
||
- [what should happen next]
|
||
```
|
||
|
||
---
|
||
|
||
## Sessions
|
||
|
||
### Session 2026-03-29 — Wizard Phase 0 + Phase 1 (foundation + IntroStep)
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- **Phase 0 — Foundation components:**
|
||
- WizardLayout template: 5 layout variants (centered-form, list-map, list-detail, grid-sidebar, detail-toggles), nav slot, sticky help bar, back link, progress stepper + running total, `<main>` landmark
|
||
- Collapse atom: thin MUI Collapse wrapper with unmountOnExit for progressive disclosure
|
||
- ToggleButtonGroup atom: exclusive single-select with fieldset/legend a11y, FA brand styling, descriptions, error state
|
||
- **Phase 1 — IntroStep page:**
|
||
- Wizard step 1 using centered-form layout
|
||
- forWhom + hasPassedAway ToggleButtonGroups with progressive disclosure via Collapse
|
||
- Auto-sets hasPassedAway="no" when forWhom="myself" (pre-planning)
|
||
- Grief-sensitive copy adapts subheading per selection state
|
||
- `<form>` wrapper for landmark + Enter-to-submit
|
||
- aria-live on subheading, tabIndex=-1 on heading for focus management
|
||
- Pure presentation — props in, callbacks out
|
||
- **Audit:** IntroStep scored 18/20, fixed P1 (`<main>` landmark) and P2 (`<form>` wrapper) → 20/20
|
||
|
||
**Decisions made:**
|
||
- Templates live at `src/components/templates/` (new atomic tier)
|
||
- Pages live at `src/components/pages/` (new atomic tier)
|
||
- WizardLayout uses `<main>` wrapper around all variants (not per-variant)
|
||
- ToggleButtonGroup uses `HTMLFieldSetElement` ref (not `HTMLDivElement`) due to `component="fieldset"`
|
||
|
||
**Open questions:**
|
||
- None
|
||
|
||
**Next steps:**
|
||
- Phase 2: Build Step 2 (Providers) — list-map layout variant
|
||
- Continue building wizard steps in spec order
|
||
- Retroactive review backlog still pending (molecules audit, organisms normalize)
|
||
|
||
---
|
||
|
||
### Session 2026-03-27b — Retroactive review Phase 1 + 2.1, wizard planning
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- **Retroactive review (morning housekeeping):**
|
||
- Phase 1.1: Atoms normalize — 3 fixes (Input spacing, Card focus token, unused import)
|
||
- Phase 1.2: Atom audits — Button 20/20, Input 20/20, Card 18→20/20 (2 P1 fixes: keyboard activation + responsive padding)
|
||
- Phase 2.1: Molecules normalize — 7 fixes (StepIndicator timing/spacing/font, ProviderCardCompact star colour + icon size)
|
||
- **Wizard flow documentation review:**
|
||
- Read flow-spec.md (854 lines), flow-definition.yaml (616 lines), 3 representative step YAMLs
|
||
- Saved reference memories for flow documentation structure and project context
|
||
- **Layout analysis:**
|
||
- Analysed 5 layout reference images in /documentation/layouts/
|
||
- Identified 5 layout variants: Centered Form, List+Map, List+Detail, Grid+Sidebar, Detail+Toggles
|
||
- Mapped each layout to specific wizard steps
|
||
- Saved layout reference to memory
|
||
- **Implementation plan:**
|
||
- Created comprehensive plan at .claude/plans/validated-brewing-matsumoto.md
|
||
- Phase 0 (foundation): WizardLayout template, Collapse atom, ToggleButtonGroup atom
|
||
- Phases 1–7: Steps in build order with component dependencies
|
||
- ~11 new components, ~16 sessions estimated
|
||
- Plan approved by user, updated with layout variants
|
||
|
||
**Decisions made:**
|
||
- Step pages live at `src/components/pages/` (new atomic tier)
|
||
- CardSelectionGrid extracted after step 3 (not upfront)
|
||
- Build from specs, Figma for structural shape only
|
||
- Steps are pure presentation (props in, callbacks out) — no routing/state/GraphQL yet
|
||
|
||
**Open questions:**
|
||
- Hardcoded fontWeight on price typography varies across molecules — still unresolved from normalize
|
||
|
||
**Next steps:**
|
||
- Start Phase 0: Build WizardLayout template (5 variants), Collapse atom, ToggleButtonGroup atom
|
||
- Then Phase 1: Step 1 (Intro) — first wizard step
|
||
|
||
---
|
||
|
||
### Session 2026-03-27b (earlier) — Retroactive review Phase 1 + 2.1
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- **Phase 1.1 — Atoms normalize:** Scanned all 11 atoms across 7 dimensions. Fixed 3 issues: Input raw px spacing → MUI units, Card focus-visible token → CSS var, removed unused Theme import.
|
||
- **Phase 1.2 — Atom audits (high priority):** Button 20/20, Input 20/20, Card 18/20 → fixed 2 P1s → 20/20.
|
||
- Card P1 fix: Added Enter/Space keyboard activation for interactive cards (WCAG 2.1.1)
|
||
- Card P1 fix: Responsive padding — 16px mobile / 24px desktop (convention alignment)
|
||
- **Phase 2.1 — Molecules normalize:** Scanned all 8 molecules across 7 dimensions. Fixed 7 issues:
|
||
- StepIndicator: transition 300ms → 150ms, raw px → MUI spacing, borderRadius → token, mobile font 10px → 11px (D020 floor)
|
||
- ProviderCardCompact: star colour → warning.main (match ProviderCard), meta icon 16px → 14px (match tier)
|
||
|
||
**Decisions made:**
|
||
- None (all fixes are convention enforcement, no new decisions)
|
||
|
||
**Open questions:**
|
||
- Hardcoded fontWeight on price typography varies across molecules (500 vs 600) — intentional design variation or normalize?
|
||
- Remaining atom audits (Typography, Badge, Chip, Switch, Radio, IconButton, Divider, Link) — all low/medium priority wrappers, likely 20/20. Run if time permits.
|
||
|
||
**Next steps:**
|
||
- Phase 2.2: Audit priority molecules (ServiceOption, AddOnOption, ProviderCardCompact)
|
||
- Phase 3: Organisms normalize + audit (Navigation, ServiceSelector, FuneralFinderV3)
|
||
- Phase 4: Cross-cutting (adapt, typeset, preflight)
|
||
- New component work as user directs
|
||
|
||
---
|
||
|
||
### Session 2026-03-27a — Workflow improvement (5-phase infrastructure upgrade)
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- **Phase 1A:** Archived session log — moved 25 old sessions to `docs/memory/archive/sessions-through-2026-03-26.md`, trimmed active log from 1096 to 91 lines
|
||
- **Phase 1B:** Documented token access convention as D031 — `theme.palette.*` for semantic tokens, `var(--fa-*)` for component tokens. Fixed Badge.tsx colour map inconsistency (unified to CSS vars). Updated component-conventions.md.
|
||
- **Phase 2:** Added ESLint v9 (flat config) + Prettier. Installed `eslint`, `@eslint/js`, `typescript-eslint`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, `eslint-plugin-jsx-a11y`, `eslint-config-prettier`, `prettier`. Ran initial format pass across all 54 .tsx files. Fixed 5 empty interface warnings (Switch, Radio, Divider, IconButton, Link). Added `lint`, `lint:fix`, `format`, `format:check` scripts.
|
||
- **Phase 3:** Created 7 new impeccable-adapted skills: `/polish`, `/harden`, `/normalize`, `/clarify`, `/typeset`, `/quieter`, `/adapt`. Downloaded Vercel reference docs (web-design-guidelines, react-best-practices). Updated `/audit` and `/review-component` with optional Vercel references. Total skills: 19.
|
||
- **Phase 4:** Added Husky v9 + lint-staged for pre-commit automation. ESLint + Prettier auto-run on staged files. Updated `/preflight` skill with ESLint and Prettier checks (now 8 checks total).
|
||
- **Phase 5:** Added Vitest v4 + jsdom + @testing-library/react. Created `vitest.config.ts` and test setup. Created `/write-tests` skill for test generation guidance. Added `test` and `test:watch` scripts. Note: `@storybook/test-runner` deferred — requires Storybook 10+ (we have 8).
|
||
|
||
**Decisions made:**
|
||
- D031: Token access convention — theme accessors for semantic, CSS vars for component (see decisions-log)
|
||
- ESLint story files exempt from `react-hooks/rules-of-hooks` and `no-console` (Storybook render pattern)
|
||
- Empty `interface extends` changed to `type =` for ESLint compliance (5 wrapper atoms)
|
||
- Storybook test-runner deferred until Storybook upgrade to v10
|
||
- Prettier printWidth set to 100 (matching observed code style)
|
||
|
||
**Also completed:**
|
||
- Created `docs/reference/component-lifecycle.md` — 10-stage quality gate sequence (build → QA → polish → present → iterate → normalize → preflight → commit)
|
||
- Created `docs/reference/retroactive-review-plan.md` — plan to review 30+ existing components (~3.5 sessions)
|
||
- Updated `/build-atom`, `/build-molecule`, `/build-organism` to include internal QA stages automatically
|
||
- Added lifecycle reference as CLAUDE.md critical rule #8
|
||
|
||
**Open questions:**
|
||
- Storybook upgrade to v10 — would unlock `@storybook/test-runner` for CI test execution
|
||
- FuneralFinder version decision (v1/v2/v3) — needed before retroactive review of organisms
|
||
- Review depth — P0/P1 only (faster) or include P2?
|
||
|
||
**Next steps (pick up in next session):**
|
||
- Start retroactive review: `/normalize atoms` → `/audit` high-priority atoms
|
||
- Interleave with new component work if preferred
|
||
- Use `/write-tests` on interactive components as time permits
|
||
|
||
---
|
||
|
||
### Session 2026-03-26f — FuneralFinder v3 build + polish
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- Created FuneralFinderV3 — clean vertical form based on user's Figma layout (5919:29445), restyled to FA design system
|
||
- Two side-by-side StatusCards (Immediate Need default-selected / Pre-planning), stack on mobile
|
||
- Standard card container (surface.raised, card shadow) — initially built with glassmorphism, user redirected to standard palette
|
||
- Overline section labels (text.secondary) for "How Can We Help", "Funeral Type", "Location"
|
||
- Standard outlined fields (white bg, neutral border, brand border on focus, no focus ring per user request)
|
||
- Location input with LocationOnOutlined pin icon
|
||
- CTA "Find Funeral Directors →" always active — validates on click, scrolls to first missing field
|
||
- Dividers after header and before CTA for visual rhythm
|
||
- Funeral type options: same as V2 + "Show all options"
|
||
- WAI-ARIA roving tabindex on radiogroup, aria-labelledby via React.useId()
|
||
- Semantic tokens throughout (border-brand, surface-warm, text-brand, interactive-focus, text-disabled)
|
||
- Error messages conditionally rendered in aria-live regions (brand copper tone — gentle validation)
|
||
- First pass scored Critique 33/40, Audit 13/20 → iterated on all findings → re-audit 18/20
|
||
- Polish pass: revised copy, fixed spacing, defaults, label rename
|
||
|
||
**Decisions made:**
|
||
- Status cards replace V2's step-circle + dropdown — simpler, more visual, side-by-side on desktop
|
||
- Standard design system styling (user clarified Figma was for structure only, not colour scheme)
|
||
- "Immediate Need" selected by default — most common use case, status error essentially unreachable
|
||
- Section renamed from "Current Status" (programmatic) to "How Can We Help" (warm, human)
|
||
- Copy: "A recent loss or one expected soon" — "expected soon" differentiates from pre-planning gently
|
||
- Copy: "Planning ahead for yourself or a loved one" — "planning ahead" reinforces non-urgency
|
||
- No sequential unlock — all fields accessible immediately
|
||
- CTA always active — validates on click, scrolls to missing field
|
||
- Form simplified to 3 fields (status, funeral type, location) vs V2's 4
|
||
- Focus ring suppressed on Select/Input per user requirement — status cards retain focus-visible
|
||
- Error colour uses text.brand (copper) not feedback.error (red) — intentional for funeral context
|
||
|
||
**Open questions:**
|
||
- Location autocomplete integration still pending across all versions
|
||
- Decision: V1 vs V2 vs V3 for production
|
||
|
||
**Next steps:**
|
||
- User to review final V3 in Storybook
|
||
- If V3 chosen: location autocomplete, possible further refinements
|
||
|
||
---
|
||
|
||
### Session 2026-03-26e — FuneralFinder v2 polish + consistency fixes
|
||
|
||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||
|
||
**Work completed:**
|
||
- Fixed location input styling to match select fields (border color, hover, disabled, error states)
|
||
- Added `active` prop to StepCircle — step 1 uses brand-500 primary fill by default
|
||
- Aligned Input with full selectSx overrides (bgcolor, disabled opacity+dashed, error border)
|
||
- Investigated systemic Input vs Select visual differences — confirmed issue is component-local overrides, not theme
|
||
|
||
**Decisions made:**
|
||
- Custom field styling kept within FuneralFinderV2 (intentional divergence from theme for this component's design)
|
||
- Step 1 circle uses primary fill since it's always active — visual "start here" signal
|
||
|
||
**Next steps:**
|
||
- v2 is feature-complete and polished — ready for user review in Storybook
|
||
- Decision pending: v1 vs v2 for production
|
||
- If v2 chosen: add location autocomplete, write flow logic reference doc
|
||
|
||
---
|