Add a manual sync button to the UI, along with a sync status indicator bar.

Merge commit '4158d999dec87b73f59b3ee5d51e2f3296ee3ad7'

sample-front-end/Config.ts

@@ -0,0 +1,23 @@
+// Animation and timing configuration centralization.
+// Adjust these values for debugging or tuning animation behavior.
+export const STRIPE_TILE_SIZE = 56.57; // px size for repeating background pattern
+export const STRIPE_BASE_SPEED = 56.57; // px per second initial scroll speed
+export const STRIPE_DECEL_DURATION_MS = 500; // ms duration of deceleration phase
+
+export const SYNC_SUCCESS_TOTAL_MS = 1000; // ms until header returns to idle after success
+export const SYNC_ERROR_RESET_MS = 2000; // ms until reset after error state
+
+export const TOAST_AUTO_DISMISS_MS = 3000; // ms before toast begins exit
+export const TOAST_EXIT_DURATION_MS = 300; // ms exit animation duration
+
+// If needed later for entrance timing tweaks
+export const TOAST_ENTER_FRAME_DELAY_MS = 0; // logical placeholder (double rAF currently)
+
+// Helper: derive CSS backgroundSize string
+export const STRIPE_BACKGROUND_SIZE = `${STRIPE_TILE_SIZE}px ${STRIPE_TILE_SIZE}px`;
+
+// Sync banner sizing (background behind SYNCHRONIZING / SYNC COMPLETE text)
+// Adjust these to change the black rectangle size.
+export const SYNC_BANNER_PADDING_X = 32; // horizontal padding in px
+export const SYNC_BANNER_PADDING_Y = 6;  // vertical padding in px
+export const SYNC_BANNER_MIN_WIDTH = 260; // optional minimum width (px)