feat(shared): add streak progression system and milestone claim UX

[tomeredlich]

Summary

• add the new streak progression experience, including timeline milestones, claim actions, claim animations, and supporting popovers/calendar UI
• polish streak debug and drawer/tooltip behaviors, including reset handling for claimed milestones and claim-state defaults
• include related shared UI refinements that are already part of this branch history (social repost metadata consistency and supporting component/test updates)

Test plan

• open the streak popup in tooltip mode and verify milestone rows default to Claim until clicked
• claim a cores milestone and verify the icon flies to wallet without snapping back
• verify no post-claim share popover appears for cores claims
• click debug Reset and verify claimed milestones are reset
• run shared lint/tests as needed for touched areas

Made with Cursor

Preview domain

https://feat-streak-progression-system.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Mar 8, 2026 7:20pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Mar 8, 2026 7:20pm

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ rebelchris
❌ tomeredlich
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[tomeredlich]

@claude check pr

[claude]

Claude finished @tomeredlich's task in 2m 17s —— View job

---

PR Review: feat(shared): add streak progression system and milestone claim UX

• Gather PR context and changed files
• Analyze key source files for correctness and quality
• Check for bugs, security issues, performance problems
• Review code style and best practices
• Post final review

---

This is a substantial feature PR (~70 files, +5723/-316). The core streak progression system is well-structured overall. Here are the issues found, grouped by severity.

---

🔴 Bugs / Broken Logic

1. Dead code — tooltip path is completely unreachable
packages/shared/src/components/streak/ReadingStreakButton.tsx:272

const shouldOpenInDrawer = true; // always true

The ConditionalWrapper at line 280 uses condition={!shouldOpenInDrawer}, which is always false. This means CustomStreaksTooltip (lines 63–103) and its props (showMilestoneTimeline, milestoneClaimResetNonce, isDebugMode, etc.) are entirely dead code — never rendered in production. Either remove the constant and the tooltip path entirely, or make this an actual runtime decision. Fix this →

2. Hard-coded "Day 4 Milestone!" label for sponsored reward
packages/shared/src/components/streak/popup/ClaimRewardAnimation.tsx:208

<Typography ...>Day 4 Milestone!</Typography>

This text is hardcoded and will be wrong if SPONSORED_STREAK_MILESTONE_DAY changes. It should use reward.milestoneDay instead. Fix this →

---

🟡 Issues Worth Addressing

3. Brittle wallet DOM selector
packages/shared/src/components/streak/popup/ClaimRewardAnimation.tsx:37

const WALLET_BUTTON_SELECTOR = 'a[href="/wallet"]';

This will silently fail (animation stays center-screen) if the wallet href changes (e.g., locale prefixes, route changes). A data-testid="wallet-nav-link" or similar attribute would be more resilient. Fix this →

4. No visual feedback when claiming non-cores rewards (Perks/Cosmetics)
packages/shared/src/components/streak/popup/MilestoneTimeline.tsx:403–413

When coresAmount is null (e.g., "48H Boost post", "Verified Reader title", "Top comment"), no animation fires — only the button state changes to "Claimed". The user gets no feedback that their perk was acknowledged. At minimum, a toast or brief confirmation should be shown.

5. StreakMonthCalendar — initialStreakRef never updated
packages/shared/src/components/streak/popup/StreakMonthCalendar.tsx:65–70

const activeStreak = Math.max(streakOverride ?? currentStreak ?? 1, 1);
const initialStreakRef = useRef(activeStreak);
const streakDelta = activeStreak - initialStreakRef.current;

initialStreakRef.current is set once on mount and never updated. In debug mode where streakOverride changes frequently, streakDelta accumulates and the displayed today date drifts unexpectedly. The ref should be updated when streakOverride changes between debug sessions, or this mechanism needs documentation.

6. Claim state is purely local/ephemeral
packages/shared/src/components/streak/popup/MilestoneTimeline.tsx:382

const [claimedDays, setClaimedDays] = useState<Set<number>>(new Set());

Closing and reopening the drawer resets all "Claimed" buttons back to "Claim". If rewards are genuinely tracked backend-side, the claimed state should be fetched from there; if not, consider persisting in sessionStorage at minimum so the state survives re-opens within the same session.

---

🟡 Non-Production Assets in Source Tree

7. Automation prompt/storyboard files in src/components/streak/

These three files don't belong in the production source:

• packages/shared/src/components/streak/automation/session-animation.ai-prompt.md
• packages/shared/src/components/streak/automation/session-animation.storyboard.md
• packages/shared/src/components/streak/automation/session-animation.voiceover.md

These are AI video generation assets and should live in a docs/ or .internal/ directory (or be removed from the repo entirely) — not in src/components. Fix this →

---

🟢 Minor / Nits

8. Both UrgencyLevel.Low and UrgencyLevel.Medium use animate-streak-pulse
ReadingStreakButton.tsx:323–328 — identical animation for two different urgency levels. If intentional, collapsing the condition into (Low || Medium) would make intent clearer.

9. FeedGreetingHero.tsx is 1,126 lines — well over what a single component file should contain. While not blocking, it's worth splitting into smaller sub-components during a follow-up.

10. RELEASE_CHECKLIST.md in the repo root — This is a useful operational document, but including it in a feature PR is unexpected. Consider opening it as a separate PR with its own context so it gets proper review attention.

---

✅ What's Done Well

• The seededRandom function for stable sparkle positions is a clean solution that avoids hydration mismatches.
• useStreakDebug with useSyncExternalStore for cross-component global debug state is the right pattern.
• useStreakIncrement is simple, focused, and correctly cleans up timers.
• The milestone claim reset via claimResetNonce prop is a clean way to propagate reset events without lifting state unnecessarily.
• isStreakDebugEnabled() properly gates debug mode behind isProductionAPI check + localStorage opt-in — good security posture.

---

· Preview