feat(call): show banner when preferred device reconnects and is restored

When a device disconnects, auto-fallback switches to another device and
shows a banner. Now when the original device comes back and the system
switches back to it, a recovery banner ("reconnected — switched back")
is shown for situational awareness. Applies to camera, mic, and speaker.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JamesPHoughton

client/src/call/hooks/useDeviceAlignment.js

@@ -215,6 +215,8 @@ export function useDeviceAlignment(
       console.log(`Setting ${deviceType} via ${matchType} match`, {
         preferredId, preferredLabel, targetId, targetLabel: targetDevice.device.label, matchType,
       });
+      // Check if this is a recovery (we previously fell back for this device)
+      const isRecovery = loggedUnavailableRef.current === preferredId;
       // eslint-disable-next-line no-param-reassign
       loggedUnavailableRef.current = null;
       // eslint-disable-next-line no-param-reassign
@@ -227,6 +229,14 @@ export function useDeviceAlignment(
           }
           // Clear any stale fallback banner for this device
           if (clearBannersForDevice) clearBannersForDevice(deviceType);
+          // Show recovery banner so the user knows we switched back
+          if (isRecovery && addDeviceBanner) {
+            const deviceName = targetDevice.device.label || preferredLabel || preferredId;
+            addDeviceBanner({
+              deviceType,
+              message: `"${deviceName}" reconnected — switched back`,
+            });
+          }
         }
       } catch (err) {
         console.error(`Failed to set ${deviceType} via ${matchType} match`, err);
@@ -350,6 +360,7 @@ export function useDeviceAlignment(
         preferredSpeakerId, preferredSpeakerLabel,
         targetId, targetLabel: targetSpeaker.device.label, matchType,
       });
+      const isSpeakerRecovery = loggedUnavailableSpeakerRef.current === preferredSpeakerId;
       loggedUnavailableSpeakerRef.current = null;
       updatingSpeakerRef.current = true;
       try {
@@ -360,6 +371,14 @@ export function useDeviceAlignment(
           }
           // Clear any stale fallback banner for speaker
           if (clearBannersForDevice) clearBannersForDevice("speaker");
+          // Show recovery banner so the user knows we switched back
+          if (isSpeakerRecovery && addDeviceBanner) {
+            const deviceName = targetSpeaker.device.label || preferredSpeakerLabel || preferredSpeakerId;
+            addDeviceBanner({
+              deviceType: "speaker",
+              message: `"${deviceName}" reconnected — switched back`,
+            });
+          }
           setPendingGestureOperations((prev) => ({ ...prev, speaker: false }));
           setPendingOperationDetails((prev) => ({ ...prev, speaker: null }));
         }