feat(call): Discord-style polish pass (groups A-C)

A — Call core:
- Deafen now implies mute + remembers pre-deafen mic state so un-deafen
  restores it (Discord-parity). Peers still see the headphones-off +
  mic-off badges in sync via the existing data-channel broadcast.
- Self-join sound fires on the local peer's r.connect() too, not just
  on remote ParticipantConnected, so the user gets the "I'm in" cue.
- New CallState.reconnecting holds the UI steady when LiveKit drops the
  signaling socket and retries; duration keeps ticking, status label
  switches to "Verbinde neu…". Full teardown only on terminal
  Disconnected (after LK gives up).
- joinActiveCall falls back to connected after 5s if no peer arrived —
  avoids hanging in "Verbinde…" when peers left the room mid-rejoin.

B — Ringtone:
- Oscillator base gain up (incoming 0.22 -> 0.4, outgoing 0.14 -> 0.22)
  so the default pattern survives laptop speakers + background music.
- New ringtoneVolume slider in Settings, default 0.9, live-applies to
  both the oscillator fallback and the custom-file <audio> element.

C — Participant tile:
- Split the speaking indicator: video tiles get the emerald border +
  inset glow; audio tiles rely on the existing avatar pulse. No more
  double-chrome when someone talks in grid/focus view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/desktop/src/components/CallParticipantTile.tsx

@@ -75,7 +75,13 @@ export function CallParticipantTile(props: ParticipantTileProps) {
   } = props;
 
   const small = size === 'small';
-  const borderClass = speaking
+  // Split the speaking indicator per-mode so we don't stack a tile border
+  // + inset glow on top of the avatar pulse (visual double-chrome). Video
+  // tiles get the border (the avatar is hidden behind the stream so the
+  // pulse wouldn't be visible anyway); audio tiles rely on the avatar
+  // pulse rendered inside AudioContent.
+  const videoSpeaking = speaking && video;
+  const borderClass = videoSpeaking
     ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(22,163,74,0.25)] dark:border-emerald-400'
     : focused
       ? 'border-accent'
@@ -98,9 +104,10 @@ export function CallParticipantTile(props: ParticipantTileProps) {
         <AudioContent {...props} small={small} />
       )}
 
