From 86420c85de4ec5babed981400e69cdd8f5e3f017 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Sat, 7 Feb 2026 02:38:21 +0530
Subject: [PATCH] feat: wire up Resync button in session toolbar

Connect the existing Resync button to the resyncAudio hook from useGearUtils.
Calls jamClient.SessionAudioResync() via native C++ bridge to perform audio
resync, with loading state and error handling via toast notifications.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/client/JKSessionScreen.js  | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index c9248a173..2bef88172 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -110,6 +110,7 @@ const JKSessionScreen = () => {
     guardAgainstInvalidConfiguration,
     guardAgainstActiveProfileMissing,
     guardAgainstSinglePlayerProfile,
+    resyncAudio,
   } = useGearUtils();
 
   const { initialize: initializeMixer, onSessionChange } = useMixerStore();
@@ -195,6 +196,9 @@ const JKSessionScreen = () => {
   //state for video button
   const [videoLoading, setVideoLoading] = useState(false);
 
+  // State for resync button
+  const [resyncLoading, setResyncLoading] = useState(false);
+
   // Redux backing track state (modal visibility and data)
   const backingTrackData = useSelector(selectBackingTrackData);
   const showBackingTrackPlayer = Boolean(backingTrackData);
@@ -1012,6 +1016,27 @@ const JKSessionScreen = () => {
     }
   };
 
+  // Handle Resync button click - performs audio resync via native client
+  const handleResync = useCallback(async (e) => {
+    e.preventDefault();
+    if (resyncLoading) return;
+
+    setResyncLoading(true);
+    try {
+      await resyncAudio();
+      // Silent success (matches legacy behavior)
+    } catch (error) {
+      console.error('Audio resync failed:', error);
+      if (error.message === 'timeout') {
+        toast.error('Audio resync timed out. Please try again.');
+      } else {
+        toast.error('Audio resync failed: ' + (error.message || 'Unknown error'));
+      }
+    } finally {
+      setResyncLoading(false);
+    }
+  }, [resyncAudio, resyncLoading]);
+
   // Attach button handlers
   const handleAttachClick = useCallback(() => {
     if (attachFileInputRef.current) {
@@ -1277,9 +1302,10 @@ const JKSessionScreen = () => {
             <img src={attachIcon} alt="Attach" style={{ width: '16px', height: '16px', marginRight: '0.2rem' }} />
             {isUploading ? 'Uploading...' : 'Attach'}
           </Button>
-          <Button className='btn-custom-outline' outline size="md">
+          <Button className='btn-custom-outline' outline size="md" onClick={handleResync} disabled={resyncLoading}>
             <img src={resyncIcon} alt="Resync" style={{ width: '16px', height: '16px', marginRight: '0.2rem' }} />
-            Resync</Button>
+            {resyncLoading ? <><Spinner size="sm" /> Resyncing...</> : 'Resync'}
+          </Button>
         </div>
       </CardHeader>