RHG Modal Build Plan · Executive Team Explainer

The current state — and the gap

The modal flow you're seeing on Reality Health Games already writes pledges and timeline posts to localStorage. The "broken" feeling isn't that nothing happens — it's that there's nowhere on the platform to see the saved data, no branded sharing, and no Coach Lucy loop closing the circle.

What already works (silently): Pledges save to localStorage.ffh_personal_locker. Timeline posts save to localStorage.ffh_personal_timeline. We just need to surface, brand, and connect.

The three connected pieces

Piece AMy Pledges Panel — A new section on /live-it-trackers/ that surfaces the pledges as live, check-offable tasks, hosted by Coach Lucy. Piece BBranded SHARE Template — When the user taps "Share to anyone," they first see a customize step that lets them edit the text, toggle a 500×500 branded graphic, and add the join CTA — then the iOS/Android share sheet opens with the real artifact attached. Piece CCard Collection — Every Tip-of-the-Day generates a 500×500 collectible card; the user's collection lives on the Profile page as a grid of earned cards, filterable by body system.

What ties them together

Coach Lucy. Every pledge, every share, every collected card flows through her. She greets, she nudges, she celebrates, she recalculates. Each piece is independently valuable, but they multiply when stacked.

Recommended build order

Session 1 (2–3 hrs): Piece A — My Pledges Panel + Coach Lucy greeting on Trackers. Visible value the same day.
Session 2 (2 hrs): Piece B — Branded SHARE Template (canvas card + customize step).
Session 3 (2 hrs): Piece C — Card Collection viewer on Profile + auto-mint on share/post.

Piece A · My Pledges Panel

~2–3 hrs A new section on the LIVE IT Trackers page where pledges saved from the RHG modal become live, gamified tasks — hosted by Coach Lucy.

How it lays out

A "My Pledges" card sits at the top of /live-it-trackers/ (above existing trackers like Weight, Hydration). Coach Lucy's avatar greets the user with a count-aware message. Below that: each pledge as a row with check-off, days-since-pledged, and streak.

Pledge row states

ActiveDefault. White card, check-circle on right. Tap to mark done. Done todayGreen tint, ✓ filled, label struck through. Awards LIVE It Coin + streak bump. OverdueOrange tint after 3 days without a check-off. Coach Lucy adds a soft nudge in her greeting. SnoozedLong-press → snooze 1d / 1w / "let me think about it". Hidden from main list, surfaced in "Maybe later" drawer.

Copy decisions

Header (0 pledges)"Hey Coach — your locker is empty. Next Tip of the Day, tap a few pledges to get started." Header (1–3)"You've got {n} open pledges. Want to tackle one today?" Header (4+)"{n} open pledges — that's ambitious. Let's focus on one or two." On complete"Boom. +1 LIVE It Coin. {n}-day streak."

FFH · Trackers

Coach

🌟

Coach Lucy

You've got 3 open pledges. Want to tackle one today?

My Pledges · 3 active

🤝

Reach out to one person I haven't talked to in a while

Pledged 2 days ago · 🔥 0

🌅

Get 10 min of morning sunlight + a walk

Done today · 🔥 5

✓

📞

Schedule a mental health check-in with my doctor

Pledged 5 days ago · ⏰ Overdue

Data structure (already exists)

localStorage.ffh_personal_locker = [
  {
    id: "pledge-1716678234-0",
    type: "pledge",
    topic: "mental health",
    label: "Reach out to one person...",
    icon: "🤝",
    source: "learn-it-challenge",
    addedAt: "2026-05-23T14:23:54Z",
    status: "active" | "done" | "snoozed",
    completedAt: "2026-05-25T09:14:00Z",
    streak: 5,
    snoozedUntil: "2026-05-30"
  }
]

Coach Lucy hooks: Panel header avatar + count-aware greeting. On complete: confetti toast + "+1 LIVE It Coin · 5-day streak." If 3+ days overdue: gentle nudge in greeting ("Want help making time for that doctor call?").

Edge cases handled

Empty state with onboarding nudge ("Try the Tip of the Day to add your first pledge")
Same pledge added twice → deduplicate by label + topic
Cross-device sync via Supabase mirror (writes both localStorage AND user_pledges table)
Privacy: nothing leaves the device until the user is signed in

Piece B · Branded SHARE Template

~2 hrs When the user taps "Share to anyone," they see a customize step first — preview the branded card, edit text, toggle pieces — then the OS share sheet opens with the real PNG attached.

The flow

User taps Share to anyone in the SHARE IT step.
A Customize Share view replaces the share options.
Live preview of the 500×500 card updates as they edit.
Toggles for: include graphic, include join CTA.
"Share now →" calls navigator.share({ files: [pngBlob], text, url }).
iOS/Android share sheet opens with the PNG already attached + the personalized text.

The 500×500 card spec

