# 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-04-13 — Chromatic image hosting + Gitea domain migration **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Gitea domain migration** — updated all remotes (backup, fa-dev) and references from `git.richie-snitch.online` to `git.tensordesign.com.au`. Updated publish skill and memory files. - **Chromatic image hosting solution** — created `src/utils/assetUrl.ts` utility that resolves image paths via `STORYBOOK_ASSET_BASE` env var. When set (Chromatic builds), images load from Gitea ParsonsAssets repo. When empty (local dev), paths resolve via staticDirs as before. - **Fixed path inconsistency** — story files used `/brandassets/images/...` which only worked locally via Vite root serving, not in builds. Changed to `/images/...` (correct for staticDirs) wrapped in `assetUrl()`. - **Updated 4 files:** HomePage.tsx, HomePageV2.stories.tsx, HomePageV3.stories.tsx, HomePageV4.stories.tsx - **Updated publish skill** — added Step 4 (sync assets to Gitea) and Step 5 (Chromatic with STORYBOOK_ASSET_BASE env var) - **Created init script** — `scripts/init-assets-repo.sh` for one-time setup of ParsonsAssets repo on Gitea **Decisions made:** - ParsonsAssets Gitea repo must be **public** so Chromatic clients can load images without auth - `/brandlogo/` SVG paths left as-is — they're small, tracked in git, and work via staticDirs in builds - Only `/brandassets/images/...` paths converted to `assetUrl()` — these are the large untracked binaries - Scripts directory gitignored (contains embedded credentials) **Open questions:** - User needs to create ParsonsAssets repo on Gitea and run `scripts/init-assets-repo.sh` (server not reachable from dev machine) **Next steps:** - Create public ParsonsAssets repo on git.tensordesign.com.au - Run init script to push 1.1GB of brand assets - Test `/publish` end-to-end to verify Chromatic images render --- ### Session 2026-04-12b — Homepage V3 redesign + FuneralFinder refinements **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **HomePage V3 promoted to production** — story title changed from `Archive/HomePage V3` to `Pages/HomePage` - **FuneralFinder V3 refinements:** responsive CTA (medium on mobile, large on desktop), button text "Search Local Providers" → "Search", "Free to use" bumped from captionSm to caption, tightened location pin-to-text gap - **New section: "Why Use Funeral Arranger"** — text left + image right (people.png), overline + display3 heading + body copy - **New section: "Three ways we can help you today"** — 3 feature cards with placeholder images, headings, descriptions, outlined CTA buttons - **Section reorder:** partner logos carousel moved above Discover section, inherits overlap padding from FuneralFinder - **Background colour scheme from Figma Make:** warm-grey alternating — `#f3efea` (darkest), `#fdfbf9` (lightest), `#f8f5f1` (mid), white sections with `#f3efea` borders - **Overline headings** ("WHY USE FUNERAL ARRANGER", "WHAT YOU CAN DO HERE") styled in copper brand-600 - **Card drop shadows** on three feature cards (shadow-md, removed border) - **Heading consistency:** all section headings unified to display3 serif; "Why Use FA" was h3, FAQ was h2 — both fixed - **SEO fixes:** h1 grammar ("funeral directors pricing" → "funeral director pricing"), logo section heading `

` → `

