chore(desktop): release v0.11.0

Claude Code writes per-project permission settings here; harmless to
track but noisy across sessions. Gitignoring keeps the release
pre-flight check happy.

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

.env.release.example

@@ -0,0 +1,21 @@
+# Copy to .env.release (gitignored) and fill in.
+# Consumed by scripts/release.mjs.
+
+# Absolute path to the private key file produced by `tauri signer generate`.
+TAURI_SIGNING_PRIVATE_KEY_PATH=C:/Users/denni/.tauri/chatapp.key
+
+# Password set when generating the key. Leave empty if none.
+TAURI_SIGNING_PRIVATE_KEY_PASSWORD=
+
+# Host serving latest.json + installer artifacts over HTTPS.
+UPDATE_HOST=update.netralax.cloud
+
+# SSH user on UPDATE_HOST with write access to UPDATE_REMOTE_PATH.
+UPDATE_SSH_USER=chatapp-deploy
+
+# Optional: path to the SSH private key. Omit to fall back on ssh-agent or the
+# default id_rsa.
+UPDATE_SSH_KEY=
+
+# Absolute path on the server where windows/ artifacts + latest.json live.
+UPDATE_REMOTE_PATH=/var/www/updates/windows

.github/workflows/release.yml

@@ -1,35 +1,27 @@
-name: Release desktop app
+name: Release desktop app (manual backup)
 
-# Tag a version to trigger a release:
-#   git tag v0.1.0 && git push --tags
-#
-# Produces signed Tauri bundles for macOS (arm + intel), Windows, and Linux,
-# uploads them to a GitHub Release, and publishes `latest.json` for the
-# updater plugin to discover.
+# Self-hosted updates run from scripts/release.mjs on Dennis's Windows box.
+# This workflow is kept as a manual backup — trigger it from the Actions tab
+# if the local build host is unavailable.
 
 on:
-  push:
-    tags:
-      - "v*"
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Tag to build (e.g. v0.10.2) — must already exist"
+        required: true
 
 permissions:
   contents: write
 
 jobs:
   build:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: macos-14 # universal binary covers both Intel + Apple Silicon
-            args: "--target universal-apple-darwin --bundles app,updater"
-          - platform: windows-latest
-            args: ""
-
-    runs-on: ${{ matrix.platform }}
+    runs-on: windows-latest
 
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.tag }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -42,8 +34,6 @@ jobs:
 
       - name: Setup Rust
         uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: ${{ matrix.platform == 'macos-14' && 'aarch64-apple-darwin,x86_64-apple-darwin' || '' }}
 
       - name: Install JS deps
         run: pnpm install --frozen-lockfile
@@ -54,18 +44,16 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-          # Client-side env vars baked into the bundle — paste your prod values
-          # into the repo's Actions → Secrets so releases point at prod.
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_AUTH_REDIRECT_URL: ${{ secrets.VITE_AUTH_REDIRECT_URL }}
           VITE_LIVEKIT_URL: ${{ secrets.VITE_LIVEKIT_URL }}
         with:
           projectPath: apps/desktop
-          tagName: ${{ github.ref_name }}
-          releaseName: "ChatApp ${{ github.ref_name }}"
-          releaseBody: "See the assets below to download this version."
+          tagName: ${{ inputs.tag }}
+          releaseName: "ChatApp ${{ inputs.tag }}"
+          releaseBody: "Manual build — copy .nsis.zip/.sig/latest.json to the update host."
           releaseDraft: true
           prerelease: false
           tauriScript: pnpm exec tauri
-          args: ${{ matrix.args }}
+          args: "--bundles nsis"

.gitignore

@@ -15,7 +15,9 @@ out/
 .env
 .env.local
 .env.*.local
+.env.release
 !.env.example
+!.env.release.example
 
 # Expo
 .expo/
@@ -56,6 +58,9 @@ Thumbs.db
 *.swp
 *.swo
 
+# Claude Code per-project local settings
+.claude/
+
 # Coverage
 coverage/
 *.lcov

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chat-app/desktop",
-  "version": "0.1.0",
+  "version": "0.11.0",
   "private": true,
   "description": "Tauri v2 desktop client (Windows / macOS / Linux)",
   "type": "module",
@@ -21,6 +21,7 @@
     "@chat-app/shared": "workspace:*",
     "@chat-app/ui-web": "workspace:*",
     "@livekit/components-react": "^2.9.0",
+    "@livekit/track-processors": "^0.7.2",
     "@supabase/supabase-js": "^2.46.0",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-fs": "^2.5.0",

apps/desktop/public/favicon.svg

@@ -1,14 +1,7 @@
 <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <clipPath id="cp02">
-            <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"/>
-          </clipPath>
-        </defs>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19" fill="#2e1065"/>
-        <g clip-path="url(#cp02)">
-          <path d="M-4 32 Q 16 18 32 32 T 68 32 L 68 64 L -4 64 Z" fill="#7c4dff"/>
-          <path d="M-4 32 Q 16 18 32 32 T 68 32" stroke="#a78bfa" stroke-width="2" fill="none"/>
-        </g>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"
-                 fill="none" stroke="#a78bfa" stroke-width="1.5" opacity="0.4"/>
+        <rect x="4" y="4" width="56" height="56" rx="20" fill="#a78bfa"/>
+        <path d="M18 46 V22 Q 18 18 22 18 Q 26 18 27 21 L 39 42 Q 40 45 44 45 V22 Q 44 18 40 18"
+              fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/>
+        <path d="M20 46 V22 a3 3 0 0 1 5.5 -1.8 L 40 43 a2 2 0 0 0 4 -1.2 V22 a3 3 0 0 0 -6 0"
+              fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>

apps/desktop/public/sw.js

@@ -0,0 +1,67 @@
+// Web Push service worker.
+//
+// Handles browser-delivered push events when the app tab is closed or in the
+// background. Tauri desktop does not install service workers; native OS
+// notifications are routed through the Tauri notification plugin instead
+// (see src/lib/osNotify.ts).
+//
+// Payload contract — server sends JSON of shape:
+//   { title: string, body?: string, conversationId?: string, kind?: 'message' | 'call' }
+// Body is intentionally generic; message ciphertext is never included.
+
+self.addEventListener('install', (event) => {
+  // Activate immediately so updates apply on next page load.
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+  let data = { title: 'Neue Nachricht', body: '' };
+  try {
+    if (event.data) {
+      data = { ...data, ...event.data.json() };
+    }
+  } catch (_err) {
+    /* malformed payload — fall back to defaults */
+  }
+
+  const opts = {
+    body: data.body || '',
+    icon: '/favicon.svg',
+    badge: '/favicon.svg',
+    tag: data.conversationId || 'default',
+    renotify: true,
+    data: {
+      conversationId: data.conversationId,
+      kind: data.kind,
+    },
+  };
+
+  event.waitUntil(self.registration.showNotification(data.title, opts));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const conversationId = event.notification.data && event.notification.data.conversationId;
+  const target = conversationId ? '/chats/' + conversationId : '/';
+
+  event.waitUntil(
+    self.clients
+      .matchAll({ type: 'window', includeUncontrolled: true })
+      .then((clientList) => {
+        for (const client of clientList) {
+          if ('focus' in client) {
+            client.postMessage({ type: 'navigate', to: target });
+            return client.focus();
+          }
+        }
+        if (self.clients.openWindow) {
+          return self.clients.openWindow(target);
+        }
+        return undefined;
+      }),
+  );
+});

apps/desktop/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "chat-app-desktop"
-version = "0.1.0"
+version = "0.11.0"
 description = "ChatApp desktop client"
 authors = ["Dennis"]
 edition = "2021"
@@ -14,7 +14,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["devtools"] }
+tauri = { version = "2", features = ["devtools", "tray-icon"] }
 tauri-plugin-notification = "2"
 tauri-plugin-sql = { version = "2", features = ["sqlite"] }
 tauri-plugin-stronghold = "2"
@@ -22,11 +22,74 @@ tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 
+# Pure-rust libsodium-compatible primitives. No C toolchain required so
+# cross-compile for mobile stays clean. API output is bit-compatible with
+# libsodium-wrappers-sumo for the ops we use (secretbox, box, pwhash).
+dryoc = { version = "0.7", default-features = false, features = ["serde"] }
+base64 = "0.22"
+
+# PNG encoding for screen-source thumbnails returned by the
+# `enumerate_screen_sources` command. `default-features = false` skips the
+# image-format decoders we don't use (jpeg, gif, webp, …) — keeps the
+# thumbnail command at ~200KB extra binary size.
+image = { version = "0.25", default-features = false, features = ["png"] }
+
+# Cross-platform screen + window enumeration and capture. Replaces direct
+# Win32 GDI / macOS CoreGraphics / X11 calls with a small uniform API so
+# the enumerate-sources command has one code path. The crate pulls in
+# platform-specific backends automatically (~1.5MB binary growth on
+# Windows). Marked optional so non-desktop targets don't compile it.
+xcap = "0.0.14"
+
 [target."cfg(not(any(target_os = \"android\", target_os = \"ios\")))".dependencies]
 tauri-plugin-global-shortcut = "2"
 tauri-plugin-updater = "2"
+tauri-plugin-window-state = "2"
+
+# Windows-only screen-source enumeration + thumbnail capture. Pulled in
+# only on Windows so macOS + Linux builds stay slim. The enumerate command
+# returns stub-empty on non-Windows until we add native equivalents.
+[target."cfg(target_os = \"windows\")".dependencies]
+windows = { version = "0.58", features = [
+    "Win32_Foundation",
+    "Win32_Graphics_Gdi",
+    "Win32_UI_HiDpi",
+    "Win32_UI_WindowsAndMessaging",
+] }
+
+# WASAPI loopback capture for system-audio screen-share. Lets the custom
+# picker hand LiveKit a real audio track without falling back to the OS
+# screen picker (which is the only way getDisplayMedia can grab system
+# sound). Windows-only for v1; macOS needs ScreenCaptureKit-audio and
+# Linux needs a PulseAudio / PipeWire path.
+wasapi = "0.15"
+
+# LiveKit client SDK — lives behind the `rust-livekit` feature flag so the
+# baseline build stays unaffected while the JS-SDK path is still the
+# default. Pulls libwebrtc-rs which adds ~20MB to the binary and ~5-10min
+# to the first build. Tokio runtime is required; the rest of the crate
+# stays idle when the feature is off.
+livekit = { version = "0.7", default-features = false, features = ["tokio", "rustls-tls-native-roots"], optional = true }
+tokio = { version = "1", features = ["rt-multi-thread", "sync", "macros"], optional = true }
 
 [features]
 # This feature is used for production builds or when `devPath` points to the filesystem
 # and disables specific features relevant to the dev build.
 custom-protocol = ["tauri/custom-protocol"]
+
+# Enable the Rust LiveKit client. Off by default so CI + users stay on the
+# JS-SDK path until the rust bridge reaches feature parity. Turn on via:
+#   cargo build --features rust-livekit
+rust-livekit = ["dep:livekit", "dep:tokio"]
+
+# Release-profile tuned for ChatApp: whole-program LTO + single codegen unit
+# cuts binary size by ~20-30% and trims startup overhead. `strip = "symbols"`
+# removes debug + symbol tables (the updater already signs separately so
+# symbol-backed crash reports aren't the recovery path). `panic = "abort"`
+# skips unwinding metadata since the app doesn't use catch_unwind anywhere.
+[profile.release]
+lto = true
+codegen-units = 1
+strip = "symbols"
+panic = "abort"
+opt-level = "s"

apps/desktop/src-tauri/capabilities/default.json

@@ -9,6 +9,11 @@
     "notification:allow-notify",
     "notification:allow-is-permission-granted",
     "notification:allow-request-permission",
+    "sql:default",
+    "sql:allow-load",
+    "sql:allow-execute",
+    "sql:allow-select",
+    "sql:allow-close",
     "global-shortcut:allow-register",
     "global-shortcut:allow-unregister",
     "global-shortcut:allow-is-registered",

apps/desktop/src-tauri/icons/source.svg

@@ -1,14 +1,7 @@
 <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <clipPath id="cp02">
-            <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"/>
-          </clipPath>
-        </defs>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19" fill="#2e1065"/>
-        <g clip-path="url(#cp02)">
-          <path d="M-4 32 Q 16 18 32 32 T 68 32 L 68 64 L -4 64 Z" fill="#7c4dff"/>
-          <path d="M-4 32 Q 16 18 32 32 T 68 32" stroke="#a78bfa" stroke-width="2" fill="none"/>
-        </g>
-        <polygon points="32,5 57,19 57,45 32,59 7,45 7,19"
-                 fill="none" stroke="#a78bfa" stroke-width="1.5" opacity="0.4"/>
+        <rect x="4" y="4" width="56" height="56" rx="20" fill="#a78bfa"/>
+        <path d="M18 46 V22 Q 18 18 22 18 Q 26 18 27 21 L 39 42 Q 40 45 44 45 V22 Q 44 18 40 18"
+              fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/>
+        <path d="M20 46 V22 a3 3 0 0 1 5.5 -1.8 L 40 43 a2 2 0 0 0 4 -1.2 V22 a3 3 0 0 0 -6 0"
+              fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>

apps/desktop/src-tauri/src/crypto.rs