Canvas500×500 PNG generated via HTML canvas at share time. No round-tripping to a server. BackgroundNavy gradient with a 6px top stripe in the body-system color (Mental = purple, Cardio = red, etc.) LogoWhite FFH wordmark, top-right, ~32px tall. Tip textGeorgia serif, 32–40px, gold accent on emphasis word. AttributionOptional ("— from Coach Lucy" or user name if signed in). Footer"theforce.health · Protect the Gift ❤️"

Customize controls

Tip textEditable textarea, pre-filled with the day's tip. Include graphicToggle ON by default. Off = text-only share. Include join CTAToggle ON. Adds "→ Join free at theforce.health" line. Add my nameToggle OFF default. If on, adds "— Coach Lucy" attribution.

FFH · SHARE IT

Step 5/6

Customize your share

Compatibility

iOS Safari 16.4+: Full navigator.share({ files }) support — graphic attaches to iMessage, Mail, Notes, Twitter, etc.
Chrome Android: Full file-share support.
Desktop / unsupported: Falls back to copying text + downloading the PNG.

Why this matters: The bare-URL share you saw in your screenshot is the default Web Share API — it's what we get when no template is composed. With files attached, every share is a piece of FFH-branded media in the recipient's hands.

Piece C · Card Collection

~2 hrs Every share AND every Personal Timeline post auto-mints a 500×500 collectible card. The user's collection lives on the Profile page as a filterable grid — the more they engage, the more cards they earn.

How a card gets minted

Two triggers:

User taps Post to my Personal Timeline in the SHARE step → card minted automatically.
User taps Share to anyone with the graphic toggle ON → same card minted as a "shared" entry.

The card's PNG dataURL is saved to localStorage.ffh_card_collection + Supabase user_cards. No duplicate cards: same tip → same card (already-collected indicator instead).

Collection viewer

New section on the Profile page: My Tip Cards. Grid of earned cards (3 cols desktop, 2 mobile). Above the grid:

Filter chipsAll · Mental · Cardio · Respiratory · Musculoskeletal · ... (one per body system) SortNewest · Oldest · By System Empty state"Start collecting! Every share earns a Tip Card. There are 365 to find this year." Count"You've collected 12 of ~120 tips this season."

Card detail (tap to expand)

Modal shows: full-size card, the original tip text, what action you took to earn it, date earned, plus a "Re-share" button so they can send the same card to a new friend.

FFH · My Cards

12/120

My Tip Cards

12 collected

All Mental Cardio Resp

Mental · Day 142

Mental health = community health.

May 25

Cardio · Day 128

7,500 steps beats zero perfect ones.

May 11

Resp · Day 119

Box-breathe 4-4-4-4 before the meeting.

May 2

Musk · Day 110

Stand up every 30 — your spine thanks you.

Apr 23

Data structure (new)

localStorage.ffh_card_collection = [
  {
    id: "card-mental-day142",
    tipId: "day142-mental",
    topic: "mental health",
    bodySystem: "mental",
    tipText: "Mental health = community health...",
    imageDataURL: "data:image/png;base64,iVBORw0...",
    earnedAt: "2026-05-25T09:23:54Z",
    earnedVia: "timeline-post" | "share-with-graphic",
    actionTaken: "Reached out to one person"
  }
]

Coach Lucy hooks: When the user mints card #5, #10, #25, #50, #100 — celebration modal with badge unlock. At 50 cards collected: "Halfway through the season — let's keep this streak alive." Coach Lucy can also surface "Cards you haven't earned yet" as future challenges.

The Coach Lucy Loop

Each piece is independently useful — but Coach Lucy is what makes them feel like a single, alive experience instead of three disconnected features.

Touchpoints across the three pieces

Pledge createdCoach Lucy's voice in the modal copy ("Tap any you want to commit to. I'll keep them safe in your locker.") Pledge surfacedAvatar + count-aware greeting in the Tracker panel header. Pledge doneToast with confetti, coin, streak bump. Surfaced in next Coach Lucy chat ("You hit your sunlight pledge 5 days running — proud of you.") Pledge overdueGentle nudge in greeting ("Want help making time for that doctor call?") Share composedCoach Lucy can pre-suggest an attribution line ("— from Coach Lucy" by default; toggleable to user's name). Card mintedCoach Lucy congratulates: "Card #5 — keep collecting." At milestones: bigger celebration. Chat openedIf pledges or cards are pending action, opening Coach Lucy chat greets with that context.

Recalculator integration

Every completed pledge in a topic (e.g., "mental health") increments a topic-level engagement score that feeds into:

The user's PHIT Score (positive nudge per completion)
The user's Risk Recalculators on relevant condition pages (e.g., depression recalculator on mental-health page)
Their Chamber team's aggregate score in Reality Health Games standings

Net effect: A single pledge tap on the RHG modal now ripples through the Trackers, the Cards collection, the PHIT Score, the recalculators, AND the Chamber leaderboards — with Coach Lucy narrating the journey. That's the loop you've been describing.

Sound right?

Reply with which piece you want me to start with, or any edits to copy / layout / data / Coach Lucy behavior. I won't touch code until you green-light.