`, `aria-labelledby` on partner section - **Section padding** increased from py 8/12 to 10/14 across all sections - **Testimonials** left-aligned with consistent 560px max-width, centred block - **"See more" button** added below FAQ accordion - **FAQ heading** changed to "Frequently Asked Questions" - **Logo section** changed to white bg, overline style heading, increased heading-to-logos gap - **Figma capture** sent to Parsons Figma file (node 6049-25005) **Decisions made:** - Page-level warm-grey backgrounds use direct hex values (#f3efea, #fdfbf9, #f8f5f1) rather than brand tokens — brand-100 (#f7ecdf) is too golden; the Figma tones are neutral-warm - All section headings use display3 (Noto Serif SC) visually, rendered as semantic h2 tags - Three feature card buttons are outlined, text-only (no arrows) **Next steps:** - Replace feature card placeholder images with real screenshots/illustrations - Wire up onClick handlers for feature card CTAs and FAQ "See more" when routing is in place - Consider meta title/description for production deployment --- ### Session 2026-04-12 — ComparisonPage refinements + new molecules **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **New molecule** `ComparisonColumnCard` — extracted ~150 lines of desktop column header JSX from ComparisonTable. Floating verified badge, recommended banner, provider info, price, CTA, Remove link. Stories: Verified, Unverified, Recommended, LongName, NoRating, SideBySide. - **New molecule** `ComparisonTabCard` — extracted mobile tab rail card from ComparisonPage. Provider name + package name + price. Recommended badge in normal flow (not absolute, avoids overflow clipping). Brand glow for recommended. Fixed 210px width. Stories: Default, Active, Recommended, RecommendedActive, LongName, Rail. - **CellValue "unknown" restyled** — changed from Badge to icon+text (like Complimentary but in neutral.500 grey). InfoOutlinedIcon on the right at 14px, matching the item info icons. Both desktop (ComparisonTable) and mobile (ComparisonPackageCard) renderers updated. - **Unverified provider story data** — all three story files (ComparisonTable, ComparisonPage, ComparisonPageV1) updated: Inglewood (unverified) shows `unknown` for every item across all sections. No more dashes in essentials for unverified providers. - **Mobile tab rail overhaul:** - Recommended badge (replaces star icon), in normal document flow with `mb: -10px` overlap - Package price shown on each tab card in brand colour - Shadow on all cards (`shadow-sm`), brand glow on recommended (`0 0 12px`) - Center-on-select scroll behaviour, user's first package centered on mount - Overflow clipping fixed via padding approach (`px: 2, mx: -2`) + normal-flow badge - **ComparisonPackageCard** — added `shadow-sm`, reduced CTA button from `large` to `medium` - **ComparisonTable** — removed ~150 lines of inline header card JSX, 5 unused imports - **Both ComparisonPage V1 and V2** updated to use new molecules (ComparisonTabCard, ComparisonColumnCard via ComparisonTable) - **Registry updated:** added ComparisonColumnCard and ComparisonTabCard rows, updated ComparisonPackageCard notes - **Preflight:** tsc ✓, eslint ✓, prettier ✓ **Decisions made:** - Unknown cell type uses InfoOutlinedIcon (not HelpOutlineIcon) — matches the info icons on item names in the first column for visual consistency - Dashes (unavailable) reserved for optionals/extras where a provider doesn't offer that item; essentials always show unknown for unverified providers - Mobile tab rail badge uses normal document flow (not absolute positioning) to avoid overflow clipping from `overflow-x: auto` - Tab rail centres selected card (not scroll-to-left) - ComparisonTabCard fixed at 210px width **Next steps:** - User starting a new session --- ### Session 2026-04-09b — Extract ComparisonPackageCard molecule **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **New molecule** `src/components/molecules/ComparisonPackageCard/` — extracted from the duplicated `MobilePackageCard` + `MobileCellValue` helpers that lived inline in both V1 and V2. - API: `{ pkg: ComparisonPackage, onArrange, sx }` — reuses the existing `ComparisonPackage` type from ComparisonTable - Stories: Verified (default), Unverified, Recommended, ItemizedUnavailable — rendered in a 400px-max wrapper via decorator - Full forwardRef + displayName - **V2 ComparisonPage.tsx:** removed ~250 lines of inline helpers + 7 now-unused imports (Tooltip, InfoOutlinedIcon, CheckCircleOutlineIcon, LocationOnOutlinedIcon, VerifiedOutlinedIcon, Badge, Divider, ComparisonCellValue type). Imports ComparisonPackageCard and uses it in the mobile tabpanel. - **V1 ComparisonPageV1.tsx:** same cleanup as V2. - **Registry updated:** added ComparisonPackageCard row to molecules table. - **Preflight:** tsc ✓, eslint ✓, prettier ✓ (one auto-format pass on new molecule), storybook build ✓. **Why:** User anticipated frequent card-level tweaks and didn't want to make each edit twice (V1 + V2). Extraction creates one source of truth for the mobile comparison card layout. **Decisions made:** - Kept the desktop column header (in ComparisonTable) inline — it's tightly coupled to the grid/sticky layout and has a floating verified badge + Remove link that differ from the mobile card variant. Extracting it would create an awkward shared API for marginal gain. - Did not create a shared `formatPrice` util — kept one local copy in the molecule (and one that still exists in ComparisonTable). That's a separate cleanup for later if it becomes painful. **Next steps:** - Client review of ComparisonPage V2 still pending - Possible future extract: ComparisonColumnHeader (desktop) if reused outside comparison --- ### Session 2026-04-09 — ComparisonPage V2 (recommended-left) for client review **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Archived V1** — copied `ComparisonPage.tsx` → `ComparisonPageV1.tsx`, renamed component + displayName, created `ComparisonPageV1.stories.tsx` with title `Archive/ComparisonPage V1`, exported both from `index.ts`. - **Built V2 (new production):** - Desktop: recommended package now prepends to `allPackages` → appears as the **first (leftmost)** column in ComparisonTable - Mobile tab rail: recommended is the **first tab**, but `defaultTabIdx = recommendedPackage ? 1 : 0` — the **first user-selected package is the initially active tab**, not the recommended - JSDoc updated to reflect V2 behaviour and reference V1 archive - **Better star for mobile tab rail (applied to both V1 and V2):** - Replaced `★ ${provider.name}` text star with `StarRoundedIcon` (brand-600, 16px) - Icon sits in a flex row with the provider name, `flexShrink: 0` so it always renders, aria-label="Recommended" - Visible against both the selected tab state (warm bg) and unselected (white bg) - **Memory updates:** component-registry (V1 archived, V2 production), decisions-log D040 (recommended-left rationale, supersedes D038 placement), this session entry - **Preflight:** tsc ✓, eslint ComparisonPage dir ✓, prettier ✓ **Decisions made:** - D040: Recommended appears on left (desktop), first in rail (mobile), but first user package is initially active on mobile — anchors comparison without hard-upselling in grief-sensitive context **Open questions:** - None — awaiting client review feedback **Next steps:** - Client review of V2 today - If approved, remove V1 archive after a safe rollback window - Remaining roadmap items: wire CompareBar into PackagesStep/ProvidersStep, comparison state persistence --- ### Session 2026-04-07 — Package comparison iteration (Figma-informed) **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **ComparisonTable major iteration** from Figma feedback: - Dark info card → soft grey info card (surface.subtle, no border), stretches to match card heights, text at top - Provider cards: no logos, floating verified badge (VerifiedOutlinedIcon, consistent with ProviderCard/MiniCard/MapPopup), rating in cards (body2 size) - Separate bordered tables per section (Essentials, Optionals, Extras) with left accent borders (3px brand-500) - Reviews section removed (rating lives in cards) - Horizontal scroll on narrow desktops (minWidth enforcement) - Cards: flex stretch + spacer for CTA bottom-alignment across mixed verified/unverified - Row hover highlight (brand-50), font hierarchy (labels text.secondary, values fontWeight 600) - **ComparisonPage iteration:** - Share + Print buttons in page header (onShare, onPrint props) - Mobile verified badge (VerifiedOutlinedIcon in soft brand Badge) - Mobile section headings with left accent borders - Mobile item rows: 60% max-width for names, inline info icons with nowrap binding - Mobile tab rail: mini Card components (provider name + package name) replacing Chips - Navigation included by default in all stories - **CompareBar simplified:** - Fraction badge (1/3, 2/3, 3/3) - Contextual copy: "Add another to compare" / "Ready to compare" - Removed package names and remove buttons from pill - **Figma integration:** - Created `/capture-to-figma` skill — captures Storybook stories to Parsons Figma file - Created `/figma-ideas` skill — fetches Figma designs and proposes adaptations - Successfully captured ComparisonPage to Figma (node 6041-25005) - Applied user's Figma tweaks (node 6047-25005) back to code - **Cleanup:** Removed Figma capture script from preview-head.html, Prettier formatting pass **Decisions made:** - Info card uses surface.subtle (not dark), stretches to match cards — less visually competing - Verified badge uses VerifiedOutlinedIcon (consistent with rest of system), floating above cards - Rating lives in card headers, no separate Reviews table - Section tables separated with left accent borders (3px brand-500) - Mobile tab rail uses mini Cards (provider + package name) not Chips - Share/Print are optional props on ComparisonPage **Next steps:** - Commit all work - Wire CompareBar into PackagesStep/ProvidersStep (state management) - Consider comparison state persistence (URL params or context) --- ### Session 2026-04-06b — Package comparison feature **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **PackageDetail fix (D039):** Added `priceLabel?: string` to `PackageLineItem` interface, passed through to LineItem. Updated stories to use Essentials/Optionals/Extras sections with realistic funeral data (D035). "Complimentary Items" → "Optionals". - **CompareBar molecule (new):** Floating comparison basket pill. Fixed bottom, slide-up/down animation. Badge count + provider names + remove × buttons + Compare CTA. Max 3 user packages. Disabled CTA when <2. Inline `role="alert"` error for max-reached. Mobile: compact count + CTA only. Audit: 18/20 (P2s fixed: error visible on mobile, removed redundant aria-disabled). - **ComparisonTable organism (new):** CSS Grid side-by-side comparison. Sticky header cards with provider logo/name/location/rating + package name + price + CTA. Row-merged sections via `buildMergedSections` union algorithm. 7 cell value types via discriminated union (D036). Recommended column with warm bg + Badge. Verified → "Make Arrangement", unverified → "Make Enquiry". ARIA `role="table"` + `role="row"` + `role="columnheader"` + `role="cell"`. Desktop only. Audit: 17/20 (P2s fixed: aria-label on recommended column, rowheader on section headings, token-based zebra striping). - **ComparisonPage page (new):** WizardLayout (wide-form). Desktop: full ComparisonTable. Mobile: chip tab rail (`role="tablist"`) + single MobilePackageCard (`role="tabpanel"`). Recommended package as separate prop, merged as last column/tab. Back link, help bar. - **Stories:** 6 CompareBar stories (Default, SinglePackage, ThreePackages, WithError, Empty, Interactive), 5 ComparisonTable stories (Default, TwoPackages, WithRecommended, MixedVerified, MissingData), 5 ComparisonPage stories (Default, TwoPackages, WithRecommended, MobileView, FullPage with Navigation). - **Quality gates:** TypeScript ✓, ESLint ✓, Storybook build ✓. CompareBar audit 18/20, ComparisonTable audit 17/20. **Decisions made:** - D035: Package sections standardised to Essentials/Optionals/Extras - D036: ComparisonCellValue uses discriminated union for exhaustive rendering - D037: Mobile comparison uses chip tabs + card view, not horizontal scroll table - D038: Recommended package is a separate prop, always additional to user selections - D039: PackageLineItem gains priceLabel for consistency with LineItem molecule **Open questions:** - None **Next steps:** - Visual review in Storybook (user + Playwright screenshots) - Wire CompareBar into PackagesStep (state management for comparison basket) - Consider adding CompareBar to WizardLayout as a slot or portal --- ### Session 2026-04-06 — Retroactive review completion **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Phase 1 atoms complete:** Audited Typography (18/20, no P0/P1) and Badge (15/20, P0 `role="status"` determined false positive — would create unwanted aria-live on static labels) - **Phase 2 molecules complete:** Normalized all 9 molecules — displayName ✓, forwardRef ✓, ARIA ✓, no hardcoded colours. Flagged AddOnOption/ProviderCard ARIA issues reviewed and determined false positives (Switch is semantic control; ProviderCard has `...rest` passthrough) - **Phase 3 organisms complete:** Normalized 5 active organisms. Audited Navigation (15/20, no real P0/P1 — focus-visible from MUI theme, CSS vars D031-compliant) and ServiceSelector (17/20, **fixed P0: added `aria-required` to radiogroup**) - **Phase 4 preflight:** TypeScript ✓, ESLint ✓, Prettier ✓, Storybook build ✓ - **Review plan updated:** All phases marked done. Only `/typeset` deferred (low risk) **Decisions made:** - Badge `role="status"` rejected: static status labels shouldn't be aria-live regions - AddOnOption `role="checkbox"` rejected: Switch is the semantic control, Card click is convenience - CSS var usage in organisms is D031-compliant (CSS vars acceptable for semantic tokens per D031) **Open questions:** - From 2026-04-01: Which HomePage version (V3 or V4) is production? **Next steps:** - User has components to change/build — shifting to that work **Work completed (continued):** - **MiniCard molecule (new + iterated):** Compact vertical card. Image + verified icon-only badge (copper circle, top-right) + title (h6, 2-line max with tooltip on truncation) + meta row + price + badges + chips. Hierarchy: title → meta → price → badges → chips. 3 component tokens. Audit: 20/20. - **MapPin atom (new + redesigned):** Two-line label map marker: name (bold, truncated 180px) + "From $X" (centred, semibold 600). Name optional for price-only variant. Verified = brand palette, unverified = grey. Active inverts + scale. Padding bumped from 8px to 12px for readability. Pure CSS. role="button" + keyboard + focus ring. - **MapPopup molecule (new + iterated):** Clickable floating card (onClick). Image + verified icon badge (matches MiniCard) + name (1-line, tooltip on truncation) + meta + price. Hierarchy matches MiniCard. No-image fallback shows inline verified icon + text. Nub + drop-shadow. 260px wide. - **Component tokens:** miniCard.json and mapPin.json added to Style Dictionary, rebuilt CSS/JS/TS outputs (407 declarations total). **Decisions made:** - MiniCard uses `h6` for title (smaller than ProviderCard's `h5`), `caption` for meta, `body2` for price - MiniCard verified badge is icon-only circle (not text chip) — compact, matches map popup - MapPin redesigned from price-only pill to two-line name+price label — transparency and clarity - MapPin price centred under name — left-aligned looked unbalanced (visually reviewed) - MapPin price weight 600 (semibold) — 500 was too thin at 11px - MapPin padding 12px (was 8px) — names were tight against edges - MapPopup whole card clickable — removed "View details" link - MapPopup name 1-line limit (was 2) with tooltip — tighter for map context - Chips in MiniCard rendered as soft default Badges (no interactive Chip atom) for visual simplicity --- ### Session 2026-04-01 — FuneralFinder V4, HomePage V3/V4, Footer restyle **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **FuneralFinder V4 (new organism):** Based on V2 with major changes: - 3 numbered steps only (lookingTo, planningFor, funeralType) — location is ungated, no step number - No heading/subheading — compact widget for embedding in heroes - Refined step indicators: 48px circles matching input height, outline-to-fill + tick animation, no connector lines - Labels above, circle + input on same row centred - Location field full-width, disabled until step 3 complete - "Search" CTA, inline copper error messages per field (D034) - Archived in Storybook under Archive/FuneralFinder V4 - **FuneralFinder V3 updates:** - Removed default subheading (now optional) - Heading font weight bumped from 400 → 600 (semibold) for more presence - Heading copy: "Find your local providers" - CTA: "Search Local Providers" - **HomePage V1 archived:** Original split-hero layout moved to Archive/HomePage V1 - **HomePage V2 archived:** Full-bleed hero version broken out as Archive/HomePage V2 - **HomePage V3 (new, archived):** Based on V2 with: - hero-3.png background image - Updated hero copy + bullet-point subheading ("Transparent pricing · No hidden fees · Arrange 24/7") - Real venue photos in discover section provider cards - Map placeholder image from brandassets - Scrolling partner logo bar (9 transparent logos, greyscale, edge-to-edge, continuous loop) - CTA section: warm gradient bg, text button, no dividers, wider container - Increased section spacing throughout (~25% more breathing room) - Hero top padding increased 40% - **HomePage V4 (new, archived):** Same as V3 but uses FuneralFinder V4 via `finderSlot` prop. Wider container (620px) for stepped form. - **HomePage component updates:** - Added `finderSlot` prop — allows swapping the finder widget without changing the component - Increased spacing: hero heading/subtext gap, finder-to-discover gap, all section padding - Map container: absolute positioning for dynamic height matching card stack - CTA section: gradient bg (brand.100 → surface.warm), text button, no dividers - Partner logos: lighter treatment (40% opacity, brightness lift), 48→55px height, 96px gap, no hover interaction - **Footer restyle:** Changed from dark espresso (brand.950) to light grey (surface.subtle) matching the header. All text colours flipped to dark-on-light. Logo no longer needs inverse filter. **Decisions made:** - FuneralFinder V4 step indicators use 48px circles (same height as inputs) for visual alignment - Location field in V4 is gated behind step 3 completion but not numbered - Inline error messages replace single bottom error — each field shows its own copper-coloured message - Footer matches header bg colour (surface.subtle) for visual consistency - Partner logos: only transparent PNGs/WebPs used, opaque logos excluded - `finderSlot` prop added to HomePage for widget flexibility without component duplication **Open questions:** - HomePage V4 finder width may need further adjustment — looked narrow in Storybook preview panel (620px container, may need 680-720px) - Which HomePage version (V3 with FuneralFinderV3 or V4 with FuneralFinderV4) will be the production version? - FuneralFinder V4 step indicator design — user liked the direction but may want further iteration **Next steps:** - Resolve HomePage V4 finder width — test at wider viewport or increase container - Decide on production HomePage + FuneralFinder version - Build next components/pages as needed - Phase 4 remaining: /typeset sample, /preflight full codebase --- ### Session 2026-03-31d — Filters, control bars, UnverifiedProviderStep, HomePage V2 **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Phase 4 /adapt reviews:** Ran responsive adaptation audits on Navigation, Footer, ProviderCard, VenueCard. Fixed P0/P1 touch target issues in Navigation (hamburger + drawer items minHeight 44px) and Footer (all links minHeight 44px, tagline responsive maxWidth). ProviderCard/VenueCard skipped — meta rows aren't interactive, card itself is the touch target. - **ProvidersStep structured filters:** Replaced generic `ProviderFilter[]` chip array with `ProviderFilterValues` interface containing 5 filter controls inside FilterPanel/DialogShell: - **Location:** Autocomplete `multiple` + `freeSolo` with chip-in-input pattern (real estate site UX — chip sits inside the search field with X to clear) - **Service tradition:** Autocomplete with type-to-search, 21 options ('None' first, then alphabetical traditions) - **Funeral type:** Chip multi-select with wrapping layout (6 types from spec) - **Verified providers / Online arrangements:** Switch toggles - **Price range:** Dual-knob slider + compact editable inputs (matching CoffinsStep) - **FilterPanel molecule updates:** "Done" → "Apply", "Clear all" moved to footer as "Reset filters" text button - **DialogShell padding:** px 3 → 5 (12px → 20px) for breathing room - **Filter panel UX iterations (3 rounds):** - Section headings: `labelLg` + `fontWeight: 600` for visual hierarchy - Price inputs: compact `fontSize: 0.875rem` + tighter padding - Funeral type chips: wrap layout (not horizontal scroll) — stays within bounds - Price slider: `px: 2.5` accommodates MUI thumb radius, no overflow - Active filter count includes location search; reset clears search too - **VenueStep structured filters:** Same FilterPanel pattern as ProvidersStep with venue-specific controls: - Location (chip-in-input), Venue type (7 chips: Chapel, Church, Cathedral, Outdoor Venue, Hall/Room, Mosque, Temple), Additional services (Video Streaming + Photo Display switches), Service tradition (autocomplete) - **Control bar (both pages):** Below search, single line: - `[Filters]` left, `[↕ Recommended]` right (compact menu button with dropdown) - Sort options: Recommended, Nearest, Price: Low to High, Price: High to Low - Results count on own line below with breathing room - **List/Map view toggle:** Floating overlay in top-left of map panel (paper bg + shadow). Text-labelled: "List" / "Map" with icons. Follows Airbnb/Domain pattern — contextually placed where the map lives. - New types: `ProviderSortBy`, `VenueSortBy`, `ListViewMode`, `VenueFilterValues`, `VenueTypeOption` - **UnverifiedProviderStep (new page):** list-detail layout for scraped provider listings. Left: ProviderCardCompact + "Listing" badge + available info + verified recommendations. Right: warm header band + enquiry CTA. 4 story variants (Default, MinimalData, NoData, NoRecommendations). Graceful degradation when data missing. - **HomePage V2:** Full-bleed hero with `parsonshero.png`, FuneralFinder inside hero (overlaps into white below), "See what you'll discover" map+ProviderCardCompact section, stripped features (no cards/circles — just icons+text), editorial alternating testimonials, minimal FAQ accordion, simplified CTA. Multiple iteration rounds on hero positioning. - New types: `TrustStat`, `FeaturedProvider`, `ProviderDetail`, `RecommendedProvider` **Decisions made:** - "Service tradition" as the label for religion/faith filter — neutral, user-centric, covers religious and non-religious - 'None' as first tradition option - Location uses Autocomplete chip-in-input pattern (Domain/realestate.com.au style) - Funeral type chips wrap (stack) rather than horizontal scroll — clearer at dialog width - DialogShell px: 5 is a global change — all dialogs get more breathing room - FilterPanel footer: "Reset filters" + "Apply" replaces header "Clear all" + footer "Done" - List/Map toggle lives on the map panel (floating overlay), not in the control bar — frees space, contextually placed - Sort uses compact menu button (not TextField select) — same visual weight as Filters button - Unverified providers use list-detail layout (same as PackagesStep) for consistency - Unverified CTA is "Make an Enquiry" (not "Make an Arrangement") — honest framing - HomePage V2 hero: text top-aligned, FuneralFinder inside hero with negative mb overlap - Features section: no cards/circles — just icons + text for authentic feel - Hero gradient: 55% opacity at top for readability on bright sky **Open questions:** - HomePage V2 still a first pass — may iterate further on discover section, testimonials, etc. - UnverifiedProviderStep paused — may revisit for enquiry form fields **Next steps:** - Continue user feedback on remaining pages - Phase 4 remaining: `/typeset` sample, `/preflight` full codebase - Add progress bar + cart stories to more page stories - Update component-registry.md with UnverifiedProviderStep --- ### Session 2026-03-31c — PaymentStep/ConfirmationStep review + progress bar + CartButton **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Organism normalize pass (Phase 3):** Scanned all 6 organisms. Fixed FuneralFinderV3 transition timing (200ms → 150ms ease-in-out), added autodocs tag to V3 stories. Navigation audit 18/20, ServiceSelector 20/20. - **Navigation P1 fix:** Logo wrapper changed from `div[role=link]` to proper `` tag for keyboard accessibility. - **PaymentStep feedback (5 items):** Divider under subheading, lock icon alignment, ToggleButtonGroup `align` + `direction` props (centre-aligned payment options, vertical payment method stack), checkbox alignment fix. - **ToggleButtonGroup atom enhanced:** New `align` (start/center) and `direction` (row/column) props. Description text bumped from `text.secondary` to `text.primary`. - **SummaryStep:** Save button → text variant (matches other pages), centred. - **Cross-page heading spacing:** All wizard pages `mb: 1` → `mb: 2` on display3 heading. - **ConfirmationStep redesign:** Animated SVG tick (circle draws then checkmark), "What happens next" warm card with bullet points, contact phone as prop, link-based secondary actions. - **VenueStep + ProvidersStep:** Sticky search bar padding fix, off-white bg behind card lists. - **IntroStep, CemeteryStep, CrematoriumStep, DateTimeStep:** Dividers under subheadings. - **CoffinsStep:** h4 heading (matches list layouts), sidebar headings h5 → h6. - **CartButton molecule (new):** Outlined pill trigger with receipt icon + "Your Plan" + formatted total in brand colour. Click opens DialogShell with items grouped by section via LineItem, total row, empty state. Mobile collapses to icon + price. - **WizardLayout:** Removed STEPPER_VARIANTS whitelist — stepper bar now renders on all variants when props provided. Stepper centred at 700px max-width, cart hugs right. - **StepIndicator:** Desktop label fontSize bumped to 0.875rem for readability. - **Prop threading:** progressStepper + runningTotal added to DateTimeStep, VenueStep, SummaryStep, PaymentStep. - **Style Dictionary:** Auto-generate tokens.d.ts on build, fixed TS unused imports. **Decisions made:** - ToggleButtonGroup `align` and `direction` are opt-in props — existing usages unchanged - ConfirmationStep contact phone is now a prop (default 1800 987 888), no more hardcoded placeholder - WizardLayout stepper bar shows on ANY variant when props provided (StepperBar returns null when empty) - CartButton is a molecule (not organism) — self-contained trigger + dialog, same pattern as FilterPanel - Stepper bar layout: stepper centred at maxWidth 700px, cart hugs right edge **Open questions:** - PaymentStep CTA is right-aligned — all other pages use full-width. Should it match? - Progress bar stories should be added to more page stories (currently only DateTimeStep has them) **Next steps:** - Continue user feedback/edits on remaining pages - Add progress bar + cart to remaining page stories - Retroactive review Phase 3 organisms: Navigation P2s still pending (hardcoded fontSize, drawer width) - Update component-registry.md with CartButton --- ### Session 2026-03-31b — CoffinDetailsStep rewrite + AdditionalServicesStep split **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **CoffinDetailsStep rewrite** — two-panel detail-toggles layout with gallery + specs (left), name + description + colour swatches + allowance-aware pricing + CTA (right). Colour selection doesn't affect price. Allowance logic: fully covered / partially covered / no allowance. - **SummaryStep rewrite** — visual cart layout replacing accordion text lists: - Arrangement details section at top (arranger, deceased, tradition, dates, times) - Compact image cards for provider, venue, crematorium, coffin with location pins - Allowance display: "Included in your package" (fully covered) vs price/allowance/remaining breakdown - Checklist for included services, priced list for extras (consistent tick logic) - Share dialog: "Share this plan" opens DialogShell with multi-email input + confirmation - Full-width CTA, deposit deferred to PaymentStep - **AdditionalServicesStep split into two pages:** - **IncludedServicesStep (new)** — services included in the package at no cost. Dressing, viewing (with same-venue sub-option inside card), prayers/vigil, funeral announcement. - **ExtrasStep (new)** — optional paid extras for lead generation. Catering, music (flat inline live musician toggle + musician type), coffin bearing (toggle + bearer preference radio), newspaper notice. POA support via `priceLabel`. Tally of priced selections. - **AddOnOption molecule enhanced:** - `children` prop — sub-options render inside the card boundary (below divider) when checked, eliminating nested card "Russian doll" pattern - `priceLabel` prop — custom text like "Price on application" in brand copper italic - **AdditionalServicesStep removed** — replaced by the two new pages - All quality checks passing (TypeScript, ESLint, Prettier) - Playwright visual verification of all key scenarios **Decisions made:** - Split AdditionalServicesStep into two pages for clearer UX distinction between free inclusions and paid extras - Sub-options render inside parent card (flat hierarchy) instead of nested cards - Coffin bearing changed from always-visible radio to toggle + sub-options (consistent with other items) - `bearing` field split into `bearing: boolean` + `bearerType` for toggle pattern - Extras page is lead-gen: signals interest, not firm commitment. Director follows up. - POA items show "Price on application" in brand copper italic - Copy refined through brand lens — no transactional language ("toggle on"), warm professional tone **Open questions:** - None **Next steps:** - Continue page feedback: PaymentStep, ConfirmationStep - Retroactive review Phase 3 (organisms) still pending - Batch a11y fix (aria-describedby + aria-invalid) deferred --- ### Session 2026-03-31b — CoffinDetailsStep rewrite: product detail layout **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **CoffinDetailsStep complete rewrite** — transformed to match VenueDetailStep two-panel pattern: - **Left panel:** ImageGallery (hero + thumbnails), product details as semantic `dl` list (bold label above value) - **Right panel (sticky):** coffin name (h1), description, colour swatch picker, price with allowance-aware display, CTA, save-and-exit - **Colour picker:** circular swatches (36px), `aria-pressed`, controlled via `selectedColourId`/`onColourChange`, does not affect price - **Allowance pricing logic:** fully covered (allowance >= price) → "Included in your package allowance — no change to your plan total." / partially covered → shows "$X package allowance applied" + "+$Y to your plan total" in brand colour / no allowance → price only with extra spacing to CTA - **Removed:** info bubble (redundant with allowance impact text), `priceNote` prop, `termsText` prop, old horizontal specs grid, `CoffinAllowance` type - **Added:** `CoffinColour` type, `allowanceAmount` prop, `onAddCoffin` callback (replaces `onContinue`) - **A11y:** fixed heading hierarchy (price as `