-      {/* Speaking indicator visible regardless of content type (video or
-          audio). z-10 ensures it sits above the video element. */}
-      {speaking && (
+      {/* Video-only speaking indicator. Audio tiles use the avatar pulse
+          from AudioContent so we don't double-render chrome. z-10 keeps
+          it above the video element. */}
+      {videoSpeaking && (
         <span
           aria-hidden="true"
           className="pointer-events-none absolute inset-0 z-10 rounded-[14px] border-[3px] border-emerald-400 shadow-[inset_0_0_18px_rgba(34,197,94,0.55)]"

apps/desktop/src/components/CallUI.tsx

@@ -158,6 +158,7 @@ function PipCall() {
   const active =
     state.kind === 'connected' ||
     state.kind === 'connecting' ||
+    state.kind === 'reconnecting' ||
     state.kind === 'outgoing';
   if (!active) return null;
 

apps/desktop/src/components/InCallPanel.tsx

@@ -99,6 +99,7 @@ export function InCallPanel({ conversation }: Props) {
   const active =
     (state.kind === 'connected' ||
       state.kind === 'connecting' ||
+      state.kind === 'reconnecting' ||
       state.kind === 'outgoing') &&
     state.conversationId === conversation.id;
   if (!active) return null;
@@ -117,6 +118,9 @@ export function InCallPanel({ conversation }: Props) {
     remoteSharerIds: new Set(remoteScreenShares.map((s) => s.participantId)),
   });
 
+  // Duration keeps ticking during reconnecting so the user sees the call is
+  // still alive — but the status label below takes precedence in the header
+  // so the "Verbinde neu…" message is prominent, not buried under the timer.
   const duration =
     state.kind === 'connected'
       ? <LiveDuration startedAt={state.startedAt} />
@@ -127,9 +131,11 @@ export function InCallPanel({ conversation }: Props) {
       ? t('app:call.outgoing_ringing')
       : state.kind === 'connecting'
         ? t('app:call.connecting')
-        : remoteParticipants.length === 0
-          ? t('app:call.waiting_for_peers', { defaultValue: 'Warte auf andere…' })
-          : t('app:call.connected');
+        : state.kind === 'reconnecting'
+          ? t('app:call.reconnecting', { defaultValue: 'Verbinde neu…' })
+          : remoteParticipants.length === 0
+            ? t('app:call.waiting_for_peers', { defaultValue: 'Warte auf andere…' })
+            : t('app:call.connected');
 
   // A screen-share tile becomes the auto-focus target when no one explicitly
   // picked a tile yet. Focus ids now use Tile.id (kind-prefixed) so we can

apps/desktop/src/components/RingtoneSettings.tsx

@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import {
+  getAudioSettings,
+  subscribeAudioSettings,
+  updateAudioSettings,
+} from '../lib/audioSettings';
 import {
   clearIncomingRingtone,
   getIncomingRingtone,
@@ -30,6 +35,10 @@ export function RingtoneSettings({ disabled = false }: Props) {
   const [busy, setBusy] = useState(false);
   const [playing, setPlaying] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [volume, setVolume] = useState<number>(() => getAudioSettings().ringtoneVolume);
+
+  // Subscribe so cross-tab / in-call slider moves stay in sync here too.
+  useEffect(() => subscribeAudioSettings((s) => setVolume(s.ringtoneVolume)), []);
 
   const refresh = useCallback(async () => {
     try {
@@ -128,7 +137,7 @@ export function RingtoneSettings({ disabled = false }: Props) {
     const url = URL.createObjectURL(current.blob);
     const el = new Audio(url);
     el.loop = false;
-    el.volume = 0.85;
+    el.volume = volume;
     el.onended = () => stopPreview();
     el.onerror = () => {
       setError(
@@ -233,6 +242,36 @@ export function RingtoneSettings({ disabled = false }: Props) {
         </p>
       )}
 
+      <div className="flex items-center gap-3">
+        <label
+          htmlFor="ringtone-volume"
+          className="shrink-0 text-xs font-medium text-fg-muted"
+        >
+          {t('app:settings.ringtone_volume', { defaultValue: 'Lautstärke' })}
+        </label>
+        <input
+          id="ringtone-volume"
+          type="range"
+          min={0}
+          max={1}
+          step={0.01}
+          value={volume}
+          onChange={(e) => {
+            const v = Number(e.target.value);
+            setVolume(v);
+            updateAudioSettings({ ringtoneVolume: v });
+            // Apply to the currently-playing preview so the user hears the
+            // slider effect immediately while dragging.
+            if (previewRef.current) previewRef.current.volume = v;
+          }}
+          aria-label={t('app:settings.ringtone_volume', { defaultValue: 'Lautstärke' })}
+          className="flex-1 accent-accent"
+        />
+        <span className="w-10 shrink-0 text-right text-xs tabular-nums text-fg-muted">
+          {Math.round(volume * 100)}%
+        </span>
+      </div>
+
       <p className="text-[11px] text-fg-muted">
         {t('app:settings.ringtone_hint', {
           defaultValue:

apps/desktop/src/context/CallContext.tsx

@@ -101,6 +101,17 @@ export type CallState =
       mediaKind: CallKind;
       startedAt: string;
     }
+  | {
+      // LiveKit dropped the signaling socket but is actively retrying. The
+      // room + tracks stay alive — the user's mic + speakers keep working —
+      // they just can't reach peers until we're back. Distinct from
+      // `connecting` so the UI can show "Verbinde neu…" vs "Verbinde…".
+      kind: 'reconnecting';
+      callId: string;
+      conversationId: string;
+      mediaKind: CallKind;
+      startedAt: string;
+    }
   | { kind: 'error'; message: string };
 
 export interface RemoteScreenShare {
@@ -213,6 +224,11 @@ export function CallProvider({ children }: { children: ReactNode }) {
   const presenceChannelRef = useRef<RealtimeChannel | null>(null);
   const ringTimerRef = useRef<number | null>(null);
   const soloTimerRef = useRef<number | null>(null);
+  // Fallback for joinActiveCall: if a rejoin lands in an empty room (peers
+  // left between "call still live" and our connect), force the transition
+  // to `connected` after a few seconds so the UI doesn't hang in "Verbinde…"
+  // indefinitely. The solo-timeout will then cleanly close if nobody arrives.
+  const joinFallbackTimerRef = useRef<number | null>(null);
   const roomRef = useRef<Room | null>(null);
   // Web Audio graph that mixes live mic + soundboard sources into a single
   // published track. Created per call in joinRoom, destroyed in disconnectRoom.
@@ -233,6 +249,10 @@ export function CallProvider({ children }: { children: ReactNode }) {
   // Mirror of isMuted for use inside LiveKit-event callbacks that run outside
   // the React component (ParticipantConnected rebroadcast etc).
   const mutedRef = useRef<boolean>(false);
+  // Remembers the pre-deafen mute state so toggling deafen off restores what
+  // the user had before. Discord-style: deafen implies mute, and un-deafen
+  // returns the user to whatever mute choice they had made pre-deafen.
+  const preDeafenMutedRef = useRef<boolean | null>(null);
   const stateRef = useRef<CallState>(state);
   stateRef.current = state;
   // Keep latest conversations accessible from signal-channel closures without
@@ -300,6 +320,13 @@ export function CallProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
+  const clearJoinFallbackTimer = useCallback(() => {
+    if (joinFallbackTimerRef.current !== null) {
+      window.clearTimeout(joinFallbackTimerRef.current);
+      joinFallbackTimerRef.current = null;
+    }
+  }, []);
+
   const disconnectRoom = useCallback(async () => {
     const r = roomRef.current;
     if (r) {
@@ -382,6 +409,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
       if (r.remoteParticipants.size === 0) return;
       clearRingTimer();
       clearSoloTimer();
+      clearJoinFallbackTimer();
       everConnectedRef.current = true;
       setState({
         kind: 'connected',
@@ -391,7 +419,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
         startedAt: new Date().toISOString(),
       });
     },
-    [clearRingTimer, clearSoloTimer],
+    [clearRingTimer, clearSoloTimer, clearJoinFallbackTimer],
   );
 
   // --- LiveKit join/leave ------------------------------------------------
@@ -459,6 +487,39 @@ export function CallProvider({ children }: { children: ReactNode }) {
       setRoom(r);
 
       r.on(RoomEvent.ConnectionStateChanged, (cs) => {
+        if (cs === ConnectionState.Reconnecting) {
+          // LiveKit lost the signaling socket and is retrying. Hold the
+          // connected state visually — the track publications stay live,
+          // so the user's mic + speakers keep working once the socket is
+          // back. Only transition from `connected`; if we were still in
+          // `connecting`/`outgoing`, LK will sort itself out on its own.
+          const cur = stateRef.current;
+          if (cur.kind === 'connected') {
+            setState({
+              kind: 'reconnecting',
+              callId: cur.callId,
+              conversationId: cur.conversationId,
+              mediaKind: cur.mediaKind,
+              startedAt: cur.startedAt,
+            });
+          }
+          return;
+        }
+        if (cs === ConnectionState.Connected) {
+          // Flip back from `reconnecting` when LK re-establishes the socket.
+          // Preserves startedAt so the duration counter doesn't reset.
+          const cur = stateRef.current;
+          if (cur.kind === 'reconnecting') {
+            setState({
+              kind: 'connected',
+              callId: cur.callId,
+              conversationId: cur.conversationId,
+              mediaKind: cur.mediaKind,
+              startedAt: cur.startedAt,
+            });
+          }
+          return;
+        }
         if (cs === ConnectionState.Disconnected) {
           // Server / network tore us out — reset state cleanly. Remember the
           // conversation so the sidebar "still live — rejoin" widget stays
@@ -466,9 +527,14 @@ export function CallProvider({ children }: { children: ReactNode }) {
           // peers, which is the only cue this side gets that a call is live.
           clearRingTimer();
           clearSoloTimer();
+          if (joinFallbackTimerRef.current !== null) {
+            window.clearTimeout(joinFallbackTimerRef.current);
+            joinFallbackTimerRef.current = null;
+          }
           const wasInCall =
             stateRef.current.kind === 'connected' ||
             stateRef.current.kind === 'connecting' ||
+            stateRef.current.kind === 'reconnecting' ||
             stateRef.current.kind === 'outgoing';
           if (wasInCall) {
             setLastCallConversationId(conversationId);
@@ -621,6 +687,10 @@ export function CallProvider({ children }: { children: ReactNode }) {
       });
 
       await r.connect(url, token);
+      // Self-join feedback sound. `playJoinBeep` is shared with the
+      // ParticipantConnected path; firing it here too gives the user a clear
+      // "I'm in the room" cue that Discord plays on self-join.
+      if (presenceRef.current !== 'dnd') void playJoinBeep();
       if (e2eeBundle) {
         try {
           await r.setE2EEEnabled(true);
@@ -813,6 +883,24 @@ export function CallProvider({ children }: { children: ReactNode }) {
       setState({ kind: 'connecting', callId, conversationId, mediaKind });
       try {
         await joinRoom(conversationId, mediaKind, callId);
+        // Fallback: peers may have left the room right as we joined, so
+        // ParticipantConnected never fires. Promote to `connected` after a
+        // short window so the UI doesn't sit in "Verbinde…" forever. The
+        // solo-timeout then handles the "actually alone" case cleanly.
+        clearJoinFallbackTimer();
+        joinFallbackTimerRef.current = window.setTimeout(() => {
+          joinFallbackTimerRef.current = null;
+          const cur = stateRef.current;
+          if (cur.kind !== 'connecting' || cur.callId !== callId) return;
+          everConnectedRef.current = true;
+          setState({
+            kind: 'connected',
+            callId,
+            conversationId,
+            mediaKind,
+            startedAt: new Date().toISOString(),
+          });
+        }, 5000);
       } catch (err: unknown) {
         setState({
           kind: 'error',
@@ -821,7 +909,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
         await disconnectRoom();
       }
     },
-    [myId, joinRoom, disconnectRoom],
+    [myId, joinRoom, disconnectRoom, clearJoinFallbackTimer],
   );
 
   const acceptIncoming = useCallback(
@@ -861,6 +949,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
     const s = stateRef.current;
     clearRingTimer();
     clearSoloTimer();
+    clearJoinFallbackTimer();
 
     if (s.kind === 'outgoing' && myId) {
       // Caller cancelled before anyone picked up — dismiss other sides' rings.
@@ -905,6 +994,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
     disconnectRoom,
     clearRingTimer,
     clearSoloTimer,
+    clearJoinFallbackTimer,
     emitCallEvent,
   ]);
 
@@ -1029,11 +1119,36 @@ export function CallProvider({ children }: { children: ReactNode }) {
       els.forEach((el) => {
         el.muted = next;
       });
+
+      // Discord-parity: deafen implies mute. Remember the pre-deafen mute
+      // state so un-deafening restores whatever the user had before.
+      const pipeline = pipelineRef.current;
+      let nextMuted = mutedRef.current;
+      if (next) {
+        // Activating deafen → snapshot current mute + force mic off.
+        preDeafenMutedRef.current = mutedRef.current;
+        if (!mutedRef.current) {
+          pipeline?.setMicGain(0);
+          mutedRef.current = true;
+          nextMuted = true;
+          setIsMuted(true);
+        }
+      } else {
+        // Deactivating deafen → restore pre-deafen mic state (if we have a
+        // snapshot). Absent snapshot (e.g. reconnect edge), unmute.
+        const restore = preDeafenMutedRef.current ?? false;
+        preDeafenMutedRef.current = null;
+        pipeline?.setMicGain(restore ? 0 : 1);
+        mutedRef.current = restore;
+        nextMuted = restore;
+        setIsMuted(restore);
+      }
+
       // Broadcast via LiveKit data channel so peers' UIs can show the
       // headphones-off badge. Data channel works on any LiveKit server
       // version, unlike `setAttributes` which requires a newer server.
       const r = roomRef.current;
-      if (r) void broadcastPresence(r, next, mutedRef.current);
+      if (r) void broadcastPresence(r, next, nextMuted);
       return next;
     });
   }, []);
@@ -1435,6 +1550,7 @@ export function CallProvider({ children }: { children: ReactNode }) {
     const callActive =
       state.kind === 'connected' ||
       state.kind === 'connecting' ||
+      state.kind === 'reconnecting' ||
       state.kind === 'outgoing';
     void setCallWakeLock(callActive);
   }, [state.kind]);
@@ -1445,7 +1561,13 @@ export function CallProvider({ children }: { children: ReactNode }) {
     const onKey = (e: KeyboardEvent) => {
       if (e.key !== 'Escape') return;
       if (callMode !== 'fullscreen') return;
-      if (state.kind !== 'connected' && state.kind !== 'connecting') return;
+      if (
+        state.kind !== 'connected' &&
+        state.kind !== 'connecting' &&
+        state.kind !== 'reconnecting'
+      ) {
+        return;
+      }
       setCallModeState('grid');
     };
     window.addEventListener('keydown', onKey);

apps/desktop/src/lib/audioSettings.ts

@@ -28,6 +28,12 @@ export interface AudioSettings {
   // @livekit/track-processors + its MediaPipe selfie-segmentation model
   // (~1.5MB) which downloads on first activation.
   videoBackgroundBlur: boolean;
+  // Ringtone volume for both the generated oscillator fallback and the
+  // custom incoming-call audio file. 0..1; applied on top of the base
+  // oscillator gain so the fallback stays audible at 100% without being
+  // harsh at 25%. Separate from any system / call audio volume so users
+  // can have loud rings + soft in-call audio.
+  ringtoneVolume: number;
 }
 
 const DEFAULTS: AudioSettings = {
@@ -37,6 +43,7 @@ const DEFAULTS: AudioSettings = {
   voiceThreshold: 0.03,
   noiseSuppression: true,
   videoBackgroundBlur: false,
+  ringtoneVolume: 0.9,
 };
 
 export interface AudioQualityParams {
@@ -118,6 +125,13 @@ function read(): AudioSettings {
         typeof parsed.videoBackgroundBlur === 'boolean'
           ? parsed.videoBackgroundBlur
           : DEFAULTS.videoBackgroundBlur,
+      ringtoneVolume:
+        typeof parsed.ringtoneVolume === 'number' &&
+        Number.isFinite(parsed.ringtoneVolume) &&
+        parsed.ringtoneVolume >= 0 &&
+        parsed.ringtoneVolume <= 1
+          ? parsed.ringtoneVolume
+          : DEFAULTS.ringtoneVolume,
     };
     return cached;
   } catch {

apps/desktop/src/lib/ringtone.ts

@@ -7,6 +7,7 @@
 // back to the generated oscillator pattern so ringing never misses an
 // incoming call due to an IO failure.
 
+import { getAudioSettings, subscribeAudioSettings } from './audioSettings';
 import { getIncomingRingtone } from './ringtoneStorage';
 
 type Pattern = 'outgoing' | 'incoming';
@@ -21,6 +22,15 @@ class Ringtone {
   private customUrl: string | null = null;
   // Sequence token to ignore slow IO completing after user changed state.
   private startSeq = 0;
+  // Live-subscribe so settings-slider changes reflect while the ringtone
+  // is playing (user can hear the effect of their slider immediately).
+  private unsubVolume: (() => void) | null = null;
+
+  private get volume(): number {
+    const v = getAudioSettings().ringtoneVolume;
+    if (!Number.isFinite(v)) return 0.9;
+    return Math.min(1, Math.max(0, v));
+  }
 
   start(pattern: Pattern): void {
     if (this.pattern === pattern) return; // already playing this pattern
@@ -28,6 +38,12 @@ class Ringtone {
     this.pattern = pattern;
     const seq = ++this.startSeq;
 
+    // Track live slider moves so the user can dial in the volume while a
+    // call is ringing and hear the change immediately.
+    this.unsubVolume = subscribeAudioSettings(() => {
+      if (this.audioEl) this.audioEl.volume = this.volume;
+    });
+
     if (pattern === 'incoming') {
       // Kick off oscillator immediately so we never miss ringing feedback
       // while the custom file (if any) loads asynchronously. Once the blob
@@ -44,6 +60,10 @@ class Ringtone {
     this.stopOscillator();
     this.stopCustom();
     this.pattern = null;
+    if (this.unsubVolume) {
+      this.unsubVolume();
+      this.unsubVolume = null;
+    }
   }
 
   // --- Custom file path (incoming only) ----------------------------------
@@ -61,7 +81,7 @@ class Ringtone {
     const url = URL.createObjectURL(stored.blob);
     const el = new Audio(url);
     el.loop = true;
-    el.volume = 0.85;
+    el.volume = this.volume;
     // Chrome/WKWebView autoplay policy: muted playback is always allowed,
     // but ringtones must be audible, so play() may reject the first time
     // before the user interacted. If it rejects, we keep the oscillator.
@@ -132,25 +152,31 @@ class Ringtone {
     osc.connect(g);
     g.connect(ctx.destination);
     const t0 = ctx.currentTime + delaySec;
+    // Volume slider multiplies the base gain so the fallback tone tracks
+    // the user's preference. A flat user-setting of 0 keeps the pattern
+    // running visually (oscillator nodes alive) but inaudible.
+    const effectiveGain = gain * this.volume;
     g.gain.setValueAtTime(0, t0);
-    g.gain.linearRampToValueAtTime(gain, t0 + 0.02);
+    g.gain.linearRampToValueAtTime(effectiveGain, t0 + 0.02);
     g.gain.exponentialRampToValueAtTime(0.001, t0 + durationSec);
     osc.start(t0);
     osc.stop(t0 + durationSec + 0.02);
   }
 
   private playOutgoing(): void {
-    // Soft calling tone — single warm note.
-    this.beep(440, 0.4, 0, 0.14);
-    this.beep(440, 0.4, 0.6, 0.14);
+    // Soft calling tone — single warm note. Slightly bumped from 0.14 so
+    // it's audible on laptop speakers without blasting.
+    this.beep(440, 0.4, 0, 0.22);
+    this.beep(440, 0.4, 0.6, 0.22);
   }
 
   private playIncoming(): void {
-    // Classic double-ring "ring ring".
-    this.beep(880, 0.18, 0, 0.22);
-    this.beep(660, 0.18, 0.22, 0.22);
-    this.beep(880, 0.18, 0.6, 0.22);
-    this.beep(660, 0.18, 0.82, 0.22);
+    // Classic double-ring "ring ring". Bumped from 0.22 → 0.4 so it's
+    // unmissable through music / background noise.
+    this.beep(880, 0.18, 0, 0.4);
+    this.beep(660, 0.18, 0.22, 0.4);
+    this.beep(880, 0.18, 0.6, 0.4);
+    this.beep(660, 0.18, 0.82, 0.4);
   }
 }