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

Merge commit '4158d999dec87b73f59b3ee5d51e2f3296ee3ad7'

sample-front-end/index.html

@@ -16,6 +16,10 @@
                 darker: '#111827',
                 card: '#374151'
               }
+            },
+            animation: {
+              'scroll-out-left': 'scroll-out-left 1s linear infinite',
+              'scroll-out-right': 'scroll-out-right 1s linear infinite',
             }
           }
         }
@@ -36,6 +40,23 @@
       ::-webkit-scrollbar-thumb:hover {
         background: #6b7280; 
       }
+
+      /* 
+         Symmetrical Diagonal Scroll Animations
+         Pattern width: 40px (20px color + 20px transparent).
+         Diagonal length: 40 * sqrt(2) ≈ 56.57px.
+         
+         Left Side: Anchored to Right (Center). Moves Left (increases right offset).
+         Right Side: Anchored to Left (Center). Moves Right (increases left offset).
+      */
+      @keyframes scroll-out-left {
+        0% { background-position: right 0 top 0; }
+        100% { background-position: right 56.57px top 0; }
+      }
+      @keyframes scroll-out-right {
+        0% { background-position: left 0 top 0; }
+        100% { background-position: left 56.57px top 0; }
+      }
     </style>
   <script type="importmap">
 {