@@ -0,0 +1,287 @@
+// Native crypto primitives exposed as Tauri commands. The JS side calls
+// these via `invoke('crypto_…', …)` through `lib/nativeCryptoBackend.ts`.
+//
+// All byte arrays cross the IPC boundary as base64 strings to sidestep
+// serde_json's lack of native bytes support; JS encodes/decodes at the
+// thin wrapper layer. The extra encode step costs a few µs per call —
+// negligible against Argon2id's ~200ms and acceptable for bulk AEAD ops
+// which still outperform the WASM backend after the round-trip.
+//
+// Semantics: bit-compatible with libsodium-wrappers-sumo for all inputs.
+// AEAD authentication failures surface as `Err(String)` so the JS layer
+// can re-throw a deterministic error that existing callers already handle.
+
+use base64::{engine::general_purpose::STANDARD as B64, Engine};
+use dryoc::classic::crypto_box;
+use dryoc::classic::crypto_pwhash::{self, PasswordHashAlgorithm};
+use dryoc::classic::crypto_secretbox;
+use dryoc::constants::{
+    CRYPTO_BOX_PUBLICKEYBYTES, CRYPTO_BOX_SECRETKEYBYTES, CRYPTO_PWHASH_MEMLIMIT_MODERATE,
+    CRYPTO_PWHASH_OPSLIMIT_MODERATE, CRYPTO_PWHASH_SALTBYTES,
+};
+use dryoc::rng::randombytes_buf;
+use serde::{Deserialize, Serialize};
+
+fn encode(bytes: &[u8]) -> String {
+    B64.encode(bytes)
+}
+
+fn decode(s: &str) -> Result<Vec<u8>, String> {
+    B64.decode(s).map_err(|e| format!("invalid base64: {}", e))
+}
+
+// ---------------------------------------------------------------------------
+// Random
+// ---------------------------------------------------------------------------
+
+#[tauri::command]
+pub fn crypto_random_bytes(len: usize) -> Result<String, String> {
+    if len == 0 || len > 1024 * 1024 {
+        return Err("invalid length".into());
+    }
+    let buf = randombytes_buf(len);
+    Ok(encode(&buf))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_secretbox — XSalsa20-Poly1305
+// ---------------------------------------------------------------------------
+
+#[tauri::command]
+pub fn crypto_secretbox_encrypt(
+    plaintext_b64: String,
+    nonce_b64: String,
+    key_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let key = decode(&key_b64)?;
+    if nonce.len() != 24 {
+        return Err("nonce must be 24 bytes".into());
+    }
+    if key.len() != 32 {
+        return Err("key must be 32 bytes".into());
+    }
+    let mut ciphertext = vec![0u8; plaintext.len() + 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().unwrap();
+    let key_arr: [u8; 32] = key.as_slice().try_into().unwrap();
+    crypto_secretbox::crypto_secretbox_easy(
+        &mut ciphertext,
+        &plaintext,
+        &nonce_arr,
+        &key_arr,
+    )
+    .map_err(|e| format!("secretbox encrypt failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_secretbox_decrypt(
+    ciphertext_b64: String,
+    nonce_b64: String,
+    key_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let key = decode(&key_b64)?;
+    if nonce.len() != 24 {
+        return Err("nonce must be 24 bytes".into());
+    }
+    if key.len() != 32 {
+        return Err("key must be 32 bytes".into());
+    }
+    if ciphertext.len() < 16 {
+        return Err("ciphertext too short".into());
+    }
+    let mut plaintext = vec![0u8; ciphertext.len() - 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().unwrap();
+    let key_arr: [u8; 32] = key.as_slice().try_into().unwrap();
+    crypto_secretbox::crypto_secretbox_open_easy(
+        &mut plaintext,
+        &ciphertext,
+        &nonce_arr,
+        &key_arr,
+    )
+    .map_err(|_| "secretbox auth failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_box — X25519 + XSalsa20-Poly1305
+// ---------------------------------------------------------------------------
+
+#[derive(Serialize, Deserialize)]
+pub struct KeyPairB64 {
+    pub public_key: String,
+    pub private_key: String,
+}
+
+#[tauri::command]
+pub fn crypto_box_keypair() -> Result<KeyPairB64, String> {
+    let (pk, sk) = crypto_box::crypto_box_keypair();
+    Ok(KeyPairB64 {
+        public_key: encode(&pk),
+        private_key: encode(&sk),
+    })
+}
+
+#[tauri::command]
+pub fn crypto_box_encrypt(
+    plaintext_b64: String,
+    nonce_b64: String,
+    recipient_pk_b64: String,
+    sender_sk_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    let sk = decode(&sender_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    let mut ciphertext = vec![0u8; plaintext.len() + 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().map_err(|_| "bad nonce")?;
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    crypto_box::crypto_box_easy(&mut ciphertext, &plaintext, &nonce_arr, &pk_arr, &sk_arr)
+        .map_err(|e| format!("box encrypt failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_box_decrypt(
+    ciphertext_b64: String,
+    nonce_b64: String,
+    sender_pk_b64: String,
+    recipient_sk_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let nonce = decode(&nonce_b64)?;
+    let pk = decode(&sender_pk_b64)?;
+    let sk = decode(&recipient_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    if ciphertext.len() < 16 {
+        return Err("ciphertext too short".into());
+    }
+    let mut plaintext = vec![0u8; ciphertext.len() - 16];
+    let nonce_arr: [u8; 24] = nonce.as_slice().try_into().map_err(|_| "bad nonce")?;
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    crypto_box::crypto_box_open_easy(
+        &mut plaintext,
+        &ciphertext,
+        &nonce_arr,
+        &pk_arr,
+        &sk_arr,
+    )
+    .map_err(|_| "box auth failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// Sealed-box (anonymous) variant — sender identity not authenticated but
+// recipient still verified. Used by the conv-key wrapping flow.
+#[tauri::command]
+pub fn crypto_box_seal(
+    plaintext_b64: String,
+    recipient_pk_b64: String,
+) -> Result<String, String> {
+    let plaintext = decode(&plaintext_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let mut ciphertext = vec![0u8; plaintext.len() + 48];
+    crypto_box::crypto_box_seal(&mut ciphertext, &plaintext, &pk_arr)
+        .map_err(|e| format!("seal failed: {}", e))?;
+    Ok(encode(&ciphertext))
+}
+
+#[tauri::command]
+pub fn crypto_box_seal_open(
+    ciphertext_b64: String,
+    recipient_pk_b64: String,
+    recipient_sk_b64: String,
+) -> Result<String, String> {
+    let ciphertext = decode(&ciphertext_b64)?;
+    let pk = decode(&recipient_pk_b64)?;
+    let sk = decode(&recipient_sk_b64)?;
+    if pk.len() != CRYPTO_BOX_PUBLICKEYBYTES {
+        return Err("pk must be 32 bytes".into());
+    }
+    if sk.len() != CRYPTO_BOX_SECRETKEYBYTES {
+        return Err("sk must be 32 bytes".into());
+    }
+    if ciphertext.len() < 48 {
+        return Err("ciphertext too short".into());
+    }
+    let pk_arr: [u8; 32] = pk.as_slice().try_into().unwrap();
+    let sk_arr: [u8; 32] = sk.as_slice().try_into().unwrap();
+    let mut plaintext = vec![0u8; ciphertext.len() - 48];
+    crypto_box::crypto_box_seal_open(&mut plaintext, &ciphertext, &pk_arr, &sk_arr)
+        .map_err(|_| "seal open failed".to_string())?;
+    Ok(encode(&plaintext))
+}
+
+// ---------------------------------------------------------------------------
+// crypto_pwhash — Argon2id
+// ---------------------------------------------------------------------------
+
+#[derive(Deserialize)]
+pub struct PwhashArgs {
+    pub password: String,
+    pub salt_b64: String,
+    pub out_len: usize,
+    // Opslimit / memlimit presets map to libsodium constants; callers pass
+    // one of "interactive" | "moderate" | "sensitive". We default to
+    // moderate which matches every current call-site.
+    #[serde(default)]
+    pub preset: Option<String>,
+}
+
+fn pwhash_limits(preset: Option<&str>) -> (u64, usize) {
+    match preset {
+        Some("interactive") => (2, 64 * 1024 * 1024),
+        Some("sensitive") => (4, 1024 * 1024 * 1024),
+        _ => (
+            CRYPTO_PWHASH_OPSLIMIT_MODERATE as u64,
+            CRYPTO_PWHASH_MEMLIMIT_MODERATE,
+        ),
+    }
+}
+
+#[tauri::command]
+pub fn crypto_pwhash(args: PwhashArgs) -> Result<String, String> {
+    let salt = decode(&args.salt_b64)?;
+    if salt.len() != CRYPTO_PWHASH_SALTBYTES {
+        return Err(format!(
+            "salt must be {} bytes",
+            CRYPTO_PWHASH_SALTBYTES
+        ));
+    }
+    if args.out_len < 16 || args.out_len > 64 {
+        return Err("out_len out of range (16..=64)".into());
+    }
+    let salt_arr: [u8; CRYPTO_PWHASH_SALTBYTES] =
+        salt.as_slice().try_into().unwrap();
+    let (opslimit, memlimit) = pwhash_limits(args.preset.as_deref());
+    let mut out = vec![0u8; args.out_len];
+    crypto_pwhash::crypto_pwhash(
+        &mut out,
+        args.password.as_bytes(),
+        &salt_arr,
+        opslimit,
+        memlimit,
+        PasswordHashAlgorithm::Argon2id13,
+    )
+    .map_err(|e| format!("pwhash failed: {}", e))?;
+    Ok(encode(&out))
+}

apps/desktop/src-tauri/src/lib.rs

@@ -1,7 +1,140 @@
+mod crypto;
+mod screen_audio;
+mod screen_capture;
+mod screen_sources;
+
+#[cfg(feature = "rust-livekit")]
+mod livekit_bridge;
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+use tauri::{
+    menu::{Menu, MenuEvent, MenuItem, PredefinedMenuItem},
+    tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent},
+    AppHandle, Listener, Manager,
+};
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+use serde::Deserialize;
+
+// Payload for the `tray-unread-update` event the JS layer emits whenever the
+// aggregate unread-count changes. 0 hides the badge / resets the tooltip;
+// non-zero sets a count indicator.
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+#[derive(Deserialize)]
+struct TrayUnreadPayload {
+    count: u32,
+}
+
+// Red-dot overlay icon for the Windows taskbar. Drawn as raw RGBA instead of
+// shipping a PNG so we don't add another resource to the bundle. Kept small
+// (32x32) since Windows scales the overlay down anyway.
+#[cfg(target_os = "windows")]
+fn unread_overlay_rgba() -> Vec<u8> {
+    const SIZE: u32 = 32;
+    let r = SIZE as f32 / 2.0;
+    let mut buf = Vec::with_capacity((SIZE * SIZE * 4) as usize);
+    for y in 0..SIZE {
+        for x in 0..SIZE {
+            let dx = x as f32 - r + 0.5;
+            let dy = y as f32 - r + 0.5;
+            let d = (dx * dx + dy * dy).sqrt();
+            let edge = r - 1.0;
+            if d <= edge {
+                buf.extend_from_slice(&[0xDC, 0x26, 0x26, 0xFF]);
+            } else if d <= r {
+                let alpha = (255.0 * (r - d)).clamp(0.0, 255.0) as u8;
+                buf.extend_from_slice(&[0xDC, 0x26, 0x26, alpha]);
+            } else {
+                buf.extend_from_slice(&[0, 0, 0, 0]);
+            }
+        }
+    }
+    buf
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn show_main_window(app: &AppHandle) {
+    if let Some(win) = app.get_webview_window("main") {
+        let _ = win.show();
+        let _ = win.unminimize();
+        let _ = win.set_focus();
+    }
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn hide_main_window(app: &AppHandle) {
+    if let Some(win) = app.get_webview_window("main") {
+        let _ = win.hide();
+    }
+}
+
+#[cfg(not(any(target_os = "android", target_os = "ios")))]
+fn handle_menu_event(app: &AppHandle, event: MenuEvent) {
+    match event.id.as_ref() {
+        "tray-show" => show_main_window(app),
+        "tray-hide" => hide_main_window(app),
+        "tray-quit" => {
+            app.exit(0);
+        }
+        _ => {}
+    }
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
+    #[cfg(not(feature = "rust-livekit"))]
     let mut builder = tauri::Builder::default()
-        .plugin(tauri_plugin_notification::init())
+        .invoke_handler(tauri::generate_handler![
+            crypto::crypto_random_bytes,
+            crypto::crypto_secretbox_encrypt,
+            crypto::crypto_secretbox_decrypt,
+            crypto::crypto_box_keypair,
+            crypto::crypto_box_encrypt,
+            crypto::crypto_box_decrypt,
+            crypto::crypto_box_seal,
+            crypto::crypto_box_seal_open,
+            crypto::crypto_pwhash,
+            screen_sources::enumerate_screen_sources,
+            screen_sources::list_screen_sources,
+            screen_sources::capture_screen_source_thumbnail,
+            screen_sources::capture_screen_source_thumbnail_bytes,
+            screen_capture::start_screen_capture,
+            screen_capture::stop_screen_capture,
+            screen_audio::start_system_audio_capture,
+            screen_audio::stop_system_audio_capture,
+        ])
+        .plugin(tauri_plugin_notification::init());
+
+    #[cfg(feature = "rust-livekit")]
+    let mut builder = tauri::Builder::default()
+        .manage(livekit_bridge::LivekitState::new())
+        .invoke_handler(tauri::generate_handler![
+            crypto::crypto_random_bytes,
+            crypto::crypto_secretbox_encrypt,
+            crypto::crypto_secretbox_decrypt,
+            crypto::crypto_box_keypair,
+            crypto::crypto_box_encrypt,
+            crypto::crypto_box_decrypt,
+            crypto::crypto_box_seal,
+            crypto::crypto_box_seal_open,
+            crypto::crypto_pwhash,
+            screen_sources::enumerate_screen_sources,
+            screen_sources::list_screen_sources,
+            screen_sources::capture_screen_source_thumbnail,
+            screen_sources::capture_screen_source_thumbnail_bytes,
+            screen_capture::start_screen_capture,
+            screen_capture::stop_screen_capture,
+            screen_audio::start_system_audio_capture,
+            screen_audio::stop_system_audio_capture,
+            livekit_bridge::livekit_connect,
+            livekit_bridge::livekit_disconnect,
+            livekit_bridge::livekit_send_data,
+            livekit_bridge::livekit_set_mic,
+            livekit_bridge::livekit_set_camera,
+        ])
+        .plugin(tauri_plugin_notification::init());
+
+    builder = builder
         .plugin(tauri_plugin_sql::Builder::default().build())
         .plugin(tauri_plugin_fs::init())
         .plugin(
@@ -13,12 +146,105 @@ pub fn run() {
             .build(),
         );
 
-    // Global shortcut + updater plugins are desktop-only (no mobile support).
+    // Global shortcut + updater + window-state plugins are desktop-only
+    // (no mobile support — mobile windows are OS-managed).
     #[cfg(not(any(target_os = "android", target_os = "ios")))]
     {
         builder = builder
             .plugin(tauri_plugin_global_shortcut::Builder::new().build())
-            .plugin(tauri_plugin_updater::Builder::new().build());
+            .plugin(tauri_plugin_updater::Builder::new().build())
+            .plugin(tauri_plugin_window_state::Builder::new().build());
+    }
+
+    #[cfg(not(any(target_os = "android", target_os = "ios")))]
+    {
+        builder = builder.setup(|app| {
+            // Tray icon with a minimal menu. Left-click toggles window
+            // visibility; right-click shows the menu. Badge / tooltip updates
+            // come from the JS side via `tray-unread-update` events.
+            let show = MenuItem::with_id(app, "tray-show", "Öffnen", true, None::<&str>)?;
+            let hide = MenuItem::with_id(app, "tray-hide", "Ausblenden", true, None::<&str>)?;
+            let sep = PredefinedMenuItem::separator(app)?;
+            let quit = MenuItem::with_id(app, "tray-quit", "Beenden", true, None::<&str>)?;
+            let menu = Menu::with_items(app, &[&show, &hide, &sep, &quit])?;
+
+            let mut tray_builder = TrayIconBuilder::with_id("chatapp-tray")
+                .menu(&menu)
+                .show_menu_on_left_click(false)
+                .tooltip("ChatApp")
+                .on_menu_event(|app, event| handle_menu_event(app, event))
+                .on_tray_icon_event(|tray, event| {
+                    if let TrayIconEvent::Click {
+                        button: MouseButton::Left,
+                        button_state: MouseButtonState::Up,
+                        ..
+                    } = event
+                    {
+                        let app = tray.app_handle();
+                        if let Some(win) = app.get_webview_window("main") {
+                            if win.is_visible().unwrap_or(false) {
+                                let _ = win.hide();
+                            } else {
+                                let _ = win.show();
+                                let _ = win.set_focus();
+                            }
+                        }
+                    }
+                });
+
+            // `default_window_icon` returns Option<&Image>; only attach if
+            // we actually have one bundled (should always be true via the
+            // tauri.conf.json icon list, but guard to stay typesafe).
+            if let Some(icon) = app.default_window_icon() {
+                tray_builder = tray_builder.icon(icon.clone());
+            }
+
+            let tray = tray_builder.build(app)?;
+
+            // Listen for JS-side unread updates and mirror them into the tray
+            // tooltip + macOS dock badge. `tray` is cheap to clone (internal
+            // Arc) so we can move it into the listener closure directly.
+            let tray_handle = tray.clone();
+            let badge_window = app.get_webview_window("main");
+            app.listen("tray-unread-update", move |event| {
+                let Ok(payload) = serde_json::from_str::<TrayUnreadPayload>(event.payload())
+                else {
+                    return;
+                };
+                let tooltip = if payload.count == 0 {
+                    "ChatApp".to_string()
+                } else {
+                    format!("ChatApp · {} neu", payload.count)
+                };
+                let _ = tray_handle.set_tooltip(Some(tooltip));
+                // Dock/taskbar badge. macOS uses a numeric label; Windows uses
+                // an overlay icon (red dot = unread). Linux has no cross-DE
+                // badge API — skip.
+                #[cfg(target_os = "macos")]
+                if let Some(win) = badge_window.as_ref() {
+                    let badge = if payload.count == 0 {
+                        None
+                    } else {
+                        Some(payload.count.to_string())
+                    };
+                    let _ = win.set_badge_label(badge);
+                }
+                #[cfg(target_os = "windows")]
+                if let Some(win) = badge_window.as_ref() {
+                    if payload.count == 0 {
+                        let _ = win.set_overlay_icon(None);
+                    } else {
+                        let rgba = unread_overlay_rgba();
+                        let img = tauri::image::Image::new_owned(rgba, 32, 32);
+                        let _ = win.set_overlay_icon(Some(img));
+                    }
+                }
+                #[cfg(not(any(target_os = "macos", target_os = "windows")))]
+                let _ = &badge_window;
+            });
+
+            Ok(())
+        });
     }
 
     builder

apps/desktop/src-tauri/src/livekit_bridge.rs

@@ -0,0 +1,227 @@
+// Rust LiveKit bridge — command/event glue between the JS CallContext and
+// the native livekit client. Feature-gated behind `rust-livekit` so the
+// baseline build doesn't pay the libwebrtc download / link cost while the
+// bridge is still evolving.
+//
+// Design contract (matches `lib/nativeLiveKit.ts` on the JS side):
+//   command: livekit_connect      { url, token, e2ee_key_b64? }
+//   command: livekit_disconnect
+//   command: livekit_set_mic      { enabled }
+//   command: livekit_set_camera   { enabled }
+//   command: livekit_start_share  {}
+//   command: livekit_stop_share   {}
+//   command: livekit_send_data    { payload_b64, reliable }
+//   event:   livekit:room_state           { state }
+//   event:   livekit:participant_joined   { identity, name? }
+//   event:   livekit:participant_left     { identity }
+//   event:   livekit:track_published      { identity, sid, kind, source }
+//   event:   livekit:track_unpublished    { identity, sid }
+//   event:   livekit:audio_level          { identity, level }
+//   event:   livekit:data_received        { identity, payload_b64 }
+//   event:   livekit:error                { message }
+//
+// Phase B.1 (this file) only wires connect/disconnect + room-state events
+// so the JS side can prove round-trip; mic/camera/video come later.
+
+#![cfg(feature = "rust-livekit")]
+
+use std::sync::Arc;
+
+use livekit::{
+    id::ParticipantIdentity, DataPacketKind, Room, RoomEvent, RoomOptions,
+};
+use serde::{Deserialize, Serialize};
+use tauri::{AppHandle, Emitter, State};
+use tokio::sync::{mpsc, Mutex};
+
+pub struct LivekitState {
+    room: Mutex<Option<Arc<Room>>>,
+}
+
+impl LivekitState {
+    pub fn new() -> Self {
+        Self {
+            room: Mutex::new(None),
+        }
+    }
+}
+
+#[derive(Deserialize)]
+pub struct ConnectArgs {
+    pub url: String,
+    pub token: String,
+}
+
+#[derive(Serialize, Clone)]
+struct RoomStatePayload {
+    state: &'static str,
+}
+
+#[derive(Serialize, Clone)]
+struct ParticipantPayload {
+    identity: String,
+}
+
+#[derive(Serialize, Clone)]
+struct DataPayload {
+    identity: String,
+    payload_b64: String,
+    reliable: bool,
+}
+
+#[tauri::command]
+pub async fn livekit_connect(
+    app: AppHandle,
+    state: State<'_, LivekitState>,
+    args: ConnectArgs,
+) -> Result<(), String> {
+    let mut guard = state.room.lock().await;
+    if guard.is_some() {
+        return Err("already connected".into());
+    }
+    let options = RoomOptions::default();
+    let (room, mut events) = Room::connect(&args.url, &args.token, options)
+        .await
+        .map_err(|e| format!("livekit connect failed: {}", e))?;
+    let room = Arc::new(room);
+    *guard = Some(room.clone());
+    drop(guard);
+
+    let _ = app.emit(
+        "livekit:room_state",
+        RoomStatePayload { state: "connected" },
+    );
+
+    // Spawn the event pump. Lives for the duration of the room connection;
+    // stops naturally when the channel closes (disconnect or crash).
+    let app_for_events = app.clone();
+    tokio::spawn(async move {
+        while let Some(event) = events.recv().await {
+            pump_event(&app_for_events, event);
+        }
+        let _ = app_for_events.emit(
+            "livekit:room_state",
+            RoomStatePayload {
+                state: "disconnected",
+            },
+        );
+    });
+
+    Ok(())
+}
+
+fn pump_event(app: &AppHandle, event: RoomEvent) {
+    match event {
+        RoomEvent::ParticipantConnected(p) => {
+            let _ = app.emit(
+                "livekit:participant_joined",
+                ParticipantPayload {
+                    identity: identity_string(p.identity()),
+                },
+            );
+        }
+        RoomEvent::ParticipantDisconnected(p) => {
+            let _ = app.emit(
+                "livekit:participant_left",
+                ParticipantPayload {
+                    identity: identity_string(p.identity()),
+                },
+            );
+        }
+        RoomEvent::DataReceived {
+            payload,
+            kind,
+            participant,
+            ..
+        } => {
+            use base64::engine::general_purpose::STANDARD;
+            use base64::Engine;
+            let identity = participant
+                .map(|p| identity_string(p.identity()))
+                .unwrap_or_default();
+            let _ = app.emit(
+                "livekit:data_received",
+                DataPayload {
+                    identity,
+                    payload_b64: STANDARD.encode(payload.as_ref()),
+                    reliable: matches!(kind, DataPacketKind::Reliable),
+                },
+            );
+        }
+        RoomEvent::Disconnected { .. } => {
+            let _ = app.emit(
+                "livekit:room_state",
+                RoomStatePayload {
+                    state: "disconnected",
+                },
+            );
+        }
+        _ => {
+            // Remaining events (TrackPublished, TrackSubscribed, etc.) land
+            // in later phases. Ignoring silently keeps the prototype small.
+        }
+    }
+}
+
+fn identity_string(id: ParticipantIdentity) -> String {
+    // ParticipantIdentity is a newtype around String in the livekit crate.
+    id.0
+}
+
+#[tauri::command]
+pub async fn livekit_disconnect(state: State<'_, LivekitState>) -> Result<(), String> {
+    let mut guard = state.room.lock().await;
+    if let Some(room) = guard.take() {
+        let _ = room.close().await;
+    }
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn livekit_send_data(
+    state: State<'_, LivekitState>,
+    payload_b64: String,
+    reliable: bool,
+) -> Result<(), String> {
+    use base64::engine::general_purpose::STANDARD;
+    use base64::Engine;
+    let room = state.room.lock().await;
+    let room = room.as_ref().ok_or_else(|| "not connected".to_string())?;
+    let payload = STANDARD
+        .decode(&payload_b64)
+        .map_err(|e| format!("bad base64: {}", e))?;
+    let kind = if reliable {
+        DataPacketKind::Reliable
+    } else {
+        DataPacketKind::Lossy
+    };
+    room.local_participant()
+        .publish_data(livekit::prelude::DataPacket {
+            payload,
+            topic: None,
+            reliable: matches!(kind, DataPacketKind::Reliable),
+            destination_identities: Vec::new(),
+        })
+        .await
+        .map_err(|e| format!("publish_data failed: {}", e))?;
+    Ok(())
+}
+
+// Placeholder — Phase B.2 will fill these in.
+#[tauri::command]
+pub async fn livekit_set_mic(_enabled: bool) -> Result<(), String> {
+    Err("livekit_set_mic not implemented — Phase B.2".into())
+}
+
+#[tauri::command]
+pub async fn livekit_set_camera(_enabled: bool) -> Result<(), String> {
+    Err("livekit_set_camera not implemented — Phase B.2".into())
+}
+
+// Unused-send bridge so `mpsc` doesn't get unused-import-warned when the
+// feature gate is off.
+#[allow(dead_code)]
+fn _mpsc_anchor() -> mpsc::Sender<()> {
+    let (tx, _rx) = mpsc::channel::<()>(1);
+    tx
+}

apps/desktop/src-tauri/src/screen_audio.rs

@@ -0,0 +1,428 @@
+// Native system-audio capture for the custom screen-share picker. Without
+// this path the picker has to fall back to getDisplayMedia whenever the
+// user ticks "Mit System-Sound", because Chromium only wires audio into
+// desktop captures that the OS picker produced. Here we grab the default
+// render endpoint's loopback stream via WASAPI, convert it to 48kHz f32
+// stereo, and ship the samples to the JS side through a Tauri Channel.
+// An AudioWorklet on the frontend feeds them into a MediaStreamDestination
+// so LiveKit publishes a plain ScreenShareAudio track.
+//
+// Windows-only for v1. macOS + Linux stubs return a clear error so the
+// frontend can fall back cleanly on those platforms until their native
+// paths ship (ScreenCaptureKit-audio / PipeWire).
+
+#![allow(clippy::needless_return)]
+
+use base64::Engine;
+use serde::Serialize;
+use std::collections::HashMap;
+use std::sync::atomic::{AtomicBool, AtomicU32, Ordering};
+use std::sync::{Arc, Mutex, OnceLock};
+use std::thread;
+use tauri::ipc::Channel;
+
+// Output format we always deliver to the frontend. Picking a single fixed
+// format means the AudioWorklet never has to renegotiate — it just assumes
+// interleaved f32 stereo at 48kHz. WASAPI mix format is usually already
+// this on Windows 10+, so the resample branch is rarely hit.
+const OUTPUT_SAMPLE_RATE: u32 = 48_000;
+const OUTPUT_CHANNELS: u16 = 2;
+
+static NEXT_ID: AtomicU32 = AtomicU32::new(1);
+static SESSIONS: OnceLock<Mutex<HashMap<u32, Session>>> = OnceLock::new();
+
+fn sessions() -> &'static Mutex<HashMap<u32, Session>> {
+    SESSIONS.get_or_init(|| Mutex::new(HashMap::new()))
+}
+
+struct Session {
+    stop: Arc<AtomicBool>,
+    handle: Option<thread::JoinHandle<()>>,
+}
+
+#[derive(Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct AudioFramePayload {
+    pub capture_id: u32,
+    pub sample_rate: u32,
+    pub channels: u16,
+    /// Interleaved little-endian f32 stereo samples, base64-encoded.
+    /// Frontend decodes via `atob` → `Uint8Array` → `Float32Array` view.
+    /// Base64 is used instead of a raw `Vec<f32>` because Tauri Channel
+    /// serialises via JSON — a JSON array of floats balloons to ~2–3×
+    /// the byte count, and at 48kHz stereo that's enough IPC traffic
+    /// to matter.
+    pub samples_base64: String,
+}
+
+/// Start a loopback capture of the default render endpoint and begin
+/// streaming audio frames on the provided channel. Returns a numeric
+/// capture id that must be handed to `stop_system_audio_capture` when
+/// the share ends.
+#[tauri::command]
+pub fn start_system_audio_capture(
+    channel: Channel<AudioFramePayload>,
+) -> Result<u32, String> {
+    #[cfg(target_os = "windows")]
+    {
+        let capture_id = NEXT_ID.fetch_add(1, Ordering::Relaxed);
+        let stop = Arc::new(AtomicBool::new(false));
+        let stop_clone = Arc::clone(&stop);
+
+        let handle = thread::Builder::new()
+            .name(format!("screen-audio-{capture_id}"))
+            .spawn(move || {
+                if let Err(err) =
+                    windows_loopback::capture_loop(capture_id, channel, stop_clone)
+                {
+                    eprintln!("screen-audio {capture_id}: {err}");
+                }
+            })
+            .map_err(|e| format!("failed to spawn audio thread: {e}"))?;
+
+        sessions().lock().unwrap().insert(
+            capture_id,
+            Session {
+                stop,
+                handle: Some(handle),
+            },
+        );
+        Ok(capture_id)
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    {
+        // Keep the `channel` binding alive so Tauri doesn't complain about
+        // an unused parameter on the non-Windows build.
+        let _ = channel;
+        Err("system audio capture only supported on Windows".into())
+    }
+}
+
+/// Tear down the capture for the given id. Safe to call on a missing id
+/// (no-op) so the JS side doesn't have to track whether the stop has
+/// already been issued by the screen-share teardown path.
+#[tauri::command]
+pub fn stop_system_audio_capture(capture_id: u32) -> Result<(), String> {
+    let session = sessions().lock().unwrap().remove(&capture_id);
+    let Some(mut session) = session else {
+        return Ok(());
+    };
+    session.stop.store(true, Ordering::Relaxed);
+    if let Some(handle) = session.handle.take() {
+        // Best-effort join — the capture loop polls `stop` every event
+        // cycle (≤100ms) so this usually returns promptly. If the WASAPI
+        // call is wedged we'd rather drop the handle than hang the stop.
+        let _ = handle.join();
+    }
+    Ok(())
+}
+
+// ---------------------------------------------------------------------------
+// Windows loopback implementation
+// ---------------------------------------------------------------------------
+
+#[cfg(target_os = "windows")]
+mod windows_loopback {
+    use super::*;
+    use wasapi::{initialize_mta, Direction, SampleType, ShareMode};
+
+    pub fn capture_loop(
+        capture_id: u32,
+        channel: Channel<AudioFramePayload>,
+        stop: Arc<AtomicBool>,
+    ) -> Result<(), String> {
+        // COM must be initialised on every thread that touches WASAPI.
+        // MTA is the right model for a background capture thread — STA
+        // would require message pumping we don't want to add.
+        initialize_mta()
+            .ok()
+            .map_err(|e| format!("initialize_mta: {e:?}"))?;
+
+        let device = wasapi::get_default_device(&Direction::Render)
+            .map_err(|e| format!("get_default_device: {e:?}"))?;
+        let mut audio_client = device
+            .get_iaudioclient()
+            .map_err(|e| format!("get_iaudioclient: {e:?}"))?;
+
+        // Use the mix format that Windows is already pushing to the
+        // endpoint. Loopback capture won't convert for us — asking for a
+        // fixed format here makes Initialize() fail on non-matching
+        // hardware. We resample + channel-mix ourselves downstream.
+        let mix_format = audio_client
+            .get_mixformat()
+            .map_err(|e| format!("get_mixformat: {e:?}"))?;
+        let input_rate = mix_format.get_samplespersec();
+        let input_channels = mix_format.get_nchannels();
+        let bits_per_sample = mix_format.get_bitspersample();
+        let block_align = mix_format.get_blockalign();
+        let sample_type = mix_format.get_subformat().unwrap_or(SampleType::Int);
+
+        let (def_time, _min_time) = audio_client
+            .get_periods()
+            .map_err(|e| format!("get_periods: {e:?}"))?;
+
+        // Direction::Capture + loopback: WASAPI streams what Windows is
+        // sending to the speakers instead of what an input device is
+        // producing. Shared mode so we coexist with other apps.
+        audio_client
+            .initialize_client(
+                &mix_format,
+                def_time,
+                &Direction::Capture,
+                &ShareMode::Shared,
+                true,
+            )
+            .map_err(|e| format!("initialize_client: {e:?}"))?;
+
+        let h_event = audio_client
+            .set_get_eventhandle()
+            .map_err(|e| format!("set_get_eventhandle: {e:?}"))?;
+        let capture_client = audio_client
+            .get_audiocaptureclient()
+            .map_err(|e| format!("get_audiocaptureclient: {e:?}"))?;
+
+        audio_client
+            .start_stream()
+            .map_err(|e| format!("start_stream: {e:?}"))?;
+
+        // Resampler state — last stereo frame from the previous buffer so
+        // linear interpolation at the buffer boundary doesn't click.
+        // Initialised to silence.
+        let mut last_stereo: [f32; 2] = [0.0, 0.0];
+
+        while !stop.load(Ordering::Relaxed) {
+            // 100ms timeout lets the loop check the stop flag even when
+            // the endpoint is silent (WASAPI doesn't signal the event at
+            // all for pure-silence streams on some driver versions).
+            if h_event.wait_for_event(100).is_err() {
+                continue;
+            }
+
+            // Drain all packets available since the last wake — there
+            // can be several queued if we were preempted.
+            loop {
+                if stop.load(Ordering::Relaxed) {
+                    break;
+                }
+                let frames_available = match capture_client.get_next_nbr_frames() {
+                    Ok(Some(n)) if n > 0 => n,
+                    Ok(_) => break,
+                    Err(e) => {
+                        eprintln!(
+                            "screen-audio {capture_id}: get_next_nbr_frames: {e:?}"
+                        );
+                        break;
+                    }
+                };
+
+                let bytes_needed =
+                    frames_available as usize * block_align as usize;
+                let mut raw = vec![0u8; bytes_needed];
+                if let Err(e) = capture_client.read_from_device(&mut raw) {
+                    eprintln!(
+                        "screen-audio {capture_id}: read_from_device: {e:?}"
+                    );
+                    break;
+                }
+
+                // Decode PCM into interleaved f32 at the device's native
+                // rate + channel count.
+                let decoded = decode_pcm(
+                    &raw,
+                    input_channels,
+                    bits_per_sample,
+                    &sample_type,
+                );
+
+                // Channel-fold → 2ch, then resample → 48kHz.
+                let stereo = to_stereo(&decoded, input_channels);
+                let out_samples = resample_linear_stereo(
+                    &stereo,
+                    input_rate,
+                    OUTPUT_SAMPLE_RATE,
+                    &mut last_stereo,
+                );
+
+                if out_samples.is_empty() {
+                    continue;
+                }
+
+                // Pack f32s as little-endian bytes then base64. IPC-wise
+                // this is ~1.3× the raw byte count versus 5–10× for a
+                // JSON array of floats, which is the difference between
+                // "fine" and "wastes a CPU core" at 48kHz stereo.
+                let mut bytes = Vec::with_capacity(out_samples.len() * 4);
+                for s in &out_samples {
+                    bytes.extend_from_slice(&s.to_le_bytes());
+                }
+                let samples_b64 =
+                    base64::engine::general_purpose::STANDARD.encode(&bytes);
+
+                if channel
+                    .send(AudioFramePayload {
+                        capture_id,
+                        sample_rate: OUTPUT_SAMPLE_RATE,
+                        channels: OUTPUT_CHANNELS,
+                        samples_base64: samples_b64,
+                    })
+                    .is_err()
+                {
+                    // Frontend went away — stop cleanly.
+                    stop.store(true, Ordering::Relaxed);
+                    break;
+                }
+            }
+        }
+
+        let _ = audio_client.stop_stream();
+        Ok(())
+    }
+
+    // Convert a raw WASAPI buffer into interleaved f32 at the device's
+    // native channel count. Handles the three formats that actually show
+    // up on Windows render endpoints: f32 (most modern hardware), i16
+    // (older onboard codecs), and i32 (pro audio interfaces). Anything
+    // else falls through to zeros so a weird format doesn't crash the
+    // share — the user will notice silence and can retry.
+    fn decode_pcm(
+        raw: &[u8],
+        channels: u16,
+        bits_per_sample: u16,
+        sample_type: &SampleType,
+    ) -> Vec<f32> {
+        match (sample_type, bits_per_sample) {
+            (SampleType::Float, 32) => {
+                let mut out = Vec::with_capacity(raw.len() / 4);
+                for chunk in raw.chunks_exact(4) {
+                    out.push(f32::from_le_bytes([
+                        chunk[0], chunk[1], chunk[2], chunk[3],
+                    ]));
+                }
+                out
+            }
+            (SampleType::Int, 16) => {
+                let scale = 1.0_f32 / (i16::MAX as f32);
+                let mut out = Vec::with_capacity(raw.len() / 2);
+                for chunk in raw.chunks_exact(2) {
+                    let s = i16::from_le_bytes([chunk[0], chunk[1]]);
+                    out.push(s as f32 * scale);
+                }
+                out
+            }
+            (SampleType::Int, 32) => {
+                let scale = 1.0_f32 / (i32::MAX as f32);
+                let mut out = Vec::with_capacity(raw.len() / 4);
+                for chunk in raw.chunks_exact(4) {
+                    let s = i32::from_le_bytes([
+                        chunk[0], chunk[1], chunk[2], chunk[3],
+                    ]);
+                    out.push(s as f32 * scale);
+                }
+                out
+            }
+            _ => {
+                // Unknown format — emit silence of the right frame count
+                // so downstream math stays correct.
+                let bytes_per_frame =
+                    (bits_per_sample as usize / 8) * channels as usize;
+                let frames = if bytes_per_frame == 0 {
+                    0
+                } else {
+                    raw.len() / bytes_per_frame
+                };
+                vec![0.0; frames * channels as usize]
+            }
+        }
+    }
+
+    // Down- or up-mix to stereo. Surround layouts fold L+R only (center
+    // + surrounds get dropped) which is the simplest defensible choice
+    // for screen-share audio — most content is LR-centric and a proper
+    // ITU-R BS.775 downmix would pull in matrix coefficients we'd rather
+    // avoid in v1.
+    fn to_stereo(interleaved: &[f32], channels: u16) -> Vec<f32> {
+        if channels == 0 || interleaved.is_empty() {
+            return Vec::new();
+        }
+        if channels == 2 {
+            return interleaved.to_vec();
+        }
+        let ch = channels as usize;
+        let frames = interleaved.len() / ch;
+        let mut out = Vec::with_capacity(frames * 2);
+        if channels == 1 {
+            for i in 0..frames {
+                let s = interleaved[i];
+                out.push(s);
+                out.push(s);
+            }
+        } else {
+            for i in 0..frames {
+                let base = i * ch;
+                out.push(interleaved[base]);
+                out.push(interleaved[base + 1]);
+            }
+        }
+        out
+    }
+
+    // Linear-interpolation resampler for interleaved stereo f32. Not the
+    // prettiest option theoretically, but at 44.1→48 the audible
+    // artefacts stay below threshold for speech + game/music content. The
+    // `last_stereo` state preserves the final frame across invocations so
+    // the interpolation at the buffer boundary doesn't produce a click.
+    fn resample_linear_stereo(
+        input_stereo: &[f32],
+        input_rate: u32,
+        output_rate: u32,
+        last_stereo: &mut [f32; 2],
+    ) -> Vec<f32> {
+        if input_stereo.is_empty() {
+            return Vec::new();
+        }
+        if input_rate == output_rate {
+            last_stereo[0] = input_stereo[input_stereo.len() - 2];
+            last_stereo[1] = input_stereo[input_stereo.len() - 1];
+            return input_stereo.to_vec();
+        }
+        let ratio = output_rate as f64 / input_rate as f64;
+        let in_frames = input_stereo.len() / 2;
+        let out_frames = (in_frames as f64 * ratio).floor() as usize;
+        if out_frames == 0 {
+            last_stereo[0] = input_stereo[input_stereo.len() - 2];
+            last_stereo[1] = input_stereo[input_stereo.len() - 1];
+            return Vec::new();
+        }
+        let mut out = Vec::with_capacity(out_frames * 2);
+
+        let prev_l = last_stereo[0];
+        let prev_r = last_stereo[1];
+
+        for i in 0..out_frames {
+            let src_pos = i as f64 / ratio;
+            let src_frame = src_pos.floor() as i64;
+            let frac = (src_pos - src_frame as f64) as f32;
+
+            // `src_frame == -1` comes up for the very first output frame
+            // when ratio > 1 — interpolate against the previous buffer's
+            // final sample to bridge the two.
+            let (l0, r0) = if src_frame < 0 {
+                (prev_l, prev_r)
+            } else {
+                let idx = (src_frame as usize).min(in_frames - 1) * 2;
+                (input_stereo[idx], input_stereo[idx + 1])
+            };
+            let next = ((src_frame + 1) as usize).min(in_frames - 1);
+            let l1 = input_stereo[next * 2];
+            let r1 = input_stereo[next * 2 + 1];
+
+            out.push(l0 + (l1 - l0) * frac);
+            out.push(r0 + (r1 - r0) * frac);
+        }
+
+        last_stereo[0] = input_stereo[input_stereo.len() - 2];
+        last_stereo[1] = input_stereo[input_stereo.len() - 1];
+        out
+    }
+}

apps/desktop/src-tauri/src/screen_capture.rs

@@ -0,0 +1,266 @@
+// Native screen / window capture pipeline. Spawns a Rust thread per active
+// capture that grabs frames via xcap, downscales them to the user's target
+// resolution, encodes JPEG, and streams each frame to the JS side through
+// a Tauri `Channel<FramePayload>`. The JS end decodes into an
+// ImageBitmap, draws to a <canvas>, and exposes the canvas as a
+// MediaStream via captureStream() — that stream is what LiveKit publishes.
+// Net result: the user picks a source in our custom picker and the share
+// starts directly, without the OS/browser picker appearing.
+//
+// JPEG on the Rust side + decode on the JS side introduces a second
+// encoding hop (LiveKit re-encodes VP9 later) but keeps IPC bandwidth
+// manageable — raw RGBA at 1920×1080×30fps would be ~240MB/s and cannot
+// go over Tauri's JSON-serialised IPC. JPEG frames at Q72 land around
+// 50–150KB each, so 30fps = 2–5MB/s of base64 traffic, which is fine.
+
+use base64::Engine;
+use serde::Serialize;
+use std::collections::HashMap;
+use std::sync::atomic::{AtomicBool, AtomicU32, Ordering};
+use std::sync::{Arc, Mutex, OnceLock};
+use std::thread;
+use std::time::{Duration, Instant};
+use tauri::ipc::Channel;
+
+static NEXT_ID: AtomicU32 = AtomicU32::new(1);
+static SESSIONS: OnceLock<Mutex<HashMap<u32, Session>>> = OnceLock::new();
+
+fn sessions() -> &'static Mutex<HashMap<u32, Session>> {
+    SESSIONS.get_or_init(|| Mutex::new(HashMap::new()))
+}
+
+struct Session {
+    stop: Arc<AtomicBool>,
+    handle: Option<thread::JoinHandle<()>>,
+}
+
+#[derive(Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct FramePayload {
+    pub capture_id: u32,
+    pub width: u32,
+    pub height: u32,
+    /// JPEG image bytes, base64-encoded (no data-URL prefix). Frontend
+    /// reconstructs via `Uint8Array.from(atob(...))` and decodes with
+    /// `createImageBitmap(blob)`.
+    pub jpeg_base64: String,
+}
+
+enum Source {
+    Window(xcap::Window),
+    Monitor(xcap::Monitor),
+}
+
+/// Start a continuous capture for the given source id and begin streaming
+/// JPEG frames via the provided channel. Returns a numeric capture id that
+/// must be passed to `stop_screen_capture` to tear the pipeline down.
+#[tauri::command]
+pub fn start_screen_capture(
+    source_id: String,
+    max_width: u32,
+    max_height: u32,
+    fps: u32,
+    channel: Channel<FramePayload>,
+) -> Result<u32, String> {
+    let clamped_fps = fps.clamp(5, 30);
+    let clamped_w = max_width.max(320).min(3840);
+    let clamped_h = max_height.max(180).min(2160);
+
+    // Probe once on the command thread so we can surface a clear error
+    // before spawning; the actual capture handle is re-resolved inside the
+    // worker thread (xcap::Window holds a Windows HWND which is !Send).
+    if find_source(&source_id).is_none() {
+        return Err(format!("screen source {source_id} not found"));
+    }
+
+    let capture_id = NEXT_ID.fetch_add(1, Ordering::Relaxed);
+    let stop = Arc::new(AtomicBool::new(false));
+    let stop_clone = Arc::clone(&stop);
+    let source_id_owned = source_id;
+
+    let handle = thread::Builder::new()
+        .name(format!("screen-capture-{capture_id}"))
+        .spawn(move || {
+            capture_loop(
+                source_id_owned,
+                clamped_w,
+                clamped_h,
+                clamped_fps,
+                capture_id,
+                channel,
+                stop_clone,
+            );
+        })
+        .map_err(|e| format!("failed to spawn capture thread: {e}"))?;
+
+    sessions().lock().unwrap().insert(
+        capture_id,
+        Session {
+            stop,
+            handle: Some(handle),
+        },
+    );
+    Ok(capture_id)
+}
+
+/// Signal the capture thread to stop and join it. Safe to call more than
+/// once — missing ids are silently no-ops so the JS side doesn't need to
+/// track whether a stop was already issued by the OS "stop sharing" path.
+#[tauri::command]
+pub fn stop_screen_capture(capture_id: u32) -> Result<(), String> {
+    let session = sessions().lock().unwrap().remove(&capture_id);
+    let Some(mut session) = session else {
+        return Ok(());
+    };
+    session.stop.store(true, Ordering::Relaxed);
+    if let Some(handle) = session.handle.take() {
+        // Best-effort join. If the thread is stuck in a long OS capture
+        // call we don't want to hang the command — detach after a brief
+        // wait by dropping the handle.
+        let _ = handle.join();
+    }
+    Ok(())
+}
+
+fn capture_loop(
+    source_id: String,
+    max_w: u32,
+    max_h: u32,
+    fps: u32,
+    capture_id: u32,
+    channel: Channel<FramePayload>,
+    stop: Arc<AtomicBool>,
+) {
+    let frame_interval = Duration::from_nanos(1_000_000_000 / fps as u64);
+    let jpeg_quality: u8 = 72;
+
+    // Re-resolve the source inside the worker thread — xcap::Window holds
+    // an HWND which is !Send so we can't move it across threads. Caching
+    // the handle for the lifetime of the loop keeps per-frame cost to the
+    // actual pixel capture + encode.
+    let source = match find_source(&source_id) {
+        Some(s) => s,
+        None => {
+            eprintln!("screen-capture {capture_id}: source vanished before capture started");
+            return;
+        }
+    };
+
+    while !stop.load(Ordering::Relaxed) {
+        let frame_start = Instant::now();
+
+        let img_result = match &source {
+            Source::Window(w) => w.capture_image(),
+            Source::Monitor(m) => m.capture_image(),
+        };
+        let img = match img_result {
+            Ok(i) => i,
+            Err(err) => {
+                eprintln!("screen-capture {capture_id}: capture failed: {err}");
+                // Brief backoff before retrying — transient Windows GDI
+                // errors (e.g. during screen lock) tend to recover within
+                // a frame or two.
+                thread::sleep(frame_interval);
+                continue;
+            }
+        };
+
+        let (raw_w, raw_h) = img.dimensions();
+        let (tgt_w, tgt_h) = scale_to_fit(raw_w, raw_h, max_w, max_h);
+        let scaled = if (tgt_w, tgt_h) != (raw_w, raw_h) {
+            image::imageops::resize(
+                &img,
+                tgt_w,
+                tgt_h,
+                image::imageops::FilterType::Triangle,
+            )
+        } else {
+            img
+        };
+
+        // JPEG doesn't support alpha; strip it before encoding.
+        let rgb = rgba_to_rgb(&scaled);
+
+        let mut jpeg_buf: Vec<u8> = Vec::with_capacity((tgt_w * tgt_h) as usize);
+        {
+            use image::codecs::jpeg::JpegEncoder;
+            let mut encoder = JpegEncoder::new_with_quality(&mut jpeg_buf, jpeg_quality);
+            if let Err(err) =
+                encoder.encode(&rgb, tgt_w, tgt_h, image::ExtendedColorType::Rgb8)
+            {
+                eprintln!("screen-capture {capture_id}: encode failed: {err}");
+                thread::sleep(frame_interval);
+                continue;
+            }
+        }
+
+        let jpeg_base64 = base64::engine::general_purpose::STANDARD.encode(&jpeg_buf);
+
+        let send_result = channel.send(FramePayload {
+            capture_id,
+            width: tgt_w,
+            height: tgt_h,
+            jpeg_base64,
+        });
+        if send_result.is_err() {
+            // Frontend went away (window closed, renderer crashed).
+            break;
+        }
+
+        // Pace to target framerate. If the capture + encode already took
+        // longer than one frame interval, yield a millisecond to avoid
+        // pegging a single core when the target is unreachable.
+        let elapsed = frame_start.elapsed();
+        if elapsed < frame_interval {
+            thread::sleep(frame_interval - elapsed);
+        } else {
+            thread::sleep(Duration::from_millis(1));
+        }
+    }
+}
+
+fn rgba_to_rgb(buf: &image::RgbaImage) -> Vec<u8> {
+    let (w, h) = buf.dimensions();
+    let mut out = Vec::with_capacity((w * h * 3) as usize);
+    for p in buf.pixels() {
+        out.extend_from_slice(&[p.0[0], p.0[1], p.0[2]]);
+    }
+    out
+}
+
+fn scale_to_fit(w: u32, h: u32, max_w: u32, max_h: u32) -> (u32, u32) {
+    if w == 0 || h == 0 {
+        return (w, h);
+    }
+    let scale = (max_w as f32 / w as f32)
+        .min(max_h as f32 / h as f32)
+        .min(1.0);
+    if scale >= 1.0 {
+        return (w, h);
+    }
+    let new_w = ((w as f32) * scale).round().max(1.0) as u32;
+    let new_h = ((h as f32) * scale).round().max(1.0) as u32;
+    (new_w, new_h)
+}
+
+fn find_source(source_id: &str) -> Option<Source> {
+    if let Some(rest) = source_id.strip_prefix("window:") {
+        let raw = rest.strip_suffix(":0")?;
+        let raw_id: u32 = raw.parse().ok()?;
+        let windows = xcap::Window::all().ok()?;
+        return windows
+            .into_iter()
+            .find(|w| w.id() == raw_id)
+            .map(Source::Window);
+    }
+    if let Some(rest) = source_id.strip_prefix("screen:") {
+        let raw = rest.strip_suffix(":0")?;
+        let raw_id: u32 = raw.parse().ok()?;
+        let monitors = xcap::Monitor::all().ok()?;
+        return monitors
+            .into_iter()
+            .find(|m| m.id() == raw_id)
+            .map(Source::Monitor);
+    }
+    None
+}

apps/desktop/src-tauri/src/screen_sources.rs

@@ -0,0 +1,335 @@
+// Source enumeration for the Discord-style screen-share picker. Split
+// into two commands on the slow-vs-fast axis:
+//
+//   - list_screen_sources      — metadata only (no thumbnails). Fast; the
+//                                picker shows names + placeholders instantly.
+//   - capture_screen_source_thumbnail — one thumbnail at a time, keyed by
+//                                       the id returned from the list.
+//
+// The frontend fans out the thumbnail calls via Promise.all so Tauri's
+// command thread pool captures them in parallel — wall-clock time ends up
+// bounded by the *slowest* source rather than the sum of all captures.
+// The `id` field is emitted in Chromium's internal desktopCapturer format
+// ("screen:<id>:0" / "window:<hwnd>:0") so the JS side can try to pass it
+// straight into getUserMedia's `chromeMediaSourceId` constraint, or use
+// it as the source key for the native capture pipeline in screen_capture.
+//
+// xcap abstracts the platform-specific capture APIs (Windows GDI + DXGI,
+// macOS CoreGraphics/ScreenCaptureKit, X11) so the code here stays flat.
+// Thumbnails are captured at native resolution, then letterbox-downscaled
+// to fit a 320×180 box to keep the base64 payload small.
+
+use base64::Engine;
+use image::{ImageBuffer, Rgba};
+use serde::Serialize;
+
+// Thumbnail dimensions tuned for the picker grid: even smaller than the
+// first pass because we're now streaming raw JPEG bytes (no base64) —
+// smaller payload = less IPC postMessage work on the main thread. At
+// 192×108 / Q60 the typical window thumbnail is 5–10 KB and decodes to
+// the grid in a frame or two.
+const THUMB_MAX_W: u32 = 192;
+const THUMB_MAX_H: u32 = 108;
+const THUMB_JPEG_QUALITY: u8 = 60;
+
+#[derive(Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct ScreenSource {
+    /// Chromium-format source id — stable within one enumeration call.
+    pub id: String,
+    /// Human-readable label for the picker (monitor name or window title).
+    pub name: String,
+    /// Discriminator for the grid grouping.
+    pub kind: &'static str,
+    /// Base64-encoded PNG, no data-URL prefix. None when the capture
+    /// fails (minimised window, permission-denied surface, transient
+    /// race). The UI renders a name-only card in that case.
+    pub thumbnail_png: Option<String>,
+    /// Native width of the full-res source — mostly informational, used
+    /// by the UI for aspect-ratio styling of the card.
+    pub width: u32,
+    pub height: u32,
+}
+
+// Fast metadata-only enumeration. No image capture happens here — that's
+// why it returns in tens of milliseconds instead of the multi-second
+// wait the single-shot enumerate_screen_sources command had.
+#[tauri::command]
+pub fn list_screen_sources() -> Result<Vec<ScreenSource>, String> {
+    let mut out: Vec<ScreenSource> = Vec::new();
+    append_monitor_metadata(&mut out);
+    append_window_metadata(&mut out);
+    Ok(out)
+}
+
+// One-shot thumbnail capture by source id. Called N times in parallel from
+// the frontend after the list lands so the total wall-clock is bounded by
+// the slowest capture rather than the sum. Legacy base64 variant — kept
+// for rollback; the preferred path is `capture_screen_source_thumbnail_bytes`.
+#[tauri::command]
+pub fn capture_screen_source_thumbnail(source_id: String) -> Result<Option<String>, String> {
+    if let Some(raw) = source_id.strip_prefix("screen:").and_then(strip_zero_suffix) {
+        return Ok(capture_monitor_by_id(raw));
+    }
+    if let Some(raw) = source_id.strip_prefix("window:").and_then(strip_zero_suffix) {
+        return Ok(capture_window_by_id(raw));
+    }
+    Err(format!("unknown source id format: {source_id}"))
+}
+
+// Binary variant: returns raw JPEG bytes wrapped in `tauri::ipc::Response`
+// so Tauri ships them over IPC without JSON-encoding / base64. On the JS
+// side, `invoke` resolves to an ArrayBuffer that we wrap in a Blob and
+// expose via `URL.createObjectURL` — skips the base64-decode step
+// entirely and keeps the main thread responsive during fan-in.
+//
+// The return type MUST be `Response` directly (not `Result<Response, E>`):
+// a Result wrapper forces Tauri to JSON-serialise the variant so the
+// frontend gets a JSON object instead of raw bytes. Failures — bad id
+// format, capture errors, source vanished — all funnel into an empty
+// byte buffer; the caller treats `byteLength === 0` as the "no thumbnail"
+// signal.
+#[tauri::command]
+pub fn capture_screen_source_thumbnail_bytes(source_id: String) -> tauri::ipc::Response {
+    let bytes = if let Some(raw) = source_id.strip_prefix("screen:").and_then(strip_zero_suffix) {
+        capture_monitor_bytes_by_id(raw).unwrap_or_default()
+    } else if let Some(raw) = source_id.strip_prefix("window:").and_then(strip_zero_suffix) {
+        capture_window_bytes_by_id(raw).unwrap_or_default()
+    } else {
+        eprintln!("capture_screen_source_thumbnail_bytes: unknown id format: {source_id}");
+        Vec::new()
+    };
+    tauri::ipc::Response::new(bytes)
+}
+
+fn strip_zero_suffix(s: &str) -> Option<&str> {
+    s.strip_suffix(":0")
+}
+
+// Legacy one-shot all-in-one enumeration. Kept around so the frontend can
+// fall back during rollout if the split pair throws; marked dead_code so
+// the linker doesn't grumble when only the split variant is wired up.
+#[allow(dead_code)]
+#[tauri::command]
+pub fn enumerate_screen_sources() -> Result<Vec<ScreenSource>, String> {
+    let mut out: Vec<ScreenSource> = Vec::new();
+    append_monitors(&mut out);
+    append_windows(&mut out);
+    Ok(out)
+}
+
+// ---------------------------------------------------------------------------
+// Monitors
+// ---------------------------------------------------------------------------
+
+fn append_monitor_metadata(out: &mut Vec<ScreenSource>) {
+    let monitors = match xcap::Monitor::all() {
+        Ok(m) => m,
+        Err(err) => {
+            eprintln!("xcap Monitor::all failed: {err}");
+            return;
+        }
+    };
+    for (idx, m) in monitors.iter().enumerate() {
+        out.push(ScreenSource {
+            id: format!("screen:{}:0", m.id()),
+            name: monitor_label(m, idx),
+            kind: "screen",
+            thumbnail_png: None,
+            width: m.width(),
+            height: m.height(),
+        });
+    }
+}
+
+#[allow(dead_code)]
+fn append_monitors(out: &mut Vec<ScreenSource>) {
+    let monitors = match xcap::Monitor::all() {
+        Ok(m) => m,
+        Err(err) => {
+            eprintln!("xcap Monitor::all failed: {err}");
+            return;
+        }
+    };
+    for (idx, m) in monitors.iter().enumerate() {
+        out.push(ScreenSource {
+            id: format!("screen:{}:0", m.id()),
+            name: monitor_label(m, idx),
+            kind: "screen",
+            thumbnail_png: capture_monitor_thumbnail(m),
+            width: m.width(),
+            height: m.height(),
+        });
+    }
+}
+
+fn capture_monitor_by_id(raw: &str) -> Option<String> {
+    let raw_id: u32 = raw.parse().ok()?;
+    let monitors = xcap::Monitor::all().ok()?;
+    let target = monitors.into_iter().find(|m| m.id() == raw_id)?;
+    capture_monitor_thumbnail(&target)
+}
+
+fn capture_monitor_bytes_by_id(raw: &str) -> Option<Vec<u8>> {
+    let raw_id: u32 = raw.parse().ok()?;
+    let monitors = xcap::Monitor::all().ok()?;
+    let target = monitors.into_iter().find(|m| m.id() == raw_id)?;
+    let image = target.capture_image().ok()?;
+    encode_scaled_jpeg_bytes(image)
+}
+
+fn monitor_label(m: &xcap::Monitor, idx: usize) -> String {
+    let name = m.name();
+    if name.is_empty() {
+        format!("Bildschirm {}", idx + 1)
+    } else {
+        name.to_string()
+    }
+}
+
+fn capture_monitor_thumbnail(m: &xcap::Monitor) -> Option<String> {
+    let image = m.capture_image().ok()?;
+    encode_scaled_jpeg(image)
+}
+
+// ---------------------------------------------------------------------------
+// Windows
+// ---------------------------------------------------------------------------
+
+fn append_window_metadata(out: &mut Vec<ScreenSource>) {
+    let windows = match xcap::Window::all() {
+        Ok(w) => w,
+        Err(err) => {
+            eprintln!("xcap Window::all failed: {err}");
+            return;
+        }
+    };
+    for w in windows.iter() {
+        if !is_shareable_window(w) {
+            continue;
+        }
+        let title = w.title();
+        if title.trim().is_empty() {
+            continue;
+        }
+        out.push(ScreenSource {
+            id: format!("window:{}:0", w.id()),
+            name: title.to_string(),
+            kind: "window",
+            thumbnail_png: None,
+            width: w.width(),
+            height: w.height(),
+        });
+    }
+}
+
+#[allow(dead_code)]
+fn append_windows(out: &mut Vec<ScreenSource>) {
+    let windows = match xcap::Window::all() {
+        Ok(w) => w,
+        Err(err) => {
+            eprintln!("xcap Window::all failed: {err}");
+            return;
+        }
+    };
+    for w in windows.iter() {
+        if !is_shareable_window(w) {
+            continue;
+        }
+        let title = w.title();
+        if title.trim().is_empty() {
+            continue;
+        }
+        out.push(ScreenSource {
+            id: format!("window:{}:0", w.id()),
+            name: title.to_string(),
+            kind: "window",
+            thumbnail_png: capture_window_thumbnail(w),
+            width: w.width(),
+            height: w.height(),
+        });
+    }
+}
+
+fn capture_window_by_id(raw: &str) -> Option<String> {
+    let raw_id: u32 = raw.parse().ok()?;
+    let windows = xcap::Window::all().ok()?;
+    let target = windows.into_iter().find(|w| w.id() == raw_id)?;
+    capture_window_thumbnail(&target)
+}
+
+fn capture_window_bytes_by_id(raw: &str) -> Option<Vec<u8>> {
+    let raw_id: u32 = raw.parse().ok()?;
+    let windows = xcap::Window::all().ok()?;
+    let target = windows.into_iter().find(|w| w.id() == raw_id)?;
+    let image = target.capture_image().ok()?;
+    encode_scaled_jpeg_bytes(image)
+}
+
+fn is_shareable_window(w: &xcap::Window) -> bool {
+    if w.is_minimized() {
+        return false;
+    }
+    let width = w.width();
+    let height = w.height();
+    // Tooltips, invisible tray-helpers, etc. sit at or near zero size —
+    // they'd clutter the picker grid and usually can't be captured anyway.
+    if width < 80 || height < 60 {
+        return false;
+    }
+    true
+}
+
+fn capture_window_thumbnail(w: &xcap::Window) -> Option<String> {
+    let image = w.capture_image().ok()?;
+    encode_scaled_jpeg(image)
+}
+
+// ---------------------------------------------------------------------------
+// Scaling + encoding
+// ---------------------------------------------------------------------------
+
+// Letterbox-shrink the captured image so the long edge is at most
+// THUMB_MAX_W / THUMB_MAX_H. Keeps aspect ratio, skips upscaling entirely
+// (tiny windows stay their captured size). Returns raw JPEG bytes — the
+// binary-IPC path ships these directly, the legacy base64 wrapper
+// (`encode_scaled_jpeg`) wraps in base64 for the old command.
+fn encode_scaled_jpeg_bytes(src: ImageBuffer<Rgba<u8>, Vec<u8>>) -> Option<Vec<u8>> {
+    let (w, h) = src.dimensions();
+    if w == 0 || h == 0 {
+        return None;
+    }
+    let scale = (THUMB_MAX_W as f32 / w as f32)
+        .min(THUMB_MAX_H as f32 / h as f32)
+        .min(1.0);
+    let scaled = if scale < 1.0 {
+        let new_w = ((w as f32) * scale).round().max(1.0) as u32;
+        let new_h = ((h as f32) * scale).round().max(1.0) as u32;
+        image::imageops::resize(&src, new_w, new_h, image::imageops::FilterType::Triangle)
+    } else {
+        src
+    };
+    // JPEG encoder doesn't accept RGBA — strip alpha into a packed RGB
+    // buffer first. Alpha carries no info for a visible thumbnail anyway.
+    let (sw, sh) = (scaled.width(), scaled.height());
+    let mut rgb: Vec<u8> = Vec::with_capacity((sw * sh * 3) as usize);
+    for p in scaled.pixels() {
+        rgb.extend_from_slice(&[p.0[0], p.0[1], p.0[2]]);
+    }
+    let mut buf: Vec<u8> = Vec::with_capacity((sw * sh / 8) as usize);
+    {
+        use image::codecs::jpeg::JpegEncoder;
+        let mut encoder = JpegEncoder::new_with_quality(&mut buf, THUMB_JPEG_QUALITY);
+        encoder
+            .encode(&rgb, sw, sh, image::ExtendedColorType::Rgb8)
+            .ok()?;
+    }
+    Some(buf)
+}
+
+// Legacy base64 wrapper — used by `capture_screen_source_thumbnail`
+// (Result<Option<String>, String>) which predates the binary variant.
+fn encode_scaled_jpeg(src: ImageBuffer<Rgba<u8>, Vec<u8>>) -> Option<String> {
+    let bytes = encode_scaled_jpeg_bytes(src)?;
+    Some(base64::engine::general_purpose::STANDARD.encode(&bytes))
+}

apps/desktop/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ChatApp",
-  "version": "0.7.1",
+  "version": "0.11.0",
   "identifier": "com.meinname.chatapp",
   "build": {
     "beforeDevCommand": "pnpm vite:dev",
@@ -42,8 +42,10 @@
   },
   "plugins": {
     "updater": {
-      "endpoints": ["https://github.com/byGalax/chat-app/releases/latest/download/latest.json"],
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDQ5N0U0RDcxOTU2OEQ0QUUKUldTdTFHaVZjVTErU1ZuMk1lWXBUbEcyS1RHYzJQN3k4VDdiUGRvRnVJYVJKR3BxWG1xcENpdlYK",
+      "endpoints": [
+        "https://update.netralax.cloud/windows/latest.json"
+      ],
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEI1Mzc0QjVBQUZEQTA3RUIKUldUckI5cXZXa3MzdGM3QkE4WWFPd3NnVzRZeXdpcUM0eUtjRDlGN09ySEdzNXhLNlo3azBPajYK",
       "windows": {
         "installMode": "passive"
       }

apps/desktop/src/App.tsx

@@ -1,7 +1,10 @@
+import { lazy, Suspense } from 'react';
 import { BrowserRouter, Navigate, Outlet, Route, Routes } from 'react-router-dom';
 
 import { AppShell } from './components/AppShell';
+import { CrashToast } from './components/CrashToast';
 import { ErrorBoundary } from './components/ErrorBoundary';
+import { SpinnerIcon } from './components/icons';
 import { UpdateToast } from './components/UpdateToast';
 import { RequireAdmin, RequireAuth, RequireDevice } from './components/guards';
 import { AuthProvider } from './context/AuthContext';
@@ -9,14 +12,39 @@ import { CallProvider } from './context/CallContext';
 import { ConversationsProvider } from './context/ConversationsContext';
 import { FriendshipsProvider } from './context/FriendshipsContext';
 import { ThemeProvider } from './context/ThemeContext';
-import { AdminPage } from './pages/AdminPage';
-import { AuthCallbackPage } from './pages/AuthCallbackPage';
 import { AuthPage } from './pages/AuthPage';
 import { ChatsEmptyState, ChatsPage } from './pages/ChatsPage';
 import { ConversationPage } from './pages/ConversationPage';
-import { DevicePage } from './pages/DevicePage';
-import { FriendsPage } from './pages/FriendsPage';
-import { SettingsPage } from './pages/SettingsPage';
+
+// Routes rarely visited on first render are pulled out of the initial bundle.
+// AuthPage stays eager because it's the first screen unauthenticated users
+// see; ChatsPage + ConversationPage stay eager because every authenticated
+// session renders them immediately.
+const AdminPage = lazy(() => import('./pages/AdminPage').then((m) => ({ default: m.AdminPage })));
+const AuthCallbackPage = lazy(() =>
+  import('./pages/AuthCallbackPage').then((m) => ({ default: m.AuthCallbackPage })),
+);
+const DevicePage = lazy(() => import('./pages/DevicePage').then((m) => ({ default: m.DevicePage })));
+const FriendsPage = lazy(() =>
+  import('./pages/FriendsPage').then((m) => ({ default: m.FriendsPage })),
+);
+const SettingsPage = lazy(() =>
+  import('./pages/SettingsPage').then((m) => ({ default: m.SettingsPage })),
+);
+
+function RouteSuspense({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-full w-full items-center justify-center bg-surface-3">
+          <SpinnerIcon className="h-5 w-5 text-accent" />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}
 
 // Isolates each top-level route so a crash in one page doesn't take the whole
 // shell down. The boundary auto-retries via `ErrorBoundary`'s backoff schedule.
@@ -52,11 +80,25 @@ export function App() {
                   <Routes>
                     <Route element={<RouteBoundary scope="auth" />}>
                       <Route path="/auth" element={<AuthPage />} />
-                      <Route path="/auth/callback" element={<AuthCallbackPage />} />
+                      <Route
+                        path="/auth/callback"
+                        element={
+                          <RouteSuspense>
+                            <AuthCallbackPage />
+                          </RouteSuspense>
+                        }
+                      />
                     </Route>
                     <Route element={<RequireAuth />}>
                       <Route element={<RouteBoundary scope="device" />}>
-                        <Route path="/device" element={<DevicePage />} />
+                        <Route
+                          path="/device"
+                          element={
+                            <RouteSuspense>
+                              <DevicePage />
+                            </RouteSuspense>
+                          }
+                        />
                       </Route>
                       <Route element={<RequireDevice />}>
                         <Route element={<AppShell />}>
@@ -75,14 +117,35 @@ export function App() {
                             </Route>
                           </Route>
                           <Route element={<RouteBoundary scope="friends" />}>
-                            <Route path="/friends" element={<FriendsPage />} />
+                            <Route
+                              path="/friends"
+                              element={
+                                <RouteSuspense>
+                                  <FriendsPage />
+                                </RouteSuspense>
+                              }
+                            />
                           </Route>
                           <Route element={<RouteBoundary scope="settings" />}>
-                            <Route path="/settings" element={<SettingsPage />} />
+                            <Route
+                              path="/settings"
+                              element={
+                                <RouteSuspense>
+                                  <SettingsPage />
+                                </RouteSuspense>
+                              }
+                            />
                           </Route>
                           <Route element={<RequireAdmin />}>
                             <Route element={<RouteBoundary scope="admin" />}>
-                              <Route path="/admin" element={<AdminPage />} />
+                              <Route
+                                path="/admin"
+                                element={
+                                  <RouteSuspense>
+                                    <AdminPage />
+                                  </RouteSuspense>
+                                }
+                              />
                             </Route>
                           </Route>
                         </Route>
@@ -91,6 +154,7 @@ export function App() {
                     <Route path="*" element={<Navigate to="/chats" replace />} />
                   </Routes>
                   <UpdateToast />
+                  <CrashToast />
                 </BrowserRouter>
               </CallProvider>
             </ConversationsProvider>

apps/desktop/src/components/AttachmentAudio.tsx

@@ -0,0 +1,251 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, MicIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+const BAR_COUNT = 48;
+
+// Custom voice-message player with waveform visualisation. Decoded peaks are
+// computed once per blob via OfflineAudioContext so playback only carries the
+// rendered DOM. Falls back to a rectangular bar if decoding fails (e.g. the
+// blob mime is recognised by <audio> but not by AudioContext).
+export function AttachmentAudio({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [arrayBuf, setArrayBuf] = useState<ArrayBuffer | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [peaks, setPeaks] = useState<number[] | null>(null);
+  const [duration, setDuration] = useState<number>(0);
+  const [position, setPosition] = useState<number>(0);
+  const [playing, setPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+    setArrayBuf(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        url = URL.createObjectURL(cached);
+        setBlobUrl(url);
+        const buf = await cached.arrayBuffer();
+        if (!cancelled) setArrayBuf(buf);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+        const buf = await blob.arrayBuffer();
+        if (!cancelled) setArrayBuf(buf);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  // Compute peaks via OfflineAudioContext. Cheap O(n) scan over PCM samples
+  // bucketed into BAR_COUNT bars. Done once per attachment.
+  useEffect(() => {
+    if (!arrayBuf) return;
+    let cancelled = false;
+    const Ctx =
+      window.AudioContext ||
+      (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    const ctx = new Ctx();
+    ctx
+      .decodeAudioData(arrayBuf.slice(0))
+      .then((decoded) => {
+        if (cancelled) return;
+        setDuration(decoded.duration);
+        const channel = decoded.getChannelData(0);
+        const bucket = Math.max(1, Math.floor(channel.length / BAR_COUNT));
+        const out = new Array<number>(BAR_COUNT).fill(0);
+        for (let i = 0; i < BAR_COUNT; i++) {
+          let max = 0;
+          const start = i * bucket;
+          const end = Math.min(channel.length, start + bucket);
+          for (let j = start; j < end; j++) {
+            const v = Math.abs(channel[j]!);
+            if (v > max) max = v;
+          }
+          out[i] = max;
+        }
+        // Normalize so loudest peak is 1; keeps quiet recordings visible.
+        const peak = Math.max(...out, 0.001);
+        setPeaks(out.map((v) => v / peak));
+      })
+      .catch(() => {
+        // Fall through — UI shows a flat bar but playback still works.
+      })
+      .finally(() => {
+        void ctx.close().catch(() => {});
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [arrayBuf]);
+
+  const fallbackPeaks = useMemo(
+    () => (peaks ? null : Array.from({ length: BAR_COUNT }, () => 0.5)),
+    [peaks],
+  );
+  const visiblePeaks = peaks ?? fallbackPeaks!;
+  const progress = duration > 0 ? position / duration : 0;
+
+  const onTogglePlay = () => {
+    const el = audioRef.current;
+    if (!el || !blobUrl) return;
+    if (el.paused) void el.play();
+    else el.pause();
+  };
+
+  const onSeek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const el = audioRef.current;
+    if (!el || duration === 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+    el.currentTime = ratio * duration;
+  };
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 flex w-[280px] min-w-[280px] items-center gap-2 rounded-lg border border-line bg-surface-2 px-3 py-2">
+      <button
+        type="button"
+        onClick={onTogglePlay}
+        disabled={!blobUrl}
+        aria-label={playing ? 'Pause' : 'Wiedergabe'}
+        title={playing ? 'Pause' : 'Wiedergabe'}
+        className="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full bg-accent text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+      >
+        {!blobUrl ? (
+          <SpinnerIcon className="h-4 w-4" />
+        ) : playing ? (
+          <PauseGlyph />
+        ) : (
+          <PlayGlyph />
+        )}
+      </button>
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div
+          role="slider"
+          aria-label="Position"
+          aria-valuemin={0}
+          aria-valuemax={Math.max(1, Math.floor(duration))}
+          aria-valuenow={Math.floor(position)}
+          tabIndex={0}
+          onClick={onSeek}
+          className="flex h-7 cursor-pointer items-center gap-[2px]"
+        >
+          {visiblePeaks.map((v, i) => {
+            const playedRatio = (i + 0.5) / BAR_COUNT;
+            const played = playedRatio <= progress;
+            const h = Math.max(2, Math.round(v * 22));
+            return (
+              <span
+                key={i}
+                style={{ height: h + 'px' }}
+                className={
+                  'w-[3px] rounded-full ' +
+                  (played ? 'bg-accent' : 'bg-fg-muted/40')
+                }
+              />
+            );
+          })}
+        </div>
+        <div className="flex items-center justify-between text-[10px] tabular-nums text-fg-muted">
+          <span className="inline-flex items-center gap-1">
+            <MicIcon className="h-3 w-3" />
+            <span>{formatSec(playing ? position : duration)}</span>
+          </span>
+        </div>
+      </div>
+      {blobUrl && (
+        <audio
+          ref={audioRef}
+          src={blobUrl}
+          preload="metadata"
+          onLoadedMetadata={(e) => {
+            // Some webm/opus blobs report Infinity until first seek (Chrome
+            // bug). Force a seek to flush real duration.
+            const el = e.currentTarget;
+            if (!Number.isFinite(el.duration)) {
+              el.currentTime = 1e9;
+              setTimeout(() => {
+                el.currentTime = 0;
+              }, 0);
+            } else if (duration === 0) {
+              setDuration(el.duration);
+            }
+          }}
+          onDurationChange={(e) => {
+            const d = e.currentTarget.duration;
+            if (Number.isFinite(d) && d > 0) setDuration(d);
+          }}
+          onTimeUpdate={(e) => setPosition(e.currentTarget.currentTime)}
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onEnded={() => {
+            setPlaying(false);
+            setPosition(0);
+          }}
+          className="hidden"
+        >
+          <track kind="captions" />
+        </audio>
+      )}
+    </div>
+  );
+}
+
+function PlayGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M5 3.5l8 4.5-8 4.5z" />
+    </svg>
+  );
+}
+
+function PauseGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <rect x="4" y="3" width="3" height="10" rx="1" />
+      <rect x="9" y="3" width="3" height="10" rx="1" />
+    </svg>
+  );
+}
+
+function formatSec(sec: number): string {
+  if (!Number.isFinite(sec) || sec < 0) sec = 0;
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return m + ':' + s.toString().padStart(2, '0');
+}

apps/desktop/src/components/AttachmentGeneric.tsx

@@ -0,0 +1,132 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// Catch-all card for attachments without a richer renderer (zip, docx,
+// txt, etc). Decrypt is deferred to first download click — these can be
+// large and there's no inline preview to justify auto-fetching them.
+export function AttachmentGeneric({ handle }: Props) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const download = async () => {
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      let blob = await getCachedAttachment(handle.id);
+      if (!blob) {
+        blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        void putCachedAttachment(handle.id, blob);
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filenameFor(handle);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      // Defer revoke so Safari has a chance to start the download.
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'download failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="mt-2 inline-flex w-[280px] items-center gap-2.5 rounded-lg border border-line bg-surface-2 p-2.5">
+      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-accent/10 text-accent">
+        <FileGlyph />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-xs font-semibold text-fg">
+          {prettyMime(handle.mimeType)}
+        </p>
+        <p className="truncate text-[10px] text-fg-muted">
+          {formatSize(handle.sizeBytes)}
+        </p>
+        {error && (
+          <p className="mt-0.5 inline-flex items-center gap-1 text-[10px] text-rose-500">
+            <AlertIcon className="h-3 w-3" />
+            <span>{error}</span>
+          </p>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => void download()}
+        disabled={busy}
+        aria-label="Download"
+        title="Download"
+        className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-line bg-surface-3 text-fg transition hover:brightness-95 disabled:opacity-60"
+      >
+        {busy ? <SpinnerIcon className="h-4 w-4" /> : <DownloadGlyph />}
+      </button>
+    </div>
+  );
+}
+
+function FileGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+      <path d="M3 2a1 1 0 011-1h6l3 3v10a1 1 0 01-1 1H4a1 1 0 01-1-1V2zm7 0v3h3l-3-3z" />
+    </svg>
+  );
+}
+
+function DownloadGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M8 2v8M4 7l4 4 4-4M3 13h10" />
+    </svg>
+  );
+}
+
+function filenameFor(handle: AttachmentHandle): string {
+  const ext = extFor(handle.mimeType);
+  return 'attachment-' + handle.id.slice(0, 8) + (ext ? '.' + ext : '');
+}
+
+function extFor(mime: string): string | null {
+  const map: Record<string, string> = {
+    'application/zip': 'zip',
+    'application/x-zip-compressed': 'zip',
+    'application/x-7z-compressed': '7z',
+    'application/x-tar': 'tar',
+    'application/gzip': 'gz',
+    'application/json': 'json',
+    'application/xml': 'xml',
+    'text/plain': 'txt',
+    'text/markdown': 'md',
+    'text/csv': 'csv',
+    'application/msword': 'doc',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+    'application/vnd.ms-excel': 'xls',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+    'application/vnd.ms-powerpoint': 'ppt',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+  };
+  return map[mime] ?? null;
+}
+
+function prettyMime(mime: string): string {
+  const ext = extFor(mime);
+  if (ext) return ext.toUpperCase() + '-Datei';
+  if (mime.startsWith('text/')) return 'Textdatei';
+  return mime || 'Datei';
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
+  return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+}

apps/desktop/src/components/AttachmentImage.tsx

@@ -1,6 +1,7 @@
 import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
 import { useEffect, useState } from 'react';
 
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
 import { supabase } from '../lib/supabase';
 import { AlertIcon, SpinnerIcon, XIcon } from './icons';
 
@@ -8,35 +9,95 @@ interface Props {
   handle: AttachmentHandle;
 }
 
+// Max inline-preview dimension. Full-resolution stays available for the
+// lightbox. Animated formats (gif/webp/apng) are passed through untouched
+// so animation isn't lost; everything else is downscaled to this box.
+const THUMB_MAX_DIM = 640;
+const ANIMATED_MIME = /^image\/(gif|apng|webp)/;
+
+async function makeThumbnail(blob: Blob): Promise<Blob | null> {
+  if (ANIMATED_MIME.test(blob.type)) return null;
+  if (typeof createImageBitmap !== 'function') return null;
+  if (typeof OffscreenCanvas !== 'function') return null;
+  try {
+    const bitmap = await createImageBitmap(blob);
+    const largest = Math.max(bitmap.width, bitmap.height);
+    if (largest <= THUMB_MAX_DIM) {
+      bitmap.close();
+      return null;
+    }
+    const scale = THUMB_MAX_DIM / largest;
+    const w = Math.max(1, Math.round(bitmap.width * scale));
+    const h = Math.max(1, Math.round(bitmap.height * scale));
+    const canvas = new OffscreenCanvas(w, h);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      bitmap.close();
+      return null;
+    }
+    ctx.drawImage(bitmap, 0, 0, w, h);
+    bitmap.close();
+    return await canvas.convertToBlob({ type: 'image/webp', quality: 0.8 });
+  } catch {
+    return null;
+  }
+}
+
 export function AttachmentImage({ handle }: Props) {
-  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [fullUrl, setFullUrl] = useState<string | null>(null);
+  const [thumbUrl, setThumbUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [lightboxOpen, setLightboxOpen] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
-    let url: string | null = null;
+    const created: string[] = [];
     setError(null);
-    setBlobUrl(null);
+    setFullUrl(null);
+    setThumbUrl(null);
 
-    downloadAndDecryptAttachment({ client: supabase, handle })
-      .then((blob) => {
-        if (cancelled) return;
-        url = URL.createObjectURL(blob);
-        setBlobUrl(url);
-      })
-      .catch((err: unknown) => {
+    const take = (blob: Blob): string => {
+      const u = URL.createObjectURL(blob);
+      created.push(u);
+      return u;
+    };
+
+    // OPFS cache → decrypt → generate thumbnail for inline display.
+    // Lightbox swaps to the full blob when opened.
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      let blob: Blob;
+      if (cached) {
+        blob = cached;
+      } else {
+        try {
+          blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+          void putCachedAttachment(handle.id, blob);
+        } catch (err: unknown) {
           if (!cancelled) {
             setError(err instanceof Error ? err.message : 'download failed');
           }
-      });
+          return;
+        }
+      }
+      if (cancelled) return;
+      const full = take(blob);
+      setFullUrl(full);
+      const thumb = await makeThumbnail(blob);
+      if (cancelled) return;
+      if (thumb) {
+        setThumbUrl(take(thumb));
+      }
+    })();
 
     return () => {
       cancelled = true;
-      if (url) URL.revokeObjectURL(url);
+      for (const u of created) URL.revokeObjectURL(u);
     };
   }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
 
+  const blobUrl = thumbUrl ?? fullUrl;
+
   if (error) {
     return (
       <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
@@ -66,10 +127,11 @@ export function AttachmentImage({ handle }: Props) {
           src={blobUrl}
           alt="attachment"
           loading="lazy"
+          decoding="async"
           className="block h-auto max-h-80 w-auto max-w-full object-contain"
         />
       </button>
-      {lightboxOpen && <Lightbox url={blobUrl} onClose={() => setLightboxOpen(false)} />}
+      {lightboxOpen && fullUrl && <Lightbox url={fullUrl} onClose={() => setLightboxOpen(false)} />}
     </>
   );
 }

apps/desktop/src/components/AttachmentPdf.tsx

@@ -0,0 +1,120 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// PDF preview rendered via the browser's built-in PDF viewer (Chromium /
+// Safari both ship one). Embedding via <object> with a fallback link keeps
+// the implementation tiny — no pdf.js dependency.
+export function AttachmentPdf({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        const typed = new Blob([cached], { type: 'application/pdf' });
+        url = URL.createObjectURL(typed);
+        setBlobUrl(url);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        // Force the application/pdf type so the browser plugin engages.
+        const typed = new Blob([blob], { type: 'application/pdf' });
+        url = URL.createObjectURL(typed);
+        setBlobUrl(url);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="mt-2 flex h-24 w-[320px] items-center justify-center rounded-lg border border-line bg-surface-2 text-fg-muted">
+        <SpinnerIcon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-2 w-full max-w-[420px] overflow-hidden rounded-lg border border-line bg-surface-2">
+      <div className="flex items-center justify-between gap-2 border-b border-line bg-surface-3 px-3 py-2 text-xs">
+        <span className="flex items-center gap-2 truncate text-fg">
+          <PdfGlyph />
+          <span className="truncate">PDF · {formatSize(handle.sizeBytes)}</span>
+        </span>
+        <div className="flex gap-1">
+          <button
+            type="button"
+            onClick={() => setExpanded((v) => !v)}
+            className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-0.5 text-[11px] text-fg hover:bg-surface-3"
+          >
+            {expanded ? 'Einklappen' : 'Vorschau'}
+          </button>
+          <a
+            href={blobUrl}
+            download={'attachment-' + handle.id.slice(0, 8) + '.pdf'}
+            className="cursor-pointer rounded-md border border-line bg-surface-2 px-2 py-0.5 text-[11px] text-fg no-underline hover:bg-surface-3"
+          >
+            Download
+          </a>
+        </div>
+      </div>
+      {expanded && (
+        <object data={blobUrl} type="application/pdf" className="block h-[420px] w-full">
+          <p className="p-4 text-xs text-fg-muted">
+            Vorschau nicht verfügbar — bitte herunterladen.
+          </p>
+        </object>
+      )}
+    </div>
+  );
+}
+
+function PdfGlyph() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
+      <path d="M3 2a1 1 0 011-1h6l3 3v10a1 1 0 01-1 1H4a1 1 0 01-1-1V2zm7 0v3h3l-3-3zM5 9h6v1H5V9zm0 2h6v1H5v-1zm0-4h2v1H5V7z" />
+    </svg>
+  );
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
+  return (bytes / 1024 / 1024).toFixed(1) + ' MB';
+}

apps/desktop/src/components/AttachmentVideo.tsx

@@ -0,0 +1,78 @@
+import { type AttachmentHandle, downloadAndDecryptAttachment } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { getCachedAttachment, putCachedAttachment } from '../lib/attachmentCache';
+import { supabase } from '../lib/supabase';
+import { AlertIcon, SpinnerIcon } from './icons';
+
+interface Props {
+  handle: AttachmentHandle;
+}
+
+// Decrypt the blob, render a native <video controls>. Loads on demand —
+// metadata-only preload so we don't burn bandwidth until the user hits play.
+export function AttachmentVideo({ handle }: Props) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let url: string | null = null;
+    setError(null);
+    setBlobUrl(null);
+
+    void (async () => {
+      const cached = await getCachedAttachment(handle.id);
+      if (cached) {
+        if (cancelled) return;
+        url = URL.createObjectURL(cached);
+        setBlobUrl(url);
+        return;
+      }
+      try {
+        const blob = await downloadAndDecryptAttachment({ client: supabase, handle });
+        if (cancelled) return;
+        url = URL.createObjectURL(blob);
+        setBlobUrl(url);
+        void putCachedAttachment(handle.id, blob);
+      } catch (err: unknown) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'download failed');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [handle.id, handle.storagePath, handle.keyB64, handle.nonceB64]);
+
+  if (error) {
+    return (
+      <div className="mt-2 inline-flex items-center gap-2 rounded-lg border border-rose-500/20 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+        <AlertIcon className="h-4 w-4" />
+        <span>{error}</span>
+      </div>
+    );
+  }
+
+  if (!blobUrl) {
+    return (
+      <div className="mt-2 flex h-32 w-[320px] items-center justify-center rounded-lg border border-line bg-surface-2 text-fg-muted">
+        <SpinnerIcon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <video
+      controls
+      preload="metadata"
+      src={blobUrl}
+      className="mt-2 block max-h-80 w-full max-w-[420px] rounded-lg border border-line bg-black"
+    >
+      <track kind="captions" />
+    </video>
+  );
+}

apps/desktop/src/components/Avatar.tsx

@@ -1,6 +1,8 @@
 // Reusable avatar that prefers an uploaded image and falls back to a coloured
 // letter circle. Use this everywhere the app needs to render a profile.
 
+import { useCachedAvatarUrl } from '../lib/avatarCache';
+
 interface Props {
   url?: string | null | undefined;
   displayName?: string | null | undefined;
@@ -18,10 +20,11 @@ export function Avatar({
   fallbackClass = 'bg-accent/20 text-accent',
   alt,
 }: Props) {
-  if (url) {
+  const effectiveUrl = useCachedAvatarUrl(url);
+  if (effectiveUrl) {
     return (
       <img
-        src={url}
+        src={effectiveUrl}
         alt={alt ?? displayName ?? ''}
         className={'shrink-0 rounded-full object-cover ' + className}
         draggable={false}

apps/desktop/src/components/BackupExportDialog.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { exportDeviceBackup } from '../lib/deviceBackup';
+import { type BackupBundle, exportDeviceBackupWithRecovery } from '../lib/deviceBackup';
 import { AlertIcon, CopyIcon, LockIcon, ShieldIcon, SpinnerIcon, XIcon } from './icons';
 
 interface Props {
@@ -22,8 +22,9 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
   const [confirm, setConfirm] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [backup, setBackup] = useState<string | null>(null);
+  const [bundle, setBundle] = useState<BackupBundle | null>(null);
   const [copied, setCopied] = useState(false);
+  const [copiedRecovery, setCopiedRecovery] = useState(false);
 
   const canGenerate = useMemo(() => {
     return passphrase.length >= 8 && passphrase === confirm && !busy;
@@ -32,9 +33,10 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
   const reset = useCallback(() => {
     setPassphrase('');
     setConfirm('');
-    setBackup(null);
+    setBundle(null);
     setError(null);
     setCopied(false);
+    setCopiedRecovery(false);
   }, []);
 
   const handleClose = useCallback(() => {
@@ -47,8 +49,13 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
     setBusy(true);
     setError(null);
     try {
-      const str = await exportDeviceBackup({ userId, deviceId, privateKey, passphrase });
-      setBackup(str);
+      const b = await exportDeviceBackupWithRecovery({
+        userId,
+        deviceId,
+        privateKey,
+        passphrase,
+      });
+      setBundle(b);
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {
@@ -56,27 +63,39 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
     }
   }, [canGenerate, userId, deviceId, privateKey, passphrase]);
 
-  const handleCopy = useCallback(async () => {
-    if (!backup) return;
+  const copyText = async (text: string, marker: 'main' | 'recovery'): Promise<void> => {
     try {
-      await navigator.clipboard.writeText(backup);
+      await navigator.clipboard.writeText(text);
+      if (marker === 'main') {
         setCopied(true);
         window.setTimeout(() => setCopied(false), 1500);
+      } else {
+        setCopiedRecovery(true);
+        window.setTimeout(() => setCopiedRecovery(false), 1500);
+      }
     } catch {
       /* fall back — user can select manually */
     }
-  }, [backup]);
+  };
 
   const handleDownload = useCallback(() => {
-    if (!backup) return;
-    const blob = new Blob([backup], { type: 'text/plain;charset=utf-8' });
+    if (!bundle) return;
+    const text =
+      '=== Passphrase backup ===\n' +
+      bundle.passphraseBackup +
+      '\n\n=== Recovery code ===\n' +
+      bundle.recoveryCode +
+      '\n\n=== Recovery backup (use with the recovery code) ===\n' +
+      bundle.recoveryBackup +
+      '\n';
+    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
     a.download = `chatapp-device-backup-${deviceId.slice(0, 8)}.txt`;
     a.click();
     URL.revokeObjectURL(url);
-  }, [backup, deviceId]);
+  }, [bundle, deviceId]);
 
   if (!open) return null;
 
@@ -110,7 +129,7 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
         </header>
 
         <div className="flex-1 overflow-y-auto p-5">
-          {!backup ? (
+          {!bundle ? (
             <>
               <p className="text-sm text-fg-muted">
                 {t('app:backup.export_explainer', {
@@ -183,40 +202,76 @@ export function BackupExportDialog({ open, userId, deviceId, privateKey, onClose
                   </span>
                 </div>
               </div>
+              <label className="mt-3 block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                Backup-String
+              </label>
               <textarea
                 readOnly
-                value={backup}
-                rows={8}
+                value={bundle.passphraseBackup}
+                rows={6}
                 onFocus={(e) => e.currentTarget.select()}
-                className="mt-3 w-full resize-none rounded-lg border border-line bg-surface-2 p-3 font-mono text-[11px] leading-relaxed text-fg"
+                className="mt-1 w-full resize-none rounded-lg border border-line bg-surface-2 p-3 font-mono text-[11px] leading-relaxed text-fg"
               />
-              <div className="mt-3 flex gap-2">
+              <div className="mt-2 flex gap-2">
                 <button
                   type="button"
-                  onClick={() => void handleCopy()}
+                  onClick={() => void copyText(bundle.passphraseBackup, 'main')}
                   className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
                 >
                   <CopyIcon className="h-4 w-4" />
-                  <span>
-                    {copied
-                      ? t('app:backup.copied', { defaultValue: 'Kopiert!' })
-                      : t('app:backup.copy', { defaultValue: 'Kopieren' })}
-                  </span>
+                  <span>{copied ? 'Kopiert!' : 'Kopieren'}</span>
                 </button>
                 <button
                   type="button"
                   onClick={handleDownload}
                   className="inline-flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
                 >
-                  {t('app:backup.download', { defaultValue: 'Als Datei speichern' })}
+                  Als Datei speichern (alles)
                 </button>
               </div>
+
+              <div className="mt-5 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3">
+                <div className="flex items-start gap-2">
+                  <ShieldIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-300" />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-semibold text-amber-700 dark:text-amber-200">
+                      Recovery-Code (Passphrase vergessen?)
+                    </p>
+                    <p className="mt-0.5 text-[11px] text-amber-700/80 dark:text-amber-200/80">
+                      Code separat aufbewahren. Mit dem Recovery-Backup unten lässt sich der Schlüssel
+                      ohne Passphrase wiederherstellen.
+                    </p>
+                    <p className="mt-2 select-all rounded bg-surface-3 px-2 py-1.5 font-mono text-sm tracking-widest text-fg">
+                      {bundle.recoveryCode}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <label className="mt-3 block text-xs font-medium uppercase tracking-wide text-fg-muted">
+                Recovery-Backup-String
+              </label>
+              <textarea
+                readOnly
+                value={bundle.recoveryBackup}
+                rows={6}
+                onFocus={(e) => e.currentTarget.select()}
+                className="mt-1 w-full resize-none rounded-lg border border-line bg-surface-2 p-3 font-mono text-[11px] leading-relaxed text-fg"
+              />
+              <button
+                type="button"
+                onClick={() => void copyText(bundle.recoveryBackup, 'recovery')}
+                className="mt-2 inline-flex w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-line bg-surface-2 px-3 py-2 text-sm font-medium text-fg transition hover:bg-surface-3"
+              >
+                <CopyIcon className="h-4 w-4" />
+                <span>{copiedRecovery ? 'Kopiert!' : 'Recovery-Backup kopieren'}</span>
+              </button>
             </>
           )}
         </div>
 
         <footer className="flex items-center justify-end gap-2 border-t border-line bg-surface-2 px-5 py-3">
-          {!backup ? (
+          {!bundle ? (
             <>
               <button
                 type="button"

apps/desktop/src/components/BackupRestoreDialog.tsx

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+
+import { DeviceRestore } from './DeviceRestore';
+import { AlertIcon, ShieldIcon, XIcon } from './icons';
+
+interface Props {
+  open: boolean;
+  userId: string;
+  onClose: () => void;
+}
+
+// Modal wrapper around DeviceRestore for the already-signed-in case. A
+// successful restore swaps the local device-identity for the one embedded
+// in the backup string — the app then hard-reloads so every hook
+// re-initialises against the restored keys (simpler than invalidating
+// supabase-realtime subscriptions, stronghold caches, livekit rooms, etc.
+// individually).
+export function BackupRestoreDialog({ open, userId, onClose }: Props) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Backup wiederherstellen"
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/60 p-6 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex w-full max-w-md flex-col gap-4"
+      >
+        <div className="flex items-center justify-between rounded-lg border border-white/10 bg-ink-900/70 p-3 backdrop-blur-xl">
+          <div className="flex items-center gap-2">
+            <ShieldIcon className="h-4 w-4 text-brand-300" />
+            <h3 className="text-sm font-semibold text-white">
+              Gerät aus Backup wiederherstellen
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Schließen"
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-white"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-100">
+          <AlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
+          <p className="min-w-0 flex-1">
+            Restore ersetzt das aktuelle Gerät durch das aus dem Backup.
+            Die App lädt danach neu. Nachrichten, die auf diesem Gerät seit
+            dem Backup eingegangen sind, sind erst wieder lesbar, nachdem
+            Peer-Geräte den Conversation-Key erneut für die wiederhergestellte
+            Device-ID wrappen.
+          </p>
+        </div>
+
+        <DeviceRestore
+          userId={userId}
+          onRestored={() => {
+            // Hard reload — cleanest way to reset every hook, supabase
+            // realtime channel, stronghold handle, and cached state.
+            window.location.reload();
+          }}
+        />
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/CallControls.tsx

@@ -1,10 +1,13 @@
 import { useTranslation } from 'react-i18next';
 
 import {
+  HeadphonesIcon,
+  HeadphonesOffIcon,
   MicIcon,
   MicOffIcon,
   MonitorShareIcon,
   MonitorStopIcon,
+  MusicIcon,
   PhoneOffIcon,
   UsersIcon,
   VideoIcon,
@@ -14,11 +17,21 @@ interface Props {
   muted: boolean;
   sharing: boolean;
   video: boolean;
+  deafened: boolean;
   onToggleMute: () => void;
   onToggleShare: () => void;
+  /** Right-click on the share button opens the quality picker dialog while
+   *  left-click just starts with last-used settings. Optional so pages that
+   *  don't need the advanced path (mobile, etc.) can skip it. */
+  onShareContextMenu?: (e: React.MouseEvent) => void;
   onToggleVideo?: () => void;
+  onToggleDeafen: () => void;
   onHangup: () => void;
   onOpenParticipants?: () => void;
+  /** Toggle the in-call soundboard popover. Active = panel currently open. */
+  onToggleSoundboard?: () => void;
+  soundboardOpen?: boolean;
+  participantsOpen?: boolean;
   /** Compact variant used inside the docked call (36px buttons). */
   compact?: boolean;
   /** Glass variant used when controls float on fullscreen cinema mode. */
@@ -31,11 +44,17 @@ export function CallControls({
   muted,
   sharing,
   video,
+  deafened,
   onToggleMute,
   onToggleShare,
+  onShareContextMenu,
   onToggleVideo,
+  onToggleDeafen,
   onHangup,
   onOpenParticipants,
+  onToggleSoundboard,
+  soundboardOpen = false,
+  participantsOpen = false,
   compact = false,
   glass = false,
   disabledMedia = false,
@@ -59,6 +78,24 @@ export function CallControls({
       >
         {muted ? <MicOffIcon className="h-5 w-5" /> : <MicIcon className="h-5 w-5" />}
       </CallButton>
+      <CallButton
+        label={
+          deafened
+            ? t('app:call.undeafen', { defaultValue: 'Ton wieder aktiv' })
+            : t('app:call.deafen', { defaultValue: 'Alle stumm' })
+        }
+        active={deafened}
+        activeTone="danger"
+        onClick={onToggleDeafen}
+        glass={glass}
+        className={btnSize}
+      >
+        {deafened ? (
+          <HeadphonesOffIcon className="h-5 w-5" />
+        ) : (
+          <HeadphonesIcon className="h-5 w-5" />
+        )}
+      </CallButton>
       {onToggleVideo && (
         <CallButton
           label={t('app:call.start_video', { defaultValue: 'Video' })}
@@ -81,6 +118,7 @@ export function CallControls({
         active={sharing}
         activeTone="accent"
         onClick={onToggleShare}
+        {...(onShareContextMenu ? { onContextMenu: onShareContextMenu } : {})}
         disabled={disabledMedia}
         glass={glass}
         className={btnSize}
@@ -91,10 +129,25 @@ export function CallControls({
           <MonitorShareIcon className="h-5 w-5" />
         )}
       </CallButton>
+      {onToggleSoundboard && (
+        <CallButton
+          label={t('app:soundboard.toggle', { defaultValue: 'Soundboard' })}
+          active={soundboardOpen}
+          activeTone="accent"
+          onClick={onToggleSoundboard}
+          glass={glass}
+          className={btnSize}
+        >
+          <MusicIcon className="h-5 w-5" />
+        </CallButton>
+      )}
       {onOpenParticipants && (
         <CallButton
           label={t('app:call.participants', { defaultValue: 'Teilnehmer' })}
           onClick={onOpenParticipants}
+          active={participantsOpen}
+          activeTone="accent"
+          dataTrigger="participants"
           glass={glass}
           className={btnSize}
         >
@@ -117,24 +170,30 @@ export function CallControls({
 interface CallButtonProps {
   label: string;
   onClick: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
   disabled?: boolean;
   active?: boolean;
   activeTone?: 'accent' | 'danger';
   tone?: 'default' | 'danger';
   glass?: boolean;
   className?: string;
+  /** Stable trigger id so portals (popovers) can skip outside-click dismiss
+   *  when the user is toggling their own trigger. */
+  dataTrigger?: string;
   children: React.ReactNode;
 }
 
 function CallButton({
   label,
   onClick,
+  onContextMenu,
   disabled,
   active,
   activeTone = 'accent',
   tone = 'default',
   glass = false,
   className = '',
+  dataTrigger,
   children,
 }: CallButtonProps) {
   const base =
@@ -158,11 +217,13 @@ function CallButton({
     <button
       type="button"
       onClick={onClick}
+      onContextMenu={onContextMenu}
       disabled={disabled}
       aria-label={label}
       aria-pressed={active}
       title={label}
       className={`${base} ${toneClass} ${className}`}
+      {...(dataTrigger ? { [`data-${dataTrigger}-trigger`]: 'true' } : {})}
     >
       {children}
     </button>

apps/desktop/src/components/CallParticipantTile.tsx

@@ -1,4 +1,6 @@
-import { CrownIcon, LockIcon, MicOffIcon, MonitorShareIcon } from './icons';
+import { useEffect, useRef } from 'react';
+
+import { CrownIcon, HeadphonesOffIcon, LockIcon, MicOffIcon } from './icons';
 
 export type AvatarColorKey = 'violet' | 'amber' | 'rose' | 'teal';
 
@@ -41,14 +43,20 @@ export interface ParticipantTileProps {
   avatarUrl: string | null;
   me: boolean;
   muted: boolean;
+  /** Local-only: true when THIS user has muted everyone else via the deafen
+   *  toggle. Remote deafen state is not propagated, so only the own tile
+   *  ever carries a truthy value. */
+  deafened: boolean;
   speaking: boolean;
-  sharing: boolean;
   video: boolean;
   e2ee: boolean;
+  /** MediaStreamTrack for the participant's active camera, when `video` is
+   *  true. When null the tile falls back to the avatar placeholder. */
+  videoTrack?: MediaStreamTrack | null;
   size?: 'default' | 'small';
   focused?: boolean;
   onClick?: () => void;
-  onOpenScreenShare?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
 }
 
 export function CallParticipantTile(props: ParticipantTileProps) {
@@ -56,18 +64,24 @@ export function CallParticipantTile(props: ParticipantTileProps) {
     displayName,
     me,
     muted,
+    deafened,
     speaking,
-    sharing,
     video,
     e2ee,
     size = 'default',
     focused = false,
     onClick,
-    onOpenScreenShare,
+    onContextMenu,
   } = 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'
@@ -76,6 +90,7 @@ export function CallParticipantTile(props: ParticipantTileProps) {
   return (
     <div
       onClick={onClick}
+      onContextMenu={onContextMenu}
       className={
         'relative flex flex-col overflow-hidden rounded-[14px] border bg-surface-3 transition ' +
         (onClick ? 'cursor-pointer ' : '') +
@@ -83,18 +98,22 @@ export function CallParticipantTile(props: ParticipantTileProps) {
         (small ? ' min-w-[140px]' : '')
       }
     >
-      {sharing ? (
-        <ScreenshareStub
-          displayName={displayName}
-          small={small}
-          onOpen={onOpenScreenShare}
-        />
-      ) : video ? (
+      {video ? (
         <VideoStub {...props} small={small} />
       ) : (
         <AudioContent {...props} small={small} />
       )}
 
+      {/* 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)]"
+        />
+      )}
+
       <div className="pointer-events-none absolute inset-x-2 bottom-2 flex items-center justify-between gap-2 rounded-lg glass-chip px-2.5 py-1.5">
         <div className="flex min-w-0 items-center gap-1.5 text-xs font-semibold">
           {me && <CrownIcon className="h-3 w-3 shrink-0 text-amber-300" />}
@@ -114,13 +133,21 @@ export function CallParticipantTile(props: ParticipantTileProps) {
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {muted && (
-            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white">
+            <span
+              aria-label="Mikro stumm"
+              title="Mikro stumm"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
               <MicOffIcon className="h-3 w-3" />
             </span>
           )}
-          {sharing && (
-            <span className="flex h-5 w-5 items-center justify-center rounded-md bg-emerald-500/80 text-white">
-              <MonitorShareIcon className="h-3 w-3" />
+          {deafened && (
+            <span
+              aria-label="Ton aus"
+              title="Ton aus"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
+              <HeadphonesOffIcon className="h-3 w-3" />
             </span>
           )}
         </div>
@@ -179,11 +206,45 @@ function VideoStub({
   userId,
   displayName,
   avatarUrl,
+  videoTrack,
+  me,
   small,
 }: ParticipantTileProps & { small: boolean }) {
-  // Video capture playback is out of scope for this UI iteration — show the
-  // audio-avatar gradient background as a placeholder so the layout is stable
-  // when a participant enables video.
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useEffect(() => {
+    const el = videoRef.current;
+    if (!el || !videoTrack) return;
+    el.srcObject = new MediaStream([videoTrack]);
+    return () => {
+      if (el.srcObject) {
+        (el.srcObject as MediaStream).getTracks().forEach((t) => {
+          // Don't stop the live track — other consumers may still need it.
+          // Just detach from this element.
+          void t;
+        });
+        el.srcObject = null;
+      }
+    };
+  }, [videoTrack]);
+
+  if (videoTrack) {
+    return (
+      <div className="relative flex min-h-0 flex-1 items-center justify-center bg-black">
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          className={
+            'h-full w-full object-cover ' +
+            (me ? 'scale-x-[-1]' : '') /* mirror local preview */
+          }
+        />
+      </div>
+    );
+  }
+
+  // Camera flag true but no track yet (publishing / subscribing race).
   const key = colorKeyFor(userId);
   const colors = AVATAR_COLORS[key];
   const letter = displayName.trim().charAt(0).toUpperCase() || '?';
@@ -206,49 +267,3 @@ function VideoStub({
   );
 }
 
-interface ScreenshareStubProps {
-  displayName: string;
-  small: boolean;
-  onOpen?: (() => void) | undefined;
-}
-
-// Fake browser window placeholder — click to open the real <video> viewer.
-// Matches the design spec's "screenshare-stub" look.
-function ScreenshareStub({ displayName, small, onOpen }: ScreenshareStubProps) {
-  return (
-    <button
-      type="button"
-      onClick={
-        onOpen
-          ? (e) => {
-              e.stopPropagation();
-              onOpen();
-            }
-          : undefined
-      }
-      aria-label={`${displayName} teilt Bildschirm`}
-      className="relative flex min-h-0 flex-1 cursor-pointer items-center justify-center bg-ink-900 p-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
-    >
-      <div className="h-[85%] w-[90%] overflow-hidden rounded-lg border border-white/10 bg-ink-700">
-        <div className="flex h-[20px] items-center gap-1 bg-ink-600 px-2">
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-          <span className="h-1.5 w-1.5 rounded-full bg-ink-500" />
-        </div>
-        <div className={'flex flex-col gap-2 ' + (small ? 'gap-[3px] p-1.5' : 'p-3.5')}>
-          <div className={'w-[60%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'w-[80%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'w-[40%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-          <div className={'my-1 rounded ' + (small ? 'h-[14px]' : 'h-10') + ' bg-accent/30'} />
-          <div className={'w-[70%] rounded ' + (small ? 'h-[3px]' : 'h-1.5') + ' bg-ink-500'} />
-        </div>
-      </div>
-      {!small && (
-        <div className="absolute left-3 top-3 flex items-center gap-1.5 glass-chip rounded-lg px-2.5 py-1 text-[10px] font-medium">
-          <MonitorShareIcon className="h-3 w-3" />
-          <span>{displayName} teilt Bildschirm</span>
-        </div>
-      )}
-    </button>
-  );
-}

apps/desktop/src/components/CallUI.tsx

@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useConversationsContext } from '../context/ConversationsContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
@@ -17,12 +18,17 @@ import { LockIcon, MonitorShareIcon, PhoneIcon, PhoneOffIcon } from './icons';
 //     different route.
 export function CallUI() {
   const { state } = useCall();
+  const { profile } = useAuth();
+  const dnd = profile?.presenceState === 'dnd';
 
   useEffect(() => {
+    // DND silences only the *incoming* ring — outgoing stays audible because
+    // the user initiated that call themselves. The incoming-call panel still
+    // appears visually; only the audible ring is suppressed.
     if (state.kind === 'outgoing') ringtone.start('outgoing');
-    else if (state.kind === 'incoming') ringtone.start('incoming');
+    else if (state.kind === 'incoming' && !dnd) ringtone.start('incoming');
     else ringtone.stop();
-  }, [state.kind]);
+  }, [state.kind, dnd]);
 
   useEffect(() => {
     return () => ringtone.stop();
@@ -152,6 +158,7 @@ function PipCall() {
   const active =
     state.kind === 'connected' ||
     state.kind === 'connecting' ||
+    state.kind === 'reconnecting' ||
     state.kind === 'outgoing';
   if (!active) return null;
 
@@ -166,6 +173,13 @@ function PipCall() {
       : conv?.peer?.displayName ?? '—';
   const participantCount = 1 + remoteParticipants.length;
   const someoneSharing = remoteScreenShares.length > 0;
+  // Duration ticks while connected or reconnecting (LiveKit holds the room
+  // across reconnects, so the timer shouldn't reset on a wobble). Absent
+  // on outgoing/connecting where the call hasn't started yet.
+  const startedAt =
+    state.kind === 'connected' || state.kind === 'reconnecting'
+      ? state.startedAt
+      : null;
 
   return (
     <div
@@ -190,7 +204,11 @@ function PipCall() {
             aria-hidden="true"
             className="h-1.5 w-1.5 rounded-full bg-rose-500 animate-live-dot"
           />
-          <span>Live · {t('app:call.tap_to_open', { defaultValue: 'tippe zum Öffnen' })}</span>
+          <span className="tabular-nums">
+            {startedAt
+              ? <PipDuration startedAt={startedAt} />
+              : t('app:call.tap_to_open', { defaultValue: 'tippe zum Öffnen' })}
+          </span>
         </p>
       </div>
       <button
@@ -207,3 +225,24 @@ function PipCall() {
     </div>
   );
 }
+
+// Live-ticking `mm:ss` / `hh:mm:ss` for the PiP. Duplicated from InCallPanel
+// deliberately — the two widgets have different typography + tabular
+// contexts, and extracting a shared component would be heavier than the
+// 8-line countup it replaces.
+function PipDuration({ startedAt }: { startedAt: string }) {
+  const [, tick] = useState(0);
+  useEffect(() => {
+    const id = window.setInterval(() => tick((v) => v + 1), 1000);
+    return () => window.clearInterval(id);
+  }, []);
+  const total = Math.max(
+    0,
+    Math.floor((Date.now() - new Date(startedAt).getTime()) / 1000),
+  );
+  const hh = Math.floor(total / 3600);
+  const mm = Math.floor((total % 3600) / 60);
+  const ss = total % 60;
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return <>{hh > 0 ? `${hh}:${pad(mm)}:${pad(ss)}` : `${pad(mm)}:${pad(ss)}`}</>;
+}

apps/desktop/src/components/ConversationHeader.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useCallPresence } from '../lib/useCallPresence';
+import type { PeerPresence } from '../lib/usePeerPresence';
 import { Avatar } from './Avatar';
 import {
   InfoIcon,
@@ -26,7 +27,7 @@ const PRESENCE_DOT: Record<PresenceState, string> = {
 
 interface Props {
   conversation: ConversationSummary | null;
-  peerPresence: PresenceState | null;
+  peerPresence: PeerPresence | null;
   onInfoClick?: () => void;
   onSearchClick?: () => void;
 }
@@ -51,7 +52,7 @@ export function ConversationHeader({ conversation, peerPresence, onInfoClick, on
 
 interface HeaderBarProps {
   conversation: ConversationSummary;
-  peerPresence: PresenceState | null;
+  peerPresence: PeerPresence | null;
   onInfoClick?: () => void;
   onSearchClick?: () => void;
 }
@@ -65,8 +66,18 @@ function HeaderBar({ conversation, peerPresence, onInfoClick, onSearchClick }: H
   const peerAvatar = isDm ? (conversation.peer?.avatarUrl ?? null) : (conversation.avatarUrl ?? null);
 
   // Hide presence when peer chose invisible — reciprocal privacy.
-  const showPresence = isDm && peerPresence && peerPresence !== 'invisible';
-  const presenceLabel = peerPresence ? t('app:presence.' + peerPresence) : '';
+  const peerState = peerPresence?.state ?? null;
+  const showPresence = isDm && peerState && peerState !== 'invisible';
+  // Subtitle priority: custom status_message when online (or idle/dnd), else
+  // the localized presence label. Offline always wins → just "Offline".
+  const presenceLabel = (() => {
+    if (!peerState) return '';
+    if (peerState === 'offline') return t('app:presence.offline');
+    if (peerPresence?.statusMessage && peerPresence.statusMessage.trim().length > 0) {
+      return peerPresence.statusMessage.trim();
+    }
+    return t('app:presence.' + peerState);
+  })();
 
   return (
     <header className="flex items-center gap-3 border-b border-line bg-surface-3 px-6 py-3">
@@ -80,12 +91,12 @@ function HeaderBar({ conversation, peerPresence, onInfoClick, onSearchClick }: H
             <UsersIcon className="h-5 w-5" />
           </div>
         )}
-        {showPresence && peerPresence && (
+        {showPresence && peerState && (
           <span
             aria-hidden="true"
             className={
               'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-surface-3 ' +
-              PRESENCE_DOT[peerPresence]
+              PRESENCE_DOT[peerState]
             }
           />
         )}

apps/desktop/src/components/CrashToast.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { type CrashEntry, subscribeCrashes } from '../lib/crashRecovery';
+import { AlertIcon, XIcon } from './icons';
+
+const VISIBLE_MS = 7_000;
+const MAX_STACK = 3;
+
+// Bottom-right stack of toasts for uncaught errors. Auto-dismisses each
+// entry after VISIBLE_MS. The user can X-out earlier.
+export function CrashToast() {
+  const [entries, setEntries] = useState<CrashEntry[]>([]);
+
+  useEffect(
+    () =>
+      subscribeCrashes((entry) => {
+        setEntries((prev) => [...prev.slice(-(MAX_STACK - 1)), entry]);
+      }),
+    [],
+  );
+
+  useEffect(() => {
+    if (entries.length === 0) return;
+    const latest = entries[entries.length - 1]!;
+    const id = window.setTimeout(() => {
+      setEntries((prev) => prev.filter((e) => e.id !== latest.id));
+    }, VISIBLE_MS);
+    return () => window.clearTimeout(id);
+  }, [entries]);
+
+  if (entries.length === 0) return null;
+
+  return createPortal(
+    <div
+      role="region"
+      aria-label="Fehler"
+      className="pointer-events-none fixed bottom-4 right-4 z-[100] flex flex-col gap-2"
+    >
+      {entries.map((entry) => (
+        <div
+          key={entry.id}
+          role="alert"
+          className="pointer-events-auto flex max-w-sm items-start gap-2 rounded-lg border border-rose-500/40 bg-rose-500/10 p-3 text-sm text-rose-700 shadow-xl backdrop-blur-sm dark:text-rose-100"
+        >
+          <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs font-semibold uppercase tracking-wider">
+              {entry.source === 'promise' ? 'Promise-Fehler' : 'Unerwarteter Fehler'}
+            </p>
+            <p className="mt-0.5 break-words text-xs">{entry.message}</p>
+          </div>
+          <button
+            type="button"
+            aria-label="Schließen"
+            onClick={() =>
+              setEntries((prev) => prev.filter((e) => e.id !== entry.id))
+            }
+            className="shrink-0 cursor-pointer rounded-md p-1 text-rose-700 transition hover:bg-rose-500/20 dark:text-rose-100"
+          >
+            <XIcon className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/DeviceRestore.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import {
   decodePrivateKeyFromBackup,
   importDeviceBackup,
+  normalizeRecoveryCode,
 } from '../lib/deviceBackup';
 import { devLocalSecretStore } from '../lib/secretStore';
 import { supabase } from '../lib/supabase';
@@ -28,6 +29,7 @@ export function DeviceRestore({ userId, onRestored }: Props) {
   const { t } = useTranslation(['app', 'errors']);
   const [backup, setBackup] = useState('');
   const [passphrase, setPassphrase] = useState('');
+  const [mode, setMode] = useState<'passphrase' | 'recovery'>('passphrase');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -39,7 +41,9 @@ export function DeviceRestore({ userId, onRestored }: Props) {
       setError(null);
       let privateKey: Uint8Array | null = null;
       try {
-        const payload = await importDeviceBackup(backup.trim(), passphrase);
+        const secret =
+          mode === 'recovery' ? normalizeRecoveryCode(passphrase) : passphrase;
+        const payload = await importDeviceBackup(backup.trim(), secret);
         privateKey = decodePrivateKeyFromBackup(payload);
 
         const device = await restoreDeviceFromServerRecord({
@@ -63,7 +67,7 @@ export function DeviceRestore({ userId, onRestored }: Props) {
         setBusy(false);
       }
     },
-    [backup, passphrase, userId, onRestored, busy],
+    [backup, passphrase, mode, userId, onRestored, busy],
   );
 
   return (
@@ -102,16 +106,42 @@ export function DeviceRestore({ userId, onRestored }: Props) {
           />
         </div>
         <div className="space-y-1">
+          <div className="flex items-center justify-between">
             <label className="block text-xs font-medium uppercase tracking-wide text-neutral-400">
-            {t('app:backup.passphrase', { defaultValue: 'Passphrase' })}
+              {mode === 'passphrase' ? 'Passphrase' : 'Recovery-Code'}
             </label>
+            <button
+              type="button"
+              onClick={() => {
+                setMode((m) => (m === 'passphrase' ? 'recovery' : 'passphrase'));
+                setPassphrase('');
+                setError(null);
+              }}
+              className="cursor-pointer text-[11px] font-semibold text-brand-300 hover:underline"
+            >
+              {mode === 'passphrase'
+                ? 'Passphrase vergessen? Recovery-Code nutzen'
+                : 'Stattdessen Passphrase eingeben'}
+            </button>
+          </div>
           <input
-            type="password"
+            type={mode === 'passphrase' ? 'password' : 'text'}
             required
             value={passphrase}
             onChange={(e) => setPassphrase(e.target.value)}
-            className="w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
+            placeholder={mode === 'recovery' ? 'XXXXXX-XXXXXX-XXXXXX-XXXXXX' : ''}
+            spellCheck={false}
+            autoComplete={mode === 'recovery' ? 'off' : 'current-password'}
+            className={
+              'w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 transition focus:border-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500/40 ' +
+              (mode === 'recovery' ? 'font-mono tracking-widest' : '')
+            }
           />
+          {mode === 'recovery' && (
+            <p className="text-[11px] text-neutral-500">
+              Stattdessen den Recovery-Backup-String oben einfügen.
+            </p>
+          )}
         </div>
       </div>
 

apps/desktop/src/components/EmojiPicker.tsx

@@ -0,0 +1,408 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+interface EmojiEntry {
+  e: string;
+  k: string[]; // search keywords (incl. name)
+}
+
+interface Category {
+  label: string;
+  entries: EmojiEntry[];
+}
+
+// Curated emoji set — small enough to stay fast without a dependency, wide
+// enough to cover everyday messaging. Keywords are the primary search
+// surface; the emoji character itself is also matched so a user typing ❤️
+// literally finds it.
+const CATEGORIES: Category[] = [
+  {
+    label: 'Smileys',
+    entries: [
+      { e: '😀', k: ['grin', 'smile', 'happy'] },
+      { e: '😃', k: ['smile', 'happy'] },
+      { e: '😄', k: ['smile', 'laugh'] },
+      { e: '😁', k: ['grin', 'smile'] },
+      { e: '😆', k: ['laugh', 'lol'] },
+      { e: '😅', k: ['sweat', 'nervous', 'laugh'] },
+      { e: '🤣', k: ['lol', 'rofl', 'laugh'] },
+      { e: '😂', k: ['joy', 'laugh', 'tears'] },
+      { e: '🙂', k: ['smile', 'slight'] },
+      { e: '🙃', k: ['upside', 'irony'] },
+      { e: '😉', k: ['wink'] },
+      { e: '😊', k: ['blush', 'smile'] },
+      { e: '😇', k: ['angel', 'innocent'] },
+      { e: '🥰', k: ['love', 'hearts'] },
+      { e: '😍', k: ['love', 'heart eyes'] },
+      { e: '🤩', k: ['star', 'excited'] },
+      { e: '😘', k: ['kiss'] },
+      { e: '😗', k: ['kiss'] },
+      { e: '😚', k: ['kiss'] },
+      { e: '😙', k: ['kiss'] },
+      { e: '🥲', k: ['tear', 'smile'] },
+      { e: '😋', k: ['yum', 'tasty'] },
+      { e: '😛', k: ['tongue'] },
+      { e: '😜', k: ['tongue', 'wink'] },
+      { e: '🤪', k: ['zany', 'silly'] },
+      { e: '😝', k: ['tongue'] },
+      { e: '🤑', k: ['money'] },
+      { e: '🤗', k: ['hug'] },
+      { e: '🤭', k: ['giggle', 'shy'] },
+      { e: '🤫', k: ['shush', 'quiet'] },
+      { e: '🤔', k: ['think'] },
+      { e: '🤐', k: ['zip', 'quiet'] },
+      { e: '🤨', k: ['raise brow'] },
+      { e: '😐', k: ['neutral'] },
+      { e: '😑', k: ['expressionless'] },
+      { e: '😶', k: ['speechless'] },
+      { e: '😏', k: ['smirk'] },
+      { e: '😒', k: ['unamused'] },
+      { e: '🙄', k: ['eye roll'] },
+      { e: '😬', k: ['grimace', 'awkward'] },
+      { e: '🤥', k: ['lying'] },
+      { e: '😔', k: ['sad', 'pensive'] },
+      { e: '😪', k: ['sleepy'] },
+      { e: '😴', k: ['sleep'] },
+      { e: '😷', k: ['mask', 'sick'] },
+      { e: '🤒', k: ['sick', 'fever'] },
+      { e: '🤕', k: ['injured'] },
+      { e: '🤢', k: ['nauseated'] },
+      { e: '🤮', k: ['vomit'] },
+      { e: '🤧', k: ['sneeze'] },
+      { e: '🥵', k: ['hot'] },
+      { e: '🥶', k: ['cold'] },
+      { e: '🥴', k: ['dizzy', 'woozy'] },
+      { e: '😵', k: ['dizzy'] },
+      { e: '🤯', k: ['mind blown'] },
+      { e: '🤠', k: ['cowboy'] },
+      { e: '🥳', k: ['party'] },
+      { e: '😎', k: ['cool', 'sunglasses'] },
+      { e: '🤓', k: ['nerd'] },
+      { e: '🧐', k: ['monocle'] },
+      { e: '😕', k: ['confused'] },
+      { e: '😟', k: ['worried'] },
+      { e: '🙁', k: ['frown'] },
+      { e: '☹️', k: ['frown'] },
+      { e: '😮', k: ['open mouth'] },
+      { e: '😯', k: ['hushed'] },
+      { e: '😲', k: ['astonished'] },
+      { e: '😳', k: ['flushed'] },
+      { e: '🥺', k: ['pleading'] },
+      { e: '😦', k: ['frowning'] },
+      { e: '😧', k: ['anguished'] },
+      { e: '😨', k: ['fear'] },
+      { e: '😰', k: ['anxious', 'sweat'] },
+      { e: '😥', k: ['sad', 'relieved'] },
+      { e: '😢', k: ['cry'] },
+      { e: '😭', k: ['cry', 'loud'] },
+      { e: '😱', k: ['scream', 'scared'] },
+      { e: '😖', k: ['confounded'] },
+      { e: '😣', k: ['persevere'] },
+      { e: '😞', k: ['disappointed'] },
+      { e: '😓', k: ['sweat'] },
+      { e: '😩', k: ['weary'] },
+      { e: '😫', k: ['tired'] },
+      { e: '🥱', k: ['yawn'] },
+      { e: '😤', k: ['triumph'] },
+      { e: '😡', k: ['angry', 'rage'] },
+      { e: '😠', k: ['angry'] },
+      { e: '🤬', k: ['swear', 'curse'] },
+      { e: '😈', k: ['devil'] },
+      { e: '👿', k: ['imp'] },
+      { e: '💀', k: ['skull', 'dead'] },
+      { e: '🤡', k: ['clown'] },
+      { e: '👻', k: ['ghost'] },
+      { e: '👽', k: ['alien'] },
+      { e: '🤖', k: ['robot'] },
+      { e: '💩', k: ['poop', 'shit'] },
+    ],
+  },
+  {
+    label: 'Gestures',
+    entries: [
+      { e: '👋', k: ['wave', 'hi'] },
+      { e: '🤚', k: ['hand'] },
+      { e: '🖐️', k: ['hand'] },
+      { e: '✋', k: ['stop', 'high five'] },
+      { e: '🖖', k: ['spock'] },
+      { e: '👌', k: ['ok'] },
+      { e: '🤌', k: ['pinch'] },
+      { e: '🤏', k: ['small'] },
+      { e: '✌️', k: ['peace', 'victory'] },
+      { e: '🤞', k: ['crossed fingers'] },
+      { e: '🤟', k: ['love you'] },
+      { e: '🤘', k: ['rock'] },
+      { e: '🤙', k: ['call me'] },
+      { e: '👈', k: ['point left'] },
+      { e: '👉', k: ['point right'] },
+      { e: '👆', k: ['point up'] },
+      { e: '🖕', k: ['middle finger', 'fuck'] },
+      { e: '👇', k: ['point down'] },
+      { e: '☝️', k: ['point up'] },
+      { e: '👍', k: ['thumbs up', 'like'] },
+      { e: '👎', k: ['thumbs down', 'dislike'] },
+      { e: '✊', k: ['fist'] },
+      { e: '👊', k: ['punch'] },
+      { e: '🤛', k: ['fist left'] },
+      { e: '🤜', k: ['fist right'] },
+      { e: '👏', k: ['clap'] },
+      { e: '🙌', k: ['raised hands'] },
+      { e: '👐', k: ['open hands'] },
+      { e: '🤲', k: ['palms'] },
+      { e: '🙏', k: ['pray', 'thanks'] },
+      { e: '✍️', k: ['write'] },
+      { e: '💪', k: ['flex', 'strong'] },
+    ],
+  },
+  {
+    label: 'Hearts',
+    entries: [
+      { e: '❤️', k: ['heart', 'love'] },
+      { e: '🧡', k: ['orange heart'] },
+      { e: '💛', k: ['yellow heart'] },
+      { e: '💚', k: ['green heart'] },
+      { e: '💙', k: ['blue heart'] },
+      { e: '💜', k: ['purple heart'] },
+      { e: '🖤', k: ['black heart'] },
+      { e: '🤍', k: ['white heart'] },
+      { e: '🤎', k: ['brown heart'] },
+      { e: '💔', k: ['broken heart'] },
+      { e: '❣️', k: ['heart exclamation'] },
+      { e: '💕', k: ['hearts'] },
+      { e: '💞', k: ['revolving hearts'] },
+      { e: '💓', k: ['beating heart'] },
+      { e: '💗', k: ['growing heart'] },
+      { e: '💖', k: ['sparkle heart'] },
+      { e: '💘', k: ['cupid'] },
+      { e: '💝', k: ['heart gift'] },
+    ],
+  },
+  {
+    label: 'Animals & Food',
+    entries: [
+      { e: '🐶', k: ['dog'] },
+      { e: '🐱', k: ['cat'] },
+      { e: '🐭', k: ['mouse'] },
+      { e: '🐹', k: ['hamster'] },
+      { e: '🐰', k: ['rabbit'] },
+      { e: '🦊', k: ['fox'] },
+      { e: '🐻', k: ['bear'] },
+      { e: '🐼', k: ['panda'] },
+      { e: '🐨', k: ['koala'] },
+      { e: '🐯', k: ['tiger'] },
+      { e: '🦁', k: ['lion'] },
+      { e: '🐸', k: ['frog'] },
+      { e: '🐵', k: ['monkey'] },
+      { e: '🐔', k: ['chicken'] },
+      { e: '🐧', k: ['penguin'] },
+      { e: '🐦', k: ['bird'] },
+      { e: '🦆', k: ['duck'] },
+      { e: '🍎', k: ['apple'] },
+      { e: '🍌', k: ['banana'] },
+      { e: '🍕', k: ['pizza'] },
+      { e: '🍔', k: ['burger'] },
+      { e: '🍟', k: ['fries'] },
+      { e: '🌭', k: ['hotdog'] },
+      { e: '🍿', k: ['popcorn'] },
+      { e: '🍣', k: ['sushi'] },
+      { e: '🍩', k: ['donut'] },
+      { e: '🍪', k: ['cookie'] },
+      { e: '🎂', k: ['cake', 'birthday'] },
+      { e: '🍰', k: ['cake'] },
+      { e: '🍫', k: ['chocolate'] },
+      { e: '🍺', k: ['beer'] },
+      { e: '🍷', k: ['wine'] },
+      { e: '🥂', k: ['cheers'] },
+      { e: '☕', k: ['coffee'] },
+    ],
+  },
+  {
+    label: 'Objects & Symbols',
+    entries: [
+      { e: '🔥', k: ['fire', 'lit'] },
+      { e: '✨', k: ['sparkle'] },
+      { e: '⭐', k: ['star'] },
+      { e: '🌟', k: ['star glowing'] },
+      { e: '💫', k: ['dizzy'] },
+      { e: '💥', k: ['boom', 'explosion'] },
+      { e: '⚡', k: ['lightning'] },
+      { e: '☀️', k: ['sun'] },
+      { e: '🌈', k: ['rainbow'] },
+      { e: '☁️', k: ['cloud'] },
+      { e: '🌧️', k: ['rain'] },
+      { e: '❄️', k: ['snow'] },
+      { e: '🎉', k: ['party', 'tada'] },
+      { e: '🎊', k: ['confetti'] },
+      { e: '🎁', k: ['gift'] },
+      { e: '🎈', k: ['balloon'] },
+      { e: '💯', k: ['100', 'perfect'] },
+      { e: '✅', k: ['check'] },
+      { e: '❌', k: ['x', 'no'] },
+      { e: '⚠️', k: ['warning'] },
+      { e: '❓', k: ['question'] },
+      { e: '❗', k: ['exclamation'] },
+      { e: '💬', k: ['speech'] },
+      { e: '💭', k: ['thought'] },
+      { e: '👀', k: ['eyes'] },
+      { e: '🚀', k: ['rocket'] },
+      { e: '🎵', k: ['music'] },
+      { e: '🎶', k: ['music'] },
+      { e: '🔔', k: ['bell'] },
+      { e: '💡', k: ['idea', 'bulb'] },
+    ],
+  },
+];
+
+const RECENT_KEY = 'chat.emoji.recents.v1';
+const RECENT_MAX = 24;
+
+function loadRecents(): string[] {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x): x is string => typeof x === 'string').slice(0, RECENT_MAX);
+  } catch {
+    return [];
+  }
+}
+
+function saveRecents(list: string[]): void {
+  try {
+    localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, RECENT_MAX)));
+  } catch {
+    /* ignore quota */
+  }
+}
+
+interface Props {
+  open: boolean;
+  onPick: (emoji: string) => void;
+  onClose: () => void;
+}
+
+export function EmojiPicker({ open, onPick, onClose }: Props) {
+  const [query, setQuery] = useState('');
+  const [recents, setRecents] = useState<string[]>(() => loadRecents());
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (rootRef.current && t && !rootRef.current.contains(t) && !t.closest('[data-emoji-trigger]')) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) setQuery('');
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return CATEGORIES;
+    return CATEGORIES.map((cat) => ({
+      label: cat.label,
+      entries: cat.entries.filter(
+        (entry) =>
+          entry.e.includes(q) ||
+          entry.k.some((k) => k.includes(q)) ||
+          cat.label.toLowerCase().includes(q),
+      ),
+    })).filter((cat) => cat.entries.length > 0);
+  }, [query]);
+
+  if (!open) return null;
+
+  const handlePick = (emoji: string) => {
+    onPick(emoji);
+    const next = [emoji, ...recents.filter((e) => e !== emoji)].slice(0, RECENT_MAX);
+    setRecents(next);
+    saveRecents(next);
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      role="dialog"
+      aria-label="Emoji auswählen"
+      className="absolute bottom-full right-0 z-30 mb-2 flex w-[320px] flex-col rounded-xl border border-line bg-surface-2 shadow-xl"
+    >
+      <div className="border-b border-line p-2">
+        <input
+          type="search"
+          autoFocus
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Suchen…"
+          className="w-full rounded-md border border-line bg-surface-3 px-2.5 py-1.5 text-sm text-fg placeholder-fg-muted outline-none focus:border-accent"
+        />
+      </div>
+      <div className="max-h-[320px] overflow-y-auto p-2">
+        {recents.length > 0 && !query && (
+          <CategoryBlock
+            label="Zuletzt"
+            entries={recents.map((e) => ({ e, k: [] }))}
+            onPick={handlePick}
+          />
+        )}
+        {filtered.map((cat) => (
+          <CategoryBlock
+            key={cat.label}
+            label={cat.label}
+            entries={cat.entries}
+            onPick={handlePick}
+          />
+        ))}
+        {filtered.length === 0 && (
+          <p className="py-4 text-center text-xs text-fg-muted">Keine Treffer</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CategoryBlock({
+  label,
+  entries,
+  onPick,
+}: {
+  label: string;
+  entries: EmojiEntry[];
+  onPick: (emoji: string) => void;
+}) {
+  return (
+    <div className="mb-2">
+      <p className="mb-1 px-1 text-[10px] font-semibold uppercase tracking-wider text-fg-muted">
+        {label}
+      </p>
+      <div className="grid grid-cols-8 gap-0.5">
+        {entries.map((entry, idx) => (
+          <button
+            key={entry.e + ':' + idx}
+            type="button"
+            onClick={() => onPick(entry.e)}
+            aria-label={entry.k[0] ?? entry.e}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-lg transition hover:bg-surface-3"
+          >
+            {entry.e}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/IncomingCallPanel.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useCall } from '../context/CallContext';
 import { useFriendshipsContext } from '../context/FriendshipsContext';
 import { AvatarColorKey, colorKeyFor } from './CallParticipantTile';
-import { LockIcon, PhoneIcon, PhoneOffIcon } from './icons';
+import { LockIcon, PhoneIcon, PhoneOffIcon, VideoIcon } from './icons';
 
 interface Props {
   conversation: ConversationSummary;
@@ -99,23 +99,37 @@ export function IncomingCallPanel({ conversation }: Props) {
             </>
           )}
         </p>
-        <div className="mt-5 flex w-full max-w-[360px] gap-3">
+        <div className="mt-5 flex w-full max-w-[440px] flex-wrap gap-3">
           <button
             type="button"
             onClick={rejectIncoming}
-            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-rose-500/40 bg-transparent px-5 py-3.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
+            className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] border border-rose-500/40 bg-transparent px-4 py-3.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/40 dark:text-rose-400"
           >
             <PhoneOffIcon className="h-4 w-4" />
             <span>{t('app:call.decline')}</span>
           </button>
           <button
             type="button"
-            onClick={() => void acceptIncoming()}
-            className="inline-flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-accept-btn transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
+            onClick={() => void acceptIncoming('audio')}
+            className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-emerald-600 px-4 py-3.5 text-sm font-semibold text-white shadow-accept-btn transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50"
           >
             <PhoneIcon className="h-4 w-4" />
-            <span>{t('app:call.accept')}</span>
+            <span>
+              {state.mediaKind === 'video'
+                ? t('app:call.accept_audio', { defaultValue: 'Nur Audio' })
+                : t('app:call.accept')}
+            </span>
           </button>
+          {state.mediaKind === 'video' && (
+            <button
+              type="button"
+              onClick={() => void acceptIncoming('video')}
+              className="inline-flex flex-1 basis-[30%] cursor-pointer items-center justify-center gap-2 rounded-[14px] bg-accent px-4 py-3.5 text-sm font-semibold text-accent-fg shadow-accept-btn transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+            >
+              <VideoIcon className="h-4 w-4" />
+              <span>{t('app:call.accept_video', { defaultValue: 'Mit Video' })}</span>
+            </button>
+          )}
         </div>
       </div>
     </section>

apps/desktop/src/components/LanguageSwitcher.tsx

@@ -15,8 +15,8 @@ export function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
       role="group"
       aria-label="Language"
       className={
-        'inline-flex items-center rounded-full border border-white/10 bg-white/5 p-0.5 text-[11px] font-medium ' +
-        (compact ? '' : 'backdrop-blur')
+        'inline-flex items-center rounded-full border border-line bg-surface-2 p-0.5 text-[11px] font-medium ' +
+        (compact ? '' : '')
       }
     >
       {SUPPORTED_LOCALES.map((locale) => {
@@ -30,10 +30,10 @@ export function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
               if (!active) void changeLocale(locale);
             }}
             className={
-              'cursor-pointer rounded-full px-2.5 py-1 transition focus:outline-none focus:ring-2 focus:ring-brand-400/40 ' +
+              'cursor-pointer rounded-full px-2.5 py-1 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
               (active
-                ? 'bg-brand-500/25 text-white ring-1 ring-brand-400/40'
-                : 'text-neutral-400 hover:text-neutral-200')
+                ? 'bg-accent/15 text-accent ring-1 ring-accent/30'
+                : 'text-fg-muted hover:text-fg')
             }
           >
             {LABELS[locale]}

apps/desktop/src/components/LinkPreviewCard.tsx

@@ -0,0 +1,49 @@
+import { useLinkPreview } from '../lib/useLinkPreview';
+
+interface Props {
+  url: string;
+}
+
+// Renders a compact OpenGraph preview card under a message bubble. Fetches
+// lazily through the edge function; silent when the URL returned no meta.
+export function LinkPreviewCard({ url }: Props) {
+  const preview = useLinkPreview(url);
+  if (!preview || !preview.ok) return null;
+  if (!preview.title && !preview.description && !preview.imageUrl) return null;
+
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noreferrer noopener"
+      className="mt-2 flex max-w-[320px] overflow-hidden rounded-lg border border-line bg-surface-2 text-sm no-underline transition hover:bg-surface-3"
+    >
+      {preview.imageUrl && (
+        <img
+          src={preview.imageUrl}
+          alt=""
+          loading="lazy"
+          className="h-20 w-20 shrink-0 object-cover"
+          onError={(e) => {
+            (e.currentTarget as HTMLImageElement).style.display = 'none';
+          }}
+        />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 p-2.5">
+        {preview.siteName && (
+          <p className="truncate text-[10px] uppercase tracking-wider text-fg-muted">
+            {preview.siteName}
+          </p>
+        )}
+        {preview.title && (
+          <p className="line-clamp-2 text-sm font-semibold text-fg">
+            {preview.title}
+          </p>
+        )}
+        {preview.description && (
+          <p className="line-clamp-2 text-xs text-fg-muted">{preview.description}</p>
+        )}
+      </div>
+    </a>
+  );
+}

apps/desktop/src/components/MentionAutocomplete.tsx

@@ -0,0 +1,103 @@
+import type { ConversationSummary } from '@chat-app/shared/chat';
+import { useEffect, useState } from 'react';
+
+import { Avatar } from './Avatar';
+
+interface Props {
+  members: ConversationSummary['members'];
+  query: string;
+  excludeUserId: string | undefined;
+  onSelect: (username: string) => void;
+  onClose: () => void;
+}
+
+// Dropdown shown above the composer when the user has typed `@` followed
+// by the start of a member name. Keyboard-first — arrow keys move through,
+// enter/tab commits, escape cancels.
+export function MentionAutocomplete({
+  members,
+  query,
+  excludeUserId,
+  onSelect,
+  onClose,
+}: Props) {
+  const q = query.toLowerCase();
+  const matches = members
+    .filter((m) => m.userId !== excludeUserId)
+    .filter((m) => {
+      if (!q) return true;
+      const name = (m.profile?.displayName ?? '').toLowerCase();
+      const handle = (m.profile?.username ?? '').toLowerCase();
+      return name.includes(q) || handle.includes(q);
+    })
+    .slice(0, 8);
+
+  const [active, setActive] = useState(0);
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (matches.length === 0) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActive((i) => (i + 1) % matches.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActive((i) => (i - 1 + matches.length) % matches.length);
+      } else if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        const pick = matches[active];
+        if (pick?.profile?.username) onSelect(pick.profile.username);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+    };
+  }, [matches, active, onSelect, onClose]);
+
+  if (matches.length === 0) return null;
+
+  return (
+    <div
+      role="listbox"
+      aria-label="Mitglieder"
+      className="absolute bottom-full left-0 right-0 z-20 mb-2 max-h-64 overflow-y-auto rounded-xl border border-line bg-surface-2 p-1 shadow-xl"
+    >
+      {matches.map((m, idx) => {
+        const name = m.profile?.displayName ?? m.profile?.username ?? '?';
+        const handle = m.profile?.username ?? '';
+        const isActive = idx === active;
+        return (
+          <button
+            key={m.userId}
+            type="button"
+            role="option"
+            aria-selected={isActive}
+            onMouseEnter={() => setActive(idx)}
+            onClick={() => {
+              if (m.profile?.username) onSelect(m.profile.username);
+            }}
+            className={
+              'flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ' +
+              (isActive ? 'bg-accent/20 text-fg' : 'text-fg-muted hover:bg-surface-3')
+            }
+          >
+            <Avatar
+              displayName={name}
+              url={m.profile?.avatarUrl ?? null}
+              className="h-6 w-6 text-[10px]"
+            />
+            <span className="min-w-0 flex-1 truncate text-fg">{name}</span>
+            <span className="shrink-0 text-[10px] text-fg-muted">@{handle}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

apps/desktop/src/components/MessageBubble.tsx

@@ -13,7 +13,13 @@ import { useAuth } from '../context/AuthContext';
 import { devLocalSecretStore } from '../lib/secretStore';
 import { supabase } from '../lib/supabase';
 import type { AggregatedReaction } from '../lib/useMessageReactions';
+import { extractFirstUrl } from '../lib/useLinkPreview';
+import { AttachmentAudio } from './AttachmentAudio';
+import { AttachmentGeneric } from './AttachmentGeneric';
 import { AttachmentImage } from './AttachmentImage';
+import { AttachmentPdf } from './AttachmentPdf';
+import { AttachmentVideo } from './AttachmentVideo';
+import { LinkPreviewCard } from './LinkPreviewCard';
 import { Avatar } from './Avatar';
 import { ForwardIcon, PencilIcon, PhoneIcon, PhoneOffIcon, ReplyIcon, SmileIcon, SpinnerIcon, TrashIcon, XIcon } from './icons';
 
@@ -40,6 +46,8 @@ interface Props {
   reactions: AggregatedReaction[];
   onToggleReaction: (emoji: string) => Promise<void>;
   showSeen?: boolean;
+  /** Delivery state for own messages: 'sent' / 'delivered' / 'read'. */
+  deliveryState?: 'sent' | 'delivered' | 'read';
   /** Resolved quoted message info (parent does the lookup). */
   quoted?: QuotedRef | null;
   /** Tap-to-jump on quote bubble. Receives the quoted message's id. */
@@ -48,6 +56,8 @@ interface Props {
   onReply?: (m: DecryptedMessage) => void;
   /** Hover action: parent opens forward dialog for current message. */
   onForward?: (m: DecryptedMessage) => void;
+  /** Click on the message's avatar surfaces the author's profile card. */
+  onAvatarClick?: (userId: string, ev: React.MouseEvent) => void;
   /** Highlighted state — set briefly after a jump. */
   highlighted?: boolean;
 }
@@ -63,10 +73,12 @@ export function MessageBubble({
   reactions,
   onToggleReaction,
   showSeen = false,
+  deliveryState,
   quoted = null,
   onJumpToMessage,
   onReply,
   onForward,
+  onAvatarClick,
   highlighted = false,
 }: Props) {
   const { t } = useTranslation(['app']);
@@ -88,6 +100,47 @@ export function MessageBubble({
   const withinEditWindow = age < EDIT_WINDOW_MS;
   const bodyText = initialText;
   const attachments = initialAttachments;
+
+  // /tempmsg ephemeral window. expireMs embedded in plaintext JSON; sender
+  // fires the soft-delete when the clock runs out. Receivers just watch
+  // the deletedAt flip via realtime.
+  const expireMs = parsed.kind === 'text' ? parsed.expireMs : undefined;
+  const [tickNow, setTickNow] = useState<number>(() => Date.now());
+  useEffect(() => {
+    if (expireMs === undefined) return;
+    const id = window.setInterval(() => setTickNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [expireMs]);
+  const msLeft =
+    expireMs !== undefined
+      ? Math.max(0, expireMs - (tickNow - createdAt.getTime()))
+      : null;
+
+  useEffect(() => {
+    if (!mine) return;
+    if (expireMs === undefined) return;
+    if (message.deletedAt) return;
+    const remaining = Math.max(0, expireMs - age);
+    const timer = window.setTimeout(() => {
+      void softDeleteMessage(supabase, message.id).catch((err: unknown) => {
+        console.warn('ephemeral auto-delete failed', err);
+      });
+    }, remaining);
+    return () => window.clearTimeout(timer);
+  }, [mine, expireMs, age, message.id, message.deletedAt]);
+
+  // Receiver-side auto-hide when the expiry window elapses even if the
+  // sender's delete hasn't propagated yet (network hiccup, offline-sender).
+  const [localExpired, setLocalExpired] = useState<boolean>(
+    msLeft !== null && msLeft <= 0,
+  );
+  useEffect(() => {
+    if (expireMs === undefined) return;
+    if (localExpired) return;
+    const remaining = Math.max(0, expireMs - age);
+    const t = window.setTimeout(() => setLocalExpired(true), remaining);
+    return () => window.clearTimeout(t);
+  }, [expireMs, age, localExpired]);
   const canEdit =
     parsed.kind === 'text' &&
     mine &&
@@ -172,13 +225,16 @@ export function MessageBubble({
     [onToggleReaction],
   );
 
-  if (message.deletedAt) {
+  if (message.deletedAt || localExpired) {
     return (
       <div className={'flex items-end gap-2 ' + (mine ? 'flex-row-reverse' : '')}>
         <AvatarSlot
           show={isLastOfRun}
           url={senderAvatarUrl ?? null}
           displayName={senderDisplayName ?? null}
+          {...(onAvatarClick
+            ? { onClick: (ev: React.MouseEvent) => onAvatarClick(message.senderId, ev) }
+            : {})}
         />
         <div className="max-w-[calc(70%-2.5rem)] rounded-2xl border border-line bg-surface-2 px-3.5 py-1.5 text-xs italic text-fg-muted">
           {t('app:chats.deleted')}
@@ -265,23 +321,30 @@ export function MessageBubble({
                 type="button"
                 onClick={() => onJumpToMessage?.(quoted.id)}
                 className={
-                  'mb-1.5 flex w-full cursor-pointer items-stretch gap-2 rounded-md px-2 py-1.5 text-left text-xs transition hover:opacity-90 ' +
+                  'mb-1.5 flex w-full cursor-pointer items-stretch gap-2 rounded-md pl-2 pr-2.5 py-1.5 text-left text-xs transition hover:brightness-110 hover:shadow-sm ' +
                   (mine
-                    ? 'bg-white/15 text-accent-fg/90'
-                    : 'bg-surface-2 text-fg-muted')
+                    ? 'bg-white/10 text-accent-fg/90'
+                    : 'bg-surface-2/80 text-fg-muted ring-1 ring-inset ring-line')
                 }
               >
                 <span
                   aria-hidden="true"
                   className={
-                    'w-0.5 shrink-0 rounded-full ' + (mine ? 'bg-white/50' : 'bg-accent')
+                    '-ml-1 w-1 shrink-0 rounded-full ' +
+                    (mine ? 'bg-white/70' : 'bg-accent')
                   }
                 />
-                <span className="min-w-0 flex-1">
-                  <span className={'block truncate font-semibold ' + (mine ? '' : 'text-fg')}>
-                    {quoted.senderName}
+                <span className="min-w-0 flex-1 pl-1">
+                  <span
+                    className={
+                      'flex items-center gap-1 truncate text-[11px] font-semibold ' +
+                      (mine ? 'text-accent-fg' : 'text-accent')
+                    }
+                  >
+                    <ReplyIcon className="h-3 w-3 shrink-0" />
+                    <span className="truncate">{quoted.senderName}</span>
                   </span>
-                  <span className="block truncate italic opacity-90">
+                  <span className="mt-0.5 block truncate opacity-80">
                     {quoted.deleted
                       ? t('app:chats.deleted')
                       : quoted.isAttachment && !quoted.snippet
@@ -295,10 +358,27 @@ export function MessageBubble({
               <span className="italic opacity-70">…cannot decrypt</span>
             ) : (
               <>
-                {bodyText.length > 0 && <div>{bodyText}</div>}
-                {attachments.map((a) => (
-                  <AttachmentImage key={a.id} handle={a} />
-                ))}
+                {bodyText.length > 0 && <div>{renderBodyWithMentions(bodyText)}</div>}
+                {bodyText.length > 0 &&
+                  (() => {
+                    const url = extractFirstUrl(bodyText);
+                    return url ? <LinkPreviewCard url={url} /> : null;
+                  })()}
+                {attachments.map((a) => {
+                  if (a.mimeType.startsWith('audio/')) {
+                    return <AttachmentAudio key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType.startsWith('image/')) {
+                    return <AttachmentImage key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType.startsWith('video/')) {
+                    return <AttachmentVideo key={a.id} handle={a} />;
+                  }
+                  if (a.mimeType === 'application/pdf') {
+                    return <AttachmentPdf key={a.id} handle={a} />;
+                  }
+                  return <AttachmentGeneric key={a.id} handle={a} />;
+                })}
               </>
             )}
             <div
@@ -311,25 +391,39 @@ export function MessageBubble({
               {message.editedAt && !message.deletedAt && (
                 <span className="italic">· {t('app:chats.edited')}</span>
               )}
+              {msLeft !== null && msLeft > 0 && (
+                <span
+                  className={
+                    'inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ' +
+                    (mine ? 'bg-white/20' : 'bg-rose-500/15 text-rose-600 dark:text-rose-300')
+                  }
+                  title="Selbstzerstörung"
+                >
+                  ⏱ {Math.ceil(msLeft / 1000)}s
+                </span>
+              )}
             </div>
           </div>
         )}
 
-        {showSeen && mine && !editing && !message.deletedAt && (
-          <p className="mt-0.5 text-right text-[10px] text-fg-muted">
-            {t('app:chats.seen')}
-          </p>
+        {mine && !editing && !message.deletedAt && deliveryState && (
+          <div className="mt-0.5 flex items-center justify-end gap-1 text-[10px] text-fg-muted">
+            <DeliveryTicks state={deliveryState} />
+            {showSeen && <span>{t('app:chats.seen')}</span>}
+          </div>
         )}
 
         {reactions.length > 0 && !editing && (
           <div className={'mt-1 flex flex-wrap gap-1 ' + (mine ? 'justify-end' : 'justify-start')}>
             {reactions.map((r) => (
               <button
-                key={r.emoji}
+                // Keying by emoji+count makes React remount the chip when the
+                // count flips, replaying the pop animation. Cheap visual cue.
+                key={r.emoji + ':' + r.count}
                 type="button"
                 onClick={() => void onToggleReaction(r.emoji)}
                 className={
-                  'inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
+                  'inline-flex origin-bottom animate-reaction-pop cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                   (r.mine
                     ? 'border-accent/40 bg-accent/20 text-accent'
                     : 'border-line bg-surface-2 text-fg hover:bg-surface-3')
@@ -428,14 +522,29 @@ function AvatarSlot({
   show,
   url,
   displayName,
+  onClick,
 }: {
   show: boolean;
   url: string | null;
   displayName: string | null;
+  onClick?: (ev: React.MouseEvent) => void;
 }) {
   if (!show) {
     return <div aria-hidden="true" className="h-8 w-8 shrink-0" />;
   }
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        data-user-popover-trigger
+        onClick={onClick}
+        className="shrink-0 cursor-pointer rounded-full transition hover:ring-2 hover:ring-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        aria-label={displayName ?? 'Profil'}
+      >
+        <Avatar url={url} displayName={displayName ?? ''} className="h-8 w-8 text-xs" />
+      </button>
+    );
+  }
   return (
     <Avatar
       url={url}
@@ -499,6 +608,72 @@ function formatDuration(totalSec: number): string {
   return m + ':' + s.toString().padStart(2, '0');
 }
 
+// Splits body text on `@username` tokens, rendering matches as highlighted
+// pills. Username alphabet matches Supabase citext usernames: alphanumerics
+// + underscores, length 1..32 (we don't bound here — regex is permissive
+// and keys off a leading `@` with an alnum/underscore follow).
+const MENTION_RE = /@([A-Za-z0-9_]{1,32})/g;
+
+function renderBodyWithMentions(text: string): React.ReactNode[] {
+  const out: React.ReactNode[] = [];
+  let lastIdx = 0;
+  let m: RegExpExecArray | null;
+  MENTION_RE.lastIndex = 0;
+  while ((m = MENTION_RE.exec(text)) !== null) {
+    if (m.index > lastIdx) out.push(text.slice(lastIdx, m.index));
+    out.push(
+      <span
+        key={m.index + ':' + m[1]}
+        className="rounded bg-accent/20 px-1 text-accent"
+      >
+        {m[0]}
+      </span>,
+    );
+    lastIdx = m.index + m[0].length;
+  }
+  if (lastIdx < text.length) out.push(text.slice(lastIdx));
+  return out;
+}
+
+function DeliveryTicks({ state }: { state: 'sent' | 'delivered' | 'read' }) {
+  // One checkmark for sent, two for delivered/read. Read shifts color to the
+  // accent to match WhatsApp/Telegram blue-tick convention.
+  const color =
+    state === 'read'
+      ? 'text-sky-500 dark:text-sky-400'
+      : 'text-fg-muted';
+  return (
+    <span
+      aria-label={
+        state === 'read'
+          ? 'Gelesen'
+          : state === 'delivered'
+            ? 'Zugestellt'
+            : 'Gesendet'
+      }
+      title={
+        state === 'read'
+          ? 'Gelesen'
+          : state === 'delivered'
+            ? 'Zugestellt'
+            : 'Gesendet'
+      }
+      className={'flex items-center ' + color}
+    >
+      <svg viewBox="0 0 16 12" width="14" height="10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        {state === 'sent' ? (
+          <polyline points="2 7 6 11 14 1" />
+        ) : (
+          <>
+            <polyline points="1 7 5 11 11 2" />
+            <polyline points="6 11 10 11 14 1" />
+          </>
+        )}
+      </svg>
+    </span>
+  );
+}
+
 function ActionButton({
   label,
   onClick,

apps/desktop/src/components/ParticipantVolumeMenu.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import {
+  getParticipantVolume,
+  setParticipantVolume,
+  subscribeParticipantVolumes,
+} from '../lib/participantVolumes';
+
+interface Props {
+  userId: string;
+  displayName: string;
+  x: number;
+  y: number;
+  onClose: () => void;
+}
+
+const MENU_W = 240;
+const MENU_H = 96;
+
+export function ParticipantVolumeMenu({
+  userId,
+  displayName,
+  x,
+  y,
+  onClose,
+}: Props) {
+  const [volume, setVolume] = useState<number>(() => getParticipantVolume(userId));
+
+  // Re-sync from store in case another menu instance changed the same user.
+  useEffect(() => subscribeParticipantVolumes(() => {
+    setVolume(getParticipantVolume(userId));
+  }), [userId]);
+
+  // Outside click + Esc to close.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('[data-volume-menu]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [onClose]);
+
+  const left = Math.min(Math.max(8, x), window.innerWidth - MENU_W - 8);
+  const top = Math.min(Math.max(8, y), window.innerHeight - MENU_H - 8);
+
+  return createPortal(
+    <div
+      data-volume-menu
+      role="dialog"
+      aria-label={'Lautstärke ' + displayName}
+      style={{ left, top, width: MENU_W }}
+      className="fixed z-[80] rounded-xl border border-line bg-surface-2/95 p-3 shadow-xl backdrop-blur-md"
+    >
+      <div className="mb-2 flex items-center justify-between gap-2 text-xs">
+        <span className="truncate font-semibold text-fg">{displayName}</span>
+        <span
+          className={
+            'tabular-nums ' + (volume > 1 ? 'text-amber-500' : 'text-fg-muted')
+          }
+        >
+          {Math.round(volume * 100)}%
+        </span>
+      </div>
+      {/* Up to 200% via WebAudio gain. Values above 100% can clip on loud
+          mics — the amber count-up hints at that without a verbose warning. */}
+      <input
+        type="range"
+        min={0}
+        max={2}
+        step={0.01}
+        value={volume}
+        onChange={(e) => {
+          const v = Number(e.target.value);
+          setVolume(v);
+          setParticipantVolume(userId, v);
+        }}
+        aria-label={'Lautstärke ' + displayName}
+        className="w-full accent-accent"
+      />
+      <div className="mt-1 flex justify-between text-[10px] text-fg-muted">
+        <span>0%</span>
+        <span className="tabular-nums">100%</span>
+        <span>200%</span>
+      </div>
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/ParticipantsPopover.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+import {
+  getParticipantVolume,
+  setParticipantVolume,
+  subscribeParticipantVolumes,
+} from '../lib/participantVolumes';
+import {
+  AvatarColorKey,
+  colorKeyFor,
+} from './CallParticipantTile';
+import { HeadphonesOffIcon, MicOffIcon, UsersIcon, XIcon } from './icons';
+
+// Rows the popover knows how to render. Subset of InCallPanel's Tile so this
+// component can be reused without the screen-share / video fields.
+export interface ParticipantRow {
+  userId: string;
+  displayName: string;
+  avatarUrl: string | null;
+  self: boolean;
+  muted: boolean;
+  deafened: boolean;
+}
+
+interface Props {
+  open: boolean;
+  rows: ParticipantRow[];
+  /** Set of userIds currently above the speaking-threshold. */
+  activeSpeakers: Set<string>;
+  onClose: () => void;
+}
+
+const AVATAR_TONES: Record<AvatarColorKey, string> = {
+  violet: 'bg-violet-200 text-violet-800 dark:bg-violet-900/60 dark:text-violet-200',
+  amber: 'bg-amber-200 text-amber-900 dark:bg-amber-900/60 dark:text-amber-200',
+  rose: 'bg-rose-200 text-rose-900 dark:bg-rose-900/60 dark:text-rose-200',
+  teal: 'bg-teal-200 text-teal-900 dark:bg-teal-900/60 dark:text-teal-200',
+};
+
+// Call-scoped participant list. Portal-mounted + fixed-positioned so it
+// floats above whichever call layout the user is in (docked, focus, or
+// fullscreen cinema). Mirrors the ParticipantVolumeMenu pattern for
+// close-on-outside / close-on-Esc behaviour so both feel consistent.
+export function ParticipantsPopover({ open, rows, activeSpeakers, onClose }: Props) {
+  const { t } = useTranslation(['app']);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('[data-participants-popover]')) return;
+      // Clicks on the triggering button also bubble here; the button itself
+      // handles toggle, so we only close on genuine outside clicks. The
+      // trigger uses `data-participants-trigger` — ignore those.
+      if (target?.closest('[data-participants-trigger]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      data-participants-popover
+      role="dialog"
+      aria-label={t('app:call.participants', { defaultValue: 'Teilnehmer' })}
+      className="fixed bottom-20 right-5 z-[70] flex max-h-[60vh] w-[300px] flex-col overflow-hidden rounded-xl border border-line bg-surface-2/95 shadow-xl backdrop-blur-md"
+    >
+      <header className="flex items-center justify-between gap-2 border-b border-line px-3.5 py-2.5">
+        <div className="flex items-center gap-2 text-sm font-semibold text-fg">
+          <UsersIcon className="h-4 w-4 text-fg-muted" />
+          <span>
+            {t('app:call.participants', { defaultValue: 'Teilnehmer' })} · {rows.length}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('app:common.close', { defaultValue: 'Schließen' })}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </header>
+      <div className="flex-1 overflow-y-auto px-2 py-2">
+        {rows.length === 0 ? (
+          <p className="px-2 py-6 text-center text-xs text-fg-muted">
+            {t('app:call.no_participants', { defaultValue: 'Keine Teilnehmer.' })}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {rows.map((row) => (
+              <li key={row.userId}>
+                <Row row={row} speaking={activeSpeakers.has(row.userId)} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function Row({ row, speaking }: { row: ParticipantRow; speaking: boolean }) {
+  const key = colorKeyFor(row.userId);
+  const tone = AVATAR_TONES[key];
+  const letter = row.displayName.trim().charAt(0).toUpperCase() || '?';
+  const [volume, setVolume] = useState<number>(() =>
+    row.self ? 1 : getParticipantVolume(row.userId),
+  );
+
+  useEffect(() => {
+    if (row.self) return;
+    return subscribeParticipantVolumes(() => {
+      setVolume(getParticipantVolume(row.userId));
+    });
+  }, [row.self, row.userId]);
+
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg px-2 py-1.5 hover:bg-surface-3/60">
+      <div className="flex items-center gap-2.5">
+        <div className="relative shrink-0">
+          {row.avatarUrl ? (
+            <img
+              src={row.avatarUrl}
+              alt=""
+              className="h-8 w-8 rounded-full object-cover"
+            />
+          ) : (
+            <span
+              className={
+                'flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ' +
+                tone
+              }
+            >
+              {letter}
+            </span>
+          )}
+          {speaking && (
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute -inset-0.5 rounded-full border-2 border-emerald-500 dark:border-emerald-400"
+            />
+          )}
+        </div>
+        <div className="min-w-0 flex-1 truncate text-sm font-medium text-fg">
+          {row.displayName}
+          {row.self && <span className="ml-1 text-fg-muted">(du)</span>}
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {row.muted && (
+            <span
+              aria-label="Mikro stumm"
+              title="Mikro stumm"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
+              <MicOffIcon className="h-3 w-3" />
+            </span>
+          )}
+          {row.deafened && (
+            <span
+              aria-label="Ton aus"
+              title="Ton aus"
+              className="flex h-5 w-5 items-center justify-center rounded-md bg-rose-500/80 text-white"
+            >
+              <HeadphonesOffIcon className="h-3 w-3" />
+            </span>
+          )}
+        </div>
+      </div>
+      {!row.self && (
+        <div className="flex items-center gap-2 pl-10 text-[11px] text-fg-muted">
+          <input
+            type="range"
+            min={0}
+            max={2}
+            step={0.01}
+            value={volume}
+            onChange={(e) => {
+              const v = Number(e.target.value);
+              setVolume(v);
+              setParticipantVolume(row.userId, v);
+            }}
+            aria-label={'Lautstärke ' + row.displayName}
+            className="flex-1 accent-accent"
+          />
+          <span
+            className={
+              'w-10 text-right tabular-nums ' +
+              (volume > 1 ? 'text-amber-500' : '')
+            }
+          >
+            {Math.round(volume * 100)}%
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

apps/desktop/src/components/RingtoneSettings.tsx

@@ -0,0 +1,283 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  getAudioSettings,
+  subscribeAudioSettings,
+  updateAudioSettings,
+} from '../lib/audioSettings';
+import {
+  clearIncomingRingtone,
+  getIncomingRingtone,
+  MAX_RINGTONE_BYTES,
+  saveIncomingRingtone,
+  type StoredRingtone,
+} from '../lib/ringtoneStorage';
+import { PhoneIcon, SpinnerIcon, TrashIcon } from './icons';
+
+interface Props {
+  /** Disable interactions while a parent action is in flight. */
+  disabled?: boolean;
+}
+
+const BYTES_PER_MB = 1024 * 1024;
+
+// UI for the custom incoming-call ringtone. Single file slot. Upload
+// validates size + mime and surfaces errors inline. Preview button plays
+// the stored blob through a local <audio> element without touching the
+// shared ringtone singleton so we don't interfere with a live call.
+export function RingtoneSettings({ disabled = false }: Props) {
+  const { t } = useTranslation(['app']);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const previewRef = useRef<HTMLAudioElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const [current, setCurrent] = useState<StoredRingtone | null>(null);
+  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 {
+      const cur = await getIncomingRingtone();
+      setCurrent(cur);
+    } catch (err: unknown) {
+      console.error('getIncomingRingtone failed', err);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    // Revoke any preview blob URL when the component unmounts so long-lived
+    // pages don't leak memory.
+    return () => {
+      stopPreview();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function stopPreview(): void {
+    const el = previewRef.current;
+    if (el) {
+      try {
+        el.pause();
+      } catch {
+        /* ignore */
+      }
+      el.src = '';
+    }
+    previewRef.current = null;
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPlaying(false);
+  }
+
+  async function handleFile(file: File): Promise<void> {
+    setError(null);
+    setBusy(true);
+    try {
+      await saveIncomingRingtone(file);
+      await refresh();
+    } catch (err: unknown) {
+      const code = err instanceof Error ? err.message : 'upload_failed';
+      if (code === 'ringtone_too_large') {
+        setError(
+          t('app:settings.ringtone_error_too_large', {
+            defaultValue: 'Datei zu groß (max {{max}} MB).',
+            max: MAX_RINGTONE_BYTES / BYTES_PER_MB,
+          }),
+        );
+      } else if (code === 'ringtone_not_audio') {
+        setError(
+          t('app:settings.ringtone_error_not_audio', {
+            defaultValue: 'Nur Audio-Dateien werden unterstützt.',
+          }),
+        );
+      } else {
+        setError(
+          t('app:settings.ringtone_error_generic', {
+            defaultValue: 'Ringtone konnte nicht gespeichert werden.',
+          }),
+        );
+      }
+    } finally {
+      setBusy(false);
+      if (inputRef.current) inputRef.current.value = '';
+    }
+  }
+
+  async function handleReset(): Promise<void> {
+    setError(null);
+    setBusy(true);
+    stopPreview();
+    try {
+      await clearIncomingRingtone();
+      await refresh();
+    } catch (err: unknown) {
+      console.error('clearIncomingRingtone failed', err);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function handlePreview(): void {
+    if (!current) return;
+    if (playing) {
+      stopPreview();
+      return;
+    }
+    const url = URL.createObjectURL(current.blob);
+    const el = new Audio(url);
+    el.loop = false;
+    el.volume = volume;
+    el.onended = () => stopPreview();
+    el.onerror = () => {
+      setError(
+        t('app:settings.ringtone_error_play', {
+          defaultValue: 'Ringtone konnte nicht abgespielt werden.',
+        }),
+      );
+      stopPreview();
+    };
+    el.play().catch(() => {
+      setError(
+        t('app:settings.ringtone_error_play', {
+          defaultValue: 'Ringtone konnte nicht abgespielt werden.',
+        }),
+      );
+      stopPreview();
+    });
+    previewRef.current = el;
+    previewUrlRef.current = url;
+    setPlaying(true);
+  }
+
+  const hasCustom = current !== null;
+  const sizeMb = current ? (current.blob.size / BYTES_PER_MB).toFixed(2) : null;
+  const interactionsDisabled = disabled || busy;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 text-sm font-medium text-fg">
+            <PhoneIcon className="h-4 w-4 text-fg-muted" />
+            {t('app:settings.ringtone_incoming', { defaultValue: 'Eingehender Anruf' })}
+          </div>
+          <div className="mt-1 text-xs text-fg-muted">
+            {hasCustom && current
+              ? t('app:settings.ringtone_custom_active', {
+                  defaultValue: '{{name}} · {{size}} MB',
+                  name: current.filename,
+                  size: sizeMb,
+                })
+              : t('app:settings.ringtone_default_active', {
+                  defaultValue: 'Standard-Klingelton (Doppelton)',
+                })}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          {hasCustom && (
+            <button
+              type="button"
+              onClick={handlePreview}
+              disabled={interactionsDisabled}
+              className="cursor-pointer rounded-lg border border-line bg-surface-3 px-3 py-1.5 text-xs font-semibold text-fg transition hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {playing
+                ? t('app:settings.ringtone_stop', { defaultValue: 'Stop' })
+                : t('app:settings.ringtone_preview', { defaultValue: 'Vorhören' })}
+            </button>
+          )}
+          <input
+            ref={inputRef}
+            type="file"
+            accept="audio/*"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) void handleFile(f);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={interactionsDisabled}
+            className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busy && <SpinnerIcon className="h-3.5 w-3.5" />}
+            <span>
+              {hasCustom
+                ? t('app:settings.ringtone_replace', { defaultValue: 'Ersetzen' })
+                : t('app:settings.ringtone_upload', { defaultValue: 'Hochladen' })}
+            </span>
+          </button>
+          {hasCustom && (
+            <button
+              type="button"
+              onClick={() => void handleReset()}
+              disabled={interactionsDisabled}
+              aria-label={t('app:settings.ringtone_reset', { defaultValue: 'Zurücksetzen' })}
+              title={t('app:settings.ringtone_reset', { defaultValue: 'Zurücksetzen' })}
+              className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-rose-500/40 bg-rose-500/10 text-rose-600 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:text-rose-300"
+            >
+              <TrashIcon className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <p className="rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-600 dark:text-rose-300">
+          {error}
+        </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:
+            'MP3, WAV, OGG oder M4A bis 8 MB. Nur für eingehende Anrufe — ausgehend bleibt der Standard.',
+        })}
+      </p>
+    </div>
+  );
+}

apps/desktop/src/components/ScreenShareContextMenu.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+import { useCall } from '../context/CallContext';
+import {
+  getScreenShareVolume,
+  setScreenShareVolume,
+  subscribeScreenShareVolumes,
+} from '../lib/screenShareVolumes';
+import { HeadphonesIcon, HeadphonesOffIcon, MonitorShareIcon, PhoneOffIcon } from './icons';
+
+interface Props {
+  /** Participant whose screen share the user right-clicked. */
+  userId: string;
+  displayName: string;
+  /** Whether the share has an audio track published. Controls whether the
+   *  volume / mute rows render — without audio those would be no-ops. */
+  hasAudio: boolean;
+  x: number;
+  y: number;
+  onClose: () => void;
+}
+
+const MENU_W = 260;
+const MENU_H_WITH_AUDIO = 200;
+const MENU_H_NO_AUDIO = 96;
+
+// Context menu surfaced on right-click of a remote screen share. Mirrors
+// Discord's stream menu: volume slider, audio mute toggle (independent of
+// volume — matches HTMLMediaElement's `muted` field), and "stop watching"
+// which both un-subscribes locally and dismisses the tile from the grid.
+export function ScreenShareContextMenu({
+  userId,
+  displayName,
+  hasAudio,
+  x,
+  y,
+  onClose,
+}: Props) {
+  const { t } = useTranslation(['app']);
+  const {
+    dismissShare,
+    screenShareAudioMutedIds,
+    setScreenShareAudioMuted,
+  } = useCall();
+  const [volume, setVolume] = useState<number>(() => getScreenShareVolume(userId));
+
+  useEffect(
+    () =>
+      subscribeScreenShareVolumes(() => {
+        setVolume(getScreenShareVolume(userId));
+      }),
+    [userId],
+  );
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('[data-share-menu]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [onClose]);
+
+  const muted = screenShareAudioMutedIds.has(userId);
+  const height = hasAudio ? MENU_H_WITH_AUDIO : MENU_H_NO_AUDIO;
+  const left = Math.min(Math.max(8, x), window.innerWidth - MENU_W - 8);
+  const top = Math.min(Math.max(8, y), window.innerHeight - height - 8);
+
+  return createPortal(
+    <div
+      data-share-menu
+      role="menu"
+      aria-label={t('app:call.share_menu_title', {
+        defaultValue: 'Bildschirmfreigabe von {{name}}',
+        name: displayName,
+      })}
+      style={{ left, top, width: MENU_W }}
+      className="fixed z-[80] overflow-hidden rounded-xl border border-line bg-surface-2/95 text-sm shadow-xl backdrop-blur-md"
+    >
+      <header className="flex items-center gap-2 border-b border-line px-3 py-2 text-xs text-fg-muted">
+        <MonitorShareIcon className="h-3.5 w-3.5 shrink-0 text-emerald-500" />
+        <span className="truncate">
+          {t('app:call.share_menu_owner', {
+            defaultValue: 'Bildschirmfreigabe · {{name}}',
+            name: displayName,
+          })}
+        </span>
+      </header>
+
+      {hasAudio && (
+        <>
+          <div className="flex flex-col gap-1.5 px-3 py-2.5">
+            <div className="flex items-center justify-between text-xs">
+              <span className="font-medium text-fg">
+                {t('app:call.share_volume', { defaultValue: 'Lautstärke' })}
+              </span>
+              <span
+                className={
+                  'tabular-nums ' + (volume > 1 ? 'text-amber-500' : 'text-fg-muted')
+                }
+              >
+                {Math.round(volume * 100)}%
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={2}
+              step={0.01}
+              value={volume}
+              onChange={(e) => {
+                const v = Number(e.target.value);
+                setVolume(v);
+                setScreenShareVolume(userId, v);
+              }}
+              aria-label={t('app:call.share_volume', { defaultValue: 'Lautstärke' })}
+              className="w-full accent-accent"
+            />
+            <div className="flex justify-between text-[10px] text-fg-muted">
+              <span>0%</span>
+              <span>100%</span>
+              <span>200%</span>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => setScreenShareAudioMuted(userId, !muted)}
+            className="flex w-full cursor-pointer items-center gap-2 border-t border-line px-3 py-2 text-left text-xs text-fg transition hover:bg-surface-3"
+          >
+            {muted ? (
+              <HeadphonesOffIcon className="h-4 w-4 text-rose-500" />
+            ) : (
+              <HeadphonesIcon className="h-4 w-4 text-fg-muted" />
+            )}
+            <span className="flex-1">
+              {muted
+                ? t('app:call.share_unmute_audio', { defaultValue: 'Audio einschalten' })
+                : t('app:call.share_mute_audio', { defaultValue: 'Audio stumm' })}
+            </span>
+          </button>
+        </>
+      )}
+
+      <button
+        type="button"
+        onClick={() => {
+          dismissShare(userId);
+          onClose();
+        }}
+        className="flex w-full cursor-pointer items-center gap-2 border-t border-line px-3 py-2 text-left text-xs font-semibold text-rose-600 transition hover:bg-rose-500/10 dark:text-rose-300"
+      >
+        <PhoneOffIcon className="h-4 w-4" />
+        <span>
+          {t('app:call.stop_watching', { defaultValue: 'Zuschauen beenden' })}
+        </span>
+      </button>
+    </div>,
+    document.body,
+  );
+}

apps/desktop/src/components/ScreenShareViewer.tsx

@@ -1,9 +1,8 @@
 import type { RemoteTrack } from 'livekit-client';
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
-import type { RemoteScreenShare } from '../context/CallContext';
+import { type RemoteScreenShare, useCall } from '../context/CallContext';
 import { MonitorShareIcon } from './icons';
 
 interface ScreenShareViewerProps {
@@ -13,12 +12,21 @@ interface ScreenShareViewerProps {
 }
 
 // Click-to-watch gate, live <video> attach/detach, native fullscreen toggle.
-// Lifted out of the old InCallPanel so the new CallDock stays lean.
-export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShareViewerProps) {
+// The watch-state lives in CallContext (not local useState) so it survives
+// layout-mode changes (grid → focus → fullscreen) without resetting. Same
+// reason the ScreenShareAudio mute follows this state — see attachTrack.
+// Right-click handling happens one level up in TileRender — the wrapping
+// div catches the event before it reaches the viewer's inner content.
+export function ScreenShareViewer({
+  share,
+  avatarUrl,
+  displayName,
+}: ScreenShareViewerProps) {
   const { t } = useTranslation(['app']);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [watching, setWatching] = useState(false);
+  const { watchingShareUserIds, watchShare } = useCall();
+  const watching = watchingShareUserIds.has(share.participantId);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const letter = displayName.trim().charAt(0).toUpperCase() || '?';
 
@@ -51,13 +59,13 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
     setIsFullscreen((v) => !v);
   };
 
-  const viewerNode = (
+  return (
     <div
       ref={containerRef}
       className={
         isFullscreen
           ? 'fixed inset-0 z-[60] flex h-screen w-screen flex-col overflow-hidden border-0 bg-black'
-          : 'overflow-hidden rounded-xl border border-emerald-500/30 bg-black'
+          : 'flex h-full w-full flex-col overflow-hidden rounded-xl border border-emerald-500/30 bg-black'
       }
     >
       <div className="flex shrink-0 items-center gap-2 border-b border-emerald-500/20 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-700 dark:text-emerald-200">
@@ -69,7 +77,6 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
           })}
         </span>
         {watching && (
-          <>
           <button
             type="button"
             onClick={toggleFullscreen}
@@ -79,21 +86,6 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
           >
             <FullscreenIcon className="h-3.5 w-3.5" />
           </button>
-            <button
-              type="button"
-              onClick={() => {
-                if (document.fullscreenElement === containerRef.current) {
-                  void document.exitFullscreen();
-                }
-                setWatching(false);
-              }}
-              aria-label={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              title={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            >
-              <span aria-hidden="true" className="text-[14px] leading-none">×</span>
-            </button>
-          </>
         )}
       </div>
 
@@ -104,15 +96,12 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
           playsInline
           muted
           onDoubleClick={toggleFullscreen}
-          className={
-            'block cursor-zoom-in bg-black ' +
-            (isFullscreen ? 'h-full w-full flex-1 object-contain' : 'w-full')
-          }
+          className="block h-full w-full flex-1 cursor-zoom-in bg-black object-contain"
         />
       ) : (
         <button
           type="button"
-          onClick={() => setWatching(true)}
+          onClick={() => watchShare(share.participantId)}
           aria-label={t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
           className="group relative block w-full cursor-pointer overflow-hidden bg-ink-900 focus:outline-none"
           style={{ aspectRatio: '16 / 9' }}
@@ -132,14 +121,6 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
       )}
     </div>
   );
-
-  // When in fullscreen, portal out of the call-panel subtree into <body> so
-  // no ancestor can clip or stack below us. Sidebar/chat-list are siblings of
-  // AppShell's root — portalled node sits above them via z-[60].
-  if (isFullscreen) {
-    return createPortal(viewerNode, document.body);
-  }
-  return viewerNode;
 }
 
 function BlurredTile({ avatarUrl, letter }: { avatarUrl: string | null; letter: string }) {

apps/desktop/src/components/ScreenSourcePicker.tsx

@@ -0,0 +1,413 @@
+import { memo, startTransition, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  type DisplaySurfaceHint,
+  getPresetParams,
+  getScreenShareSettings,
+  PRESET_ORDER,
+  type ScreenSharePreset,
+  updateScreenShareSettings,
+} from '../lib/screenShareSettings';
+import {
+  captureScreenSourceThumbnailBytes,
+  listScreenSources,
+  type ScreenSource,
+} from '../lib/screenSources';
+import { MonitorShareIcon, SpinnerIcon, XIcon } from './icons';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  /** Parent handles the actual share start. `sourceId` is null when the user
+   *  clicks "Teilen" without picking a specific source — fallback to the
+   *  OS-level getDisplayMedia picker. */
+  onStart: (opts: {
+    sourceId: string | null;
+    preset: ScreenSharePreset;
+    displaySurface: DisplaySurfaceHint;
+    framerate: number | null;
+    includeAudio: boolean;
+  }) => Promise<void>;
+}
+
+// Discord-style picker. Replaces the old form-field dialog with a thumbnail
+// grid sourced from the Rust `enumerate_screen_sources` command. Clicking a
+// thumbnail stashes its Chromium-format id; the parent then attempts a
+// `chromeMediaSourceId`-constrained getUserMedia call. If WebView2 ignores
+// the constraint (it may), the fallback OS picker still runs — but at least
+// the user already saw + chose from a real preview first.
+export function ScreenSourcePicker({ open, onClose, onStart }: Props) {
+  const { t } = useTranslation(['app']);
+  const initial = getScreenShareSettings();
+  const [sources, setSources] = useState<ScreenSource[] | null>(null);
+  // Thumbnails are kept in a separate state from the source list so an
+  // arriving thumbnail never creates a new `ScreenSource` object for
+  // unrelated cards — memo compares `thumbnailUrl` by string identity,
+  // so only the one card whose URL changes rerenders.
+  const [thumbnailUrls, setThumbnailUrls] = useState<Record<string, string>>({});
+  // All blob URLs we've handed out this session. Revoked on picker close
+  // so the native buffers they point at don't leak across opens.
+  const blobUrlsRef = useRef<string[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [preset, setPreset] = useState<ScreenSharePreset>(initial.preset);
+  const [includeAudio, setIncludeAudio] = useState<boolean>(initial.includeSystemAudio);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Two-phase load: (1) fast list returns names + placeholders so the grid
+  // paints instantly, (2) capture thumbnails in a bounded worker-pool
+  // using the binary-IPC variant. Arriving bytes are wrapped in a Blob
+  // and exposed via URL.createObjectURL — no base64 on either side,
+  // which is the single biggest main-thread win compared to the old
+  // JSON-of-base64 flow. Combined with rAF-batched state updates, the
+  // picker stays responsive even on 20+ source enumerations.
+  useEffect(() => {
+    if (!open) {
+      // Revoke blob URLs created during the last session so native
+      // buffers don't linger after close.
+      for (const url of blobUrlsRef.current) URL.revokeObjectURL(url);
+      blobUrlsRef.current = [];
+      setSources(null);
+      setThumbnailUrls({});
+      setSelectedId(null);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    // Coalesce thumbnail arrivals within a single animation frame into
+    // one setState — cuts re-renders from O(N) to O(frames) during the
+    // initial fan-in and prevents consecutive 10-30 ms long tasks from
+    // stacking in one frame.
+    //
+    // Previously `batch` was aliased to `pendingUrls` and then we cleared
+    // pendingUrls via `delete` — which emptied batch too (same reference)
+    // and every flush ended up spreading nothing into the state. Clone
+    // first, then clear, so the batch keeps its entries.
+    let pendingUrls: Record<string, string> = {};
+    let rafScheduled = false;
+    const flush = () => {
+      rafScheduled = false;
+      const batch = pendingUrls;
+      if (Object.keys(batch).length === 0) return;
+      pendingUrls = {};
+      startTransition(() => {
+        setThumbnailUrls((prev) => ({ ...prev, ...batch }));
+      });
+    };
+    const queueUrl = (id: string, url: string) => {
+      pendingUrls[id] = url;
+      if (!rafScheduled) {
+        rafScheduled = true;
+        requestAnimationFrame(flush);
+      }
+    };
+
+    // Concurrency 2: Windows GDI BitBlt / PrintWindow contends for the
+    // desktop compositor, so 4+ parallel captures stutter the whole Tauri
+    // window. 2 in parallel keeps the compositor breathing.
+    const CONCURRENCY = 2;
+    void (async () => {
+      const list = await listScreenSources();
+      if (cancelled) return;
+      setSources(list);
+      const queue = [...list];
+      const pickOne = (src: typeof list[number]) => {
+        void (async () => {
+          const blob = await captureScreenSourceThumbnailBytes(src.id);
+          if (cancelled) {
+            // Edge case: picker closed while this request was in flight.
+            // blob may still exist; nothing holds a URL to it, so it GCs.
+            return;
+          }
+          if (blob) {
+            const url = URL.createObjectURL(blob);
+            blobUrlsRef.current.push(url);
+            queueUrl(src.id, url);
+          }
+          const nextSrc = queue.shift();
+          if (nextSrc) pickOne(nextSrc);
+        })();
+      };
+      for (let i = 0; i < Math.min(CONCURRENCY, queue.length); i++) {
+        const s = queue.shift();
+        if (s) pickOne(s);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  const screens = sources?.filter((s) => s.kind === 'screen') ?? [];
+  const windows = sources?.filter((s) => s.kind === 'window') ?? [];
+  const hasAny = (sources?.length ?? 0) > 0;
+
+  async function handleStart(): Promise<void> {
+    setBusy(true);
+    setError(null);
+    try {
+      // Persist user's audio + preset choice so subsequent shares start with
+      // the same prefs when they skip the picker. The picker itself stays
+      // as the entry for future starts (right-click on share button also
+      // opens it — see InCallPanel wiring).
+      updateScreenShareSettings({ preset, includeSystemAudio: includeAudio });
+      // Infer a displaySurface hint from the selection so the fallback OS
+      // picker jumps to the right tab when our direct-publish path is
+      // rejected by WebView2.
+      const selected = sources?.find((s) => s.id === selectedId) ?? null;
+      const hint: DisplaySurfaceHint =
+        selected?.kind === 'screen'
+          ? 'monitor'
+          : selected?.kind === 'window'
+            ? 'window'
+            : null;
+      await onStart({
+        sourceId: selected?.id ?? null,
+        preset,
+        displaySurface: hint,
+        framerate: null,
+        includeAudio,
+      });
+      onClose();
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'screenshare failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('app:call.share_dialog_title', { defaultValue: 'Bildschirm teilen' })}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+      onClick={onClose}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-[88vh] w-full max-w-[860px] flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-xl"
+      >
+        <header className="flex items-center justify-between border-b border-line px-5 py-3">
+          <div className="flex items-center gap-2">
+            <MonitorShareIcon className="h-4 w-4 text-accent" />
+            <h3 className="font-display text-sm font-semibold text-fg">
+              {t('app:call.share_dialog_title', { defaultValue: 'Bildschirm teilen' })}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t('app:common.close', { defaultValue: 'Schließen' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto">
+          {sources === null ? (
+            <div className="flex h-40 items-center justify-center gap-2 text-sm text-fg-muted">
+              <SpinnerIcon className="h-4 w-4" />
+              <span>
+                {t('app:call.share_loading', { defaultValue: 'Lade Quellen…' })}
+              </span>
+            </div>
+          ) : !hasAny ? (
+            <div className="flex flex-col items-center gap-2 px-6 py-10 text-center text-sm text-fg-muted">
+              <MonitorShareIcon className="h-6 w-6 opacity-60" />
+              <span>
+                {t('app:call.share_no_sources', {
+                  defaultValue:
+                    'Keine Quellen-Previews verfügbar. Klick auf „Teilen" öffnet den System-Picker.',
+                })}
+              </span>
+            </div>
+          ) : (
+            <div className="space-y-5 p-5">
+              {screens.length > 0 && (
+                <SourceSection
+                  title={t('app:call.share_screens', { defaultValue: 'Bildschirme' })}
+                  sources={screens}
+                  thumbnailUrls={thumbnailUrls}
+                  selectedId={selectedId}
+                  onSelect={setSelectedId}
+                />
+              )}
+              {windows.length > 0 && (
+                <SourceSection
+                  title={t('app:call.share_windows', { defaultValue: 'Fenster' })}
+                  sources={windows}
+                  thumbnailUrls={thumbnailUrls}
+                  selectedId={selectedId}
+                  onSelect={setSelectedId}
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        <footer className="flex flex-col gap-3 border-t border-line bg-surface-2 px-5 py-3">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <label className="flex cursor-pointer items-center gap-2 text-xs text-fg">
+              <span className="font-semibold uppercase tracking-wider text-fg-muted">
+                {t('app:call.share_quality', { defaultValue: 'Qualität' })}
+              </span>
+              <select
+                value={preset}
+                onChange={(e) => setPreset(e.target.value as ScreenSharePreset)}
+                className="rounded-md border border-line bg-surface-3 px-2 py-1 text-xs text-fg focus:border-accent focus:outline-none"
+              >
+                {PRESET_ORDER.map((p) => (
+                  <option key={p} value={p}>
+                    {getPresetParams(p).label} · ≤ {getPresetParams(p).bitrateKbps} kbps
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="flex cursor-pointer items-center gap-2 text-xs text-fg">
+              <input
+                type="checkbox"
+                checked={includeAudio}
+                onChange={(e) => setIncludeAudio(e.target.checked)}
+                className="accent-accent"
+              />
+              <span>
+                {t('app:call.share_system_audio', {
+                  defaultValue: 'System-Sound mit übertragen',
+                })}
+              </span>
+            </label>
+          </div>
+          {error && (
+            <p role="alert" className="text-xs text-rose-600 dark:text-rose-300">
+              {error}
+            </p>
+          )}
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg transition hover:bg-surface-2"
+            >
+              {t('app:friends.action_cancel', { defaultValue: 'Abbrechen' })}
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleStart()}
+              disabled={busy}
+              className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {busy && <SpinnerIcon className="h-4 w-4" />}
+              <span>
+                {selectedId
+                  ? t('app:call.share_start', { defaultValue: 'Teilen' })
+                  : t('app:call.share_pick_system', {
+                      defaultValue: 'Ohne Auswahl weiter',
+                    })}
+              </span>
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+function SourceSection({
+  title,
+  sources,
+  thumbnailUrls,
+  selectedId,
+  onSelect,
+}: {
+  title: string;
+  sources: ScreenSource[];
+  thumbnailUrls: Record<string, string>;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <section>
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+        {title}
+      </h4>
+      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3">
+        {sources.map((src) => (
+          <SourceCard
+            key={src.id}
+            source={src}
+            thumbnailUrl={thumbnailUrls[src.id] ?? null}
+            selected={selectedId === src.id}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// Memoized so a thumbnail arriving for card B doesn't re-render card A.
+// Keeps re-render work proportional to the number of updates instead of
+// "whole grid on every update" — which was the main reason scrolling felt
+// frozen during the initial thumbnail fan-in.
+//
+// The parent passes `onSelect(id)` rather than an inline `onClick`-arrow
+// so the callback reference stays stable across renders; otherwise
+// React.memo would always see a fresh function prop and re-render every
+// card on every parent update.
+const SourceCard = memo(function SourceCard({
+  source,
+  thumbnailUrl,
+  selected,
+  onSelect,
+}: {
+  source: ScreenSource;
+  thumbnailUrl: string | null;
+  selected: boolean;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(source.id)}
+      aria-pressed={selected}
+      title={source.name}
+      className={
+        'group flex cursor-pointer flex-col overflow-hidden rounded-lg border transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 ' +
+        (selected
+          ? 'border-accent ring-2 ring-accent/30'
+          : 'border-line hover:border-accent/70')
+      }
+    >
+      <div className="relative aspect-video w-full overflow-hidden bg-black">
+        {thumbnailUrl ? (
+          // decoding="async" keeps image decode off the main-thread paint
+          // step; loading="lazy" means cards outside the viewport don't
+          // ask the browser to decode until the user scrolls to them. The
+          // URL is a blob: URL backed by the ArrayBuffer Rust sent over
+          // IPC — no base64 decode, no data-URL parse, just direct bytes
+          // into the decoder.
+          <img
+            src={thumbnailUrl}
+            alt=""
+            decoding="async"
+            loading="lazy"
+            className="h-full w-full object-contain transition group-hover:brightness-110"
+            draggable={false}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-surface-2 to-surface-3 text-fg-muted">
+            <MonitorShareIcon className="h-6 w-6 opacity-50" />
+          </div>
+        )}
+      </div>
+      <div className="truncate px-2.5 py-1.5 text-left text-xs font-medium text-fg">
+        {source.name}
+      </div>
+    </button>
+  );
+});

apps/desktop/src/components/SoundboardManagerDialog.tsx

@@ -0,0 +1,625 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getPttSettings } from '../lib/pttSettings';
+import { codeToShortcut } from '../lib/globalShortcut';
+import { invalidate as invalidateSoundCache, preload } from '../lib/soundboardPlayback';
+import {
+  addSound,
+  deleteSound,
+  getSoundBlob,
+  listSounds,
+  MAX_SOUND_BYTES,
+  reorderCategory,
+  type SoundboardEntry,
+  subscribeSoundboardChanges,
+  updateSound,
+} from '../lib/soundboardStorage';
+import { Modal } from './Modal';
+import {
+  AlertIcon,
+  ChevronDownIcon,
+  PencilIcon,
+  PlusIcon,
+  SpinnerIcon,
+  TrashIcon,
+} from './icons';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const BYTES_PER_MB = 1024 * 1024;
+const CATEGORY_LIST_ID = 'sb-category-list';
+
+// Admin UI for the soundboard. Users add, rename, categorise, reorder,
+// assign hotkeys, adjust per-sound volume, preview and delete clips here.
+// In-call panel only reads the resulting manifest.
+export function SoundboardManagerDialog({ open, onClose }: Props) {
+  const { t } = useTranslation(['app']);
+  const fileRef = useRef<HTMLInputElement | null>(null);
+  const previewRef = useRef<HTMLAudioElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [previewingId, setPreviewingId] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      setEntries(await listSounds());
+    } catch (err: unknown) {
+      console.error('listSounds failed', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    void refresh();
+    // External mutations (hotkey fires, multi-tab edits) should reflect
+    // immediately while the dialog is open.
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return () => {
+      unsub();
+      stopPreview();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, refresh]);
+
+  useEffect(() => {
+    return () => stopPreview();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const categories = useMemo(() => {
+    const set = new Set<string>();
+    for (const e of entries) if (e.category) set.add(e.category);
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  }, [entries]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SoundboardEntry[]>();
+    for (const e of entries) {
+      const key = e.category ?? '';
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [entries]);
+
+  function stopPreview(): void {
+    const el = previewRef.current;
+    if (el) {
+      try {
+        el.pause();
+      } catch {
+        /* ignore */
+      }
+      el.src = '';
+    }
+    previewRef.current = null;
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setPreviewingId(null);
+  }
+
+  async function handleAdd(file: File): Promise<void> {
+    setError(null);
+    setBusyId('__add');
+    try {
+      await addSound({ file });
+      await refresh();
+    } catch (err: unknown) {
+      const code = err instanceof Error ? err.message : 'add_failed';
+      if (code === 'sound_too_large') {
+        setError(
+          t('app:soundboard.error_too_large', {
+            defaultValue: 'Datei zu groß (max {{max}} MB).',
+            max: MAX_SOUND_BYTES / BYTES_PER_MB,
+          }),
+        );
+      } else if (code === 'sound_not_audio') {
+        setError(
+          t('app:soundboard.error_not_audio', {
+            defaultValue: 'Nur Audio-Dateien werden unterstützt.',
+          }),
+        );
+      } else {
+        setError(
+          t('app:soundboard.error_generic', {
+            defaultValue: 'Sound konnte nicht gespeichert werden.',
+          }),
+        );
+      }
+    } finally {
+      setBusyId(null);
+      if (fileRef.current) fileRef.current.value = '';
+    }
+  }
+
+  async function handlePatch(
+    id: string,
+    patch: Parameters<typeof updateSound>[1],
+  ): Promise<void> {
+    setBusyId(id);
+    try {
+      await updateSound(id, patch);
+    } catch (err: unknown) {
+      console.error('updateSound failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function handleDelete(id: string): Promise<void> {
+    if (!window.confirm(t('app:soundboard.delete_confirm', { defaultValue: 'Sound löschen?' }))) {
+      return;
+    }
+    setBusyId(id);
+    try {
+      await deleteSound(id);
+      invalidateSoundCache(id);
+      if (previewingId === id) stopPreview();
+    } catch (err: unknown) {
+      console.error('deleteSound failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  async function handlePreview(entry: SoundboardEntry): Promise<void> {
+    if (previewingId === entry.id) {
+      stopPreview();
+      return;
+    }
+    stopPreview();
+    const blob = await getSoundBlob(entry.id);
+    if (!blob) return;
+    const url = URL.createObjectURL(blob);
+    const el = new Audio(url);
+    el.volume = entry.gain;
+    el.onended = () => stopPreview();
+    el.onerror = () => stopPreview();
+    el.play().catch(() => stopPreview());
+    previewRef.current = el;
+    previewUrlRef.current = url;
+    setPreviewingId(entry.id);
+    // Opportunistic warm-up of the AudioBuffer cache so the first in-call
+    // playback doesn't pause on decode.
+    void preload(entry.id);
+  }
+
+  async function handleReorder(
+    category: string | null,
+    idx: number,
+    dir: -1 | 1,
+  ): Promise<void> {
+    const bucket = grouped.get(category ?? '') ?? [];
+    const next = idx + dir;
+    if (next < 0 || next >= bucket.length) return;
+    const reordered = bucket.slice();
+    const tmp = reordered[idx]!;
+    reordered[idx] = reordered[next]!;
+    reordered[next] = tmp;
+    setBusyId('__reorder:' + (category ?? ''));
+    try {
+      await reorderCategory(
+        category,
+        reordered.map((e) => e.id),
+      );
+    } catch (err: unknown) {
+      console.error('reorderCategory failed', err);
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (!open) return null;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t('app:soundboard.manager_title', { defaultValue: 'Soundboard verwalten' })}
+      size="lg"
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-xs text-fg-muted">
+            {t('app:soundboard.manager_hint', {
+              defaultValue:
+                'Beliebig viele Sounds, kein Hotkey nötig. Hotkeys feuern nur während eines Anrufs.',
+            })}
+          </p>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="audio/*"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) void handleAdd(f);
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => fileRef.current?.click()}
+            disabled={busyId !== null}
+            className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {busyId === '__add' ? (
+              <SpinnerIcon className="h-3.5 w-3.5" />
+            ) : (
+              <PlusIcon className="h-3.5 w-3.5" />
+            )}
+            <span>{t('app:soundboard.add', { defaultValue: 'Sound hinzufügen' })}</span>
+          </button>
+        </div>
+
+        {error && (
+          <div className="flex items-start gap-2 rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-600 dark:text-rose-300">
+            <AlertIcon className="mt-0.5 h-4 w-4 shrink-0" />
+            <p className="min-w-0 flex-1 break-words">{error}</p>
+          </div>
+        )}
+
+        <datalist id={CATEGORY_LIST_ID}>
+          {categories.map((c) => (
+            <option key={c} value={c} />
+          ))}
+        </datalist>
+
+        {loading ? (
+          <div className="flex items-center gap-2 text-xs text-fg-muted">
+            <SpinnerIcon className="h-3.5 w-3.5 text-accent" />
+          </div>
+        ) : entries.length === 0 ? (
+          <p className="rounded-lg border border-line bg-surface-2 px-4 py-6 text-center text-sm text-fg-muted">
+            {t('app:soundboard.empty', {
+              defaultValue: 'Noch keine Sounds. Lade oben welche hoch.',
+            })}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {Array.from(grouped.entries()).map(([categoryKey, bucket]) => {
+              const category = categoryKey === '' ? null : categoryKey;
+              return (
+                <SoundboardCategoryGroup
+                  key={categoryKey || '__uncat'}
+                  category={category}
+                  entries={bucket}
+                  entriesTotal={entries}
+                  busyId={busyId}
+                  previewingId={previewingId}
+                  onPatch={handlePatch}
+                  onDelete={handleDelete}
+                  onPreview={handlePreview}
+                  onReorder={handleReorder}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+interface GroupProps {
+  category: string | null;
+  entries: SoundboardEntry[];
+  entriesTotal: SoundboardEntry[];
+  busyId: string | null;
+  previewingId: string | null;
+  onPatch: (id: string, patch: Parameters<typeof updateSound>[1]) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onPreview: (entry: SoundboardEntry) => Promise<void>;
+  onReorder: (category: string | null, idx: number, dir: -1 | 1) => Promise<void>;
+}
+
+function SoundboardCategoryGroup({
+  category,
+  entries,
+  entriesTotal,
+  busyId,
+  previewingId,
+  onPatch,
+  onDelete,
+  onPreview,
+  onReorder,
+}: GroupProps) {
+  const { t } = useTranslation(['app']);
+  const [open, setOpen] = useState(true);
+  const label =
+    category ??
+    t('app:soundboard.category_uncategorized', { defaultValue: '(Ohne Kategorie)' });
+  return (
+    <section className="rounded-lg border border-line bg-surface-2">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2.5 text-left"
+      >
+        <span className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
+          {label} · {entries.length}
+        </span>
+        <ChevronDownIcon
+          className={'h-4 w-4 text-fg-muted transition ' + (open ? '' : '-rotate-90')}
+        />
+      </button>
+      {open && (
+        <ul className="flex flex-col gap-2 border-t border-line p-3">
+          {entries.map((entry, idx) => (
+            <SoundboardRow
+              key={entry.id}
+              entry={entry}
+              entriesTotal={entriesTotal}
+              isFirst={idx === 0}
+              isLast={idx === entries.length - 1}
+              busy={busyId === entry.id}
+              previewing={previewingId === entry.id}
+              onPatch={onPatch}
+              onDelete={onDelete}
+              onPreview={onPreview}
+              onReorderUp={() => onReorder(category, idx, -1)}
+              onReorderDown={() => onReorder(category, idx, 1)}
+            />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+
+interface RowProps {
+  entry: SoundboardEntry;
+  entriesTotal: SoundboardEntry[];
+  isFirst: boolean;
+  isLast: boolean;
+  busy: boolean;
+  previewing: boolean;
+  onPatch: (id: string, patch: Parameters<typeof updateSound>[1]) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+  onPreview: (entry: SoundboardEntry) => Promise<void>;
+  onReorderUp: () => Promise<void>;
+  onReorderDown: () => Promise<void>;
+}
+
+function SoundboardRow({
+  entry,
+  entriesTotal,
+  isFirst,
+  isLast,
+  busy,
+  previewing,
+  onPatch,
+  onDelete,
+  onPreview,
+  onReorderUp,
+  onReorderDown,
+}: RowProps) {
+  const { t } = useTranslation(['app']);
+  const [editingName, setEditingName] = useState(false);
+  const [nameDraft, setNameDraft] = useState(entry.name);
+  const [categoryDraft, setCategoryDraft] = useState(entry.category ?? '');
+  const [capturingHotkey, setCapturingHotkey] = useState(false);
+  const [hotkeyError, setHotkeyError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setNameDraft(entry.name);
+    setCategoryDraft(entry.category ?? '');
+  }, [entry.name, entry.category]);
+
+  useEffect(() => {
+    if (!capturingHotkey) return;
+    const onKey = (e: KeyboardEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.code === 'Escape') {
+        setCapturingHotkey(false);
+        setHotkeyError(null);
+        return;
+      }
+      // Conflict checks: PTT + other soundboard entries with this code.
+      const ptt = getPttSettings();
+      if (ptt.enabled && ptt.key === e.code) {
+        setHotkeyError(
+          t('app:soundboard.hotkey_conflict_ptt', {
+            defaultValue: 'Konflikt mit Push-to-Talk.',
+          }),
+        );
+        return;
+      }
+      const taken = entriesTotal.find((s) => s.id !== entry.id && s.hotkey === e.code);
+      if (taken) {
+        setHotkeyError(
+          t('app:soundboard.hotkey_conflict_sound', {
+            defaultValue: 'Bereits von "{{name}}" belegt.',
+            name: taken.name,
+          }),
+        );
+        return;
+      }
+      setHotkeyError(null);
+      setCapturingHotkey(false);
+      void onPatch(entry.id, { hotkey: e.code });
+    };
+    window.addEventListener('keydown', onKey, { capture: true });
+    return () => window.removeEventListener('keydown', onKey, { capture: true });
+  }, [capturingHotkey, entriesTotal, entry.id, onPatch, t]);
+
+  const hotkeyLabel = entry.hotkey ? codeToShortcut(entry.hotkey) : null;
+
+  return (
+    <li className="flex flex-wrap items-center gap-3 rounded-md border border-line bg-surface-3 px-3 py-2">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        {editingName ? (
+          <input
+            autoFocus
+            value={nameDraft}
+            onChange={(e) => setNameDraft(e.target.value)}
+            onBlur={() => {
+              setEditingName(false);
+              if (nameDraft.trim() && nameDraft !== entry.name) {
+                void onPatch(entry.id, { name: nameDraft });
+              } else {
+                setNameDraft(entry.name);
+              }
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                (e.target as HTMLInputElement).blur();
+              }
+              if (e.key === 'Escape') {
+                setNameDraft(entry.name);
+                setEditingName(false);
+              }
+            }}
+            className="w-full rounded border border-line bg-surface-2 px-2 py-1 text-sm text-fg focus:border-accent focus:outline-none"
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={() => setEditingName(true)}
+            className="flex cursor-pointer items-center gap-1.5 self-start text-sm font-semibold text-fg hover:text-accent"
+          >
+            {entry.name}
+            <PencilIcon className="h-3 w-3 opacity-50" />
+          </button>
+        )}
+        <p className="text-[10px] text-fg-muted">
+          {(entry.size / BYTES_PER_MB).toFixed(2)} MB · {entry.mime}
+        </p>
+      </div>
+
+      <input
+        type="text"
+        value={categoryDraft}
+        onChange={(e) => setCategoryDraft(e.target.value)}
+        onBlur={() => {
+          const next = categoryDraft.trim() || null;
+          if (next !== (entry.category ?? null)) {
+            void onPatch(entry.id, { category: next });
+          }
+        }}
+        list={CATEGORY_LIST_ID}
+        placeholder={t('app:soundboard.category_placeholder', {
+          defaultValue: 'Kategorie…',
+        })}
+        className="w-32 shrink-0 rounded border border-line bg-surface-2 px-2 py-1 text-xs text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
+      />
+
+      <div className="flex shrink-0 items-center gap-1">
+        <button
+          type="button"
+          onClick={() => {
+            setHotkeyError(null);
+            setCapturingHotkey((v) => !v);
+          }}
+          className={
+            'inline-flex min-w-[5rem] cursor-pointer items-center justify-center rounded border px-2 py-1 text-[11px] font-mono font-semibold transition ' +
+            (capturingHotkey
+              ? 'animate-pulse border-accent bg-accent/20 text-fg'
+              : hotkeyLabel
+                ? 'border-accent/40 bg-accent/10 text-accent'
+                : 'border-line bg-surface-2 text-fg-muted hover:bg-surface')
+          }
+          title={t('app:soundboard.hotkey_capture', {
+            defaultValue: 'Hotkey binden (Esc = abbrechen)',
+          })}
+        >
+          {capturingHotkey
+            ? t('app:soundboard.hotkey_press', { defaultValue: 'Drücke…' })
+            : hotkeyLabel ??
+              t('app:soundboard.hotkey_none', { defaultValue: 'Kein Hotkey' })}
+        </button>
+        {entry.hotkey && !capturingHotkey && (
+          <button
+            type="button"
+            onClick={() => void onPatch(entry.id, { hotkey: null })}
+            aria-label={t('app:soundboard.hotkey_clear', { defaultValue: 'Hotkey entfernen' })}
+            title={t('app:soundboard.hotkey_clear', { defaultValue: 'Hotkey entfernen' })}
+            className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg"
+          >
+            ×
+          </button>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.05}
+          value={entry.gain}
+          onChange={(e) => void onPatch(entry.id, { gain: Number(e.target.value) })}
+          className="accent-accent w-20"
+          title={t('app:soundboard.gain_title', {
+            defaultValue: 'Lautstärke',
+          })}
+        />
+        <button
+          type="button"
+          onClick={() => void onPreview(entry)}
+          disabled={busy}
+          className="inline-flex cursor-pointer items-center gap-1 rounded border border-line bg-surface-2 px-2 py-1 text-[11px] font-medium text-fg transition hover:bg-surface disabled:opacity-50"
+        >
+          {previewing
+            ? t('app:soundboard.preview_stop', { defaultValue: 'Stop' })
+            : t('app:soundboard.preview', { defaultValue: 'Vorhören' })}
+        </button>
+        <button
+          type="button"
+          onClick={onReorderUp}
+          disabled={busy || isFirst}
+          aria-label={t('app:soundboard.move_up', { defaultValue: 'Nach oben' })}
+          title={t('app:soundboard.move_up', { defaultValue: 'Nach oben' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg disabled:opacity-40"
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          onClick={onReorderDown}
+          disabled={busy || isLast}
+          aria-label={t('app:soundboard.move_down', { defaultValue: 'Nach unten' })}
+          title={t('app:soundboard.move_down', { defaultValue: 'Nach unten' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-fg-muted hover:bg-surface-2 hover:text-fg disabled:opacity-40"
+        >
+          ↓
+        </button>
+        <button
+          type="button"
+          onClick={() => void onDelete(entry.id)}
+          disabled={busy}
+          aria-label={t('app:soundboard.delete', { defaultValue: 'Löschen' })}
+          title={t('app:soundboard.delete', { defaultValue: 'Löschen' })}
+          className="flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-rose-500/30 bg-rose-500/10 text-rose-600 hover:bg-rose-500/20 disabled:opacity-50 dark:text-rose-300"
+        >
+          <TrashIcon className="h-3 w-3" />
+        </button>
+      </div>
+
+      {hotkeyError && capturingHotkey && (
+        <p className="basis-full text-[11px] text-rose-600 dark:text-rose-300">
+          {hotkeyError}
+        </p>
+      )}
+    </li>
+  );
+}

apps/desktop/src/components/SoundboardPanel.tsx

@@ -0,0 +1,320 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCall } from '../context/CallContext';
+import { codeToShortcut } from '../lib/globalShortcut';
+import {
+  DEFAULT_PREFS,
+  getPrefs,
+  listSounds,
+  type SoundboardEntry,
+  type SoundboardPrefs,
+  subscribeSoundboardChanges,
+} from '../lib/soundboardStorage';
+import { ChevronDownIcon, XIcon } from './icons';
+
+interface Props {
+  onClose: () => void;
+}
+
+// In-call popover that lists every stored sound grouped by category. Click a
+// pad to play through the active pipeline. Hotkey-badge shows the bound
+// accelerator (if any). Master + monitor sliders adjust the pipeline gains.
+export function SoundboardPanel({ onClose }: Props) {
+  const { t } = useTranslation(['app']);
+  const {
+    playSoundboard,
+    stopSoundboard,
+    activeSoundboardIds,
+    setSoundboardMasterGain,
+    setSoundboardMonitorGain,
+  } = useCall();
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+  const [prefs, setPrefs] = useState<SoundboardPrefs>(() => ({ ...DEFAULT_PREFS }));
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [query, setQuery] = useState('');
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+
+  const refresh = useCallback(async () => {
+    try {
+      const [all, p] = await Promise.all([listSounds(), getPrefs()]);
+      setEntries(all);
+      setPrefs(p);
+    } catch (err: unknown) {
+      console.warn('soundboard panel refresh failed', err);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return unsub;
+  }, [refresh]);
+
+  // Close on Esc — tapping outside is handled by the trigger's parent.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeRef.current();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return entries;
+    return entries.filter(
+      (e) =>
+        e.name.toLowerCase().includes(q) ||
+        (e.category ?? '').toLowerCase().includes(q),
+    );
+  }, [entries, query]);
+
+  const grouped = useMemo(() => {
+    const map = new Map<string, SoundboardEntry[]>();
+    for (const e of filtered) {
+      const key = e.category ?? '';
+      const arr = map.get(key);
+      if (arr) arr.push(e);
+      else map.set(key, [e]);
+    }
+    return map;
+  }, [filtered]);
+
+  function toggleCategory(key: string): void {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-label={t('app:soundboard.panel_title', { defaultValue: 'Soundboard' })}
+      className="flex w-[360px] max-h-[70vh] flex-col overflow-hidden rounded-2xl border border-line bg-surface-3 shadow-2xl"
+    >
+      <header className="flex items-center justify-between border-b border-line px-4 py-2.5">
+        <h3 className="font-display text-sm font-semibold text-fg">
+          {t('app:soundboard.panel_title', { defaultValue: 'Soundboard' })}
+        </h3>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('app:soundboard.panel_close', { defaultValue: 'Schließen' })}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted transition hover:bg-surface-2 hover:text-fg"
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+      </header>
+
+      {entries.length > 0 && (
+        <div className="border-b border-line px-3 pb-2 pt-2">
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t('app:soundboard.panel_search', { defaultValue: 'Suche…' })}
+            className="w-full rounded-md border border-line bg-surface-2 px-3 py-1.5 text-xs text-fg placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30"
+          />
+        </div>
+      )}
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {entries.length === 0 ? (
+          <p className="py-6 text-center text-xs text-fg-muted">
+            {t('app:soundboard.panel_empty', {
+              defaultValue:
+                'Keine Sounds gespeichert. Füge welche in den Einstellungen hinzu.',
+            })}
+          </p>
+        ) : filtered.length === 0 ? (
+          <p className="py-6 text-center text-xs text-fg-muted">
+            {t('app:soundboard.panel_no_matches', {
+              defaultValue: 'Keine Treffer.',
+            })}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-3">
+            {Array.from(grouped.entries()).map(([key, bucket]) => (
+              <CategorySection
+                key={key || '__uncat'}
+                categoryKey={key}
+                entries={bucket}
+                collapsed={collapsed[key] ?? false}
+                activeIds={activeSoundboardIds}
+                onToggle={() => toggleCategory(key)}
+                onActivate={(id) => {
+                  if (activeSoundboardIds.has(id)) {
+                    stopSoundboard(id);
+                  } else {
+                    void playSoundboard(id);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <footer className="flex flex-col gap-2 border-t border-line bg-surface-2 px-4 py-3">
+        <VolumeSlider
+          label={t('app:soundboard.panel_master', { defaultValue: 'Master' })}
+          value={prefs.masterGain}
+          onChange={(v) => {
+            setPrefs((p) => ({ ...p, masterGain: v }));
+            void setSoundboardMasterGain(v);
+          }}
+        />
+        <VolumeSlider
+          label={t('app:soundboard.panel_monitor', { defaultValue: 'Mithören' })}
+          value={prefs.monitorGain}
+          onChange={(v) => {
+            setPrefs((p) => ({ ...p, monitorGain: v }));
+            void setSoundboardMonitorGain(v);
+          }}
+        />
+        <button
+          type="button"
+          onClick={() => stopSoundboard()}
+          className="mt-1 inline-flex cursor-pointer items-center justify-center rounded-md border border-line bg-surface-3 px-3 py-1.5 text-[11px] font-semibold text-fg transition hover:brightness-95"
+        >
+          {t('app:soundboard.panel_stop_all', { defaultValue: 'Alle stoppen' })}
+        </button>
+      </footer>
+    </div>
+  );
+}
+
+interface CategorySectionProps {
+  categoryKey: string;
+  entries: SoundboardEntry[];
+  collapsed: boolean;
+  activeIds: ReadonlySet<string>;
+  onToggle: () => void;
+  onActivate: (id: string) => void;
+}
+
+function CategorySection({
+  categoryKey,
+  entries,
+  collapsed,
+  activeIds,
+  onToggle,
+  onActivate,
+}: CategorySectionProps) {
+  const { t } = useTranslation(['app']);
+  const label =
+    categoryKey === ''
+      ? t('app:soundboard.category_uncategorized', { defaultValue: '(Ohne Kategorie)' })
+      : categoryKey;
+  return (
+    <section>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="mb-1.5 flex w-full cursor-pointer items-center justify-between gap-2 text-left text-[10px] font-semibold uppercase tracking-[0.1em] text-fg-muted"
+      >
+        <span>
+          {label} · {entries.length}
+        </span>
+        <ChevronDownIcon
+          className={'h-3 w-3 transition ' + (collapsed ? '-rotate-90' : '')}
+        />
+      </button>
+      {!collapsed && (
+        <div className="grid grid-cols-2 gap-1.5">
+          {entries.map((entry) => (
+            <SoundPad
+              key={entry.id}
+              entry={entry}
+              active={activeIds.has(entry.id)}
+              onActivate={() => onActivate(entry.id)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+interface PadProps {
+  entry: SoundboardEntry;
+  active: boolean;
+  onActivate: () => void;
+}
+
+function SoundPad({ entry, active, onActivate }: PadProps) {
+  const { t } = useTranslation(['app']);
+  const hotkey = entry.hotkey ? codeToShortcut(entry.hotkey) : null;
+  const base =
+    'group relative flex min-h-[54px] cursor-pointer flex-col justify-center gap-0.5 rounded-md border px-2.5 py-2 text-left text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40';
+  const toneClass = active
+    ? 'border-rose-500 bg-rose-500/20 text-fg hover:brightness-110'
+    : 'border-line bg-surface-2 text-fg hover:border-accent hover:bg-surface-3';
+  return (
+    <button
+      type="button"
+      onClick={onActivate}
+      className={`${base} ${toneClass}`}
+      title={
+        active
+          ? t('app:soundboard.pad_stop', { defaultValue: 'Stoppen' })
+          : entry.name
+      }
+      aria-pressed={active}
+    >
+      <span className="flex items-center gap-1.5 truncate">
+        {active && (
+          <span
+            aria-hidden="true"
+            className="h-2 w-2 shrink-0 rounded-full bg-rose-500 animate-live-dot"
+          />
+        )}
+        <span className="truncate">{entry.name}</span>
+      </span>
+      <div className="flex items-center justify-between gap-1.5">
+        {hotkey ? (
+          <span className="inline-flex w-fit items-center rounded border border-line bg-surface-3 px-1 py-0.5 font-mono text-[9px] text-fg-muted">
+            {hotkey}
+          </span>
+        ) : (
+          <span aria-hidden="true" />
+        )}
+        {active && (
+          <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-rose-500 dark:text-rose-300">
+            {t('app:soundboard.pad_stop', { defaultValue: 'Stoppen' })}
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+function VolumeSlider({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <label className="flex items-center gap-3 text-[11px] text-fg">
+      <span className="w-16 shrink-0 text-fg-muted">{label}</span>
+      <input
+        type="range"
+        min={0}
+        max={1}
+        step={0.02}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="accent-accent flex-1"
+      />
+      <span className="w-9 shrink-0 text-right tabular-nums text-fg-muted">
+        {Math.round(value * 100)}%
+      </span>
+    </label>
+  );
+}

apps/desktop/src/components/SoundboardSettings.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  listSounds,
+  subscribeSoundboardChanges,
+  type SoundboardEntry,
+} from '../lib/soundboardStorage';
+import { SoundboardManagerDialog } from './SoundboardManagerDialog';
+import { ArrowRightIcon } from './icons';
+
+// Entry point into the soundboard manager from the settings page. Shows a
+// tiny summary (count, category count) and opens the big dialog on click.
+export function SoundboardSettings() {
+  const { t } = useTranslation(['app']);
+  const [open, setOpen] = useState(false);
+  const [entries, setEntries] = useState<SoundboardEntry[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const all = await listSounds();
+        if (!cancelled) setEntries(all);
+      } catch (err: unknown) {
+        console.warn('listSounds failed', err);
+      }
+    };
+    void refresh();
+    const unsub = subscribeSoundboardChanges(() => {
+      void refresh();
+    });
+    return () => {
+      cancelled = true;
+      unsub();
+    };
+  }, []);
+
+  const categoryCount = new Set(entries.map((e) => e.category ?? '__uncat')).size;
+  const withHotkey = entries.filter((e) => e.hotkey !== null).length;
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-fg">
+            {t('app:soundboard.summary_title', { defaultValue: 'Deine Sounds' })}
+          </p>
+          <p className="mt-1 text-xs text-fg-muted">
+            {entries.length === 0
+              ? t('app:soundboard.summary_empty', {
+                  defaultValue: 'Noch keine Sounds vorhanden.',
+                })
+              : t('app:soundboard.summary_counts', {
+                  defaultValue:
+                    '{{sounds}} Sounds · {{categories}} Kategorien · {{hotkeys}} mit Hotkey',
+                  sounds: entries.length,
+                  categories: categoryCount,
+                  hotkeys: withHotkey,
+                })}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110"
+        >
+          <span>
+            {t('app:soundboard.manage', { defaultValue: 'Verwalten' })}
+          </span>
+          <ArrowRightIcon className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <p className="text-[11px] text-fg-muted">
+        {t('app:soundboard.settings_hint', {
+          defaultValue:
+            'Hotkeys sind optional. Sounds lassen sich auch während eines Anrufs direkt im UI abspielen.',
+        })}
+      </p>
+      <SoundboardManagerDialog open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}

apps/desktop/src/components/UserBar.tsx

@@ -1,6 +1,6 @@
 import { updateOwnProfile } from '@chat-app/shared/auth';
 import type { PresenceState } from '@chat-app/shared/supabase';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
@@ -8,6 +8,8 @@ import { supabase } from '../lib/supabase';
 import { Avatar } from './Avatar';
 import { ChevronDownIcon } from './icons';
 
+const STATUS_MAX = 128;
+
 const PRESENCE_OPTIONS: PresenceState[] = ['online', 'idle', 'dnd', 'invisible', 'offline'];
 
 const PRESENCE_DOT: Record<PresenceState, string> = {
@@ -25,6 +27,23 @@ export function UserBar() {
   const [busy, setBusy] = useState(false);
 
   const presence = profile?.presenceState ?? 'offline';
+  const persistedStatus = profile?.statusMessage ?? '';
+  const [statusDraft, setStatusDraft] = useState(persistedStatus);
+
+  // Re-sync local draft with the server when the profile refreshes (e.g. after
+  // a successful save) — without this the input would forget any incoming
+  // updates from another device.
+  useEffect(() => {
+    setStatusDraft(persistedStatus);
+  }, [persistedStatus]);
+
+  // Subtitle priority: custom status when online and set, else label, else "Offline".
+  const subtitle =
+    presence === 'offline'
+      ? t('app:presence.offline')
+      : persistedStatus.trim().length > 0
+        ? persistedStatus.trim()
+        : t('app:presence.' + presence);
 
   async function changePresence(next: PresenceState) {
     if (busy || next === presence) {
@@ -43,6 +62,20 @@ export function UserBar() {
     }
   }
 
+  async function saveStatus() {
+    const next = statusDraft.trim().slice(0, STATUS_MAX);
+    if (next === persistedStatus) return;
+    setBusy(true);
+    try {
+      await updateOwnProfile(supabase, { statusMessage: next.length === 0 ? null : next });
+      await refreshProfile();
+    } catch (err: unknown) {
+      console.error('updateStatusMessage failed', err);
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <div className="relative">
       <button
@@ -69,9 +102,7 @@ export function UserBar() {
           <p className="truncate text-sm font-medium text-fg">
             {profile?.displayName ?? '—'}
           </p>
-          <p className="truncate text-xs text-fg-muted">
-            {t('app:presence.' + presence)}
-          </p>
+          <p className="truncate text-xs text-fg-muted">{subtitle}</p>
         </div>
         <ChevronDownIcon
           className={'h-4 w-4 text-fg-muted transition ' + (open ? 'rotate-180' : '')}
@@ -83,6 +114,30 @@ export function UserBar() {
           role="menu"
           className="absolute bottom-full left-0 right-0 mb-2 overflow-hidden rounded-lg border border-line bg-surface-3 shadow-xl"
         >
+          <div className="border-b border-line p-2">
+            <input
+              type="text"
+              value={statusDraft}
+              onChange={(e) => setStatusDraft(e.target.value.slice(0, STATUS_MAX))}
+              onBlur={() => void saveStatus()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  void saveStatus();
+                  setOpen(false);
+                }
+                if (e.key === 'Escape') {
+                  setStatusDraft(persistedStatus);
+                  setOpen(false);
+                }
+              }}
+              placeholder={t('app:presence.status_placeholder', {
+                defaultValue: 'Status setzen…',
+              })}
+              maxLength={STATUS_MAX}
+              className="w-full rounded-md border border-line bg-surface-2 px-2 py-1.5 text-sm text-fg placeholder-fg-muted outline-none focus:border-accent"
+            />
+          </div>
           {PRESENCE_OPTIONS.map((opt) => (
             <button
               key={opt}

apps/desktop/src/components/UserProfilePopover.tsx

@@ -0,0 +1,126 @@
+import type { ProfileBrief } from '@chat-app/shared/friends';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import { usePeerPresence } from '../lib/usePeerPresence';
+import { Avatar } from './Avatar';
+
+interface Props {
+  userId: string;
+  profile: ProfileBrief | null;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onStartDm?: (userId: string) => void;
+}
+
+const PRESENCE_DOT: Record<string, string> = {
+  online: 'bg-emerald-500',
+  idle: 'bg-amber-400',
+  dnd: 'bg-rose-500',
+  invisible: 'bg-neutral-500',
+  offline: 'bg-neutral-400 dark:bg-neutral-600',
+};
+
+const CARD_W = 280;
+const CARD_H = 180;
+
+// Hover/click card surfaced from avatars around the app. Shows display name,
+// @handle, presence state + status message, plus a DM-start button when
+// the clicked profile isn't the caller.
+export function UserProfilePopover({
+  userId,
+  profile,
+  x,
+  y,
+  onClose,
+  onStartDm,
+}: Props) {
+  // Subscribe to the same presence feed that the conversation header uses,
+  // so status updates flow in live.
+  const presence = usePeerPresence(userId);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (t?.closest('[data-user-popover]')) return;
+      if (t?.closest('[data-user-popover-trigger]')) return;
+      onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('mousedown', onDown);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('mousedown', onDown);
+    };
+  }, [onClose]);
+
+  const left = Math.min(Math.max(8, x), window.innerWidth - CARD_W - 8);
+  const top = Math.min(Math.max(8, y), window.innerHeight - CARD_H - 8);
+
+  const displayName = profile?.displayName ?? '?';
+  const username = profile?.username ?? '';
+  const state = presence?.state ?? 'offline';
+  const showPresence = state !== 'invisible';
+  const statusMessage = presence?.statusMessage?.trim() ?? '';
+
+  return createPortal(
+    <div
+      data-user-popover
+      role="dialog"
+      aria-label={displayName}
+      style={{ left, top, width: CARD_W }}
+      className="fixed z-[80] flex flex-col gap-3 rounded-xl border border-line bg-surface-2/95 p-4 shadow-xl backdrop-blur-md"
+    >
+      <div className="flex items-center gap-3">
+        <div className="relative">
+          <Avatar
+            url={profile?.avatarUrl ?? null}
+            displayName={displayName}
+            className="h-14 w-14 text-lg"
+          />
+          {showPresence && (
+            <span
+              aria-hidden="true"
+              className={
+                'absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full ring-2 ring-surface-2 ' +
+                (PRESENCE_DOT[state] ?? PRESENCE_DOT.offline)
+              }
+            />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate font-display text-base font-semibold text-fg">
+            {displayName}
+          </p>
+          {username && (
+            <p className="truncate text-xs text-fg-muted">@{username}</p>
+          )}
+        </div>
+      </div>
+
+      {statusMessage && state !== 'offline' && (
+        <p className="rounded-md bg-surface-3 px-2.5 py-1.5 text-xs italic text-fg-muted">
+          {statusMessage}
+        </p>
+      )}
+
+      {onStartDm && (
+        <button
+          type="button"
+          onClick={() => {
+            onStartDm(userId);
+            onClose();
+          }}
+          className="inline-flex cursor-pointer items-center justify-center rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110"
+        >
+          Nachricht senden
+        </button>
+      )}
+    </div>,
+    document.body,
+  );
+}