packages/ui-voip/src/v2/components/Widget/WidgetHandle.tsx (1)

28-29: A11y: hide decorative icon from screen readers

The meatballs icon is purely visual; mark it decorative.

-			<Icon color='info' name='stacked-meatballs' size='x20' />
+			<Icon aria-hidden='true' color='info' name='stacked-meatballs' size='x20' />

packages/ui-voip/src/v2/components/Widget/Widget.tsx (3)

36-38: Call boundingRef(null) on unmount and guard for SSR

The ref callback likely installs DOM listeners; without cleanup this can leak. Also guard for non‑browser environments.

-	useLayoutEffect(() => {
-		boundingRef(document.body);
-	}, [boundingRef]);
+	useLayoutEffect(() => {
+		if (typeof document === 'undefined') {
+			return;
+		}
+		boundingRef(document.body);
+		return () => boundingRef(null);
+	}, [boundingRef]);

---

3-6: Memoize context value to avoid unnecessary re-renders of all consumers

Provider currently creates a new object every render; memoize it since the ref callbacks are stable.

-import { ComponentProps, useLayoutEffect } from 'react';
+import { ComponentProps, useLayoutEffect, useMemo } from 'react';
@@
-	return (
-		<DragContext.Provider value={{ draggableRef, boundingRef, handleRef }}>
+	const value = useMemo(() => ({ draggableRef, boundingRef, handleRef }), [draggableRef, boundingRef, handleRef]);
+	return (
+		<DragContext.Provider value={value}>

Also applies to: 41-45

---

29-31: children is redundant in WidgetProps

ComponentProps<typeof WidgetBase> already includes children; you can drop the explicit field.

-type WidgetProps = {
-	children: React.ReactNode;
-} & ComponentProps<typeof WidgetBase>;
+type WidgetProps = ComponentProps<typeof WidgetBase>;

packages/ui-voip/src/v2/useKeypad.tsx (1)

33-36: Toggle logic is clean; minor naming nit

Optional: expose isOpen in the hook result to allow consumers to reflect UI state without re-deriving.

 return {
   element,
-  buttonProps: {
+  isOpen: open,
+  buttonProps: {
     title: open ? t('Close_dialpad') : t('Open_dialpad'),
     onClick: () => setOpen((open) => !open),
-  },
+  },
 };

apps/meteor/client/NavBarV2/NavBarVoipGroup/NavBarVoipGroup.tsx (2)

2-8: Remove commented imports before merge

Dead commented imports accumulate noise. If feature gating is gone, delete; if temporary, add TODO with tracking issue.

---

21-23: OK to drop toggler if replaced

If the toggler UI was superseded by the dialer action, remove the commented JSX.

packages/ui-voip/src/providers/useMediaStream.ts (2)

20-23: Minor: ignore play() promise and add playsInline for mobile

Optional hardening: prefix with void to signal intentional ignore; playsInline helps iOS.

- node.srcObject = remoteStream;
- node.play().catch((error) => {
+ node.srcObject = remoteStream;
+ node.playsInline = true;
+ void node.play().catch((error) => {
   console.error('MediaCall: useMediaStream - Error playing media stream', error);
 });

---

25-29: Cleanup order is fine; consider guarding against stale element

If multiple mounts happen quickly, ensure you pause/clear only the element you set.

- return () => {
-   actualRef.current = null;
-   node.pause();
-   node.srcObject = null;
- };
+ return () => {
+   if (actualRef.current === node) {
+     actualRef.current = null;
+     node.pause();
+     node.srcObject = null;
+   }
+ };

packages/ui-contexts/src/hooks/useMediaDevicePermission.ts (1)

27-33: Docstring now mismatches capability (audio‑only wording vs. generic constraints).

requestDevice can accept video constraints now. Either restrict the accepted constraints to audio or update the JSDoc to reflect broader capability.

packages/ui-voip/src/v2/components/ActionButton.tsx (1)

5-10: Type onClick to match IconButton’s handler.

Use React’s MouseEventHandler to allow callers to access the event.

-import { ComponentProps, forwardRef } from 'react';
+import { ComponentProps, forwardRef, type MouseEventHandler } from 'react';
@@
 type ActionButtonProps = {
 	label: string;
 	icon: Keys;
 	disabled?: boolean;
-	onClick?: () => void;
+	onClick?: MouseEventHandler<HTMLButtonElement>;
 } & Omit<ComponentProps<typeof IconButton>, 'icon' | 'title' | 'aria-label' | 'disabled' | 'onClick'>;

packages/ui-voip/src/hooks/useDevicePermissionPrompt.tsx (6)

50-54: LGTM: central helper to stop tracks.

Good utility; consider reusing it below to avoid duplicate logic.

---

63-66: Avoid name shadowing with exported stopTracks().

The parameter stopTracks shadows the exported function stopTracks, which is confusing. Rename the boolean and reuse the helper.

-	return useCallback(
-		(stopTracks = true) => {
+	return useCallback(
+		(shouldStopTracks = true) => {
@@
-				if (stopTracks) {
-					stream.getTracks().forEach((track) => {
-						track.stop();
-					});
-				}
+				if (shouldStopTracks) {
+					stopTracks(stream);
+				}

Also applies to: 95-99

---

70-89: Reduce enumerateDevices calls to once per stream.

You enumerate on every track; enumerate once and map by id.

-				stream.getTracks().forEach((track) => {
-					const { deviceId } = track.getSettings();
-					if (!deviceId) {
-						return;
-					}
-
-					if (track.kind === 'audio' && navigator.mediaDevices.enumerateDevices) {
-						navigator.mediaDevices.enumerateDevices().then((devices) => {
-							const device = devices.find((device) => device.deviceId === deviceId);
-							if (!device) {
-								return;
-							}
-							setInputMediaDevice({
-								id: device.deviceId,
-								label: device.label,
-								type: 'audioinput',
-							});
-						});
-					}
-				});
+				const audioTracks = stream.getAudioTracks();
+				if (audioTracks.length && navigator.mediaDevices.enumerateDevices) {
+					navigator.mediaDevices.enumerateDevices().then((devices) => {
+						const byId = new Map(devices.map((d) => [d.deviceId, d]));
+						for (const t of audioTracks) {
+							const id = t.getSettings().deviceId;
+							const dev = id && byId.get(id);
+							if (dev) {
+								setInputMediaDevice({ id: dev.deviceId, label: dev.label, type: 'audioinput' });
+								break;
+							}
+						}
+					});
+				}

---

157-179: Same optimization in the new flow.

Mirror the single enumerateDevices() call here too.

-					stream.getTracks().forEach((track) => {
-						const { deviceId } = track.getSettings();
-						if (!deviceId) {
-							return;
-						}
-
-						if (track.kind === 'audio' && navigator.mediaDevices.enumerateDevices) {
-							navigator.mediaDevices.enumerateDevices().then((devices) => {
-								const device = devices.find((device) => device.deviceId === deviceId);
-								if (!device) {
-									return;
-								}
-								setInputMediaDevice({
-									id: device.deviceId,
-									label: device.label,
-									type: 'audioinput',
-								});
-							});
-						}
-					});
+					const audioTracks = stream.getAudioTracks();
+					if (audioTracks.length && navigator.mediaDevices.enumerateDevices) {
+						navigator.mediaDevices.enumerateDevices().then((devices) => {
+							const byId = new Map(devices.map((d) => [d.deviceId, d]));
+							for (const t of audioTracks) {
+								const id = t.getSettings().deviceId;
+								const dev = id && byId.get(id);
+								if (dev) {
+									setInputMediaDevice({ id: dev.deviceId, label: dev.label, type: 'audioinput' });
+									break;
+								}
+							}
+						});
+					}

---

181-191: Add fallback for Overconstrained/NotFound errors when a preselected device is unavailable.

If deviceId: { exact } is stale, getUserMedia rejects. Retry with { audio: true } to recover.

-				if (state === 'granted') {
-					requestDevice({
-						onAccept: resolve,
-						onReject: reject,
-						constraints,
-					});
-					return;
-				}
+				const attemptRequest = (cs: MediaStreamConstraints) =>
+					requestDevice({
+						onAccept: resolve,
+						onReject: (err) => {
+							if (err && (err.name === 'OverconstrainedError' || err.name === 'NotFoundError') && cs !== { audio: true }) {
+								// fallback to generic audio
+								requestDevice({
+									onAccept: resolve,
+									onReject: reject,
+									constraints: { audio: true },
+								});
+							} else {
+								reject(err);
+							}
+						},
+						constraints: cs,
+					});
+
+				if (state === 'granted') {
+					attemptRequest(constraints);
+					return;
+				}
@@
-					requestDevice?.({
-						onReject: reject,
-						onAccept: (...args) => {
+					requestDevice?.({
+						onReject: (err) => {
+							if (err && (err.name === 'OverconstrainedError' || err.name === 'NotFoundError')) {
+								attemptRequest({ audio: true });
+								return;
+							}
+							reject(err);
+						},
+						onAccept: (...args) => {
 							onAccept(...args);
 							setModal(null);
 						},
 						constraints,
 					});

Also applies to: 194-203

---

205-208: Reject with a typed, actionable error on cancel.

Helps callers distinguish user cancel vs. permission/system errors.

-				const onCancel = () => {
-					reject();
+				const onCancel = () => {
+					reject(new DOMException('Permission prompt canceled by user', 'AbortError'));
 					setModal(null);
 				};

packages/ui-voip/src/v2/components/DevicePicker.tsx (3)

53-61: Normalize click behavior with output items (stop bubbling to menu)

Output rows preventDefault/stopPropagation; input rows don’t. For consistency and to avoid GenericMenu reacting to row clicks differently by section, mirror the handler on input items.

Apply:

   return {
     id: `${device.id}-input`,
     content: (
       <Box is='span' title={device.label} fontSize={14}>
         {device.label}
       </Box>
     ),
     addon: <RadioButton onChange={() => onDeviceChange(device)} checked={device.id === selectedAudioDevices?.audioInput?.id} />,
+    onClick(e?: MouseEvent<HTMLElement>) {
+      e?.preventDefault();
+      e?.stopPropagation();
+    },
   };

---

101-116: Handle permission rejection to avoid stale “opening” attempts

If the permission prompt is denied, we never update local state. Add a catch to keep the control closed decisively.

Apply:

 void requestPermission({
   actionType: 'device-change',
 }).then((stream) => {
   stopTracks(stream);
   setIsOpen(true);
-});
+}).catch(() => {
+  setIsOpen(false);
+});

---

118-128: Localize the button’s accessible label/tooltip

Button currently hardcodes label='customize'. Provide a localized title/aria-label so SR/tooltip text matches the menu title.

Apply:

-      button={<DevicePickerButton secondary={secondary} tiny={!secondary} />}
+      button={
+        <DevicePickerButton
+          secondary={secondary}
+          tiny={!secondary}
+          title={t('Device_settings_lowercase')}
+          aria-label={t('Device_settings_lowercase')}
+        />
+      }

packages/ui-voip/src/v2/components/PeerInfo/PeerInfo.stories.tsx (1)

11-29: Stories updated to new prop names — looks good

The story reflects callerId/displayName. Consider adding args to make knobs usable, but not required.

packages/ui-voip/src/v2/views/IncomingCall.tsx (2)

31-33: Pass handler directly; avoid extra closure

No need to wrap onAccept in an arrow.

Apply:

- <Button medium name='phone' icon='phone' success flexGrow={1} onClick={() => onAccept()}>
+ <Button medium name='phone' icon='phone' success flexGrow={1} onClick={onAccept}>

---

10-15: Guard against double-accept taps (optional UX hardening)

If onAccept does async work, consider disabling the button while pending to prevent race conditions or duplicate accept calls.

Would you like a small state wrapper here to gate repeated clicks?

Also applies to: 27-33

apps/meteor/client/ui.ts (2)

18-18: Consider feature-gating the new room action.

If voice calls should be configurable/permissioned, wrap useMediaCallRoomAction behind a setting/license/permission check to avoid surfacing the action when disabled.

Also applies to: 74-76

---

37-37: Remove commented code before merge.

Drop the commented import of useVoiceCallRoomAction to keep the module clean.

-// import { useVoiceCallRoomAction } from './hooks/roomActions/useVoiceCallRoomAction';

apps/meteor/client/providers/MeteorProvider.tsx (1)

52-53: Clean up leftover comments.

Remove the commented MediaCallsProvider markers.

-{/* <MediaCallsProvider> */}
 <MediaCallProvider>
   <OmnichannelCallProvider>
     <OmnichannelProvider>{children}</OmnichannelProvider>
   </OmnichannelCallProvider>
 </MediaCallProvider>
-{/* </MediaCallsProvider> */}

Also applies to: 57-58

apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx (1)

5-5: Gate the “Voice call” menu item behind capability/permission.

If calls are disabled or unavailable for the user, hide this section to avoid a dead action.

Would you like this gated by a setting (e.g., useSetting('VoIP_Enabled')) or a permission check? I can wire it accordingly.

Also applies to: 18-19, 32-37, 48-50

packages/ui-voip/src/v2/views/OngoingCall.tsx (3)

48-48: Localize the “Dialpad” label.

Use t('Dialpad') to match other localized labels.

-<ActionButton icon='dialpad' label='Dialpad' {...keypadButtonProps} />
+<ActionButton icon='dialpad' label={t('Dialpad')} {...keypadButtonProps} />

---

53-57: Safer display name for hangup label (fallback).

Guard against missing displayName/number and reuse the same display-name logic used elsewhere.

-<ActionButton
-  label={t('Voice_call__user__hangup', { user: 'userId' in peerInfo ? peerInfo.displayName : peerInfo.number })}
+<ActionButton
+  label={t('Voice_call__user__hangup', {
+    user: 'userId' in peerInfo ? (peerInfo.displayName || peerInfo.userId) : (peerInfo.number || t('Unknown')),
+  })}
   icon='phone-off'
   danger
   onClick={onEndCall}
/>

---

50-51: Toggle icons for Hold are identical.

Both entries are 'pause-shape-unfilled'; consider a resume icon (e.g., 'play') for the unheld state.

Do you want 'play' for resume? I can update it.

apps/meteor/client/hooks/roomActions/useMediaCallRoomAction.ts (2)

53-65: Gate the action until peer info is ready to avoid opening the generic dialer.

If the query hasn’t resolved yet, callee is undefined and the action opens the dialer instead of calling the peer.

Apply:

-  if (!peerId) {
+  if (!peerId || !peerInfo) {
     return undefined;
   }
@@
-  }, [peerId, title, icon, action]);
+  }, [peerId, peerInfo, title, icon, action]);

---

34-34: Avoid broad type assertion; use non-null assertion with enabled guard.

Cleaner and keeps types honest.

-const { data } = useUserInfoQuery({ userId: peerId as string }, { enabled: !!peerId });
+const { data } = useUserInfoQuery({ userId: peerId! }, { enabled: Boolean(peerId) });

packages/ui-voip/src/v2/components/PeerInfo/InternalUser.tsx (1)

11-12: A11y: label avatar/fallback and align center.

Add an accessible label for the avatar/fallback and vertically center content.

-  <Box display='flex' flexDirection='row'>
-    <Box mie={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x20' /> : <Icon name='user' size='x20' />}</Box>
+  <Box display='flex' flexDirection='row' alignItems='center'>
+    <Box mie={8}>
+      {avatarUrl ? <Avatar url={avatarUrl} size='x20' title={displayName} /> : <Icon name='user' size='x20' aria-hidden='true' />}
+    </Box>

packages/ui-voip/src/v2/TransferModal.tsx (3)

20-26: Wire isLoading to UI.

Prop exists but is unused; disable/indicate loading on confirm.

-type TransferModalProps = {
+type TransferModalProps = {
   isLoading?: boolean;
   onCancel(): void;
   onConfirm(kind: 'user' | 'sip', id: string): void;
 };
 
-const TransferModal = ({ onCancel, onConfirm }: TransferModalProps) => {
+const TransferModal = ({ onCancel, onConfirm, isLoading = false }: TransferModalProps) => {

---

50-51: Don’t throw in event handler.

Throwing here can crash the UI. Log and no-op instead.

-  throw new Error('Peer info is missing userId and/or number');
+  console.error('Peer info is missing userId and/or number');
+  return;

---

73-75: Disable confirm while loading or no peer.

Prevents invalid submissions and double-clicks.

-  <Button danger onClick={confirm} disabled={!peer}>
+  <Button danger onClick={confirm} disabled={!peer || isLoading} loading={isLoading}>

packages/ui-voip/src/v2/useMediaCallAction.ts (1)

13-15: Fallback when displayName is empty.

Ensure we show the number if name is blank.

-    const getDisplayName = (peerInfo: { displayName?: string; number?: string }) => {
-      return 'displayName' in peerInfo ? peerInfo?.displayName : peerInfo?.number;
-    };
+    const getDisplayName = (peerInfo: { displayName?: string; number?: string }) => {
+      const name = peerInfo.displayName?.trim();
+      return name && name.length > 0 ? name : peerInfo.number;
+    };

packages/ui-voip/src/v2/MockedMediaCallProvider.tsx (3)

90-99: Accept optional callee in onToggleWidget.

Keeps the mock aligned with the hook’s usage and sets the selected peer when provided.

-const onToggleWidget = () => {
+const onToggleWidget = (callee?: PeerInfo) => {
+  if (callee) {
+    setPeerInfo(callee);
+  }
   switch (widgetState) {
     case 'closed':
       setWidgetState('new');
       break;
     case 'new':
       setWidgetState('closed');
       break;
   }
 };

---

29-31: Tighten type of device param.

Avoid any in mocks where easy. Use unknown to retain type-safety.

-const onDeviceChange = (device: any) => {
+const onDeviceChange = (device: unknown) => {

---

7-7: Consider typing mock data.

Replace any[] with a small interface for better DX in stories/tests.

-const myData: any[] = Array.from({ length: 100 }, (_, i) => ({ value: `user-${i}`, label: `User ${i}`, identifier: `000${i}`, avatarUrl }));
+type MockOption = { value: string; label: string; identifier: string; avatarUrl: string };
+const myData: MockOption[] = Array.from({ length: 100 }, (_, i) => ({ value: `user-${i}`, label: `User ${i}`, identifier: `000${i}`, avatarUrl }));

packages/ui-voip/src/v2/views/NewCall.tsx (1)

41-43: Disable Call until a peer is selected.

Prevents starting a call without target.

-  <Button medium icon='phone' success flexGrow={1} onClick={onCall}>
+  <Button medium icon='phone' success flexGrow={1} onClick={onCall} disabled={!peerInfo}>

packages/ui-voip/src/providers/MediaCallProvider.tsx (3)

83-93: Handle permission rejection on accept.

Same issue on accept path; add try/catch.

-const onAccept = async () => {
+const onAccept = async () => {
   console.log('onAccept');
   if (session.state !== 'ringing') {
     console.error('Cannot accept call in state', session.state);
     return;
   }
-
-  const stream = await requestDevice({ actionType: 'incoming' });
-  session.acceptCall(stream.getTracks()[0]);
+  try {
+    const stream = await requestDevice({ actionType: 'incoming' });
+    await session.acceptCall(stream.getTracks()[0]);
+  } catch (err) {
+    console.error('Accept canceled/failed', err);
+  }
 };

---

174-191: Autocomplete: avoid sending undefined in exceptions and guard items.

exceptions: [user?.username] may include undefined, and items may be absent. Build selector conditionally and coerce items safely.

-const getAutocompleteOptions = async (filter: string) => {
-  const { items } = await usersAutoCompleteEndpoint({
-    selector: JSON.stringify({ term: filter, exceptions: [user?.username] }),
-  });
-  return (
-    items.map((user) => {
+const getAutocompleteOptions = async (filter: string) => {
+  const selector =
+    user?.username ? { term: filter, exceptions: [user.username] } : { term: filter };
+  const data = await usersAutoCompleteEndpoint({ selector: JSON.stringify(selector) });
+  const items = Array.isArray((data as any)?.items) ? (data as any).items : [];
+  return (
+    items.map((user: any) => {
       const label = user.name || user.username;
       // TODO: This endpoint does not provide the extension number, which is necessary to show in the UI.
       const identifier = user.username !== label ? user.username : undefined;
       return {
         value: user._id,
         label,
         identifier,
         avatarUrl: getAvatarPath({ username: user.username, etag: user.avatarETag }),
       };
     }) || []
   );
 };

---

41-51: Tiny: pass the callback directly to endedCall listener.

No need to wrap callback in a new function.

- useCallSounds(
-   session.state,
-   useCallback(
-     (callback) => {
-       if (!instance) {
-         return;
-       }
-       return instance.on('endedCall', () => callback());
-     },
-     [instance],
-   ),
- );
+ useCallSounds(
+   session.state,
+   useCallback((cb) => (instance ? instance.on('endedCall', cb) : undefined), [instance]),
+ );

packages/ui-voip/src/providers/useMediaSession.ts (5)

105-147: Don’t set an undefined state on instance updates.

When deriveWidgetStateFromCallState returns undefined (e.g., transient ‘hangup’), the reducer may receive { state: undefined } and corrupt the session. Guard before dispatch.

     const updateSessionState = () => {
       const mainCall = instance.getMainCall();
       if (!mainCall) {
         dispatch({ type: 'reset' });
         return;
       }
       const { contact, state: callState, role, muted, held } = mainCall;
       const state = deriveWidgetStateFromCallState(callState, role);
+      if (!state) {
+        return;
+      }

---

173-182: Dispatch the new mute/hold values explicitly.

mainCall.setMuted(!mainCall.muted) then reading mainCall.muted can race with internal updates. Compute the next value first.

-const toggleMute = () => {
+const toggleMute = () => {
   const mainCall = instance?.getMainCall();
   if (!mainCall) {
     return;
   }
-
-  mainCall.setMuted(!mainCall.muted);
-  dispatch({ type: 'mute', payload: { muted: mainCall.muted } });
+  const next = !mainCall.muted;
+  mainCall.setMuted(next);
+  dispatch({ type: 'mute', payload: { muted: next } });
 };

---

184-193: Same for hold.

-const toggleHold = () => {
+const toggleHold = () => {
   const mainCall = instance?.getMainCall();
   if (!mainCall) {
     return;
   }
-
-  mainCall.setHeld(!mainCall.held);
-  dispatch({ type: 'hold', payload: { held: mainCall.held } });
+  const next = !mainCall.held;
+  mainCall.setHeld(next);
+  dispatch({ type: 'hold', payload: { held: next } });
 };

---

137-145: PeerInfo completeness: add displayName fallback.

contact.displayName may be absent; fall back to username to satisfy the required displayName.

-const peerInfo = {
-  displayName: contact.displayName,
+const peerInfo = {
+  displayName: contact.displayName || contact.username || 'Unknown',
   userId: contact.id,
   username: contact.username,
   avatarUrl,
   callerId: contact.sipExtension,
 } as PeerInfo;

---

8-14: Nit: startedAt default is created at module load.

If used as a timestamp, consider setting it only when a call actually starts, or keep it null until then.

packages/ui-voip/src/providers/useMediaSessionInstance.ts (2)

50-55: Factory-not-set guard can throw at runtime.

If a call starts before the effect sets the factory, this throws. It’s probably fine because starting a call requires user action, but consider a safer default or setting the factory eagerly during store initialization.

---

62-64: Nit: align return type of sendSignal with transport type.

MediaSignalTransport<T> returns void; returning a Promise is unnecessary. No behavior change.

-console.warn('Media Call - Tried to send signal, but no sendSignalFn was set');
-return Promise.resolve();
+console.warn('Media Call - Tried to send signal, but no sendSignalFn was set');
+return;

packages/ui-voip/src/v2/MediaCallContext.ts (2)

93-143: Autocomplete hook looks good; one tiny polish.

Avoid shadowing options inside queryFn for readability.

- queryFn: async () => {
-   const options = await getAutocompleteOptions(debouncedFilter);
+ queryFn: async () => {
+   const fetched = await getAutocompleteOptions(debouncedFilter);
    if (debouncedFilter.length > 0) {
-     return [getFirstOption(debouncedFilter), ...options];
+     return [getFirstOption(debouncedFilter), ...fetched];
    }
-   return options;
+   return fetched;
 },

---

44-47: Forwarding path is in place; ensure provider actually forwards.

Context exposes onSelectPeer and onForward, but the provider’s session.forwardCall() is still a stub. Track a follow‑up to implement wire‑up once backend is ready.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

packages/ui-voip/src/providers/useMediaSession.ts (1)

33-38: Renegotiating mapping added — good catch.

Thanks for handling 'renegotiating' as 'ongoing'.

packages/ui-voip/src/providers/useMediaSessionInstance.ts (1)

99-105: Dispose previous MediaSignalingSession when userId changes (leak fix).

Old instances keep timers/listeners alive. Clean them before creating a new one.

   public getInstance(userId?: string) {
     if (!userId) {
       return null;
     }
 
     if (this.sessionInstance?.userId === userId) {
       return this.sessionInstance;
     }
 
-    // TODO: maybe we need a cleanup step on the instance?
+    // Cleanup previous instance to avoid leaks.
+    if (this.sessionInstance) {
+      try {
+        (this.sessionInstance as any).disableStateReport?.();
+        (this.sessionInstance as any).destroy?.();
+        (this.sessionInstance as any).dispose?.();
+      } catch {}
+    }
     return this.makeInstance(userId);
   }

packages/ui-voip/src/providers/useMediaSession.ts (5)

33-43: Add a default branch to avoid undefined widget state.

Future call states would currently return undefined.

 const deriveWidgetStateFromCallState = (callState: CallState, callRole: CallRole): State | undefined => {
   switch (callState) {
     case 'active':
     case 'accepted':
     case 'renegotiating':
       return 'ongoing';
     case 'none':
     case 'ringing':
       return callRole === 'callee' ? 'ringing' : 'calling';
+    default:
+      // Be defensive against new/unknown states.
+      return 'ongoing';
   }
 };

---

122-141: Harden PeerInfo construction (missing fields) and avoid broad type assertion.

contact fields are optional; default defensively to prevent undefined surfacing in UI.

-  const peerInfo = {
-    displayName: contact.displayName,
-    userId: contact.id,
-    username: contact.username,
-    avatarUrl,
-    callerId: contact.sipExtension,
-  } as PeerInfo; // TODO: Some of these fields are typed as optional, but I think they are always present.
+  const displayName = contact.displayName ?? contact.username ?? contact.id ?? '';
+  const peerInfo: PeerInfo = {
+    displayName,
+    userId: contact.id ?? undefined,
+    username: contact.username ?? undefined,
+    avatarUrl,
+    callerId: contact.sipExtension,
+  };

---

200-210: Await call.accept and handle rejection.

Prevents unhandled rejections and keeps flow consistent with async signature.

-    const acceptCall = async () => {
+    const acceptCall = async () => {
       if (!instance) {
         return;
       }
 
       const call = instance.getMainCall();
       if (!call || call.state !== 'ringing') {
         return;
       }
-      call.accept();
+      try {
+        await call.accept();
+      } catch (error) {
+        console.error('Error accepting call', error);
+      }
     };

---

224-231: Await setDeviceId to honor the async API.

Ensures device switch sequencing and error surfacing.

-    const changeDevice = async (deviceId: string) => {
+    const changeDevice = async (deviceId: string) => {
       if (!instance) {
         return;
       }
 
-      instance.setDeviceId(deviceId);
+      await instance.setDeviceId(deviceId);
     };

---

8-14: Consider deferring startedAt until a call starts.

Starting the timer at hook init/reset may skew “call duration” UX.

packages/ui-voip/src/providers/useMediaSessionInstance.ts (2)

68-74: SSR-safe access to sessionStorage.

Referencing window in SSR throws; guard it.

-  private get oldSessionId() {
-    if (!window.sessionStorage) {
-      return undefined;
-    }
-    return window.sessionStorage.getItem(SESSION_ID_KEY) ?? undefined;
-  }
+  private get oldSessionId() {
+    if (typeof window === 'undefined' || !('sessionStorage' in window) || !window.sessionStorage) {
+      return undefined;
+    }
+    return window.sessionStorage.getItem(SESSION_ID_KEY) ?? undefined;
+  }

---

84-85: Use a stronger randomStringFactory.

Timestamps can collide; prefer crypto-based IDs.

-      randomStringFactory: () => new Date().toISOString(),
+      randomStringFactory: () => {
+        try {
+          if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+            return crypto.randomUUID();
+          }
+          if (typeof crypto !== 'undefined' && 'getRandomValues' in crypto) {
+            const arr = new Uint8Array(16);
+            crypto.getRandomValues(arr);
+            return Array.from(arr, (b) => b.toString(16).padStart(2, '0')).join('');
+          }
+        } catch {}
+        return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+      },

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/meteor/client/hooks/roomActions/useMediaCallRoomAction.ts (3)

59-63: Don’t cast a localized string to TranslationKey.

useMediaCallAction returns a translated string, not a key. Casting to TranslationKey can cause double-translation or missing-key lookups. Prefer passing a plain string (or use a content/label prop if supported) instead of forcing the type.

Please confirm RoomToolboxActionConfig['title'] accepts a string. If it strictly requires a key, consider extending the type to also accept strings (common in dynamic-title cases) or introducing a label prop.

---

34-34: Avoid unsafe cast on query params.

Use a non-null assertion with the enabled guard to better express intent and avoid type‑unsound as string.

Apply:

- const { data } = useUserInfoQuery({ userId: peerId as string }, { enabled: !!peerId });
+ const { data } = useUserInfoQuery({ userId: peerId! }, { enabled: !!peerId });

---

41-47: Fallback displayName shouldn’t be empty.

If neither name nor username exists, fallback to a stable identifier to avoid blank UI.

Apply:

-      displayName: data.user.name || data.user.username || '',
+      displayName: data.user.name || data.user.username || data.user._id,

apps/meteor/client/sidebar/header/hooks/useUserMenu.tsx (1)

50-54: Section without a title—confirm UX.

Rendering a nameless section with a single item is fine if consistent with menu UX. Alternatively, merge into “Status” or give it a small heading (e.g., “Calls”).

apps/meteor/client/views/room/hooks/useUserInfoActions/actions/useUserMediaCallAction.ts (1)

34-35: Optional: include avatar ETag for cache busting.

If available on the user object, pass etag to getAvatarUrl to avoid stale avatars.

- const avatarUrl = user.username ? getAvatarUrl({ username: user.username }) : getAvatarUrl({ userId: user._id });
+ const avatarUrl = user.username
+   ? getAvatarUrl({ username: user.username, etag: (user as any).avatarETag })
+   : getAvatarUrl({ userId: user._id, etag: (user as any).avatarETag });

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

apps/meteor/client/hooks/roomActions/useMediaCallRoomAction.ts (3)

33-36: Gate users.info query when DM is blocked; avoid unnecessary fetch.

Skip the query if either no peerId or the conversation is blocked. Also move the blocked computation above the query to use it in enabled.

 	const peerId = getPeerId(uids, ownUserId);
 
-	const { data } = useUserInfoQuery({ userId: peerId as string }, { enabled: !!peerId });
+	const blocked = subscription?.blocked || subscription?.blocker;
+
+	const { data } = useUserInfoQuery({ userId: peerId as string }, { enabled: !!peerId && !blocked });
 
-	const callAction = useMediaCallAction(peerInfo);
-
-	const blocked = subscription?.blocked || subscription?.blocker;
+	const callAction = useMediaCallAction(peerInfo);

Also applies to: 53-54

---

18-21: Nit: fix comment grammar and clarity.

-	// If no id, it's an one user DM. If more than one, it's a group dm. Both are not supported as of now.
+	// If none, it's a one‑user DM; if more than one, it's a group DM. Both are not supported for calls (yet).

---

63-65: Title is already translated; casting to TranslationKey may be misleading.

callAction.title is a translated string. Confirm RoomToolboxActionConfig.title accepts a string; otherwise consider widening it to string | TranslationKey (or pass a key and translate at render time).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.