` not `

`, Product details as `

`) — 0 violations - **Stories:** FullyCovered, PartiallyCovered, NoAllowance, NoColours, Minimal, PrePlanning, Loading - **Playwright visual verification** of all key scenarios - All quality checks passing (TypeScript, ESLint, Prettier) **Decisions made:** - Allowance impact is computed from `allowanceAmount` vs `coffin.price` — no remaining balance tracking (out of scope) - Info bubble removed from detail page (redundant) — kept on CoffinsStep browsing page - Product details as single-column stacked `dl` (label above value) — more readable than grid **Open questions:** - None **Next steps:** - Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep - Retroactive review Phase 3 (organisms) still pending - Batch a11y fix (aria-describedby + aria-invalid) deferred --- ### Session 2026-03-31a — CoffinsStep rewrite: grid-sidebar ecommerce layout **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **CoffinsStep complete rewrite** — transformed from wide-form card grid into a two-column ecommerce layout matching the live site pattern: - **Layout:** `grid-sidebar` with viewport-locked independent scrolling (sidebar scrollbar on hover, grid always scrollable) - **Sidebar:** heading, conditional allowance info bubble, category menu with expandable subcategories (Collapse animation, chevron rotation), dual-knob price range slider with editable text inputs (commit on blur/Enter), sort by dropdown (popularity, price asc/desc), clear all filters link, save-and-exit link at bottom - **Grid:** 3-col coffin card grid with `CoffinCard` internal component — thumbnail hover preview (hover swaps main image, leave reverts), equal-height cards via flex layout, subtle background for white-bg product photos, "Most Popular" badge, colour count text - **Navigation:** card click fires `onSelectCoffin(id)` to navigate to CoffinDetailsStep — no Continue button - **Pagination:** 20 coffins per page max (`pageSize` prop, enforced via slice) - **WizardLayout `grid-sidebar` update** — wider sidebar (28%), `overflowX: hidden` (no horizontal scroll), `overflowY: auto` at all breakpoints, responsive viewport-lock (desktop only) - **Removed:** `selectedCoffinId`, `CoffinsStepErrors`, `CoffinPriceRange`, `onContinue`, `loading` props - **Added:** `onSelectCoffin`, `CoffinSortBy`, `pageSize`, `minPrice`/`maxPrice`, `thumbnails`/`colourCount` on Coffin, `children` on `CoffinCategory` **Decisions made:** - Card click navigates directly to details (no selection + continue pattern) — matches ecommerce browsing UX - Categories support one level of subcategories — parent click loads all and expands children, child click refines - Price slider with editable text inputs — commits on blur/Enter to avoid per-keystroke re-renders - 20 coffins per page default — enforced in component via slice - Allowance info bubble is conditional (omit prop = no bubble) — some packages don't have coffin allowances **Open questions:** - None **Next steps:** - Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep - Retroactive review Phase 3 (organisms) still pending - Batch a11y fix (aria-describedby + aria-invalid) deferred --- ### Session 2026-03-30e — Page feedback: VenueServices, Crematorium, Cemetery rewrites **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **VenueServicesStep (new page):** Built step 7c — venue-specific service toggles after VenueDetailStep. Compact venue card at top, availability notices (info cards for unavailable services), AddOnOption toggles with maxDescriptionLines for "Read more" expansion, conditional tally showing total of selected priced services. Flow: VenueStep → VenueDetailStep → VenueServicesStep. - **AddOnOption price colour fix:** Changed from `text.secondary` (grey) to `color="primary"` (copper) for consistency with all other price displays in the system. - **CrematoriumStep rewrite:** Completely rewritten to match live site. Two variants based on funeral type: - Service & Cremation: stacked crematorium card (image top, details below) + witness Yes/No/Decide later ToggleButtonGroup - Cremation Only: stacked card + "Cremation Only" badge + "Included in Package" info notice, no witness question - Removed: multi-card selection grid, priority dropdown, special instructions, crematoriums array prop - Card iterated from compact horizontal → more generous horizontal → stacked layout based on user feedback - **CemeteryStep rewrite:** Rewritten to match live site: - RadioGroups replaced with ToggleButtonGroups (Yes/No/Not sure) - Card selection grid replaced with freetext search input (Input atom with search icon) - `searchSlot` prop for parent to inject Google Places or geocoding autocomplete - Removed static `cemeteries` array prop and `CemeteryOption` type - Progressive disclosure preserved: own plot → locate it; no plot → preference? → search **Decisions made:** - Venue services belong on a separate page (not inline on VenueDetailStep or in a dialog) due to content volume per service (long descriptions, future images) - Crematorium is always pre-selected by provider — no multi-select needed, just confirmation - "Decide later" / "Not sure" options added as explicit third choice on questions where users may be uncertain — grief-sensitive pattern - Cemetery search should use real location search (Google Places style), not a static dropdown — we don't maintain a cemetery database - Stacked card layout (image top) works better than compact horizontal for single confirmation cards with long text **Open questions:** - None **Next steps:** - Continue page feedback: CoffinsStep, AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep - Retroactive review Phase 3 (organisms) still pending - Batch a11y fix (aria-describedby + aria-invalid) deferred --- ### Session 2026-03-30d — Steps 8-15 consistency pass **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Consistency pass across Steps 8-15** — aligned all remaining wizard steps with the conventions established during the Steps 1-6 feedback iteration: - **Subheading variant:** CrematoriumStep, CoffinDetailsStep changed from `body2` → `body1` (match IntroStep/DateTimeStep centered-form convention) - **Subheading spacing:** CrematoriumStep, CemeteryStep, CoffinDetailsStep, AdditionalServicesStep, SummaryStep, PaymentStep all changed from `mb: 4` → `mb: 5` - **Section dividers:** CrematoriumStep gained 3 `` between question sections (crematorium → witness, conditional priority, special instructions) - **Link atom:** PaymentStep terms links and ConfirmationStep phone number changed from `Box component="a"` → `Link` atom - **CoffinsStep:** No changes needed (wide-form layout has its own spacing convention) - **Audited CrematoriumStep (15/20) and PaymentStep (16/20)** — findings are pre-existing, not introduced by the pass - **Visual verification:** Playwright screenshots of CrematoriumStep, PaymentStep, ConfirmationStep, AdditionalServicesStep, SummaryStep — all pass **Decisions made:** - Centered-form heading convention now formally: `display3` → `body1` subheading → `mb: 5` gap (documented via consistent implementation across all 10+ centered-form steps) - Wide-form layout (CoffinsStep) keeps its own tighter spacing convention (`body2` + `caption`, `mb: 3`) **Open questions:** - **Checkbox atom:** PaymentStep uses MUI Checkbox directly — only form control without an FA atom wrapper. Create Checkbox atom? - **aria-describedby/aria-invalid:** All wizard steps lack error field association. Batch normalize fix recommended. - **Retroactive review Phase 2.2** still pending (audit priority molecules: ServiceOption, AddOnOption, ProviderCardCompact) **Also completed (same session):** - **Checkbox atom created:** New FA wrapper (forwardRef, displayName, stories: Default/States/TermsAgreement/Checklist). MuiCheckbox theme overrides (warm gold checked, focus ring, disabled muted). PaymentStep updated to import from atom. - **Retroactive review Phase 2.2 complete:** Audited ServiceOption (13/20), AddOnOption (14/20), ProviderCardCompact (15/20). Fixed: - AddOnOption: added `aria-disabled` when disabled (P1) - ProviderCardCompact: added `maxLines={1}` on name (P2) - ServiceOption: price uses `labelLg` variant instead of h6 + hardcoded fontWeight (P1) - Note: audit agents flagged false P0s (AddOnOption "double handler", ServiceOption "role collision") — verified both are correctly handled by existing `stopPropagation` and prop spread order in Card atom **Also completed (continued same session):** - **DateTimeStep:** Swapped date TextField to Input atom (was missed in session 30b) - **VenueStep rewrite:** Simplified to click-to-navigate (like ProvidersStep) — removed Continue, selection state, inline detail, service toggles - **VenueDetailStep (new page):** Detail-toggles layout with scrollable left panel (ImageGallery, description, features grid, location map placeholder, address, informational service cards) and right panel (name, meta icons, price + offset note, Add Venue CTA, address, religion chips) - **CoffinDetailsStep:** Switched from centered-form to detail-toggles layout (image left, specs/price/CTA right) - **WizardLayout detail-toggles overhaul:** Viewport-locked with independent panel scroll, maxWidth 1200px centered, generous padding (px:5), back link inside left panel - **WizardLayout list-map scroll fix:** Removed top padding gap between nav and sticky search, heading scrolls away while search/filters stay pinned with divider border - **ImageGallery molecule (new):** Hero image + landscape thumbnail strip (4:3 ratio), hover to preview, click to select, keyboard accessible, wired into VenueDetailStep and CoffinDetailsStep - **Checkbox atom (new):** FA wrapper with warm gold theming, PaymentStep updated - **Retroactive review Phase 2.2:** Audited ServiceOption (13/20), AddOnOption (14/20), ProviderCardCompact (15/20), fixed P0/P1s **Next steps:** - Continue page feedback from user: CrematoriumStep, CemeteryStep, CoffinsStep, AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep - Venue service selection step (new page — toggles moved from VenueDetailStep) - Batch a11y fix: aria-describedby + aria-invalid across all wizard steps (deferred per user) - Retroactive review Phase 3: organisms normalize + audit - Update component registry with new components (ImageGallery, Checkbox, VenueDetailStep) --- ### Session 2026-03-30c — HomePage build + Chromatic + Story to Design setup **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Story to Design agent:** Helped user install and run the story.to.design agent on Arch Linux (extracted from .deb, installed webkit2gtk dependency). Agent connects Storybook to Figma plugin. - **Chromatic setup:** Installed chromatic, published Storybook to Chromatic CDN. Set visibility to public for shareable links. Updated `package.json` chromatic script with `--build-script-name=build:storybook`. - **HomePage component built:** Full marketing landing page at `src/components/pages/HomePage/` - 7 sections: Hero, FuneralFinder widget (overlapping card), Partner Logos carousel, Features (4-card grid), Reviews/Testimonials, CTA Banner, FAQ accordion - Composes FuneralFinderV3 organism, Navigation + Footer via props - CSS-only infinite scroll logo carousel with prefers-reduced-motion - Feature cards with warm circular icon backgrounds - Full a11y: section landmarks, aria-labelledby, heading hierarchy - Grief-sensitive copy (quieter pass applied) - **Quality gates run:** /critique (32/40), /audit (16/20), /quieter (all pass) - **Design iteration:** Multiple rounds of visual refinement using Playwright screenshots - Reduced oversized typography (display1 → display3 for hero, display2 → h2 for sections) - Reserved serif fonts for hero + CTA only, sans-serif for all other section headings - Tightened spacing, reduced section padding - Feature cards: compact padding, warm circular icon backgrounds - Fixed unicode rendering bugs in copy **Decisions made:** - Serif display fonts reserved for hero heading and CTA banner only — all other section headings use Montserrat (h2/h3) - Feature card icons wrapped in warm circular backgrounds (brand.50 bg, 56px diameter) - HomePage is a page component (not a template) — does not use WizardLayout - Chromatic published URL is the shareable Storybook link for stakeholders **Open questions:** - Homepage is first-pass only — user will return to iterate later - Partner logo placeholder images need real assets - Hero image slot needs real photography - CTA banner click destination needs clarification (scroll to widget vs wizard entry) **Next steps:** - Resume arrangement wizard page feedback from VenueStep (Step 7) onwards — Steps 1-6 done in previous session - Remaining pages: VenueStep, CrematoriumStep, CemeteryStep, CoffinsStep, CoffinDetailsStep, AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep --- ### Session 2026-03-30b — Page feedback iteration (Steps 1-6) + DialogShell **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **IntroStep (Step 1):** Static subheading (removed dynamic text change on selection), ToggleButtonGroup top-left alignment fix - **ProvidersStep (Step 2):** Heading reduced to h4 "Find a funeral director", SearchBar → location TextField with pin icon, FilterPanel moved below search right-aligned, map fill fix (height:100% → flex:1), hover scrollbar on left panel - **VenueStep (Step 7):** Same consistency fixes as ProvidersStep (h4, location icon, filter layout, map fill, results count format) - **PackagesStep (Step 3):** Removed budget filter + "Most Popular" badge + mobile Continue button. Added grouped packages pattern ("Matching your preferences" / "Other packages from [Provider]" with brand accent bars). `onArrange` replaces `onContinue`. Clickable provider card (`onProviderClick`). Heading to h4. - **DateTimeStep (Step 6):** display3 heading (centered-form consistency). Name fields swapped from MUI TextField to Input atom (external label, no clipping). Multiple preferred dates (up to 3, progressive disclosure). Removed service tradition/religion field. Dividers between question sections. - **DialogShell atom:** New shared dialog container (header + optional back + close, scrollable body, optional footer). Audited 17→19/20, P1s fixed (focus management, sx pattern). - **FilterPanel refactored:** Popover → DialogShell (centered Dialog with backdrop) - **ArrangementDialog refactored:** Now composes DialogShell for consistent chrome - **PreviewStep + AuthGateStep removed:** Consolidated into ArrangementDialog (D-E) - **WizardLayout:** ListMapLayout left panel gets thin scrollbar visible on hover **Decisions made:** - Heading convention: display3 for centered-form pages, h4 for narrow panels (list-map, list-detail) - DialogShell is the standard popup container — all site dialogs compose it - Service tradition removed from DateTimeStep — flows from provider/package selection, confirmed on summary - "Service tradition" is the preferred terminology (not "religion" or "religious style") - Package grouping pattern: matched vs other, with brand accent bar section labels - FilterPanel uses Dialog (not Popover) for filter controls **Open questions:** - Provider profile popup contents — user will provide details later - Heading convention (display3 vs h4) should be documented as a decision **Next steps:** - **Resume page feedback from VenueStep (Step 7) onwards** — Steps 1-6 are done - Remaining pages to review: VenueStep, CrematoriumStep, CemeteryStep, CoffinsStep, CoffinDetailsStep, AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep - Homepage layout work (user priority — separate task) - Input atom clipping: audit remaining pages for MUI TextField → Input atom swap where labels clip --- ### Session 2026-03-30a — Tooling upgrades + workflow evaluation **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Storybook addons:** Added `@storybook/addon-storysource` (story source code panel) and `@storybook/addon-a11y` (real-time axe-core accessibility checks) - **Playwright MCP:** Installed `@playwright/mcp` and registered as MCP server. Enables Claude Code to take screenshots of Storybook for visual verification. Available from next session. - **Workflow evaluation:** Comprehensive analysis of current capabilities, identified core gap (Claude Code cannot see visual output), researched solutions - **Antigravity research:** Investigated Google Antigravity IDE for visual polish workflow. Installed on system. Created `GEMINI.md` project rules file. User decided to pause on Antigravity for now and continue with Claude Code + Playwright MCP approach. - **GEMINI.md:** Created project rules file for Antigravity IDE, mirroring key conventions from CLAUDE.md (token access, atomic tiers, no hardcoded values) **Decisions made:** - Playwright MCP is the primary solution for visual verification gap — enables Claude Code to screenshot Storybook stories and self-correct visual issues - Antigravity available as secondary tool for visual tweaks but not primary workflow - Claude Code remains the primary tool for architectural/structural work due to custom skills, memory system, and accumulated project context **Open questions:** - User has refinement feedback from previous session that was partially overlooked — to be addressed next session - Some items from the user's original feedback across 15 steps were missed when compressed into D-A through D-H decisions **Next steps:** - Restart session to activate Playwright MCP - User to provide refinement feedback - Use Playwright MCP to visually verify changes as they're made - Address remaining P1s from previous session (radiogroup keyboard nav, dialog mobile fullscreen) --- ### Session 2026-03-29e — Feedback iteration Batches 1 & 2 **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Batch 1: Atom + Template Foundation** - ToggleButtonGroup: label-to-options spacing `mb: 1→2`, top-align content `flex-start`, fixed selected border CSS specificity (added `&.Mui-selected` in grouped selector) - Heading standardisation: all 6 split-layout steps changed from `h4` → `display3` (ProvidersStep, PackagesStep, PreviewStep, VenueStep, CoffinsStep, CoffinDetailsStep) per D-A - DateTimeStep: normalised section gaps (scheduling fieldset `mb: 3→4`) - CrematoriumStep: added subheading for consistency, normalised witness section `mb: 3→4` - PackagesStep + DateTimeStep: fixed input label clipping (`pt: 0.5` on TextField containers) - **Batch 2: List-Map Layout Rework (D-B)** - WizardLayout ListMapLayout: 420px fixed left column, `flex: 1` right panel - Back link rendered inside left panel (not above split) — eliminates gap above map - LAYOUT_MAP type updated to accept `backLink` prop for list-map variant - ProvidersStep + VenueStep: sticky header (heading + search + filters pinned at top of scrollable left panel) - **Batch 3: FilterPanel molecule + integration (D-C, D-F)** - New FilterPanel molecule: Popover trigger with active count badge, Clear all, Done actions - ProvidersStep: inline chips → FilterPanel Popover alongside search bar - VenueStep: same pattern, filter chips in Popover - CoffinsStep (D-F): grid-sidebar → wide-form (full-width 4-col grid), filters in Popover - WizardLayout: added `wide-form` variant (maxWidth lg, single column) for card grids - FilterPanel stories: Default, WithActiveFilters, SelectFilters, CustomLabel - **Batch 4: Step Simplifications (D-D, D-G)** - ProvidersStep (D-D): removed selection state, Continue button, radiogroup pattern. Clicking a provider card triggers navigation directly. Stories updated. - CoffinDetailsStep (D-G): removed all customisation (handles, lining, nameplate, OptionSection, ProductOption/CoffinDetailsStepValues types). Simplified to coffin profile + Continue CTA. Changed from detail-toggles to centered-form layout. Stories simplified. - Updated CoffinDetailsStep index.ts re-exports - **Batch 5: ArrangementDialog organism (D-E)** - New ArrangementDialog organism: MUI Dialog with two internal steps - Step 1 (preview): ProviderCardCompact, package summary with sections/items/total, "What happens next" checklist - Step 2 (auth): SSO buttons, email, progressive disclosure for details, verification code, terms - Parent controls step state + auth form values; dialog has back arrow and close button - Stories: Default (full flow), AuthStep, AuthDetails, PrePlanning - PreviewStep + AuthGateStep kept for now, to be deprecated once dialog is wired in **Decisions made:** - All 8 iteration decisions now implemented: D-A through D-H **Quality passes:** - Ran 3 parallel audits (FilterPanel, ArrangementDialog, all reworked steps) - FilterPanel: 4 P0 + 2 P1 fixed (forwardRef, useId, aria-controls, dialog role, label prop, scroll) - ArrangementDialog: 3 P0 + 2 P1 fixed (forwardRef, focus management, aria-live, semantic tokens, Link atom) - Sticky headers: responsive padding match + top breathing room (pt: 2) - ProvidersStep: role="list", semantic map token - VenueStep: aria-label on search, semantic map token - CoffinDetailsStep: form wrapper added **Remaining P1/P2 (for next session):** - VenueStep/CoffinsStep radiogroup arrow-key navigation (P1) - ArrangementDialog step number badge hardcoded font size/weight (P1) - ArrangementDialog mobile fullscreen treatment (P1) - CoffinDetailsStep centered-form width may be tight for coffin images (P2) - CTA alignment inconsistency VenueStep vs CoffinsStep/CoffinDetailsStep (P2) - ArrangementDialog missing story variants: verify, loading, errors, overflow (P2) **Open questions:** - PreviewStep + AuthGateStep: deprecate/remove once ArrangementDialog fully replaces them in the flow - User to review all steps in Storybook and report any visual issues still present **Next steps:** - User review in Storybook — note any remaining visual issues - Fix remaining P1s (radiogroup keyboard nav, dialog mobile fullscreen) - Wire ArrangementDialog into PackagesStep flow - Component registry updates for FilterPanel + ArrangementDialog --- ### Session 2026-03-29c — Grooming pass: critique/harden/polish all 15 steps **Agent(s):** Claude Opus 4.6 (1M context) **Work completed:** - **Full grooming pass across all 15 wizard steps** — applied critique (UX design review), harden (edge cases/error states), and polish (visual alignment/copy/code) frameworks. - **[P0] CrematoriumStep bug fix:** `