familysync/.planning/phases/06-ux-polish/06-04-SUMMARY.md

---

phase: 06-ux-polish plan: "04" subsystem: pwa/styles tags: [css, animation, d-13] dependency_graph: requires: [] provides: - "@keyframes pulse (apps/pwa/src/styles/tokens.css)" affects: - LiveSyncIndicator (reconnecting dot now resolves the global pulse keyframe) - PushPermissionPrompt (redundant local spin redefinition removed) tech_stack: added: [] patterns: - Global keyframe resolution: all animation consumers reference tokens.css keyframes, not local <style> blocks key_files: created: [] modified: - apps/pwa/src/styles/tokens.css - apps/pwa/src/components/PushPermissionPrompt.tsx decisions:

• D-13: @keyframes pulse added globally to tokens.css so the LiveSyncIndicator reconnecting dot animates regardless of component mount order; the redundant local spin redefinition in PushPermissionPrompt.tsx removed for hygiene metrics: duration_minutes: 5 completed_date: "2026-06-10" tasks_completed: 2 files_changed: 2

---

Phase 06 Plan 04: Sync-Indicator Animations (D-13) Summary

One-liner: Added global @keyframes pulse to tokens.css and removed the redundant local @keyframes spin block from PushPermissionPrompt.tsx so both sync-state animations resolve from the stylesheet.

Tasks Completed

Task	Name	Commit	Files
1	Add @keyframes pulse globally; remove redundant spin redefinition	81f2678	tokens.css, PushPermissionPrompt.tsx
2 (checkpoint)	playwright-cli — confirm spinner spins and reconnecting dot pulses	(verification only)	—

What Was Built

The plan's corrected diagnosis was that @keyframes spin was already global in tokens.css (lines 140–147) so the SyncStateToast spinner already worked. The two real bugs were:

• Missing @keyframes pulse in tokens.css → LiveSyncIndicator's reconnecting dot (animation: 'pulse 1.4s ease-in-out infinite') never animated.
• Redundant local <style> block in PushPermissionPrompt.tsx that redefined @keyframes spin — harmless but incorrect; removed for hygiene.

Fix (commit 81f2678):

• Added @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } } to tokens.css directly after @keyframes spin, matching the existing block format (no vendor prefixes, no animation-fill-mode inside).
• Deleted the <style> block from PushPermissionPrompt.tsx. The inline animation: 'spin 1s linear infinite' style on the Loader2 element was left intact — it still resolves to the global keyframe.
• LiveSyncIndicator.tsx and SyncStateToast.tsx were not modified; their inline animation references are correct.

Checkpoint Verification (Task 2)

Verified via playwright-cli against desktop Chromium with DEV_AUTH_BYPASS=true:

• SyncStateToast Loader2 spinner — computed animationName === 'spin'; transform sampled rotating (1s linear infinite). PASS.
• LiveSyncIndicator reconnecting dot — computed animationName === 'pulse'; opacity oscillating at 1.4s ease-in-out. PASS.
• No console errors about undefined keyframes.

No follow-up fixes were needed after the checkpoint.

Residual Device-Only Item

CP-04.3 (iOS device-only): PushPermissionPrompt's spinner renders only inside an installed iOS/standalone PWA — not drivable in desktop Chromium. Code-confirmed: the spinner uses the same inline animation: 'spin 1s linear infinite' that resolves to the global @keyframes spin in tokens.css. A human/device spot-check during Phase 3 Gate 2 or the go-live deploy is sufficient.

Deviations from Plan

None — plan executed exactly as written.

Threat Flags

None. Pure CSS keyframe addition and redundant inline-style deletion. No data, no network, no auth surface touched. T-06-04 accepted per threat model.

Self-Check: PASSED

• apps/pwa/src/styles/tokens.css — FOUND (contains @keyframes pulse)
• apps/pwa/src/components/PushPermissionPrompt.tsx — FOUND (no @keyframes spin block)
• Commit 81f2678 — FOUND (fix(06-04): add global pulse keyframe and drop redundant spin redefinition)
• @keyframes pulse present exactly once in tokens.css — CONFIRMED
• No @keyframes spin in PushPermissionPrompt.tsx — CONFIRMED