fix: multiple bug fixes

isolated users, db backup, weird disconnect issues for long voice sessions,

.gitignore

@@ -60,3 +60,8 @@ dist-server/*
 
 AGENTS.md
 doc/**
+
+metoyou.sqlite*
+metoyou.sqlite
+
+vitest/

README.md

@@ -1,119 +1,88 @@
 <img src="./images/icon.png" width="100" height="100">
 
+# MetoYou / Toju
 
-# Toju / Zoracord
+MetoYou is a desktop-first chat stack managed as an npm monorepo. The repository contains the Angular 21 product client, the Electron desktop shell, the Node/TypeScript signaling server, the Playwright E2E suite, and the Angular 19 marketing website.
 
-Desktop chat app with four parts:
+## Packages
 
-- `src/` Angular client
-- `electron/` desktop shell, IPC, and local database
-- `server/` directory server, join request API, and websocket events
-- `website/` Toju website served at toju.app
+| Path | Purpose | Docs |
+| --- | --- | --- |
+| `toju-app/` | Angular 21 product client | [toju-app/README.md](toju-app/README.md) |
+| `electron/` | Electron main process, preload bridge, IPC, and desktop integrations | [electron/README.md](electron/README.md) |
+| `server/` | Signaling server, server-directory API, and websocket runtime | [server/README.md](server/README.md) |
+| `e2e/` | Playwright end-to-end coverage for the product client | [e2e/README.md](e2e/README.md) |
+| `website/` | Angular 19 marketing site served separately from the product client | [website/README.md](website/README.md) |
 
 ## Install
 
-1. Run `npm install`
-2. Run `cd server && npm install`
-3. Copy `.env.example` to `.env`
+1. Run `npm install` from the repository root.
+2. Run `cd server && npm install` for the server package.
+3. If you need to work on the marketing site, run `cd website && npm install`.
+4. Copy `.env.example` to `.env`.
 
-## Config
+## Configuration
 
-Root `.env`:
+- Root `.env` controls local SSL with `SSL=true|false`.
+- The server also honors an optional `PORT` environment override at runtime.
+- When `SSL=true`, run `./generate-cert.sh` once or let `./dev.sh` generate local certificates on first launch.
+- `server/data/variables.json` stores `klipyApiKey`, `releaseManifestUrl`, `serverPort`, `serverProtocol`, `serverHost`, and `linkPreview`. The server normalizes this file on startup.
+- When `serverProtocol` is `https`, the certificates in `.certs/` must exist and match the configured host or IP.
 
-- `SSL=true` uses HTTPS for Angular, the server, and Electron dev mode
-- `PORT=3001` changes the server port in local development and overrides the server app setting
+## Main Commands
 
-If `SSL=true`, run `./generate-cert.sh` once.
+- `npm run dev` starts the full desktop stack: server, product client, and Electron.
+- `npm run start` starts only the Angular product client in `toju-app/`.
+- `npm run electron:dev` starts the Angular product client and Electron together.
+- `npm run server:dev` starts only the server with reload.
+- `npm run build` builds the Angular product client to `dist/client`.
+- `npm run build:electron` builds the Electron code to `dist/electron`.
+- `npm run build:all` builds the product client, Electron, and server.
+- `npm run test` runs the product-client Vitest suite.
+- `npm run lint` runs ESLint across the repo.
+- `npm run lint:fix` formats Angular templates, sorts template properties, and applies ESLint fixes.
+- `npm run test:e2e`, `npm run test:e2e:ui`, `npm run test:e2e:debug`, and `npm run test:e2e:report` run the Playwright suite and report tooling.
 
-Server files:
-
-- `server/data/variables.json` holds `klipyApiKey`
-- `server/data/variables.json` also holds `releaseManifestUrl` for desktop auto updates
-- `server/data/variables.json` can now also hold optional `serverHost` (an IP address or hostname to bind to)
-- `server/data/variables.json` can now also hold `serverProtocol` (`http` or `https`)
-- `server/data/variables.json` can now also hold `serverPort` (1-65535)
-- When `serverProtocol` is `https`, the certificate must match the configured `serverHost` or IP
-
-## Main commands
-
-- `npm run dev` starts Angular, the server, and Electron
-- `npm run electron:dev` starts Angular and Electron
-- `npm run server:dev` starts only the server
-- `npm run build` builds the Angular client
-- `npm run build:electron` builds the Electron code
-- `npm run build:all` builds client, Electron, and server
-- `npm run lint` runs ESLint
-- `npm run lint:fix` formats templates, sorts template props, and fixes lint issues
-- `npm run test` runs Angular tests
-
-## Server project
-
-The code in `server/` is a small Node and TypeScript service.
-It handles the public server directory, join requests, websocket updates, and Klipy routes.
-
-Inside `server/`:
-
-- `npm run dev` starts the server with reload
-- `npm run build` compiles to `dist/`
-- `npm run start` runs the compiled server
-
-# Images
-<img src="./website/src/images/screenshots/gif.png" width="700" height="400">
-<img src="./website/src/images/screenshots/screenshare_gaming.png" width="700" height="400">
-
-## Main Toju app Structure
+## Repository Map
 
 | Path | Description |
-|------|-------------|
-| `src/app/` | Main application root |
-| `src/app/core/` | Core utilities, services, models |
-| `src/app/domains/` | Domain-driven modules |
-| `src/app/features/` | UI feature modules |
-| `src/app/infrastructure/` | Low-level infrastructure (DB, realtime, etc.) |
-| `src/app/shared/` | Shared UI components |
-| `src/app/shared-kernel/` | Shared domain contracts & models |
-| `src/app/store/` | Global state management |
-| `src/assets/` | Static assets |
-| `src/environments/` | Environment configs |
+| --- | --- |
+| `toju-app/src/app/domains/` | Product-client bounded contexts and domain facades |
+| `toju-app/src/app/infrastructure/` | Shared client-side technical runtime such as persistence and realtime |
+| `toju-app/src/app/shared-kernel/` | Cross-domain contracts shared inside the product client |
+| `electron/` | Electron bootstrap, preload surface, IPC handlers, CQRS, and desktop adapters |
+| `server/src/` | Express app, websocket runtime, config, CQRS, and persistence layers |
+| `e2e/` | Playwright tests, helpers, fixtures, and page objects |
+| `website/src/` | Marketing-site pages, assets, and SSR entry points |
+| `tools/` | Build, release, formatting, and packaging scripts |
 
----
+## Product Client Docs
 
-### Domains
+| Area | Docs |
+| --- | --- |
+| Domains index | [toju-app/src/app/domains/README.md](toju-app/src/app/domains/README.md) |
+| Access Control | [toju-app/src/app/domains/access-control/README.md](toju-app/src/app/domains/access-control/README.md) |
+| Attachment | [toju-app/src/app/domains/attachment/README.md](toju-app/src/app/domains/attachment/README.md) |
+| Authentication | [toju-app/src/app/domains/authentication/README.md](toju-app/src/app/domains/authentication/README.md) |
+| Chat | [toju-app/src/app/domains/chat/README.md](toju-app/src/app/domains/chat/README.md) |
+| Notifications | [toju-app/src/app/domains/notifications/README.md](toju-app/src/app/domains/notifications/README.md) |
+| Profile Avatar | [toju-app/src/app/domains/profile-avatar/README.md](toju-app/src/app/domains/profile-avatar/README.md) |
+| Screen Share | [toju-app/src/app/domains/screen-share/README.md](toju-app/src/app/domains/screen-share/README.md) |
+| Server Directory | [toju-app/src/app/domains/server-directory/README.md](toju-app/src/app/domains/server-directory/README.md) |
+| Theme | [toju-app/src/app/domains/theme/README.md](toju-app/src/app/domains/theme/README.md) |
+| Voice Connection | [toju-app/src/app/domains/voice-connection/README.md](toju-app/src/app/domains/voice-connection/README.md) |
+| Voice Session | [toju-app/src/app/domains/voice-session/README.md](toju-app/src/app/domains/voice-session/README.md) |
+| Persistence | [toju-app/src/app/infrastructure/persistence/README.md](toju-app/src/app/infrastructure/persistence/README.md) |
+| Realtime | [toju-app/src/app/infrastructure/realtime/README.md](toju-app/src/app/infrastructure/realtime/README.md) |
+| Shared Kernel | [toju-app/src/app/shared-kernel/README.md](toju-app/src/app/shared-kernel/README.md) |
 
-| Path | Link |
-|------|------|
-| Attachment | [app/domains/attachment/README.md](src/app/domains/attachment/README.md) |
-| Auth | [app/domains/auth/README.md](src/app/domains/auth/README.md) |
-| Chat | [app/domains/chat/README.md](src/app/domains/chat/README.md) |
-| Screen Share | [app/domains/screen-share/README.md](src/app/domains/screen-share/README.md) |
-| Server Directory | [app/domains/server-directory/README.md](src/app/domains/server-directory/README.md) |
-| Voice Connection | [app/domains/voice-connection/README.md](src/app/domains/voice-connection/README.md) |
-| Voice Session | [app/domains/voice-session/README.md](src/app/domains/voice-session/README.md) |
-| Domains Root | [app/domains/README.md](src/app/domains/README.md) |
+## Supporting Docs
 
----
+- [doc/monorepo.md](doc/monorepo.md)
+- [doc/typescript.md](doc/typescript.md)
+- [docs/architecture.md](docs/architecture.md)
 
-### Infrastructure
+## Screenshots
 
-| Path | Link |
-|------|------|
-| Persistence | [src/app/infrastructure/persistence/README.md](src/app/infrastructure/persistence/README.md) |
-| Realtime | [src/app/infrastructure/realtime/README.md](src/app/infrastructure/realtime/README.md) |
-
----
-
-### Shared Kernel
-
-| Path | Link |
-|------|------|
-| Shared Kernel | [src/app/shared-kernel/README.md](src/app/shared-kernel/README.md) |
-
----
-
-### Entry Points
-
-| File | Link |
-|------|------|
-| Main | [main.ts](src/main.ts) |
-| Index HTML | [index.html](src/index.html) |
-| App Root | [app/app.ts](src/app/app.ts) |
+<img src="./website/src/images/screenshots/gif.png" width="700" height="400">
+<img src="./website/src/images/screenshots/screenshare_gaming.png" width="700" height="400">

e2e/README.md

@@ -0,0 +1,36 @@
+# End-to-End Tests
+
+Playwright suite for the MetoYou / Toju product client. The tests exercise browser flows such as authentication, chat, voice, screen sharing, and settings with reusable page objects and helpers.
+
+## Commands
+
+Run these from the repository root:
+
+- `npm run test:e2e` runs the full Playwright suite.
+- `npm run test:e2e:ui` opens Playwright UI mode.
+- `npm run test:e2e:debug` runs the suite in debug mode.
+- `npm run test:e2e:report` opens the HTML report in `test-results/html-report`.
+
+You can also run `npx playwright test` from `e2e/` directly.
+
+## Runtime
+
+- `playwright.config.ts` starts `cd ../toju-app && npx ng serve` as the test web server.
+- The suite targets `http://localhost:4200`.
+- Tests currently run with a single Chromium worker.
+- The browser launches with fake media-device flags and grants microphone/camera permissions.
+- Artifacts are written to `../test-results/artifacts`, and the HTML report is written to `../test-results/html-report`.
+
+## Structure
+
+| Path | Description |
+| --- | --- |
+| `tests/` | Test specs grouped by feature area such as `auth/`, `chat/`, `voice/`, `screen-share/`, and `settings/` |
+| `pages/` | Reusable Playwright page objects |
+| `helpers/` | Test helpers, fake-server utilities, and WebRTC helpers |
+| `fixtures/` | Shared test fixtures |
+
+## Notes
+
+- The suite is product-client focused; it does not currently spin up the marketing website.
+- Keep reusable browser flows in `pages/` and cross-test utilities in `helpers/`.

e2e/fixtures/multi-client.ts

@@ -5,23 +5,15 @@ import {
   type BrowserContext,
   type Browser
 } from '@playwright/test';
-import { spawn, type ChildProcess } from 'node:child_process';
-import { once } from 'node:events';
-import { createServer } from 'node:net';
 import { join } from 'node:path';
 import { installTestServerEndpoint } from '../helpers/seed-test-endpoint';
+import { startTestServer, type TestServerHandle } from '../helpers/test-server';
 
 export interface Client {
   page: Page;
   context: BrowserContext;
 }
 
-interface TestServerHandle {
-  port: number;
-  url: string;
-  stop: () => Promise<void>;
-}
-
 interface MultiClientFixture {
   createClient: () => Promise<Client>;
   testServer: TestServerHandle;
@@ -31,10 +23,9 @@ const FAKE_AUDIO_FILE = join(__dirname, 'test-tone.wav');
 const CHROMIUM_FAKE_MEDIA_ARGS = [
   '--use-fake-device-for-media-stream',
   '--use-fake-ui-for-media-stream',
-  `--use-file-for-fake-audio-capture=${FAKE_AUDIO_FILE}`
+  `--use-file-for-fake-audio-capture=${FAKE_AUDIO_FILE}`,
+  '--autoplay-policy=no-user-gesture-required'
 ];
-const E2E_DIR = join(__dirname, '..');
-const START_SERVER_SCRIPT = join(E2E_DIR, 'helpers', 'start-test-server.js');
 
 export const test = base.extend<MultiClientFixture>({
   testServer: async ({ playwright: _playwright }, use: (testServer: TestServerHandle) => Promise<void>) => {
@@ -81,122 +72,3 @@ export const test = base.extend<MultiClientFixture>({
 });
 
 export { expect } from '@playwright/test';
-
-async function startTestServer(retries = 3): Promise<TestServerHandle> {
-  for (let attempt = 1; attempt <= retries; attempt++) {
-    const port = await allocatePort();
-    const child = spawn(process.execPath, [START_SERVER_SCRIPT], {
-      cwd: E2E_DIR,
-      env: {
-        ...process.env,
-        TEST_SERVER_PORT: String(port)
-      },
-      stdio: 'pipe'
-    });
-
-    child.stdout?.on('data', (chunk: Buffer | string) => {
-      process.stdout.write(chunk.toString());
-    });
-
-    child.stderr?.on('data', (chunk: Buffer | string) => {
-      process.stderr.write(chunk.toString());
-    });
-
-    try {
-      await waitForServerReady(port, child);
-    } catch (error) {
-      await stopServer(child);
-
-      if (attempt < retries) {
-        console.log(`[E2E Server] Attempt ${attempt} failed, retrying...`);
-        continue;
-      }
-
-      throw error;
-    }
-
-    return {
-      port,
-      url: `http://localhost:${port}`,
-      stop: async () => {
-        await stopServer(child);
-      }
-    };
-  }
-
-  throw new Error('startTestServer: unreachable');
-}
-
-async function allocatePort(): Promise<number> {
-  return new Promise<number>((resolve, reject) => {
-    const probe = createServer();
-
-    probe.once('error', reject);
-    probe.listen(0, '127.0.0.1', () => {
-      const address = probe.address();
-
-      if (!address || typeof address === 'string') {
-        probe.close();
-        reject(new Error('Failed to resolve an ephemeral test server port'));
-        return;
-      }
-
-      const { port } = address;
-
-      probe.close((error) => {
-        if (error) {
-          reject(error);
-          return;
-        }
-
-        resolve(port);
-      });
-    });
-  });
-}
-
-async function waitForServerReady(port: number, child: ChildProcess, timeoutMs = 30_000): Promise<void> {
-  const readyUrl = `http://127.0.0.1:${port}/api/servers?limit=1`;
-  const deadline = Date.now() + timeoutMs;
-
-  while (Date.now() < deadline) {
-    if (child.exitCode !== null) {
-      throw new Error(`Test server exited before becoming ready (exit code ${child.exitCode})`);
-    }
-
-    try {
-      const response = await fetch(readyUrl);
-
-      if (response.ok) {
-        return;
-      }
-    } catch {
-      // Server still starting.
-    }
-
-    await wait(250);
-  }
-
-  throw new Error(`Timed out waiting for test server on port ${port}`);
-}
-
-async function stopServer(child: ChildProcess): Promise<void> {
-  if (child.exitCode !== null) {
-    return;
-  }
-
-  child.kill('SIGTERM');
-
-  const exited = await Promise.race([once(child, 'exit').then(() => true), wait(3_000).then(() => false)]);
-
-  if (!exited && child.exitCode === null) {
-    child.kill('SIGKILL');
-    await once(child, 'exit');
-  }
-}
-
-function wait(durationMs: number): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(resolve, durationMs);
-  });
-}

e2e/helpers/seed-test-endpoint.ts

@@ -3,6 +3,15 @@ import { type BrowserContext, type Page } from '@playwright/test';
 const SERVER_ENDPOINTS_STORAGE_KEY = 'metoyou_server_endpoints';
 const REMOVED_DEFAULT_KEYS_STORAGE_KEY = 'metoyou_removed_default_server_keys';
 
+export interface SeededEndpointInput {
+  id: string;
+  name: string;
+  url: string;
+  isActive?: boolean;
+  isDefault?: boolean;
+  status?: string;
+}
+
 interface SeededEndpointStorageState {
   key: string;
   removedKey: string;
@@ -17,21 +26,32 @@ interface SeededEndpointStorageState {
 }
 
 function buildSeededEndpointStorageState(
-  port: number = Number(process.env.TEST_SERVER_PORT) || 3099
+  endpointsOrPort: readonly SeededEndpointInput[] | number = Number(process.env.TEST_SERVER_PORT) || 3099
 ): SeededEndpointStorageState {
-  const endpoint = {
-    id: 'e2e-test-server',
-    name: 'E2E Test Server',
-    url: `http://localhost:${port}`,
-    isActive: true,
-    isDefault: false,
-    status: 'unknown'
-  };
+  const endpoints = Array.isArray(endpointsOrPort)
+    ? endpointsOrPort.map((endpoint) => ({
+      id: endpoint.id,
+      name: endpoint.name,
+      url: endpoint.url,
+      isActive: endpoint.isActive ?? true,
+      isDefault: endpoint.isDefault ?? false,
+      status: endpoint.status ?? 'unknown'
+    }))
+    : [
+      {
+        id: 'e2e-test-server',
+        name: 'E2E Test Server',
+        url: `http://localhost:${endpointsOrPort}`,
+        isActive: true,
+        isDefault: false,
+        status: 'unknown'
+      }
+    ];
 
   return {
     key: SERVER_ENDPOINTS_STORAGE_KEY,
     removedKey: REMOVED_DEFAULT_KEYS_STORAGE_KEY,
-    endpoints: [endpoint]
+    endpoints
   };
 }
 
@@ -59,6 +79,15 @@ export async function installTestServerEndpoint(
   await context.addInitScript(applySeededEndpointStorageState, storageState);
 }
 
+export async function installTestServerEndpoints(
+  context: BrowserContext,
+  endpoints: readonly SeededEndpointInput[]
+): Promise<void> {
+  const storageState = buildSeededEndpointStorageState(endpoints);
+
+  await context.addInitScript(applySeededEndpointStorageState, storageState);
+}
+
 /**
  * Seed localStorage with a single signal endpoint pointing at the test server.
  * Must be called AFTER navigating to the app origin (localStorage is per-origin)
@@ -79,3 +108,12 @@ export async function seedTestServerEndpoint(
 
   await page.evaluate(applySeededEndpointStorageState, storageState);
 }
+
+export async function seedTestServerEndpoints(
+  page: Page,
+  endpoints: readonly SeededEndpointInput[]
+): Promise<void> {
+  const storageState = buildSeededEndpointStorageState(endpoints);
+
+  await page.evaluate(applySeededEndpointStorageState, storageState);
+}

e2e/helpers/test-server.ts

@@ -0,0 +1,132 @@
+import { spawn, type ChildProcess } from 'node:child_process';
+import { once } from 'node:events';
+import { createServer } from 'node:net';
+import { join } from 'node:path';
+
+export interface TestServerHandle {
+  port: number;
+  url: string;
+  stop: () => Promise<void>;
+}
+
+const E2E_DIR = join(__dirname, '..');
+const START_SERVER_SCRIPT = join(E2E_DIR, 'helpers', 'start-test-server.js');
+
+export async function startTestServer(retries = 3): Promise<TestServerHandle> {
+  for (let attempt = 1; attempt <= retries; attempt++) {
+    const port = await allocatePort();
+    const child = spawn(process.execPath, [START_SERVER_SCRIPT], {
+      cwd: E2E_DIR,
+      env: {
+        ...process.env,
+        TEST_SERVER_PORT: String(port)
+      },
+      stdio: 'pipe'
+    });
+
+    child.stdout?.on('data', (chunk: Buffer | string) => {
+      process.stdout.write(chunk.toString());
+    });
+
+    child.stderr?.on('data', (chunk: Buffer | string) => {
+      process.stderr.write(chunk.toString());
+    });
+
+    try {
+      await waitForServerReady(port, child);
+    } catch (error) {
+      await stopServer(child);
+
+      if (attempt < retries) {
+        console.log(`[E2E Server] Attempt ${attempt} failed, retrying...`);
+        continue;
+      }
+
+      throw error;
+    }
+
+    return {
+      port,
+      url: `http://localhost:${port}`,
+      stop: async () => {
+        await stopServer(child);
+      }
+    };
+  }
+
+  throw new Error('startTestServer: unreachable');
+}
+
+async function allocatePort(): Promise<number> {
+  return await new Promise<number>((resolve, reject) => {
+    const probe = createServer();
+
+    probe.once('error', reject);
+    probe.listen(0, '127.0.0.1', () => {
+      const address = probe.address();
+
+      if (!address || typeof address === 'string') {
+        probe.close();
+        reject(new Error('Failed to resolve an ephemeral test server port'));
+        return;
+      }
+
+      const { port } = address;
+
+      probe.close((error) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+
+        resolve(port);
+      });
+    });
+  });
+}
+
+async function waitForServerReady(port: number, child: ChildProcess, timeoutMs = 30_000): Promise<void> {
+  const readyUrl = `http://127.0.0.1:${port}/api/servers?limit=1`;
+  const deadline = Date.now() + timeoutMs;
+
+  while (Date.now() < deadline) {
+    if (child.exitCode !== null) {
+      throw new Error(`Test server exited before becoming ready (exit code ${child.exitCode})`);
+    }
+
+    try {
+      const response = await fetch(readyUrl);
+
+      if (response.ok) {
+        return;
+      }
+    } catch {
+      // Server still starting.
+    }
+
+    await wait(250);
+  }
+
+  throw new Error(`Timed out waiting for test server on port ${port}`);
+}
+
+async function stopServer(child: ChildProcess): Promise<void> {
+  if (child.exitCode !== null) {
+    return;
+  }
+
+  child.kill('SIGTERM');
+
+  const exited = await Promise.race([once(child, 'exit').then(() => true), wait(3_000).then(() => false)]);
+
+  if (!exited && child.exitCode === null) {
+    child.kill('SIGKILL');
+    await once(child, 'exit');
+  }
+}
+
+function wait(durationMs: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, durationMs);
+  });
+}

e2e/helpers/webrtc-helpers.ts

@@ -46,75 +46,6 @@ export async function installWebRTCTracking(page: Page): Promise<void> {
     (window as any).RTCPeerConnection.prototype = OriginalRTCPeerConnection.prototype;
     Object.setPrototypeOf((window as any).RTCPeerConnection, OriginalRTCPeerConnection);
 
-    // Patch getUserMedia to use an AudioContext oscillator for audio
-    // instead of the hardware capture device.  Chromium's fake audio
-    // device intermittently fails to produce frames after renegotiation.
-    const origGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
-
-    navigator.mediaDevices.getUserMedia = async (constraints?: MediaStreamConstraints) => {
-      const wantsAudio = !!constraints?.audio;
-
-      if (!wantsAudio) {
-        return origGetUserMedia(constraints);
-      }
-
-      // Get the original stream (may include video)
-      const originalStream = await origGetUserMedia(constraints);
-      const audioCtx = new AudioContext();
-      const noiseBuffer = audioCtx.createBuffer(1, audioCtx.sampleRate * 2, audioCtx.sampleRate);
-      const noiseData = noiseBuffer.getChannelData(0);
-
-      for (let sampleIndex = 0; sampleIndex < noiseData.length; sampleIndex++) {
-        noiseData[sampleIndex] = (Math.random() * 2 - 1) * 0.18;
-      }
-
-      const source = audioCtx.createBufferSource();
-      const gain = audioCtx.createGain();
-
-      source.buffer = noiseBuffer;
-      source.loop = true;
-      gain.gain.value = 0.12;
-
-      const dest = audioCtx.createMediaStreamDestination();
-
-      source.connect(gain);
-      gain.connect(dest);
-      source.start();
-
-      if (audioCtx.state === 'suspended') {
-        try {
-          await audioCtx.resume();
-        } catch {}
-      }
-
-      const synthAudioTrack = dest.stream.getAudioTracks()[0];
-      const resultStream = new MediaStream();
-
-      syntheticMediaResources.push({ audioCtx, source });
-
-      resultStream.addTrack(synthAudioTrack);
-
-      // Keep any video tracks from the original stream
-      for (const videoTrack of originalStream.getVideoTracks()) {
-        resultStream.addTrack(videoTrack);
-      }
-
-      // Stop original audio tracks since we're not using them
-      for (const track of originalStream.getAudioTracks()) {
-        track.stop();
-      }
-
-      synthAudioTrack.addEventListener('ended', () => {
-        try {
-          source.stop();
-        } catch {}
-
-        void audioCtx.close().catch(() => {});
-      }, { once: true });
-
-      return resultStream;
-    };
-
     // Patch getDisplayMedia to return a synthetic screen share stream
     // (canvas-based video + 880Hz oscillator audio) so the browser
     // picker dialog is never shown.
@@ -198,6 +129,48 @@ export async function installWebRTCTracking(page: Page): Promise<void> {
 /**
  * Wait until at least one RTCPeerConnection reaches the 'connected' state.
  */
+
+/**
+ * Ensure every `AudioContext` created by the page auto-resumes so that
+ * the input-gain Web Audio pipeline (`source -> gain -> destination`) never
+ * stalls in the "suspended" state.
+ *
+ * On Linux with multiple headless Chromium instances, `new AudioContext()`
+ * can start suspended without a user-gesture gate, causing the media
+ * pipeline to emit only a single RTP packet.
+ *
+ * Call once per page, BEFORE navigating, alongside `installWebRTCTracking`.
+ */
+export async function installAutoResumeAudioContext(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const OrigAudioContext = window.AudioContext;
+
+    (window as any).AudioContext = function(this: AudioContext, ...args: any[]) {
+      const ctx: AudioContext = new OrigAudioContext(...args);
+      // Track all created AudioContexts for test diagnostics
+      const tracked = ((window as any).__trackedAudioContexts ??= []) as AudioContext[];
+
+      tracked.push(ctx);
+
+      if (ctx.state === 'suspended') {
+        ctx.resume().catch(() => { /* noop */ });
+      }
+
+      // Also catch transitions to suspended after creation
+      ctx.addEventListener('statechange', () => {
+        if (ctx.state === 'suspended') {
+          ctx.resume().catch(() => { /* noop */ });
+        }
+      });
+
+      return ctx;
+    } as any;
+
+    (window as any).AudioContext.prototype = OrigAudioContext.prototype;
+    Object.setPrototypeOf((window as any).AudioContext, OrigAudioContext);
+  });
+}
+
 export async function waitForPeerConnected(page: Page, timeout = 30_000): Promise<void> {
   await page.waitForFunction(
     () => (window as any).__rtcConnections?.some(
@@ -218,6 +191,177 @@ export async function isPeerStillConnected(page: Page): Promise<boolean> {
   );
 }
 
+/** Returns the number of tracked peer connections in `connected` state. */
+export async function getConnectedPeerCount(page: Page): Promise<number> {
+  return page.evaluate(
+    () => ((window as any).__rtcConnections as RTCPeerConnection[] | undefined)?.filter(
+      (pc) => pc.connectionState === 'connected'
+    ).length ?? 0
+  );
+}
+
+/** Wait until the expected number of peer connections are `connected`. */
+export async function waitForConnectedPeerCount(page: Page, expectedCount: number, timeout = 45_000): Promise<void> {
+  await page.waitForFunction(
+    (count) => ((window as any).__rtcConnections as RTCPeerConnection[] | undefined)?.filter(
+      (pc) => pc.connectionState === 'connected'
+    ).length === count,
+    expectedCount,
+    { timeout }
+  );
+}
+
+/**
+ * Resume all suspended AudioContext instances created by the synthetic
+ * media patch.  Uses CDP `Runtime.evaluate` with `userGesture: true` so
+ * Chrome treats the call as a user-gesture - this satisfies the autoplay
+ * policy that otherwise blocks `AudioContext.resume()`.
+ */
+export async function resumeSyntheticAudioContexts(page: Page): Promise<number> {
+  const cdpSession = await page.context().newCDPSession(page);
+
+  try {
+    const result = await cdpSession.send('Runtime.evaluate', {
+      expression: `(async () => {
+        const resources = window.__rtcSyntheticMediaResources;
+        if (!resources) return 0;
+        let resumed = 0;
+        for (const r of resources) {
+          if (r.audioCtx.state === 'suspended') {
+            await r.audioCtx.resume();
+            resumed++;
+          }
+        }
+        return resumed;
+      })()`,
+      awaitPromise: true,
+      userGesture: true
+    });
+
+    return result.result.value ?? 0;
+  } finally {
+    await cdpSession.detach();
+  }
+}
+
+interface PerPeerAudioStat {
+  connectionState: string;
+  inboundBytes: number;
+  inboundPackets: number;
+  outboundBytes: number;
+  outboundPackets: number;
+}
+
+/** Get per-peer audio stats for every tracked RTCPeerConnection. */
+export async function getPerPeerAudioStats(page: Page): Promise<PerPeerAudioStat[]> {
+  return page.evaluate(async () => {
+    const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+    if (!connections?.length) {
+      return [];
+    }
+
+    const snapshots: PerPeerAudioStat[] = [];
+
+    for (const pc of connections) {
+      let inboundBytes = 0;
+      let inboundPackets = 0;
+      let outboundBytes = 0;
+      let outboundPackets = 0;
+
+      try {
+        const stats = await pc.getStats();
+
+        stats.forEach((report: any) => {
+          const kind = report.kind ?? report.mediaType;
+
+          if (report.type === 'outbound-rtp' && kind === 'audio') {
+            outboundBytes += report.bytesSent ?? 0;
+            outboundPackets += report.packetsSent ?? 0;
+          }
+
+          if (report.type === 'inbound-rtp' && kind === 'audio') {
+            inboundBytes += report.bytesReceived ?? 0;
+            inboundPackets += report.packetsReceived ?? 0;
+          }
+        });
+      } catch {
+        // Closed connection.
+      }
+
+      snapshots.push({
+        connectionState: pc.connectionState,
+        inboundBytes,
+        inboundPackets,
+        outboundBytes,
+        outboundPackets
+      });
+    }
+
+    return snapshots;
+  });
+}
+
+/** Wait until every connected peer connection shows inbound and outbound audio flow. */
+export async function waitForAllPeerAudioFlow(
+  page: Page,
+  expectedConnectedPeers: number,
+  timeoutMs = 45_000,
+  pollIntervalMs = 1_000
+): Promise<void> {
+  const deadline = Date.now() + timeoutMs;
+  // Track which peer indices have been confirmed flowing at least once.
+  // This prevents a peer from being missed just because it briefly paused
+  // during one specific poll interval.
+  const confirmedFlowing = new Set<number>();
+
+  let previous = await getPerPeerAudioStats(page);
+
+  while (Date.now() < deadline) {
+    await page.waitForTimeout(pollIntervalMs);
+    const current = await getPerPeerAudioStats(page);
+    const connectedPeers = current.filter((stat) => stat.connectionState === 'connected');
+
+    if (connectedPeers.length >= expectedConnectedPeers) {
+      for (let index = 0; index < current.length; index++) {
+        const curr = current[index];
+
+        if (!curr || curr.connectionState !== 'connected') {
+          continue;
+        }
+
+        const prev = previous[index] ?? {
+          connectionState: 'new',
+          inboundBytes: 0,
+          inboundPackets: 0,
+          outboundBytes: 0,
+          outboundPackets: 0
+        };
+        const inboundFlowing = curr.inboundBytes > prev.inboundBytes || curr.inboundPackets > prev.inboundPackets;
+        const outboundFlowing = curr.outboundBytes > prev.outboundBytes || curr.outboundPackets > prev.outboundPackets;
+
+        if (inboundFlowing && outboundFlowing) {
+          confirmedFlowing.add(index);
+        }
+      }
+
+      // Check if enough peers have been confirmed across all samples
+      const connectedIndices = current
+        .map((stat, idx) => stat.connectionState === 'connected' ? idx : -1)
+        .filter((idx) => idx >= 0);
+      const confirmedCount = connectedIndices.filter((idx) => confirmedFlowing.has(idx)).length;
+
+      if (confirmedCount >= expectedConnectedPeers) {
+        return;
+      }
+    }
+
+    previous = current;
+  }
+
+  throw new Error(`Timed out waiting for ${expectedConnectedPeers} peers with bidirectional audio flow`);
+}
+
 /**
  * Get outbound and inbound audio RTP stats aggregated across all peer
  * connections.  Uses a per-connection high water mark stored on `window` so

e2e/pages/chat-room.page.ts

@@ -19,13 +19,65 @@ export class ChatRoomPage {
 
   /** Click a voice channel by name in the channels sidebar to join voice. */
   async joinVoiceChannel(channelName: string) {
-    const channelButton = this.page.locator('app-rooms-side-panel')
-      .getByRole('button', { name: channelName, exact: true });
+    const channelButton = this.getVoiceChannelButton(channelName);
+
+    if (await channelButton.count() === 0) {
+      await this.refreshRoomMetadata();
+    }
+
+    if (await channelButton.count() === 0) {
+      // Second attempt - metadata might still be syncing
+      await this.page.waitForTimeout(2_000);
+      await this.refreshRoomMetadata();
+    }
 
     await expect(channelButton).toBeVisible({ timeout: 15_000 });
     await channelButton.click();
   }
 
+  /** Creates a voice channel if it is not already present in the current room. */
+  async ensureVoiceChannelExists(channelName: string) {
+    const channelButton = this.getVoiceChannelButton(channelName);
+
+    if (await channelButton.count() > 0) {
+      return;
+    }
+
+    await this.refreshRoomMetadata();
+
+    // Wait a bit longer for Angular to render the channel list after refresh
+    try {
+      await expect(channelButton).toBeVisible({ timeout: 5_000 });
+      return;
+    } catch {
+      // Channel genuinely doesn't exist - create it
+    }
+
+    await this.openCreateVoiceChannelDialog();
+
+    try {
+      await this.createChannel(channelName);
+    } catch {
+      // If the dialog didn't close (e.g. duplicate name validation), dismiss it
+      const dialog = this.page.locator('app-confirm-dialog');
+
+      if (await dialog.isVisible()) {
+        const cancelButton = dialog.getByRole('button', { name: 'Cancel' });
+        const closeButton = dialog.getByRole('button', { name: 'Close dialog' });
+
+        if (await cancelButton.isVisible()) {
+          await cancelButton.click();
+        } else if (await closeButton.isVisible()) {
+          await closeButton.click();
+        }
+
+        await expect(dialog).not.toBeVisible({ timeout: 5_000 }).catch(() => {});
+      }
+    }
+
+    await expect(channelButton).toBeVisible({ timeout: 15_000 });
+  }
+
   /** Click a text channel by name in the channels sidebar to switch chat rooms. */
   async joinTextChannel(channelName: string) {
     const channelButton = this.getTextChannelButton(channelName);
@@ -100,6 +152,11 @@ export class ChatRoomPage {
     return this.voiceControls.locator('button:has(ng-icon[name="lucideMic"]), button:has(ng-icon[name="lucideMicOff"])').first();
   }
 
+  /** Get the deafen toggle button inside voice controls. */
+  get deafenButton() {
+    return this.voiceControls.locator('button:has(ng-icon[name="lucideHeadphones"])').first();
+  }
+
   /** Get the disconnect/hang-up button (destructive styled). */
   get disconnectButton() {
     return this.voiceControls.locator('button:has(ng-icon[name="lucidePhoneOff"])').first();
@@ -112,10 +169,9 @@ export class ChatRoomPage {
 
   /** Get the count of voice users listed under a voice channel. */
   async getVoiceUserCountInChannel(channelName: string): Promise<number> {
-    const channelSection = this.page.locator('app-rooms-side-panel')
-      .getByRole('button', { name: channelName })
-      .locator('..');
-    const userAvatars = channelSection.locator('app-user-avatar');
+    // The voice channel button is inside a wrapper div; user avatars are siblings within that wrapper
+    const channelWrapper = this.getVoiceChannelButton(channelName).locator('xpath=ancestor::div[1]');
+    const userAvatars = channelWrapper.locator('app-user-avatar');
 
     return userAvatars.count();
   }
@@ -154,9 +210,11 @@ export class ChatRoomPage {
   }
 
   private getTextChannelButton(channelName: string): Locator {
-    const channelPattern = new RegExp(`#\\s*${escapeRegExp(channelName)}$`, 'i');
+    return this.channelsSidePanel.locator(`button[data-channel-type="text"][data-channel-name="${channelName}"]`).first();
+  }
 
-    return this.channelsSidePanel.getByRole('button', { name: channelPattern }).first();
+  private getVoiceChannelButton(channelName: string): Locator {
+    return this.channelsSidePanel.locator(`button[data-channel-type="voice"][data-channel-name="${channelName}"]`).first();
   }
 
   private async createTextChannelThroughComponent(channelName: string): Promise<void> {
@@ -384,7 +442,3 @@ export class ChatRoomPage {
     await this.page.waitForTimeout(500);
   }
 }
-
-function escapeRegExp(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}

e2e/pages/login.page.ts

@@ -1,6 +1,7 @@
 import { type Page, type Locator } from '@playwright/test';
 
 export class LoginPage {
+  readonly form: Locator;
   readonly usernameInput: Locator;
   readonly passwordInput: Locator;
   readonly serverSelect: Locator;
@@ -9,12 +10,13 @@ export class LoginPage {
   readonly registerLink: Locator;
 
   constructor(private page: Page) {
+    this.form = page.locator('#login-username').locator('xpath=ancestor::div[contains(@class, "space-y-3")]').first();
     this.usernameInput = page.locator('#login-username');
     this.passwordInput = page.locator('#login-password');
     this.serverSelect = page.locator('#login-server');
-    this.submitButton = page.getByRole('button', { name: 'Login' });
+    this.submitButton = this.form.getByRole('button', { name: 'Login' });
     this.errorText = page.locator('.text-destructive');
-    this.registerLink = page.getByRole('button', { name: 'Register' });
+    this.registerLink = this.form.getByRole('button', { name: 'Register' });
   }
 
   async goto() {

e2e/pages/register.page.ts

@@ -43,8 +43,11 @@ export class RegisterPage {
 
   async register(username: string, displayName: string, password: string) {
     await this.usernameInput.fill(username);
+    await expect(this.usernameInput).toHaveValue(username);
     await this.displayNameInput.fill(displayName);
+    await expect(this.displayNameInput).toHaveValue(displayName);
     await this.passwordInput.fill(password);
+    await expect(this.passwordInput).toHaveValue(password);
     await this.submitButton.click();
   }
 }

e2e/pages/server-search.page.ts

@@ -7,6 +7,8 @@ import {
 export class ServerSearchPage {
   readonly searchInput: Locator;
   readonly createServerButton: Locator;
+  readonly railCreateServerButton: Locator;
+  readonly searchCreateServerButton: Locator;
   readonly settingsButton: Locator;
 
   // Create server dialog
@@ -21,7 +23,9 @@ export class ServerSearchPage {
 
   constructor(private page: Page) {
     this.searchInput = page.getByPlaceholder('Search servers...');
-    this.createServerButton = page.getByRole('button', { name: 'Create New Server' });
+    this.railCreateServerButton = page.locator('button[title="Create Server"]');
+    this.searchCreateServerButton = page.getByRole('button', { name: 'Create New Server' });
+    this.createServerButton = this.searchCreateServerButton;
     this.settingsButton = page.locator('button[title="Settings"]');
 
     // Create dialog elements
@@ -39,8 +43,20 @@ export class ServerSearchPage {
     await this.page.goto('/search');
   }
 
-  async createServer(name: string, options?: { description?: string; topic?: string }) {
-    await this.createServerButton.click();
+  async createServer(name: string, options?: { description?: string; topic?: string; sourceId?: string }) {
+    if (!await this.serverNameInput.isVisible()) {
+      if (await this.searchCreateServerButton.isVisible()) {
+        await this.searchCreateServerButton.click();
+      } else {
+        await this.railCreateServerButton.click();
+
+        if (!await this.serverNameInput.isVisible()) {
+          await expect(this.searchCreateServerButton).toBeVisible({ timeout: 10_000 });
+          await this.searchCreateServerButton.click();
+        }
+      }
+    }
+
     await expect(this.serverNameInput).toBeVisible();
     await this.serverNameInput.fill(name);
 
@@ -52,6 +68,10 @@ export class ServerSearchPage {
       await this.serverTopicInput.fill(options.topic);
     }
 
+    if (options?.sourceId) {
+      await this.signalEndpointSelect.selectOption(options.sourceId);
+    }
+
     await this.dialogCreateButton.click();
   }
 

e2e/playwright.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   expect: { timeout: 10_000 },
   retries: process.env.CI ? 2 : 0,
   workers: 1,
-  reporter: [['html', { outputFolder: '../test-results/html-report' }], ['list']],
+  reporter: [['html', { outputFolder: '../test-results/html-report', open: 'never' }], ['list']],
   outputDir: '../test-results/artifacts',
   use: {
     baseURL: 'http://localhost:4200',
@@ -22,7 +22,11 @@ export default defineConfig({
         ...devices['Desktop Chrome'],
         permissions: ['microphone', 'camera'],
         launchOptions: {
-          args: ['--use-fake-device-for-media-stream', '--use-fake-ui-for-media-stream']
+          args: [
+            '--use-fake-device-for-media-stream',
+            '--use-fake-ui-for-media-stream',
+            '--autoplay-policy=no-user-gesture-required'
+          ]
         }
       }
     }

e2e/tests/auth/user-session-data-isolation.spec.ts

@@ -0,0 +1,269 @@
+import { mkdtemp, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import {
+  chromium,
+  type BrowserContext,
+  type Page
+} from '@playwright/test';
+import { test, expect } from '../../fixtures/multi-client';
+import { installTestServerEndpoint } from '../../helpers/seed-test-endpoint';
+import { ChatMessagesPage } from '../../pages/chat-messages.page';
+import { LoginPage } from '../../pages/login.page';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+
+interface TestUser {
+  username: string;
+  displayName: string;
+  password: string;
+}
+
+interface PersistentClient {
+  context: BrowserContext;
+  page: Page;
+  userDataDir: string;
+}
+
+const CLIENT_LAUNCH_ARGS = [
+  '--use-fake-device-for-media-stream',
+  '--use-fake-ui-for-media-stream'
+];
+
+test.describe('User session data isolation', () => {
+  test.describe.configure({ timeout: 240_000 });
+
+  test('preserves a user saved rooms and local history across app restarts', async ({ testServer }) => {
+    const suffix = uniqueName('persist');
+    const userDataDir = await mkdtemp(join(tmpdir(), 'metoyou-auth-persist-'));
+    const alice: TestUser = {
+      username: `alice_${suffix}`,
+      displayName: 'Alice',
+      password: 'TestPass123!'
+    };
+    const aliceServerName = `Alice Session Server ${suffix}`;
+    const aliceMessage = `Alice persisted message ${suffix}`;
+    let client: PersistentClient | null = null;
+
+    try {
+      client = await launchPersistentClient(userDataDir, testServer.port);
+
+      await test.step('Alice registers and creates local chat history', async () => {
+        await registerUser(client.page, alice);
+        await createServerAndSendMessage(client.page, aliceServerName, aliceMessage);
+      });
+
+      await test.step('Alice sees the same saved room and message after a full restart', async () => {
+        await restartPersistentClient(client, testServer.port);
+        await openApp(client.page);
+        await expect(client.page).not.toHaveURL(/\/login/, { timeout: 15_000 });
+        await expectSavedRoomAndHistory(client.page, aliceServerName, aliceMessage);
+      });
+    } finally {
+      await closePersistentClient(client);
+      await rm(userDataDir, { recursive: true, force: true });
+    }
+  });
+
+  test('gives a new user a blank slate and restores only that user local data after account switches', async ({ testServer }) => {
+    const suffix = uniqueName('isolation');
+    const userDataDir = await mkdtemp(join(tmpdir(), 'metoyou-auth-isolation-'));
+    const alice: TestUser = {
+      username: `alice_${suffix}`,
+      displayName: 'Alice',
+      password: 'TestPass123!'
+    };
+    const bob: TestUser = {
+      username: `bob_${suffix}`,
+      displayName: 'Bob',
+      password: 'TestPass123!'
+    };
+    const aliceServerName = `Alice Private Server ${suffix}`;
+    const bobServerName = `Bob Private Server ${suffix}`;
+    const aliceMessage = `Alice history ${suffix}`;
+    const bobMessage = `Bob history ${suffix}`;
+    let client: PersistentClient | null = null;
+
+    try {
+      client = await launchPersistentClient(userDataDir, testServer.port);
+
+      await test.step('Alice creates persisted local data and verifies it survives a restart', async () => {
+        await registerUser(client.page, alice);
+        await createServerAndSendMessage(client.page, aliceServerName, aliceMessage);
+
+        await restartPersistentClient(client, testServer.port);
+        await openApp(client.page);
+        await expectSavedRoomAndHistory(client.page, aliceServerName, aliceMessage);
+      });
+
+      await test.step('Bob starts from a blank slate in the same browser profile', async () => {
+        await logoutUser(client.page);
+        await registerUser(client.page, bob);
+        await expectBlankSlate(client.page, [aliceServerName]);
+      });
+
+      await test.step('Bob gets only his own saved room and history after a restart', async () => {
+        await createServerAndSendMessage(client.page, bobServerName, bobMessage);
+
+        await restartPersistentClient(client, testServer.port);
+        await openApp(client.page);
+        await expectSavedRoomAndHistory(client.page, bobServerName, bobMessage);
+        await expectSavedRoomHidden(client.page, aliceServerName);
+      });
+
+      await test.step('When Alice logs back in she sees only Alice local data, not Bob data', async () => {
+        await logoutUser(client.page);
+        await restartPersistentClient(client, testServer.port);
+        await loginUser(client.page, alice);
+
+        await expectSavedRoomVisible(client.page, aliceServerName);
+        await expectSavedRoomHidden(client.page, bobServerName);
+        await expectSavedRoomAndHistory(client.page, aliceServerName, aliceMessage);
+      });
+    } finally {
+      await closePersistentClient(client);
+      await rm(userDataDir, { recursive: true, force: true });
+    }
+  });
+});
+
+async function launchPersistentClient(userDataDir: string, testServerPort: number): Promise<PersistentClient> {
+  const context = await chromium.launchPersistentContext(userDataDir, {
+    args: CLIENT_LAUNCH_ARGS,
+    baseURL: 'http://localhost:4200',
+    permissions: ['microphone', 'camera']
+  });
+
+  await installTestServerEndpoint(context, testServerPort);
+
+  const page = context.pages()[0] ?? await context.newPage();
+
+  return {
+    context,
+    page,
+    userDataDir
+  };
+}
+
+async function restartPersistentClient(client: PersistentClient, testServerPort: number): Promise<void> {
+  await client.context.close();
+
+  const restartedClient = await launchPersistentClient(client.userDataDir, testServerPort);
+
+  client.context = restartedClient.context;
+  client.page = restartedClient.page;
+}
+
+async function closePersistentClient(client: PersistentClient | null): Promise<void> {
+  if (!client) {
+    return;
+  }
+
+  await client.context.close().catch(() => {});
+}
+
+async function openApp(page: Page): Promise<void> {
+  await retryTransientNavigation(() => page.goto('/', { waitUntil: 'domcontentloaded' }));
+}
+
+async function registerUser(page: Page, user: TestUser): Promise<void> {
+  const registerPage = new RegisterPage(page);
+
+  await retryTransientNavigation(() => registerPage.goto());
+  await registerPage.register(user.username, user.displayName, user.password);
+  await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
+}
+
+async function loginUser(page: Page, user: TestUser): Promise<void> {
+  const loginPage = new LoginPage(page);
+
+  await retryTransientNavigation(() => loginPage.goto());
+  await loginPage.login(user.username, user.password);
+  await expect(page).toHaveURL(/\/(search|room)(\/|$)/, { timeout: 15_000 });
+}
+
+async function logoutUser(page: Page): Promise<void> {
+  const menuButton = page.getByRole('button', { name: 'Menu' });
+  const logoutButton = page.getByRole('button', { name: 'Logout' });
+  const loginPage = new LoginPage(page);
+
+  await expect(menuButton).toBeVisible({ timeout: 10_000 });
+  await menuButton.click();
+  await expect(logoutButton).toBeVisible({ timeout: 10_000 });
+  await logoutButton.click();
+  await expect(page).toHaveURL(/\/login/, { timeout: 15_000 });
+  await expect(loginPage.usernameInput).toBeVisible({ timeout: 10_000 });
+}
+
+async function createServerAndSendMessage(page: Page, serverName: string, messageText: string): Promise<void> {
+  const searchPage = new ServerSearchPage(page);
+  const messagesPage = new ChatMessagesPage(page);
+
+  await searchPage.createServer(serverName, {
+    description: `User session isolation coverage for ${serverName}`
+  });
+  await expect(page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  await messagesPage.sendMessage(messageText);
+  await expect(messagesPage.getMessageItemByText(messageText)).toBeVisible({ timeout: 20_000 });
+}
+
+async function expectSavedRoomAndHistory(page: Page, roomName: string, messageText: string): Promise<void> {
+  const roomButton = getSavedRoomButton(page, roomName);
+  const messagesPage = new ChatMessagesPage(page);
+
+  await expect(roomButton).toBeVisible({ timeout: 20_000 });
+  await roomButton.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(messagesPage.getMessageItemByText(messageText)).toBeVisible({ timeout: 20_000 });
+}
+
+async function expectBlankSlate(page: Page, hiddenRoomNames: string[]): Promise<void> {
+  const searchPage = new ServerSearchPage(page);
+
+  await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
+  await expect(searchPage.createServerButton).toBeVisible({ timeout: 15_000 });
+
+  for (const roomName of hiddenRoomNames) {
+    await expectSavedRoomHidden(page, roomName);
+  }
+}
+
+async function expectSavedRoomVisible(page: Page, roomName: string): Promise<void> {
+  await expect(getSavedRoomButton(page, roomName)).toBeVisible({ timeout: 20_000 });
+}
+
+async function expectSavedRoomHidden(page: Page, roomName: string): Promise<void> {
+  await expect(getSavedRoomButton(page, roomName)).toHaveCount(0);
+}
+
+function getSavedRoomButton(page: Page, roomName: string) {
+  return page.locator(`button[title="${roomName}"]`).first();
+}
+
+async function retryTransientNavigation<T>(navigate: () => Promise<T>, attempts = 4): Promise<T> {
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= attempts; attempt += 1) {
+    try {
+      return await navigate();
+    } catch (error) {
+      lastError = error;
+
+      const message = error instanceof Error ? error.message : String(error);
+      const isTransientNavigationError = message.includes('ERR_EMPTY_RESPONSE') || message.includes('ERR_CONNECTION_RESET');
+
+      if (!isTransientNavigationError || attempt === attempts) {
+        throw error;
+      }
+    }
+  }
+
+  throw lastError instanceof Error
+    ? lastError
+    : new Error(`Navigation failed after ${attempts} attempts`);
+}
+
+function uniqueName(prefix: string): string {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}

e2e/tests/chat/chat-message-features.spec.ts

@@ -18,6 +18,81 @@ const DELETED_MESSAGE_CONTENT = '[Message deleted]';
 test.describe('Chat messaging features', () => {
   test.describe.configure({ timeout: 180_000 });
 
+  test('shows per-server channel lists on first saved-server click', async ({ createClient }) => {
+    const scenario = await createSingleClientChatScenario(createClient);
+    const alphaServerName = `Alpha Server ${uniqueName('rail')}`;
+    const betaServerName = `Beta Server ${uniqueName('rail')}`;
+    const alphaChannelName = uniqueName('alpha-updates');
+    const betaChannelName = uniqueName('beta-plans');
+    const channelsPanel = scenario.room.channelsSidePanel;
+
+    await test.step('Create first saved server with a unique text channel', async () => {
+      await createServerAndOpenRoom(scenario.search, scenario.client.page, alphaServerName, 'Rail switch alpha server');
+      await scenario.room.ensureTextChannelExists(alphaChannelName);
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${alphaChannelName}"]`)
+      ).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Create second saved server with a different text channel', async () => {
+      await createServerAndOpenRoom(scenario.search, scenario.client.page, betaServerName, 'Rail switch beta server');
+      await scenario.room.ensureTextChannelExists(betaChannelName);
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${betaChannelName}"]`)
+      ).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Opening first server once restores only its channels', async () => {
+      await openSavedRoomByName(scenario.client.page, alphaServerName);
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${alphaChannelName}"]`)
+      ).toBeVisible({ timeout: 20_000 });
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${betaChannelName}"]`)
+      ).toHaveCount(0);
+    });
+
+    await test.step('Opening second server once restores only its channels', async () => {
+      await openSavedRoomByName(scenario.client.page, betaServerName);
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${betaChannelName}"]`)
+      ).toBeVisible({ timeout: 20_000 });
+      await expect(
+        channelsPanel.locator(`button[data-channel-type="text"][data-channel-name="${alphaChannelName}"]`)
+      ).toHaveCount(0);
+    });
+  });
+
+  test('shows local room history on first saved-server click', async ({ createClient }) => {
+    const scenario = await createSingleClientChatScenario(createClient);
+    const alphaServerName = `History Alpha ${uniqueName('rail')}`;
+    const betaServerName = `History Beta ${uniqueName('rail')}`;
+    const alphaMessage = `Alpha history message ${uniqueName('msg')}`;
+    const betaMessage = `Beta history message ${uniqueName('msg')}`;
+
+    await test.step('Create first server and send a local message', async () => {
+      await createServerAndOpenRoom(scenario.search, scenario.client.page, alphaServerName, 'Rail history alpha server');
+      await scenario.messages.sendMessage(alphaMessage);
+      await expect(scenario.messages.getMessageItemByText(alphaMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Create second server and send a different local message', async () => {
+      await createServerAndOpenRoom(scenario.search, scenario.client.page, betaServerName, 'Rail history beta server');
+      await scenario.messages.sendMessage(betaMessage);
+      await expect(scenario.messages.getMessageItemByText(betaMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Opening first server once restores its history immediately', async () => {
+      await openSavedRoomByName(scenario.client.page, alphaServerName);
+      await expect(scenario.messages.getMessageItemByText(alphaMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Opening second server once restores its history immediately', async () => {
+      await openSavedRoomByName(scenario.client.page, betaServerName);
+      await expect(scenario.messages.getMessageItemByText(betaMessage)).toBeVisible({ timeout: 20_000 });
+    });
+  });
+
   test('syncs messages in a newly created text channel', async ({ createClient }) => {
     const scenario = await createChatScenario(createClient);
     const channelName = uniqueName('updates');
@@ -143,6 +218,43 @@ interface ChatScenario {
   bobMessages: ChatMessagesPage;
 }
 
+interface SingleClientChatScenario {
+  client: Client;
+  messages: ChatMessagesPage;
+  room: ChatRoomPage;
+  search: ServerSearchPage;
+}
+
+async function createSingleClientChatScenario(createClient: () => Promise<Client>): Promise<SingleClientChatScenario> {
+  const suffix = uniqueName('solo');
+  const client = await createClient();
+  const credentials = {
+    username: `solo_${suffix}`,
+    displayName: 'Solo',
+    password: 'TestPass123!'
+  };
+
+  await installChatFeatureMocks(client.page);
+
+  const registerPage = new RegisterPage(client.page);
+
+  await registerPage.goto();
+  await registerPage.register(
+    credentials.username,
+    credentials.displayName,
+    credentials.password
+  );
+
+  await expect(client.page).toHaveURL(/\/search/, { timeout: 15_000 });
+
+  return {
+    client,
+    messages: new ChatMessagesPage(client.page),
+    room: new ChatRoomPage(client.page),
+    search: new ServerSearchPage(client.page)
+  };
+}
+
 async function createChatScenario(createClient: () => Promise<Client>): Promise<ChatScenario> {
   const suffix = uniqueName('chat');
   const serverName = `Chat Server ${suffix}`;
@@ -217,6 +329,52 @@ async function createChatScenario(createClient: () => Promise<Client>): Promise<
   };
 }
 
+async function createServerAndOpenRoom(
+  searchPage: ServerSearchPage,
+  page: Page,
+  serverName: string,
+  description: string
+): Promise<void> {
+  await searchPage.createServer(serverName, { description });
+  await expect(page).toHaveURL(/\/room\//, { timeout: 15_000 });
+  await waitForCurrentRoomName(page, serverName);
+}
+
+async function openSavedRoomByName(page: Page, roomName: string): Promise<void> {
+  const roomButton = page.locator(`button[title="${roomName}"]`);
+
+  await expect(roomButton).toBeVisible({ timeout: 20_000 });
+  await roomButton.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+  await waitForCurrentRoomName(page, roomName);
+}
+
+async function waitForCurrentRoomName(page: Page, roomName: string, timeout = 20_000): Promise<void> {
+  await page.waitForFunction(
+    (expectedRoomName) => {
+      interface RoomShape { name?: string }
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+
+      return currentRoom?.name === expectedRoomName;
+    },
+    roomName,
+    { timeout }
+  );
+}
+
 async function installChatFeatureMocks(page: Page): Promise<void> {
   await page.route('**/api/klipy/config', async (route) => {
     await route.fulfill({

e2e/tests/chat/notifications.spec.ts

@@ -0,0 +1,264 @@
+import {
+  expect,
+  type Locator,
+  type Page
+} from '@playwright/test';
+import {
+  test,
+  type Client
+} from '../../fixtures/multi-client';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+import { ChatMessagesPage } from '../../pages/chat-messages.page';
+
+interface DesktopNotificationRecord {
+  title: string;
+  body: string;
+}
+
+interface NotificationScenario {
+  alice: Client;
+  bob: Client;
+  aliceRoom: ChatRoomPage;
+  bobRoom: ChatRoomPage;
+  bobMessages: ChatMessagesPage;
+  serverName: string;
+  channelName: string;
+}
+
+test.describe('Chat notifications', () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test('shows desktop notifications and unread badges for inactive channels', async ({ createClient }) => {
+    const scenario = await createNotificationScenario(createClient);
+    const message = `Background notification ${uniqueName('msg')}`;
+
+    await test.step('Bob sends a message to Alice\'s inactive channel', async () => {
+      await clearDesktopNotifications(scenario.alice.page);
+      await scenario.bobRoom.joinTextChannel(scenario.channelName);
+      await scenario.bobMessages.sendMessage(message);
+    });
+
+    await test.step('Alice receives a desktop notification with the channel preview', async () => {
+      const notification = await waitForDesktopNotification(scenario.alice.page);
+
+      expect(notification).toEqual({
+        title: `${scenario.serverName} · #${scenario.channelName}`,
+        body: `Bob: ${message}`
+      });
+    });
+
+    await test.step('Alice sees unread badges for the room and the inactive channel', async () => {
+      await expect(getUnreadBadge(getSavedRoomButton(scenario.alice.page, scenario.serverName))).toHaveText('1', { timeout: 20_000 });
+      await expect(getUnreadBadge(getTextChannelButton(scenario.alice.page, scenario.channelName))).toHaveText('1', { timeout: 20_000 });
+    });
+  });
+
+  test('keeps unread badges visible when a muted channel suppresses desktop popups', async ({ createClient }) => {
+    const scenario = await createNotificationScenario(createClient);
+    const message = `Muted notification ${uniqueName('msg')}`;
+
+    await test.step('Alice mutes the inactive text channel', async () => {
+      await muteTextChannel(scenario.alice.page, scenario.channelName);
+      await clearDesktopNotifications(scenario.alice.page);
+    });
+
+    await test.step('Bob sends a message into the muted channel', async () => {
+      await scenario.bobRoom.joinTextChannel(scenario.channelName);
+      await scenario.bobMessages.sendMessage(message);
+    });
+
+    await test.step('Alice still sees unread badges for the room and channel', async () => {
+      await expect(getUnreadBadge(getSavedRoomButton(scenario.alice.page, scenario.serverName))).toHaveText('1', { timeout: 20_000 });
+      await expect(getUnreadBadge(getTextChannelButton(scenario.alice.page, scenario.channelName))).toHaveText('1', { timeout: 20_000 });
+    });
+
+    await test.step('Alice does not get a muted desktop popup', async () => {
+      const notificationAppeared = await waitForAnyDesktopNotification(scenario.alice.page, 1_500);
+
+      expect(notificationAppeared).toBe(false);
+    });
+  });
+});
+
+async function createNotificationScenario(createClient: () => Promise<Client>): Promise<NotificationScenario> {
+  const suffix = uniqueName('notify');
+  const serverName = `Notifications Server ${suffix}`;
+  const channelName = uniqueName('updates');
+  const aliceCredentials = {
+    username: `alice_${suffix}`,
+    displayName: 'Alice',
+    password: 'TestPass123!'
+  };
+  const bobCredentials = {
+    username: `bob_${suffix}`,
+    displayName: 'Bob',
+    password: 'TestPass123!'
+  };
+  const alice = await createClient();
+  const bob = await createClient();
+
+  await installDesktopNotificationSpy(alice.page);
+
+  await registerUser(alice.page, aliceCredentials.username, aliceCredentials.displayName, aliceCredentials.password);
+  await registerUser(bob.page, bobCredentials.username, bobCredentials.displayName, bobCredentials.password);
+
+  const aliceSearch = new ServerSearchPage(alice.page);
+
+  await aliceSearch.createServer(serverName, {
+    description: 'E2E notification coverage server'
+  });
+  await expect(alice.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  const bobSearch = new ServerSearchPage(bob.page);
+  const serverCard = bob.page.locator('button', { hasText: serverName }).first();
+
+  await bobSearch.searchInput.fill(serverName);
+  await expect(serverCard).toBeVisible({ timeout: 15_000 });
+  await serverCard.click();
+  await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  const aliceRoom = new ChatRoomPage(alice.page);
+  const bobRoom = new ChatRoomPage(bob.page);
+  const aliceMessages = new ChatMessagesPage(alice.page);
+  const bobMessages = new ChatMessagesPage(bob.page);
+
+  await aliceMessages.waitForReady();
+  await bobMessages.waitForReady();
+  await aliceRoom.ensureTextChannelExists(channelName);
+  await expect(getTextChannelButton(alice.page, channelName)).toBeVisible({ timeout: 20_000 });
+
+  return {
+    alice,
+    bob,
+    aliceRoom,
+    bobRoom,
+    bobMessages,
+    serverName,
+    channelName
+  };
+}
+
+async function registerUser(page: Page, username: string, displayName: string, password: string): Promise<void> {
+  const registerPage = new RegisterPage(page);
+
+  await registerPage.goto();
+  await registerPage.register(username, displayName, password);
+  await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
+}
+
+async function installDesktopNotificationSpy(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const notifications: DesktopNotificationRecord[] = [];
+
+    class MockNotification {
+      static permission = 'granted';
+
+      static async requestPermission(): Promise<NotificationPermission> {
+        return 'granted';
+      }
+
+      onclick: (() => void) | null = null;
+
+      constructor(title: string, options?: NotificationOptions) {
+        notifications.push({
+          title,
+          body: options?.body ?? ''
+        });
+      }
+
+      close(): void {
+        return;
+      }
+    }
+
+    Object.defineProperty(window, '__desktopNotifications', {
+      value: notifications,
+      configurable: true
+    });
+
+    Object.defineProperty(window, 'Notification', {
+      value: MockNotification,
+      configurable: true,
+      writable: true
+    });
+  });
+}
+
+async function clearDesktopNotifications(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    (window as WindowWithDesktopNotifications).__desktopNotifications.length = 0;
+  });
+}
+
+async function waitForDesktopNotification(page: Page): Promise<DesktopNotificationRecord> {
+  await expect.poll(
+    async () => (await readDesktopNotifications(page)).length,
+    {
+      timeout: 20_000,
+      message: 'Expected a desktop notification to be emitted'
+    }
+  ).toBeGreaterThan(0);
+
+  const notifications = await readDesktopNotifications(page);
+
+  return notifications[notifications.length - 1];
+}
+
+async function waitForAnyDesktopNotification(page: Page, timeout: number): Promise<boolean> {
+  try {
+    await page.waitForFunction(
+      () => (window as WindowWithDesktopNotifications).__desktopNotifications.length > 0,
+      undefined,
+      { timeout }
+    );
+
+    return true;
+  } catch (error) {
+    if (error instanceof Error && error.name === 'TimeoutError') {
+      return false;
+    }
+
+    throw error;
+  }
+}
+
+async function readDesktopNotifications(page: Page): Promise<DesktopNotificationRecord[]> {
+  return page.evaluate(() => {
+    return [...(window as WindowWithDesktopNotifications).__desktopNotifications];
+  });
+}
+
+async function muteTextChannel(page: Page, channelName: string): Promise<void> {
+  const channelButton = getTextChannelButton(page, channelName);
+  const contextMenu = page.locator('app-context-menu');
+
+  await expect(channelButton).toBeVisible({ timeout: 20_000 });
+  await channelButton.click({ button: 'right' });
+  await expect(contextMenu.getByRole('button', { name: 'Mute Notifications' })).toBeVisible({ timeout: 10_000 });
+  await contextMenu.getByRole('button', { name: 'Mute Notifications' }).click();
+  await expect(contextMenu).toHaveCount(0);
+}
+
+function getSavedRoomButton(page: Page, roomName: string): Locator {
+  return page.locator(`button[title="${roomName}"]`).first();
+}
+
+function getTextChannelButton(page: Page, channelName: string): Locator {
+  return page.locator('app-rooms-side-panel').first()
+    .locator(`button[data-channel-type="text"][data-channel-name="${channelName}"]`)
+    .first();
+}
+
+function getUnreadBadge(container: Locator): Locator {
+  return container.locator('span.rounded-full').first();
+}
+
+function uniqueName(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+interface WindowWithDesktopNotifications extends Window {
+  __desktopNotifications: DesktopNotificationRecord[];
+}

e2e/tests/chat/profile-avatar-sync.spec.ts

@@ -1,7 +1,4 @@
-import {
-  mkdtemp,
-  rm
-} from 'node:fs/promises';
+import { mkdtemp, rm } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 import {
@@ -9,11 +6,9 @@ import {
   type BrowserContext,
   type Page
 } from '@playwright/test';
-import {
-  test,
-  expect
-} from '../../fixtures/multi-client';
+import { test, expect } from '../../fixtures/multi-client';
 import { installTestServerEndpoint } from '../../helpers/seed-test-endpoint';
+import { installWebRTCTracking } from '../../helpers/webrtc-helpers';
 import { LoginPage } from '../../pages/login.page';
 import { RegisterPage } from '../../pages/register.page';
 import { ServerSearchPage } from '../../pages/server-search.page';
@@ -40,17 +35,39 @@ interface PersistentClient {
   userDataDir: string;
 }
 
+interface ProfileMetadata {
+  description?: string;
+  displayName: string;
+}
+
 const STATIC_GIF_BASE64 = 'R0lGODlhAQABAPAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
-const GIF_FRAME_MARKER = Buffer.from([0x21, 0xF9, 0x04]);
-const NETSCAPE_LOOP_EXTENSION = Buffer.from([
-  0x21, 0xFF, 0x0B,
-  0x4E, 0x45, 0x54, 0x53, 0x43, 0x41, 0x50, 0x45, 0x32, 0x2E, 0x30,
-  0x03, 0x01, 0x00, 0x00, 0x00
+const GIF_FRAME_MARKER = Buffer.from([
+  0x21,
+  0xF9,
+  0x04
 ]);
-const CLIENT_LAUNCH_ARGS = [
-  '--use-fake-device-for-media-stream',
-  '--use-fake-ui-for-media-stream'
-];
+const NETSCAPE_LOOP_EXTENSION = Buffer.from([
+  0x21,
+  0xFF,
+  0x0B,
+  0x4E,
+  0x45,
+  0x54,
+  0x53,
+  0x43,
+  0x41,
+  0x50,
+  0x45,
+  0x32,
+  0x2E,
+  0x30,
+  0x03,
+  0x01,
+  0x00,
+  0x00,
+  0x00
+]);
+const CLIENT_LAUNCH_ARGS = ['--use-fake-device-for-media-stream', '--use-fake-ui-for-media-stream'];
 const VOICE_CHANNEL = 'General';
 
 test.describe('Profile avatar sync', () => {
@@ -100,6 +117,8 @@ test.describe('Profile avatar sync', () => {
         await joinServerFromSearch(bob.page, serverName);
         await waitForRoomReady(alice.page);
         await waitForRoomReady(bob.page);
+        await waitForConnectedPeerCount(alice.page, 1);
+        await waitForConnectedPeerCount(bob.page, 1);
         await expectUserRowVisible(bob.page, aliceUser.displayName);
       });
 
@@ -126,6 +145,8 @@ test.describe('Profile avatar sync', () => {
         await registerUser(carol);
         await joinServerFromSearch(carol.page, serverName);
         await waitForRoomReady(carol.page);
+        await waitForConnectedPeerCount(alice.page, 2);
+        await waitForConnectedPeerCount(carol.page, 1);
 
         await expectSidebarAvatar(carol.page, aliceUser.displayName, avatarA.dataUrl);
       });
@@ -177,6 +198,134 @@ test.describe('Profile avatar sync', () => {
   });
 });
 
+test.describe('Profile metadata sync', () => {
+  test.describe.configure({ timeout: 240_000 });
+
+  test('syncs display name and description changes for online and late-joining users and persists after restart', async ({ testServer }) => {
+    const suffix = uniqueName('profile');
+    const serverName = `Profile Sync Server ${suffix}`;
+    const messageText = `Profile sync message ${suffix}`;
+    const firstProfile: ProfileMetadata = {
+      displayName: `Alice One ${suffix}`,
+      description: `First synced profile description ${suffix}`
+    };
+    const secondProfile: ProfileMetadata = {
+      displayName: `Alice Two ${suffix}`,
+      description: `Second synced profile description ${suffix}`
+    };
+    const aliceUser: TestUser = {
+      username: `alice_${suffix}`,
+      displayName: 'Alice',
+      password: 'TestPass123!'
+    };
+    const bobUser: TestUser = {
+      username: `bob_${suffix}`,
+      displayName: 'Bob',
+      password: 'TestPass123!'
+    };
+    const carolUser: TestUser = {
+      username: `carol_${suffix}`,
+      displayName: 'Carol',
+      password: 'TestPass123!'
+    };
+    const clients: PersistentClient[] = [];
+
+    try {
+      const alice = await createPersistentClient(aliceUser, testServer.port);
+      const bob = await createPersistentClient(bobUser, testServer.port);
+
+      clients.push(alice, bob);
+
+      await test.step('Alice and Bob register, create a server, and join the same room', async () => {
+        await registerUser(alice);
+        await registerUser(bob);
+
+        const aliceSearchPage = new ServerSearchPage(alice.page);
+
+        await aliceSearchPage.createServer(serverName, {
+          description: 'Profile synchronization E2E coverage'
+        });
+
+        await expect(alice.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+        await joinServerFromSearch(bob.page, serverName);
+        await waitForRoomReady(alice.page);
+        await waitForRoomReady(bob.page);
+        await waitForConnectedPeerCount(alice.page, 1);
+        await waitForConnectedPeerCount(bob.page, 1);
+        await expectUserRowVisible(bob.page, aliceUser.displayName);
+      });
+
+      const roomUrl = alice.page.url();
+
+      await test.step('Alice updates her profile while Bob is online and Bob sees it live', async () => {
+        await updateProfileFromRoomSidebar(alice.page, {
+          displayName: aliceUser.displayName
+        }, firstProfile);
+
+        await expectUserRowVisible(alice.page, firstProfile.displayName);
+        await expectUserRowVisible(bob.page, firstProfile.displayName);
+        await expectProfileCardDetails(bob.page, firstProfile);
+      });
+
+      const carol = await createPersistentClient(carolUser, testServer.port);
+
+      clients.push(carol);
+
+      await test.step('Carol joins after the first change and sees the updated profile', async () => {
+        await registerUser(carol);
+        await joinServerFromSearch(carol.page, serverName);
+        await waitForRoomReady(carol.page);
+        await waitForConnectedPeerCount(alice.page, 2);
+        await waitForConnectedPeerCount(carol.page, 1);
+
+        await expectUserRowVisible(carol.page, firstProfile.displayName);
+        await expectProfileCardDetails(carol.page, firstProfile);
+      });
+
+      await test.step('Alice changes her profile again and new chat messages use the latest display name', async () => {
+        await updateProfileFromRoomSidebar(alice.page, firstProfile, secondProfile);
+
+        await expectUserRowVisible(alice.page, secondProfile.displayName);
+        await expectUserRowVisible(bob.page, secondProfile.displayName);
+        await expectUserRowVisible(carol.page, secondProfile.displayName);
+        await expectProfileCardDetails(bob.page, secondProfile);
+        await expectProfileCardDetails(carol.page, secondProfile);
+
+        const aliceMessagesPage = new ChatMessagesPage(alice.page);
+
+        await aliceMessagesPage.sendMessage(messageText);
+
+        await expectChatMessageSenderName(alice.page, messageText, secondProfile.displayName);
+        await expectChatMessageSenderName(bob.page, messageText, secondProfile.displayName);
+        await expectChatMessageSenderName(carol.page, messageText, secondProfile.displayName);
+      });
+
+      await test.step('Bob, Carol, and Alice keep the latest profile after a full app restart', async () => {
+        await restartPersistentClient(bob, testServer.port);
+        await openRoomAfterRestart(bob, roomUrl);
+        await expectUserRowVisible(bob.page, secondProfile.displayName);
+        await expectProfileCardDetails(bob.page, secondProfile);
+
+        await restartPersistentClient(carol, testServer.port);
+        await openRoomAfterRestart(carol, roomUrl);
+        await expectUserRowVisible(carol.page, secondProfile.displayName);
+        await expectProfileCardDetails(carol.page, secondProfile);
+
+        await restartPersistentClient(alice, testServer.port);
+        await openRoomAfterRestart(alice, roomUrl);
+        await expectUserRowVisible(alice.page, secondProfile.displayName);
+        await expectProfileCardDetails(alice.page, secondProfile);
+      });
+    } finally {
+      await Promise.all(clients.map(async (client) => {
+        await closePersistentClient(client);
+        await rm(client.userDataDir, { recursive: true, force: true });
+      }));
+    }
+  });
+});
+
 async function createPersistentClient(user: TestUser, testServerPort: number): Promise<PersistentClient> {
   const userDataDir = await mkdtemp(join(tmpdir(), 'metoyou-avatar-e2e-'));
   const session = await launchPersistentSession(userDataDir, testServerPort);
@@ -220,6 +369,8 @@ async function launchPersistentSession(
 
   const page = context.pages()[0] ?? await context.newPage();
 
+  await installWebRTCTracking(page);
+
   return { context, page };
 }
 
@@ -288,6 +439,43 @@ async function uploadAvatarFromRoomSidebar(
   await expect(applyButton).not.toBeVisible({ timeout: 10_000 });
 }
 
+async function updateProfileFromRoomSidebar(
+  page: Page,
+  currentProfile: ProfileMetadata,
+  nextProfile: ProfileMetadata
+): Promise<void> {
+  const profileCard = await openProfileCardFromUserRow(page, currentProfile.displayName);
+  const displayNameButton = profileCard.getByRole('button', { name: currentProfile.displayName, exact: true });
+
+  await expect(displayNameButton).toBeVisible({ timeout: 10_000 });
+  await displayNameButton.click();
+
+  const displayNameInput = profileCard.locator('input[type="text"]').first();
+
+  await expect(displayNameInput).toBeVisible({ timeout: 10_000 });
+  await displayNameInput.fill(nextProfile.displayName);
+  await displayNameInput.blur();
+
+  await expect(profileCard.locator('input[type="text"]')).toHaveCount(0, { timeout: 10_000 });
+
+  const currentDescriptionText = currentProfile.description || 'Add a description';
+
+  await profileCard.getByText(currentDescriptionText, { exact: true }).click();
+
+  const descriptionInput = profileCard.locator('textarea').first();
+
+  await expect(descriptionInput).toBeVisible({ timeout: 10_000 });
+  await descriptionInput.fill(nextProfile.description || '');
+  await descriptionInput.blur();
+
+  await expect(profileCard.locator('textarea')).toHaveCount(0, { timeout: 10_000 });
+  await expect(profileCard.getByText(nextProfile.displayName, { exact: true })).toBeVisible({ timeout: 10_000 });
+
+  if (nextProfile.description) {
+    await expect(profileCard.getByText(nextProfile.description, { exact: true })).toBeVisible({ timeout: 10_000 });
+  }
+}
+
 async function openRoomAfterRestart(client: PersistentClient, roomUrl: string): Promise<void> {
   await retryTransientNavigation(() => client.page.goto(roomUrl, { waitUntil: 'domcontentloaded' }));
 
@@ -332,18 +520,73 @@ async function waitForRoomReady(page: Page): Promise<void> {
   await expect(page.locator('app-rooms-side-panel').last()).toBeVisible({ timeout: 15_000 });
 }
 
+async function waitForConnectedPeerCount(page: Page, count: number, timeout = 30_000): Promise<void> {
+  await page.waitForFunction((expectedCount) => {
+    const connections = (window as {
+      __rtcConnections?: RTCPeerConnection[];
+    }).__rtcConnections ?? [];
+
+    return connections.filter((connection) => connection.connectionState === 'connected').length >= expectedCount;
+  }, count, { timeout });
+}
+
+async function openProfileCardFromUserRow(page: Page, displayName: string) {
+  await closeProfileCard(page);
+
+  const row = getUserRow(page, displayName);
+
+  await expect(row).toBeVisible({ timeout: 20_000 });
+  await row.click();
+
+  const profileCard = page.locator('app-profile-card');
+
+  await expect(profileCard).toBeVisible({ timeout: 10_000 });
+
+  return profileCard;
+}
+
+async function closeProfileCard(page: Page): Promise<void> {
+  const profileCard = page.locator('app-profile-card');
+
+  if (await profileCard.count() === 0) {
+    return;
+  }
+
+  try {
+    await expect(profileCard).toBeVisible({ timeout: 1_000 });
+  } catch {
+    return;
+  }
+
+  await page.mouse.click(8, 8);
+  await expect(profileCard).toHaveCount(0, { timeout: 10_000 });
+}
+
 function getUserRow(page: Page, displayName: string) {
   const usersSidePanel = page.locator('app-rooms-side-panel').last();
 
   return usersSidePanel.locator('[role="button"]').filter({
     has: page.getByText(displayName, { exact: true })
-  }).first();
+  })
+    .first();
 }
 
 async function expectUserRowVisible(page: Page, displayName: string): Promise<void> {
   await expect(getUserRow(page, displayName)).toBeVisible({ timeout: 20_000 });
 }
 
+async function expectProfileCardDetails(page: Page, profile: ProfileMetadata): Promise<void> {
+  const profileCard = await openProfileCardFromUserRow(page, profile.displayName);
+
+  await expect(profileCard.getByText(profile.displayName, { exact: true })).toBeVisible({ timeout: 20_000 });
+
+  if (profile.description) {
+    await expect(profileCard.getByText(profile.description, { exact: true })).toBeVisible({ timeout: 20_000 });
+  }
+
+  await closeProfileCard(page);
+}
+
 async function expectSidebarAvatar(page: Page, displayName: string, expectedDataUrl: string): Promise<void> {
   const row = getUserRow(page, displayName);
 
@@ -400,6 +643,14 @@ async function expectChatMessageAvatar(page: Page, messageText: string, expected
   }).toBe(expectedDataUrl);
 }
 
+async function expectChatMessageSenderName(page: Page, messageText: string, expectedDisplayName: string): Promise<void> {
+  const messagesPage = new ChatMessagesPage(page);
+  const messageItem = messagesPage.getMessageItemByText(messageText);
+
+  await expect(messageItem).toBeVisible({ timeout: 20_000 });
+  await expect(messageItem.getByText(expectedDisplayName, { exact: true })).toBeVisible({ timeout: 20_000 });
+}
+
 async function expectVoiceControlsAvatar(page: Page, expectedDataUrl: string): Promise<void> {
   const voiceControls = page.locator('app-voice-controls');
 
@@ -431,7 +682,11 @@ function buildAnimatedGifUpload(label: string): AvatarUploadPayload {
   const frame = baseGif.subarray(frameStart, baseGif.length - 1);
   const commentData = Buffer.from(label, 'ascii');
   const commentExtension = Buffer.concat([
-    Buffer.from([0x21, 0xFE, commentData.length]),
+    Buffer.from([
+      0x21,
+      0xFE,
+      commentData.length
+    ]),
     commentData,
     Buffer.from([0x00])
   ]);
@@ -454,5 +709,6 @@ function buildAnimatedGifUpload(label: string): AvatarUploadPayload {
 }
 
 function uniqueName(prefix: string): string {
-  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  return `${prefix}-${Date.now()}-${Math.random().toString(36)
+    .slice(2, 8)}`;
 }

e2e/tests/screen-share/screen-share.spec.ts

@@ -8,7 +8,8 @@ import {
   waitForVideoFlow,
   waitForOutboundVideoFlow,
   waitForInboundVideoFlow,
-  dumpRtcDiagnostics
+  dumpRtcDiagnostics,
+  installAutoResumeAudioContext
 } from '../../helpers/webrtc-helpers';
 import { RegisterPage } from '../../pages/register.page';
 import { ServerSearchPage } from '../../pages/server-search.page';
@@ -38,7 +39,7 @@ async function registerUser(page: import('@playwright/test').Page, user: typeof
   await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
 }
 
-/** Both users register → Alice creates server → Bob joins. */
+/** Both users register -> Alice creates server -> Bob joins. */
 async function setupServerWithBothUsers(
   alice: { page: import('@playwright/test').Page },
   bob: { page: import('@playwright/test').Page }
@@ -80,19 +81,45 @@ async function joinVoiceTogether(
     await expect(existingChannel).toBeVisible({ timeout: 10_000 });
   }
 
-  await aliceRoom.joinVoiceChannel(VOICE_CHANNEL);
-  await expect(alice.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
-
   const bobRoom = new ChatRoomPage(bob.page);
+  const doJoin = async () => {
+    await aliceRoom.joinVoiceChannel(VOICE_CHANNEL);
+    await expect(alice.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
 
-  await bobRoom.joinVoiceChannel(VOICE_CHANNEL);
-  await expect(bob.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+    await bobRoom.joinVoiceChannel(VOICE_CHANNEL);
+    await expect(bob.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
 
-  // Wait for WebRTC + audio pipeline
-  await waitForPeerConnected(alice.page, 30_000);
-  await waitForPeerConnected(bob.page, 30_000);
-  await waitForAudioStatsPresent(alice.page, 20_000);
-  await waitForAudioStatsPresent(bob.page, 20_000);
+    // Wait for WebRTC + audio pipeline
+    await waitForPeerConnected(alice.page, 30_000);
+    await waitForPeerConnected(bob.page, 30_000);
+    await waitForAudioStatsPresent(alice.page, 20_000);
+    await waitForAudioStatsPresent(bob.page, 20_000);
+  };
+
+  await doJoin();
+
+  // Chromium's --use-fake-device-for-media-stream can produce a silent
+  // capture track on the very first getUserMedia call.  If bidirectional
+  // audio doesn't flow within a short window, leave and rejoin voice to
+  // re-acquire the mic (second getUserMedia on a warm device works).
+  const aliceDelta = await waitForAudioFlow(alice.page, 10_000);
+  const bobDelta = await waitForAudioFlow(bob.page, 10_000);
+  const aliceFlowing =
+    (aliceDelta.outboundBytesDelta > 0 || aliceDelta.outboundPacketsDelta > 0) &&
+    (aliceDelta.inboundBytesDelta > 0 || aliceDelta.inboundPacketsDelta > 0);
+  const bobFlowing =
+    (bobDelta.outboundBytesDelta > 0 || bobDelta.outboundPacketsDelta > 0) &&
+    (bobDelta.inboundBytesDelta > 0 || bobDelta.inboundPacketsDelta > 0);
+
+  if (!aliceFlowing || !bobFlowing) {
+    // Leave voice
+    await aliceRoom.disconnectButton.click();
+    await bobRoom.disconnectButton.click();
+    await alice.page.waitForTimeout(2_000);
+
+    // Rejoin
+    await doJoin();
+  }
 
   // Expand voice workspace on both clients so the demand-driven screen
   // share request flow can fire (requires connectRemoteShares = true).
@@ -142,6 +169,20 @@ test.describe('Screen sharing', () => {
 
     await installWebRTCTracking(alice.page);
     await installWebRTCTracking(bob.page);
+    await installAutoResumeAudioContext(alice.page);
+    await installAutoResumeAudioContext(bob.page);
+
+    // Seed deterministic voice settings so noise reduction doesn't
+    // swallow the fake audio tone.
+    const voiceSettings = JSON.stringify({
+      inputVolume: 100, outputVolume: 100, audioBitrate: 96,
+      latencyProfile: 'balanced', includeSystemAudio: false,
+      noiseReduction: false, screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    });
+
+    await alice.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
+    await bob.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
 
     alice.page.on('console', msg => console.log('[Alice]', msg.text()));
     bob.page.on('console', msg => console.log('[Bob]', msg.text()));
@@ -251,6 +292,18 @@ test.describe('Screen sharing', () => {
 
     await installWebRTCTracking(alice.page);
     await installWebRTCTracking(bob.page);
+    await installAutoResumeAudioContext(alice.page);
+    await installAutoResumeAudioContext(bob.page);
+
+    const voiceSettings = JSON.stringify({
+      inputVolume: 100, outputVolume: 100, audioBitrate: 96,
+      latencyProfile: 'balanced', includeSystemAudio: false,
+      noiseReduction: false, screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    });
+
+    await alice.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
+    await bob.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
 
     alice.page.on('console', msg => console.log('[Alice]', msg.text()));
     bob.page.on('console', msg => console.log('[Bob]', msg.text()));
@@ -323,6 +376,18 @@ test.describe('Screen sharing', () => {
 
     await installWebRTCTracking(alice.page);
     await installWebRTCTracking(bob.page);
+    await installAutoResumeAudioContext(alice.page);
+    await installAutoResumeAudioContext(bob.page);
+
+    const voiceSettings = JSON.stringify({
+      inputVolume: 100, outputVolume: 100, audioBitrate: 96,
+      latencyProfile: 'balanced', includeSystemAudio: false,
+      noiseReduction: false, screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    });
+
+    await alice.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
+    await bob.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
 
     alice.page.on('console', msg => console.log('[Alice]', msg.text()));
     bob.page.on('console', msg => console.log('[Bob]', msg.text()));

e2e/tests/settings/connectivity-warning.spec.ts

@@ -0,0 +1,227 @@
+import { test, expect } from '../../fixtures/multi-client';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+import {
+  installAutoResumeAudioContext,
+  installWebRTCTracking,
+  waitForConnectedPeerCount
+} from '../../helpers/webrtc-helpers';
+
+const VOICE_SETTINGS = JSON.stringify({
+  inputVolume: 100,
+  outputVolume: 100,
+  audioBitrate: 96,
+  latencyProfile: 'balanced',
+  includeSystemAudio: false,
+  noiseReduction: false,
+  screenShareQuality: 'balanced',
+  askScreenShareQuality: false
+});
+
+/**
+ * Seed deterministic voice settings on a page so noise reduction and
+ * input gating don't interfere with the fake audio tone.
+ */
+async function seedVoiceSettings(page: import('@playwright/test').Page): Promise<void> {
+  await page.addInitScript((settings: string) => {
+    localStorage.setItem('metoyou_voice_settings', settings);
+  }, VOICE_SETTINGS);
+}
+
+/**
+ * Close all of a client's RTCPeerConnections and prevent any
+ * reconnection by sabotaging the SDP negotiation methods on the
+ * prototype - new connections get created but can never complete ICE.
+ *
+ * Chromium doesn't fire `connectionstatechange` on programmatic
+ * `close()`, so we dispatch the event manually so the app's recovery
+ * code runs and updates the connected-peers signal.
+ */
+async function killAndBlockPeerConnections(page: import('@playwright/test').Page): Promise<void> {
+  await page.evaluate(() => {
+    // Sabotage SDP methods so no NEW connections can negotiate.
+    const proto = RTCPeerConnection.prototype;
+
+    proto.createOffer = () => Promise.reject(new DOMException('blocked', 'NotAllowedError'));
+    proto.createAnswer = () => Promise.reject(new DOMException('blocked', 'NotAllowedError'));
+    proto.setLocalDescription = () => Promise.reject(new DOMException('blocked', 'NotAllowedError'));
+    proto.setRemoteDescription = () => Promise.reject(new DOMException('blocked', 'NotAllowedError'));
+
+    // Close every existing connection and manually fire the event
+    // Chromium omits when close() is called from JS.
+    const connections = (window as { __rtcConnections?: RTCPeerConnection[] }).__rtcConnections ?? [];
+
+    for (const pc of connections) {
+      try {
+        pc.close();
+        pc.dispatchEvent(new Event('connectionstatechange'));
+      } catch { /* already closed */ }
+    }
+  });
+}
+
+test.describe('Connectivity warning', () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test('shows warning icon when a peer loses all connections', async ({ createClient }) => {
+    const suffix = `connwarn_${Date.now()}`;
+    const serverName = `ConnWarn ${suffix}`;
+    const alice = await createClient();
+    const bob = await createClient();
+    const charlie = await createClient();
+
+    // ── Install WebRTC tracking & AudioContext auto-resume ──
+    for (const client of [
+      alice,
+      bob,
+      charlie
+    ]) {
+      await installWebRTCTracking(client.page);
+      await installAutoResumeAudioContext(client.page);
+      await seedVoiceSettings(client.page);
+    }
+
+    // ── Register all three users ──
+    await test.step('Register Alice', async () => {
+      const register = new RegisterPage(alice.page);
+
+      await register.goto();
+      await register.register(`alice_${suffix}`, 'Alice', 'TestPass123!');
+      await expect(alice.page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Register Bob', async () => {
+      const register = new RegisterPage(bob.page);
+
+      await register.goto();
+      await register.register(`bob_${suffix}`, 'Bob', 'TestPass123!');
+      await expect(bob.page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Register Charlie', async () => {
+      const register = new RegisterPage(charlie.page);
+
+      await register.goto();
+      await register.register(`charlie_${suffix}`, 'Charlie', 'TestPass123!');
+      await expect(charlie.page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    });
+
+    // ── Create server and have everyone join ──
+    await test.step('Alice creates a server', async () => {
+      const search = new ServerSearchPage(alice.page);
+
+      await search.createServer(serverName);
+    });
+
+    await test.step('Bob joins the server', async () => {
+      const search = new ServerSearchPage(bob.page);
+
+      await search.searchInput.fill(serverName);
+      const card = bob.page.locator('button', { hasText: serverName }).first();
+
+      await expect(card).toBeVisible({ timeout: 15_000 });
+      await card.click();
+      await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+    });
+
+    await test.step('Charlie joins the server', async () => {
+      const search = new ServerSearchPage(charlie.page);
+
+      await search.searchInput.fill(serverName);
+      const card = charlie.page.locator('button', { hasText: serverName }).first();
+
+      await expect(card).toBeVisible({ timeout: 15_000 });
+      await card.click();
+      await expect(charlie.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+    });
+
+    const aliceRoom = new ChatRoomPage(alice.page);
+    const bobRoom = new ChatRoomPage(bob.page);
+    const charlieRoom = new ChatRoomPage(charlie.page);
+
+    // ── Everyone joins voice ──
+    await test.step('All three join voice', async () => {
+      await aliceRoom.joinVoiceChannel('General');
+      await bobRoom.joinVoiceChannel('General');
+      await charlieRoom.joinVoiceChannel('General');
+    });
+
+    await test.step('All users see each other in voice', async () => {
+      // Each user should see the other two in the voice channel list.
+      await expect(
+        aliceRoom.channelsSidePanel.getByText('Bob')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        aliceRoom.channelsSidePanel.getByText('Charlie')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        bobRoom.channelsSidePanel.getByText('Alice')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        bobRoom.channelsSidePanel.getByText('Charlie')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        charlieRoom.channelsSidePanel.getByText('Alice')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        charlieRoom.channelsSidePanel.getByText('Bob')
+      ).toBeVisible({ timeout: 20_000 });
+    });
+
+    // ── Wait for full mesh to establish ──
+    await test.step('All peer connections establish', async () => {
+      // Each client should have 2 connected peers (full mesh of 3).
+      await waitForConnectedPeerCount(alice.page, 2, 30_000);
+      await waitForConnectedPeerCount(bob.page, 2, 30_000);
+      await waitForConnectedPeerCount(charlie.page, 2, 30_000);
+    });
+
+    // ── Break Charlie's connections ──
+    await test.step('Kill Charlie peer connections and block reconnection', async () => {
+      await killAndBlockPeerConnections(charlie.page);
+
+      // Give the health service time to detect the desync.
+      // Peer latency pings stop -> connectedPeers updates -> desyncPeerIds recalculates.
+      await alice.page.waitForTimeout(15_000);
+    });
+
+    // ── Assert connectivity warnings ──
+    //
+    // The warning icon (lucideAlertTriangle) is a direct sibling of the
+    // user-name span inside the same voice-row div.  Using the CSS
+    // general-sibling combinator (~) avoids accidentally matching a
+    // parent container that holds multiple rows.
+    await test.step('Alice sees warning icon next to Charlie', async () => {
+      const charlieWarning = aliceRoom.channelsSidePanel
+        .locator('span.truncate:has-text("Charlie") ~ ng-icon[name="lucideAlertTriangle"]');
+
+      await expect(charlieWarning).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Bob sees warning icon next to Charlie', async () => {
+      const charlieWarning = bobRoom.channelsSidePanel
+        .locator('span.truncate:has-text("Charlie") ~ ng-icon[name="lucideAlertTriangle"]');
+
+      await expect(charlieWarning).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Alice does NOT see warning icon next to Bob', async () => {
+      const bobWarning = aliceRoom.channelsSidePanel
+        .locator('span.truncate:has-text("Bob") ~ ng-icon[name="lucideAlertTriangle"]');
+
+      await expect(bobWarning).not.toBeVisible();
+    });
+
+    await test.step('Charlie sees local desync banner', async () => {
+      const desyncBanner = charlie.page.locator('text=You may have connectivity issues');
+
+      await expect(desyncBanner).toBeVisible({ timeout: 30_000 });
+    });
+  });
+});

e2e/tests/settings/ice-server-settings.spec.ts

@@ -0,0 +1,126 @@
+import { test, expect } from '../../fixtures/multi-client';
+import { RegisterPage } from '../../pages/register.page';
+
+test.describe('ICE server settings', () => {
+  test.describe.configure({ timeout: 120_000 });
+
+  async function registerAndOpenNetworkSettings(page: import('@playwright/test').Page, suffix: string) {
+    const register = new RegisterPage(page);
+
+    await register.goto();
+    await register.register(`user_${suffix}`, 'IceTestUser', 'TestPass123!');
+    await expect(page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    await page.getByTitle('Settings').click();
+    await expect(page.getByRole('dialog')).toBeVisible({ timeout: 10_000 });
+    await page.getByRole('button', { name: 'Network' }).click();
+  }
+
+  test('allows adding, removing, and reordering ICE servers', async ({ createClient }) => {
+    const client = await createClient();
+    const { page } = client;
+    const suffix = `ice_${Date.now()}`;
+
+    await test.step('Register and open Network settings', async () => {
+      await registerAndOpenNetworkSettings(page, suffix);
+    });
+
+    const iceSection = page.getByTestId('ice-server-settings');
+
+    await test.step('Default STUN servers are listed', async () => {
+      await expect(iceSection).toBeVisible({ timeout: 5_000 });
+      const entries = page.getByTestId('ice-server-list').locator('[data-testid^="ice-entry-"]');
+
+      await expect(entries.first()).toBeVisible({ timeout: 5_000 });
+      const count = await entries.count();
+
+      expect(count).toBeGreaterThanOrEqual(1);
+    });
+
+    await test.step('Add a STUN server', async () => {
+      await page.getByTestId('ice-type-select').selectOption('stun');
+      await page.getByTestId('ice-url-input').fill('stun:custom.example.com:3478');
+      await page.getByTestId('ice-add-button').click();
+      await expect(page.getByText('stun:custom.example.com:3478')).toBeVisible({ timeout: 5_000 });
+    });
+
+    await test.step('Add a TURN server with credentials', async () => {
+      await page.getByTestId('ice-type-select').selectOption('turn');
+      await page.getByTestId('ice-url-input').fill('turn:relay.example.com:443');
+      await page.getByTestId('ice-username-input').fill('testuser');
+      await page.getByTestId('ice-credential-input').fill('testpass');
+      await page.getByTestId('ice-add-button').click();
+      await expect(page.getByText('turn:relay.example.com:443')).toBeVisible({ timeout: 5_000 });
+      await expect(page.getByText('User: testuser')).toBeVisible({ timeout: 5_000 });
+    });
+
+    await test.step('Remove first entry and verify count decreases', async () => {
+      const entries = page.getByTestId('ice-server-list').locator('[data-testid^="ice-entry-"]');
+      const countBefore = await entries.count();
+
+      await entries.first().getByTitle('Remove')
+        .click();
+
+      await expect(entries).toHaveCount(countBefore - 1, { timeout: 5_000 });
+    });
+
+    await test.step('Reorder: move second entry up', async () => {
+      const entries = page.getByTestId('ice-server-list').locator('[data-testid^="ice-entry-"]');
+      const count = await entries.count();
+
+      if (count >= 2) {
+        const secondText = await entries.nth(1).locator('p')
+          .first()
+          .textContent();
+
+        if (!secondText) {
+          throw new Error('Expected ICE server entry text before reordering');
+        }
+
+        await entries.nth(1).getByTitle('Move up (higher priority)')
+          .click();
+
+        // Wait for the moved entry text to appear at position 0
+        await expect(entries.first().locator('p')
+          .first()).toHaveText(secondText, { timeout: 5_000 });
+      }
+    });
+
+    await test.step('Restore defaults resets list', async () => {
+      await page.getByTestId('ice-restore-defaults').click();
+      await expect(page.getByText('turn:relay.example.com:443')).not.toBeVisible({ timeout: 3_000 });
+      const entries = page.getByTestId('ice-server-list').locator('[data-testid^="ice-entry-"]');
+
+      await expect(entries.first()).toBeVisible({ timeout: 5_000 });
+    });
+
+    await test.step('Settings persist after page reload', async () => {
+      await page.getByTestId('ice-type-select').selectOption('stun');
+      await page.getByTestId('ice-url-input').fill('stun:persist-test.example.com:3478');
+      await page.getByTestId('ice-add-button').click();
+      await expect(page.getByText('stun:persist-test.example.com:3478')).toBeVisible({ timeout: 5_000 });
+
+      await page.reload({ waitUntil: 'domcontentloaded' });
+      await page.getByTitle('Settings').click();
+      await expect(page.getByRole('dialog')).toBeVisible({ timeout: 10_000 });
+      await page.getByRole('button', { name: 'Network' }).click();
+      await expect(page.getByText('stun:persist-test.example.com:3478')).toBeVisible({ timeout: 10_000 });
+    });
+  });
+
+  test('validates TURN entries require credentials', async ({ createClient }) => {
+    const client = await createClient();
+    const { page } = client;
+    const suffix = `iceval_${Date.now()}`;
+
+    await test.step('Register and open Network settings', async () => {
+      await registerAndOpenNetworkSettings(page, suffix);
+    });
+
+    await test.step('Adding TURN without credentials shows error', async () => {
+      await page.getByTestId('ice-type-select').selectOption('turn');
+      await page.getByTestId('ice-url-input').fill('turn:noncred.example.com:443');
+      await page.getByTestId('ice-add-button').click();
+      await expect(page.getByText('Username is required for TURN servers')).toBeVisible({ timeout: 5_000 });
+    });
+  });
+});

e2e/tests/settings/stun-turn-fallback.spec.ts

@@ -0,0 +1,216 @@
+import { test, expect } from '../../fixtures/multi-client';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+import {
+  dumpRtcDiagnostics,
+  installAutoResumeAudioContext,
+  installWebRTCTracking,
+  waitForAllPeerAudioFlow,
+  waitForPeerConnected,
+  waitForConnectedPeerCount,
+  waitForAudioStatsPresent
+} from '../../helpers/webrtc-helpers';
+
+const ICE_STORAGE_KEY = 'metoyou_ice_servers';
+
+interface StoredIceServerEntry {
+  type?: string;
+  urls?: string;
+}
+
+/**
+ * Tests that user-configured ICE servers are persisted and used by peer connections.
+ *
+ * On localhost TURN relay is never needed (direct always succeeds), so this test:
+ * 1. Seeds Bob's browser with an additional TURN entry via localStorage.
+ * 2. Has both users join voice with differing ICE configs.
+ * 3. Verifies both can connect and Bob's TURN entry is still in storage.
+ */
+test.describe('STUN/TURN fallback behaviour', () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test('users with different ICE configs can voice chat together', async ({ createClient }) => {
+    const suffix = `turnfb_${Date.now()}`;
+    const serverName = `Fallback ${suffix}`;
+    const alice = await createClient();
+    const bob = await createClient();
+
+    // Install WebRTC tracking before any navigation so we can inspect
+    // peer connections and audio stats.
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    // Ensure AudioContexts auto-resume so the input-gain pipeline
+    // (source -> gain -> destination) never stalls in "suspended" state.
+    await installAutoResumeAudioContext(alice.page);
+    await installAutoResumeAudioContext(bob.page);
+
+    // Set deterministic voice settings so noise reduction and input gating
+    // don't swallow the fake audio tone.
+    const voiceSettings = JSON.stringify({
+      inputVolume: 100,
+      outputVolume: 100,
+      audioBitrate: 96,
+      latencyProfile: 'balanced',
+      includeSystemAudio: false,
+      noiseReduction: false,
+      screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    });
+
+    await alice.page.addInitScript((settings: string) => {
+      localStorage.setItem('metoyou_voice_settings', settings);
+    }, voiceSettings);
+
+    await bob.page.addInitScript((settings: string) => {
+      localStorage.setItem('metoyou_voice_settings', settings);
+    }, voiceSettings);
+
+    // Seed Bob with an extra TURN entry before the app reads localStorage.
+    await bob.context.addInitScript((key: string) => {
+      try {
+        const existing = JSON.parse(localStorage.getItem(key) || '[]');
+
+        existing.push({
+          id: 'e2e-turn',
+          type: 'turn',
+          urls: 'turn:localhost:3478',
+          username: 'e2euser',
+          credential: 'e2epass'
+        });
+
+        localStorage.setItem(key, JSON.stringify(existing));
+      } catch { /* noop */ }
+    }, ICE_STORAGE_KEY);
+
+    await test.step('Register Alice', async () => {
+      const register = new RegisterPage(alice.page);
+
+      await register.goto();
+      await register.register(`alice_${suffix}`, 'Alice', 'TestPass123!');
+      await expect(alice.page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Register Bob', async () => {
+      const register = new RegisterPage(bob.page);
+
+      await register.goto();
+      await register.register(`bob_${suffix}`, 'Bob', 'TestPass123!');
+      await expect(bob.page.getByPlaceholder('Search servers...')).toBeVisible({ timeout: 30_000 });
+    });
+
+    await test.step('Alice creates a server', async () => {
+      const search = new ServerSearchPage(alice.page);
+
+      await search.createServer(serverName);
+    });
+
+    await test.step('Bob joins Alice server', async () => {
+      const search = new ServerSearchPage(bob.page);
+
+      await search.searchInput.fill(serverName);
+      const serverCard = bob.page.locator('button', { hasText: serverName }).first();
+
+      await expect(serverCard).toBeVisible({ timeout: 15_000 });
+      await serverCard.click();
+      await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+    });
+
+    const aliceRoom = new ChatRoomPage(alice.page);
+    const bobRoom = new ChatRoomPage(bob.page);
+
+    await test.step('Both join voice', async () => {
+      await aliceRoom.joinVoiceChannel('General');
+      await bobRoom.joinVoiceChannel('General');
+    });
+
+    await test.step('Both users see each other in voice', async () => {
+      await expect(
+        aliceRoom.channelsSidePanel.getByText('Bob')
+      ).toBeVisible({ timeout: 20_000 });
+
+      await expect(
+        bobRoom.channelsSidePanel.getByText('Alice')
+      ).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Peer connections establish and audio flows bidirectionally', async () => {
+      await waitForPeerConnected(alice.page, 30_000);
+      await waitForPeerConnected(bob.page, 30_000);
+      await waitForConnectedPeerCount(alice.page, 1, 30_000);
+      await waitForConnectedPeerCount(bob.page, 1, 30_000);
+
+      // Wait for audio RTP stats to appear (tracks negotiated)
+      await waitForAudioStatsPresent(alice.page, 30_000);
+      await waitForAudioStatsPresent(bob.page, 30_000);
+
+      // Allow mesh to settle - voice routing and renegotiation can
+      // cause a second offer/answer cycle after the initial connection.
+      await alice.page.waitForTimeout(5_000);
+
+      // Chromium's --use-fake-device-for-media-stream can produce a
+      // silent capture track on the very first getUserMedia call.  If
+      // bidirectional audio does not flow within a short window, leave
+      // and rejoin voice to re-acquire the mic (the second getUserMedia
+      // on a warm device always works).
+      let audioFlowing = false;
+
+      try {
+        await Promise.all([waitForAllPeerAudioFlow(alice.page, 1, 15_000), waitForAllPeerAudioFlow(bob.page, 1, 15_000)]);
+
+        audioFlowing = true;
+      } catch {
+        // Silent sender detected - rejoin voice to work around Chromium bug
+      }
+
+      if (!audioFlowing) {
+        // Leave voice
+        await aliceRoom.disconnectButton.click();
+        await bobRoom.disconnectButton.click();
+        await alice.page.waitForTimeout(2_000);
+
+        // Rejoin
+        await aliceRoom.joinVoiceChannel('General');
+        await bobRoom.joinVoiceChannel('General');
+
+        await expect(
+          aliceRoom.channelsSidePanel.getByText('Bob')
+        ).toBeVisible({ timeout: 20_000 });
+
+        await expect(
+          bobRoom.channelsSidePanel.getByText('Alice')
+        ).toBeVisible({ timeout: 20_000 });
+
+        await waitForPeerConnected(alice.page, 30_000);
+        await waitForPeerConnected(bob.page, 30_000);
+        await waitForConnectedPeerCount(alice.page, 1, 30_000);
+        await waitForConnectedPeerCount(bob.page, 1, 30_000);
+        await waitForAudioStatsPresent(alice.page, 30_000);
+        await waitForAudioStatsPresent(bob.page, 30_000);
+        await alice.page.waitForTimeout(3_000);
+      }
+
+      // Final assertion - must succeed after the (optional) rejoin.
+      try {
+        await Promise.all([waitForAllPeerAudioFlow(alice.page, 1, 60_000), waitForAllPeerAudioFlow(bob.page, 1, 60_000)]);
+      } catch (error) {
+        console.log('[Alice RTC Diagnostics]\n' + await dumpRtcDiagnostics(alice.page));
+        console.log('[Bob RTC Diagnostics]\n' + await dumpRtcDiagnostics(bob.page));
+        throw error;
+      }
+    });
+
+    await test.step('Bob still has TURN entry in localStorage', async () => {
+      const stored: StoredIceServerEntry[] = await bob.page.evaluate(
+        (key) => JSON.parse(localStorage.getItem(key) || '[]') as StoredIceServerEntry[],
+        ICE_STORAGE_KEY
+      );
+      const hasTurn = stored.some(
+        (entry) => entry.type === 'turn' && entry.urls === 'turn:localhost:3478'
+      );
+
+      expect(hasTurn).toBe(true);
+    });
+  });
+});

e2e/tests/voice/mixed-signal-config-voice.spec.ts

@@ -0,0 +1,803 @@
+import { expect, type Page } from '@playwright/test';
+import { test, type Client } from '../../fixtures/multi-client';
+import { installTestServerEndpoints, type SeededEndpointInput } from '../../helpers/seed-test-endpoint';
+import { startTestServer } from '../../helpers/test-server';
+import {
+  dumpRtcDiagnostics,
+  getConnectedPeerCount,
+  installWebRTCTracking,
+  waitForAllPeerAudioFlow,
+  waitForAudioStatsPresent,
+  waitForConnectedPeerCount,
+  waitForPeerConnected
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+import { ChatMessagesPage } from '../../pages/chat-messages.page';
+
+// ── Signal endpoint identifiers ──────────────────────────────────────
+const PRIMARY_SIGNAL_ID = 'e2e-mixed-signal-a';
+const SECONDARY_SIGNAL_ID = 'e2e-mixed-signal-b';
+// ── Room / channel names ─────────────────────────────────────────────
+const VOICE_ROOM_NAME = `Mixed Signal Voice ${Date.now()}`;
+const SECONDARY_ROOM_NAME = `Mixed Signal Chat ${Date.now()}`;
+const VOICE_CHANNEL = 'General';
+// ── User constants ───────────────────────────────────────────────────
+const USER_PASSWORD = 'TestPass123!';
+const USER_COUNT = 8;
+const EXPECTED_REMOTE_PEERS = USER_COUNT - 1;
+const STABILITY_WINDOW_MS = 20_000;
+
+// ── User signal configuration groups ─────────────────────────────────
+//
+// Group A (users 0-1): Both signal servers in network config (normal)
+// Group B (users 2-3): Only primary signal - secondary NOT in config.
+//                       They join the secondary room via invite link,
+//                       which auto-adds the endpoint.
+// Group C (users 4-5): Both signals initially, but secondary is removed
+//                       after registration. They still see the room from
+//                       search because the primary signal can discover it
+//                       via findServerAcrossActiveEndpoints fallback.
+// Group D (users 6-7): Only secondary signal in config. They join the
+//                       primary room via invite link.
+
+type SignalGroup = 'both' | 'primary-only' | 'both-then-remove-secondary' | 'secondary-only';
+
+interface TestUser {
+  username: string;
+  displayName: string;
+  password: string;
+  group: SignalGroup;
+}
+
+type TestClient = Client & { user: TestUser };
+
+function endpointsForGroup(
+  group: SignalGroup,
+  primaryUrl: string,
+  secondaryUrl: string
+): SeededEndpointInput[] {
+  switch (group) {
+    case 'both':
+      return [
+        {
+          id: PRIMARY_SIGNAL_ID,
+          name: 'E2E Signal A',
+          url: primaryUrl,
+          isActive: true,
+          status: 'online'
+        },
+        {
+          id: SECONDARY_SIGNAL_ID,
+          name: 'E2E Signal B',
+          url: secondaryUrl,
+          isActive: true,
+          status: 'online'
+        }
+      ];
+    case 'primary-only':
+      return [{ id: PRIMARY_SIGNAL_ID, name: 'E2E Signal A', url: primaryUrl, isActive: true, status: 'online' }];
+    case 'both-then-remove-secondary':
+      // Seed both initially; test will remove secondary after registration.
+      return [
+        {
+          id: PRIMARY_SIGNAL_ID,
+          name: 'E2E Signal A',
+          url: primaryUrl,
+          isActive: true,
+          status: 'online'
+        },
+        {
+          id: SECONDARY_SIGNAL_ID,
+          name: 'E2E Signal B',
+          url: secondaryUrl,
+          isActive: true,
+          status: 'online'
+        }
+      ];
+    case 'secondary-only':
+      return [{ id: SECONDARY_SIGNAL_ID, name: 'E2E Signal B', url: secondaryUrl, isActive: true, status: 'online' }];
+  }
+}
+
+test.describe('Mixed signal-config voice', () => {
+  test('8 users with different signal configs can voice, mute, deafen, and chat concurrently', async ({
+    createClient,
+    testServer
+  }) => {
+    test.setTimeout(720_000);
+
+    const secondaryServer = await startTestServer();
+
+    try {
+      const users = buildUsers();
+      const clients: TestClient[] = [];
+
+      // ── Create clients with per-group endpoint configs ───────────
+      for (const user of users) {
+        const client = await createClient();
+        const groupEndpoints = endpointsForGroup(user.group, testServer.url, secondaryServer.url);
+
+        await installTestServerEndpoints(client.context, groupEndpoints);
+        await installDeterministicVoiceSettings(client.page);
+        await installWebRTCTracking(client.page);
+
+        clients.push({ ...client, user });
+      }
+
+      // ── Register ─────────────────────────────────────────────────
+      await test.step('Register each user on their configured signal endpoint', async () => {
+        for (const client of clients) {
+          const registerPage = new RegisterPage(client.page);
+          const registrationEndpointId =
+            client.user.group === 'secondary-only' ? SECONDARY_SIGNAL_ID : PRIMARY_SIGNAL_ID;
+
+          await registerPage.goto();
+          await registerPage.serverSelect.selectOption(registrationEndpointId);
+          await registerPage.register(client.user.username, client.user.displayName, client.user.password);
+          await expect(client.page).toHaveURL(/\/search/, { timeout: 20_000 });
+        }
+      });
+
+      // ── Create rooms ────────────────────────────────────────────
+      await test.step('Create voice room on primary and chat room on secondary', async () => {
+        // Use a "both" user (client 0) to create both rooms
+        const searchPage = new ServerSearchPage(clients[0].page);
+
+        await searchPage.createServer(VOICE_ROOM_NAME, {
+          description: 'Voice room on primary signal',
+          sourceId: PRIMARY_SIGNAL_ID
+        });
+
+        await expect(clients[0].page).toHaveURL(/\/room\//, { timeout: 20_000 });
+
+        await searchPage.createServer(SECONDARY_ROOM_NAME, {
+          description: 'Chat room on secondary signal',
+          sourceId: SECONDARY_SIGNAL_ID
+        });
+
+        await expect(clients[0].page).toHaveURL(/\/room\//, { timeout: 20_000 });
+      });
+
+      // ── Create invite links ─────────────────────────────────────
+      //
+      // Group B (primary-only) needs invite to secondary room.
+      // Group D (secondary-only) needs invite to primary room.
+      let primaryRoomInviteUrl: string;
+      let secondaryRoomInviteUrl: string;
+
+      await test.step('Create invite links for cross-signal rooms', async () => {
+        // Navigate to voice room to get its ID
+        await openSavedRoomByName(clients[0].page, VOICE_ROOM_NAME);
+        const primaryRoomId = await getCurrentRoomId(clients[0].page);
+        const userId = await getCurrentUserId(clients[0].page);
+
+        // Navigate to secondary room to get its ID
+        await openSavedRoomByName(clients[0].page, SECONDARY_ROOM_NAME);
+        const secondaryRoomId = await getCurrentRoomId(clients[0].page);
+        // Create invite for primary room (voice) via API
+        const primaryInvite = await createInviteViaApi(
+          testServer.url,
+          primaryRoomId,
+          userId,
+          clients[0].user.displayName
+        );
+
+        primaryRoomInviteUrl = `/invite/${primaryInvite.id}?server=${encodeURIComponent(testServer.url)}`;
+
+        // Create invite for secondary room (chat) via API
+        const secondaryInvite = await createInviteViaApi(
+          secondaryServer.url,
+          secondaryRoomId,
+          userId,
+          clients[0].user.displayName
+        );
+
+        secondaryRoomInviteUrl = `/invite/${secondaryInvite.id}?server=${encodeURIComponent(secondaryServer.url)}`;
+      });
+
+      // ── Remove secondary endpoint for group C ───────────────────
+      await test.step('Remove secondary signal from group C users', async () => {
+        for (const client of clients.filter((clientItem) => clientItem.user.group === 'both-then-remove-secondary')) {
+          await client.page.evaluate((primaryEndpoint) => {
+            localStorage.setItem('metoyou_server_endpoints', JSON.stringify([primaryEndpoint]));
+          }, { id: PRIMARY_SIGNAL_ID, name: 'E2E Signal A', url: testServer.url, isActive: true, isDefault: false, status: 'online' });
+        }
+      });
+
+      // ── Join rooms ──────────────────────────────────────────────
+      await test.step('All users join the voice room (some via search, some via invite)', async () => {
+        for (const client of clients.slice(1)) {
+          if (client.user.group === 'secondary-only') {
+            // Group D: no primary signal -> join voice room via invite
+            await client.page.goto(primaryRoomInviteUrl);
+            await waitForInviteJoin(client.page);
+          } else {
+            // Groups A, B, C: have primary signal -> join via search
+            await joinRoomFromSearch(client.page, VOICE_ROOM_NAME);
+          }
+        }
+
+        // Navigate client 0 back to voice room
+        await openSavedRoomByName(clients[0].page, VOICE_ROOM_NAME);
+      });
+
+      await test.step('All users also join the secondary chat room', async () => {
+        for (const client of clients.slice(1)) {
+          if (client.user.group === 'primary-only') {
+            // Group B: no secondary signal -> join chat room via invite
+            await client.page.goto(secondaryRoomInviteUrl);
+            await waitForInviteJoin(client.page);
+          } else if (client.user.group === 'secondary-only') {
+            // Group D: has secondary -> join via search
+            await openSearchView(client.page);
+            await joinRoomFromSearch(client.page, SECONDARY_ROOM_NAME);
+          } else {
+            // Groups A, C: can search
+            await openSearchView(client.page);
+            await joinRoomFromSearch(client.page, SECONDARY_ROOM_NAME);
+          }
+        }
+
+        // Ensure everyone navigates back to voice room
+        for (const client of clients) {
+          await openSavedRoomByName(client.page, VOICE_ROOM_NAME);
+        }
+      });
+
+      // ── Voice channel ───────────────────────────────────────────
+      await test.step('Create voice channel and join all 8 users', async () => {
+        const hostRoom = new ChatRoomPage(clients[0].page);
+
+        await hostRoom.ensureVoiceChannelExists(VOICE_CHANNEL);
+
+        for (const client of clients) {
+          await joinVoiceChannelUntilConnected(client.page, VOICE_CHANNEL);
+        }
+
+        for (const client of clients) {
+          await waitForVoiceRosterCount(client.page, VOICE_CHANNEL, USER_COUNT);
+        }
+      });
+
+      // ── Audio mesh ──────────────────────────────────────────────
+      await test.step('All users discover peers and audio flows pairwise', async () => {
+        await Promise.all(clients.map((client) =>
+          waitForPeerConnected(client.page, 45_000)
+        ));
+
+        await Promise.all(clients.map((client) =>
+          waitForConnectedPeerCount(client.page, EXPECTED_REMOTE_PEERS, 90_000)
+        ));
+
+        await Promise.all(clients.map((client) =>
+          waitForAudioStatsPresent(client.page, 30_000)
+        ));
+
+        await clients[0].page.waitForTimeout(5_000);
+
+        await Promise.all(clients.map((client) =>
+          waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 90_000)
+        ));
+      });
+
+      // ── Voice workspace roster ──────────────────────────────────
+      await test.step('Voice workspace shows all 8 users on every client', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await openVoiceWorkspace(client.page);
+          await expect(room.voiceWorkspace).toBeVisible({ timeout: 10_000 });
+          await waitForVoiceWorkspaceUserCount(client.page, USER_COUNT);
+          await waitForVoiceRosterCount(client.page, VOICE_CHANNEL, USER_COUNT);
+        }
+      });
+
+      // ── Stability + concurrent chat ─────────────────────────────
+      await test.step('Voice stays stable 20s while some users navigate and chat on other servers', async () => {
+        // Pick 2 users from different groups to navigate away and chat
+        const chatters = [clients[2], clients[6]]; // group C + group D
+        const stayers = clients.filter((clientItem) => !chatters.includes(clientItem));
+
+        // Chatters navigate to secondary room and send messages
+        for (const chatter of chatters) {
+          await openSavedRoomByName(chatter.page, SECONDARY_ROOM_NAME);
+          await expect(chatter.page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 10_000 });
+        }
+
+        const chatPage0 = new ChatMessagesPage(chatters[0].page);
+        const chatPage1 = new ChatMessagesPage(chatters[1].page);
+
+        await chatPage0.sendMessage(`Hello from ${chatters[0].user.displayName} while in voice!`);
+        await chatPage1.sendMessage(`Reply from ${chatters[1].user.displayName} also in voice!`);
+
+        // Verify messages arrive
+        await expect(
+          chatPage0.getMessageItemByText(`Reply from ${chatters[1].user.displayName}`)
+        ).toBeVisible({ timeout: 15_000 });
+
+        await expect(
+          chatPage1.getMessageItemByText(`Hello from ${chatters[0].user.displayName}`)
+        ).toBeVisible({ timeout: 15_000 });
+
+        // Meanwhile stability loop on all clients (including chatters - voice still active)
+        const deadline = Date.now() + STABILITY_WINDOW_MS;
+
+        while (Date.now() < deadline) {
+          for (const client of stayers) {
+            await expect.poll(async () => await getConnectedPeerCount(client.page), {
+              timeout: 10_000,
+              intervals: [500, 1_000]
+            }).toBe(EXPECTED_REMOTE_PEERS);
+          }
+
+          // Check chatters still have voice peers even while viewing another room
+          for (const chatter of chatters) {
+            await expect.poll(async () => await getConnectedPeerCount(chatter.page), {
+              timeout: 10_000,
+              intervals: [500, 1_000]
+            }).toBe(EXPECTED_REMOTE_PEERS);
+          }
+
+          if (Date.now() < deadline) {
+            await clients[0].page.waitForTimeout(5_000);
+          }
+        }
+
+        // Navigate chatters back to voice room
+        for (const chatter of chatters) {
+          await openSavedRoomByName(chatter.page, VOICE_ROOM_NAME);
+        }
+
+        // Verify audio still flowing after stability window
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+
+      // ── Mute ────────────────────────────────────────────────────
+      await test.step('Mute state propagates for every user across all clients', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: false
+          });
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: false,
+            isDeafened: false
+          });
+        }
+      });
+
+      await test.step('Audio still flows on all peers after mute cycling', async () => {
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} post-mute RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+
+      // ── Deafen ──────────────────────────────────────────────────
+      await test.step('Deafen state propagates for every user across all clients', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.deafenButton.click();
+          await client.page.waitForTimeout(500);
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: true
+          });
+
+          await room.deafenButton.click();
+          await client.page.waitForTimeout(500);
+          // Un-deafen does NOT restore mute - user stays muted
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: false
+          });
+        }
+      });
+
+      await test.step('Unmute all users and verify audio flows end-to-end', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: false,
+            isDeafened: false
+          });
+        }
+
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} final RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+    } finally {
+      await secondaryServer.stop();
+    }
+  });
+});
+
+// ── User builders ────────────────────────────────────────────────────
+
+function buildUsers(): TestUser[] {
+  const groups: SignalGroup[] = [
+    'both',
+    'both', // 0-1
+    'primary-only',
+    'primary-only', // 2-3
+    'both-then-remove-secondary',
+    'both-then-remove-secondary', // 4-5
+    'secondary-only',
+    'secondary-only' // 6-7
+  ];
+
+  return groups.map((group, index) => ({
+    username: `mixed_sig_${Date.now()}_${index + 1}`,
+    displayName: `Mixed User ${index + 1}`,
+    password: USER_PASSWORD,
+    group
+  }));
+}
+
+// ── API helpers ──────────────────────────────────────────────────────
+
+async function createInviteViaApi(
+  serverBaseUrl: string,
+  roomId: string,
+  userId: string,
+  displayName: string
+): Promise<{ id: string }> {
+  const response = await fetch(`${serverBaseUrl}/api/servers/${roomId}/invites`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      requesterUserId: userId,
+      requesterDisplayName: displayName
+    })
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to create invite: ${response.status} ${await response.text()}`);
+  }
+
+  return await response.json() as { id: string };
+}
+
+async function getCurrentRoomId(page: Page): Promise<string> {
+  return await page.evaluate(() => {
+    interface RoomShape { id: string }
+    interface AngularDebugApi {
+      getComponent: (element: Element) => Record<string, unknown>;
+    }
+
+    const host = document.querySelector('app-rooms-side-panel');
+    const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+    if (!host || !debugApi?.getComponent) {
+      throw new Error('Angular debug API unavailable');
+    }
+
+    const component = debugApi.getComponent(host);
+    const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.();
+
+    if (!currentRoom?.id) {
+      throw new Error('No current room');
+    }
+
+    return currentRoom.id;
+  });
+}
+
+async function getCurrentUserId(page: Page): Promise<string> {
+  return await page.evaluate(() => {
+    interface AngularDebugApi {
+      getComponent: (element: Element) => Record<string, unknown>;
+    }
+
+    interface UserShape {
+      id: string;
+    }
+
+    const host = document.querySelector('app-rooms-side-panel');
+    const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+    if (!host || !debugApi?.getComponent) {
+      throw new Error('Angular debug API unavailable');
+    }
+
+    const component = debugApi.getComponent(host);
+    const user = (component['currentUser'] as (() => UserShape | null) | undefined)?.();
+
+    if (!user?.id) {
+      throw new Error('Current user not found');
+    }
+
+    return user.id;
+  });
+}
+
+// ── Navigation helpers ───────────────────────────────────────────────
+
+async function installDeterministicVoiceSettings(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    localStorage.setItem('metoyou_voice_settings', JSON.stringify({
+      inputVolume: 100,
+      outputVolume: 100,
+      audioBitrate: 96,
+      latencyProfile: 'balanced',
+      includeSystemAudio: false,
+      noiseReduction: false,
+      screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    }));
+  });
+}
+
+async function openSearchView(page: Page): Promise<void> {
+  const searchInput = page.getByPlaceholder('Search servers...');
+
+  if (await searchInput.isVisible().catch(() => false)) {
+    return;
+  }
+
+  await page.locator('button[title="Create Server"]').click();
+  await expect(searchInput).toBeVisible({ timeout: 20_000 });
+}
+
+async function joinRoomFromSearch(page: Page, roomName: string): Promise<void> {
+  const searchInput = page.getByPlaceholder('Search servers...');
+
+  await expect(searchInput).toBeVisible({ timeout: 20_000 });
+  await searchInput.fill(roomName);
+
+  const roomCard = page.locator('button', { hasText: roomName }).first();
+
+  await expect(roomCard).toBeVisible({ timeout: 20_000 });
+  await roomCard.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+  await waitForCurrentRoomName(page, roomName);
+}
+
+async function openSavedRoomByName(page: Page, roomName: string): Promise<void> {
+  const roomButton = page.locator(`button[title="${roomName}"]`);
+
+  await expect(roomButton).toBeVisible({ timeout: 20_000 });
+  await roomButton.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+  await waitForCurrentRoomName(page, roomName);
+}
+
+async function waitForInviteJoin(page: Page): Promise<void> {
+  // Invite page loads -> auto-joins -> redirects to room
+  await expect(page).toHaveURL(/\/room\//, { timeout: 30_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+}
+
+async function waitForCurrentRoomName(page: Page, roomName: string, timeout = 20_000): Promise<void> {
+  await page.waitForFunction(
+    (expectedRoomName) => {
+      interface RoomShape { name?: string }
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+
+      return currentRoom?.name === expectedRoomName;
+    },
+    roomName,
+    { timeout }
+  );
+}
+
+async function openVoiceWorkspace(page: Page): Promise<void> {
+  if (await page.locator('app-voice-workspace').isVisible()
+    .catch(() => false)) {
+    return;
+  }
+
+  const viewButton = page.locator('app-rooms-side-panel').getByRole('button', { name: /view|open/i })
+    .first();
+
+  await expect(viewButton).toBeVisible({ timeout: 10_000 });
+  await viewButton.click();
+}
+
+// ── Voice helpers ────────────────────────────────────────────────────
+
+async function joinVoiceChannelUntilConnected(page: Page, channelName: string, attempts = 3): Promise<void> {
+  const room = new ChatRoomPage(page);
+
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= attempts; attempt++) {
+    await room.joinVoiceChannel(channelName);
+
+    try {
+      await waitForLocalVoiceChannelConnection(page, channelName, 20_000);
+      await expect(room.muteButton).toBeVisible({ timeout: 10_000 });
+      return;
+    } catch (error) {
+      lastError = error;
+      await page.waitForTimeout(1_000);
+    }
+  }
+
+  const lastErrorMessage = lastError instanceof Error
+    ? `Last error: ${lastError.message}`
+    : 'Last error: unavailable';
+
+  throw new Error(`Failed to connect ${page.url()} to voice channel ${channelName}.\n${lastErrorMessage}`);
+}
+
+async function waitForLocalVoiceChannelConnection(page: Page, channelName: string, timeout = 20_000): Promise<void> {
+  await page.waitForFunction(
+    (name) => {
+      interface VoiceStateShape { isConnected?: boolean; roomId?: string; serverId?: string }
+      interface UserShape { voiceState?: VoiceStateShape }
+      interface ChannelShape { id: string; name: string; type: 'text' | 'voice' }
+      interface RoomShape { id: string; channels?: ChannelShape[] }
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+      const currentUser = (component['currentUser'] as (() => UserShape | null) | undefined)?.() ?? null;
+      const voiceChannel = currentRoom?.channels?.find((ch) => ch.type === 'voice' && ch.name === name);
+      const voiceState = currentUser?.voiceState;
+
+      return !!voiceChannel
+        && voiceState?.isConnected === true
+        && voiceState.roomId === voiceChannel.id
+        && voiceState.serverId === currentRoom.id;
+    },
+    channelName,
+    { timeout }
+  );
+}
+
+// ── Roster / state helpers ───────────────────────────────────────────
+
+async function waitForVoiceWorkspaceUserCount(page: Page, expectedCount: number): Promise<void> {
+  await page.waitForFunction(
+    (count) => {
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-voice-workspace');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const connectedUsers = (component['connectedVoiceUsers'] as (() => unknown[]) | undefined)?.() ?? [];
+
+      return connectedUsers.length === count;
+    },
+    expectedCount,
+    { timeout: 45_000 }
+  );
+}
+
+async function waitForVoiceRosterCount(page: Page, channelName: string, expectedCount: number): Promise<void> {
+  await page.waitForFunction(
+    ({ expected, name }) => {
+      interface ChannelShape { id: string; name: string; type: 'text' | 'voice' }
+      interface RoomShape { channels?: ChannelShape[] }
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+      const channelId = currentRoom?.channels?.find((ch) => ch.type === 'voice' && ch.name === name)?.id;
+
+      if (!channelId) {
+        return false;
+      }
+
+      const roster = (component['voiceUsersInRoom'] as ((roomId: string) => unknown[]) | undefined)?.(channelId) ?? [];
+
+      return roster.length === expected;
+    },
+    { expected: expectedCount, name: channelName },
+    { timeout: 30_000 }
+  );
+}
+
+async function waitForVoiceStateAcrossPages(
+  clients: readonly TestClient[],
+  displayName: string,
+  expectedState: { isMuted: boolean; isDeafened: boolean }
+): Promise<void> {
+  for (const client of clients) {
+    await client.page.waitForFunction(
+      ({ expectedDisplayName, expectedMuted, expectedDeafened }) => {
+        interface VoiceStateShape { isMuted?: boolean; isDeafened?: boolean }
+        interface ChannelShape { id: string; name: string; type: 'text' | 'voice' }
+        interface UserShape { displayName: string; voiceState?: VoiceStateShape }
+        interface RoomShape { channels?: ChannelShape[] }
+        interface AngularDebugApi {
+          getComponent: (element: Element) => Record<string, unknown>;
+        }
+
+        const host = document.querySelector('app-rooms-side-panel');
+        const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+        if (!host || !debugApi?.getComponent) {
+          return false;
+        }
+
+        const component = debugApi.getComponent(host);
+        const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+        const voiceChannel = currentRoom?.channels?.find((ch) => ch.type === 'voice');
+
+        if (!voiceChannel) {
+          return false;
+        }
+
+        const roster = (component['voiceUsersInRoom'] as ((roomId: string) => UserShape[]) | undefined)?.(voiceChannel.id) ?? [];
+        const entry = roster.find((userEntry) => userEntry.displayName === expectedDisplayName);
+
+        return entry?.voiceState?.isMuted === expectedMuted
+          && entry?.voiceState?.isDeafened === expectedDeafened;
+      },
+      {
+        expectedDisplayName: displayName,
+        expectedMuted: expectedState.isMuted,
+        expectedDeafened: expectedState.isDeafened
+      },
+      { timeout: 30_000 }
+    );
+  }
+}

e2e/tests/voice/multi-signal-eight-user-voice.spec.ts

@@ -0,0 +1,763 @@
+import { expect, type Page } from '@playwright/test';
+import { test, type Client } from '../../fixtures/multi-client';
+import { installTestServerEndpoints, type SeededEndpointInput } from '../../helpers/seed-test-endpoint';
+import { startTestServer } from '../../helpers/test-server';
+import {
+  dumpRtcDiagnostics,
+  getConnectedPeerCount,
+  installWebRTCTracking,
+  waitForAllPeerAudioFlow,
+  waitForAudioStatsPresent,
+  waitForConnectedPeerCount,
+  waitForPeerConnected
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+
+const PRIMARY_SIGNAL_ID = 'e2e-test-server-a';
+const SECONDARY_SIGNAL_ID = 'e2e-test-server-b';
+const PRIMARY_ROOM_NAME = `Dual Signal Voice A ${Date.now()}`;
+const SECONDARY_ROOM_NAME = `Dual Signal Voice B ${Date.now()}`;
+const VOICE_CHANNEL = 'General';
+const USER_PASSWORD = 'TestPass123!';
+const USER_COUNT = 8;
+const EXPECTED_REMOTE_PEERS = USER_COUNT - 1;
+const STABILITY_WINDOW_MS = 20_000;
+
+interface TestUser {
+  username: string;
+  displayName: string;
+  password: string;
+}
+
+type TestClient = Client & {
+  user: TestUser;
+};
+
+test.describe('Dual-signal multi-user voice', () => {
+  test('keeps 8 users on 2 signal apis while voice, mute, and deafen stay consistent for 20+ seconds', async ({
+    createClient,
+    testServer
+  }) => {
+    test.setTimeout(720_000);
+
+    const secondaryServer = await startTestServer();
+
+    try {
+      const endpoints: SeededEndpointInput[] = [
+        {
+          id: PRIMARY_SIGNAL_ID,
+          name: 'E2E Signal A',
+          url: testServer.url,
+          isActive: true,
+          status: 'online'
+        },
+        {
+          id: SECONDARY_SIGNAL_ID,
+          name: 'E2E Signal B',
+          url: secondaryServer.url,
+          isActive: true,
+          status: 'online'
+        }
+      ];
+      const users = buildUsers();
+      const clients = await createTrackedClients(createClient, users, endpoints);
+
+      await test.step('Register every user with both active endpoints available', async () => {
+        for (const client of clients) {
+          const registerPage = new RegisterPage(client.page);
+
+          await registerPage.goto();
+          await registerPage.serverSelect.selectOption(PRIMARY_SIGNAL_ID);
+          await registerPage.register(client.user.username, client.user.displayName, client.user.password);
+          await expect(client.page).toHaveURL(/\/search/, { timeout: 20_000 });
+        }
+      });
+
+      await test.step('Create primary and secondary rooms on different signal endpoints', async () => {
+        const searchPage = new ServerSearchPage(clients[0].page);
+
+        await searchPage.createServer(PRIMARY_ROOM_NAME, {
+          description: 'Primary signal room for 8-user voice mesh',
+          sourceId: PRIMARY_SIGNAL_ID
+        });
+
+        await expect(clients[0].page).toHaveURL(/\/room\//, { timeout: 20_000 });
+
+        await searchPage.createServer(SECONDARY_ROOM_NAME, {
+          description: 'Secondary signal room for dual-socket coverage',
+          sourceId: SECONDARY_SIGNAL_ID
+        });
+
+        await expect(clients[0].page).toHaveURL(/\/room\//, { timeout: 20_000 });
+      });
+
+      await test.step('Every user joins both rooms to keep 2 signal sockets open', async () => {
+        for (const client of clients.slice(1)) {
+          await joinRoomFromSearch(client.page, PRIMARY_ROOM_NAME);
+        }
+
+        for (const client of clients.slice(1)) {
+          await openSearchView(client.page);
+          await joinRoomFromSearch(client.page, SECONDARY_ROOM_NAME);
+        }
+
+        for (const client of clients) {
+          await openSavedRoomByName(client.page, PRIMARY_ROOM_NAME);
+          await waitForConnectedSignalManagerCount(client.page, 2);
+        }
+      });
+
+      await test.step('Create voice channel and join all 8 users', async () => {
+        const hostRoom = new ChatRoomPage(clients[0].page);
+
+        await hostRoom.ensureVoiceChannelExists(VOICE_CHANNEL);
+
+        for (const client of clients) {
+          await joinVoiceChannelUntilConnected(client.page, VOICE_CHANNEL);
+        }
+
+        for (const client of clients) {
+          await waitForVoiceRosterCount(client.page, VOICE_CHANNEL, USER_COUNT);
+        }
+      });
+
+      await test.step('All users discover all peers and audio flows pairwise', async () => {
+        // Wait for all clients to have at least one connected peer (fast)
+        await Promise.all(clients.map((client) =>
+          waitForPeerConnected(client.page, 45_000)
+        ));
+
+        // Wait for all clients to have all 7 peers connected
+        await Promise.all(clients.map((client) =>
+          waitForConnectedPeerCount(client.page, EXPECTED_REMOTE_PEERS, 90_000)
+        ));
+
+        // Wait for audio stats to appear on all clients
+        await Promise.all(clients.map((client) =>
+          waitForAudioStatsPresent(client.page, 30_000)
+        ));
+
+        // Allow the mesh to settle - voice routing, allowed-peer-id
+        // propagation and renegotiation all need time after the last
+        // user joins.
+        await clients[0].page.waitForTimeout(5_000);
+
+        // Check bidirectional audio flow on each client
+        await Promise.all(clients.map((client) =>
+          waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 90_000)
+        ));
+      });
+
+      await test.step('Voice workspace and side panel show all 8 users on every client', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await openVoiceWorkspace(client.page);
+          await expect(room.voiceWorkspace).toBeVisible({ timeout: 10_000 });
+          await waitForVoiceWorkspaceUserCount(client.page, USER_COUNT);
+          await waitForVoiceRosterCount(client.page, VOICE_CHANNEL, USER_COUNT);
+          await waitForConnectedSignalManagerCount(client.page, 2);
+        }
+      });
+
+      await test.step('Voice stays stable for more than 20 seconds across both signals', async () => {
+        const deadline = Date.now() + STABILITY_WINDOW_MS;
+
+        while (Date.now() < deadline) {
+          for (const client of clients) {
+            await expect.poll(async () => await getConnectedPeerCount(client.page), {
+              timeout: 10_000,
+              intervals: [500, 1_000]
+            }).toBe(EXPECTED_REMOTE_PEERS);
+
+            await expect.poll(async () => await getConnectedSignalManagerCount(client.page), {
+              timeout: 10_000,
+              intervals: [500, 1_000]
+            }).toBe(2);
+          }
+
+          if (Date.now() < deadline) {
+            await clients[0].page.waitForTimeout(5_000);
+          }
+        }
+
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+
+      await test.step('Mute state propagates for every user across all clients', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: false
+          });
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: false,
+            isDeafened: false
+          });
+        }
+      });
+
+      await test.step('Audio still flows on all peers after mute cycling', async () => {
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} post-mute RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+
+      await test.step('Deafen state propagates for every user across all clients', async () => {
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.deafenButton.click();
+          await client.page.waitForTimeout(500);
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: true
+          });
+
+          await room.deafenButton.click();
+          await client.page.waitForTimeout(500);
+          // Un-deafen does NOT restore mute - the user stays muted
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: true,
+            isDeafened: false
+          });
+        }
+      });
+
+      await test.step('Unmute all users and verify audio flows end-to-end', async () => {
+        // Every user is left muted after deafen cycling - unmute them all
+        for (const client of clients) {
+          const room = new ChatRoomPage(client.page);
+
+          await room.muteButton.click();
+          await waitForVoiceStateAcrossPages(clients, client.user.displayName, {
+            isMuted: false,
+            isDeafened: false
+          });
+        }
+
+        // Final audio flow check on every peer - confirms the full
+        // send/receive pipeline still works after mute+deafen cycling
+        for (const client of clients) {
+          try {
+            await waitForAllPeerAudioFlow(client.page, EXPECTED_REMOTE_PEERS, 30_000);
+          } catch (error) {
+            console.log(`[${client.user.displayName} final RTC]\n${await dumpRtcDiagnostics(client.page)}`);
+            throw error;
+          }
+        }
+      });
+    } finally {
+      await secondaryServer.stop();
+    }
+  });
+});
+
+function buildUsers(): TestUser[] {
+  return Array.from({ length: USER_COUNT }, (_value, index) => ({
+    username: `voice8_user_${Date.now()}_${index + 1}`,
+    displayName: `Voice User ${index + 1}`,
+    password: USER_PASSWORD
+  }));
+}
+
+async function createTrackedClients(
+  createClient: () => Promise<Client>,
+  users: TestUser[],
+  endpoints: readonly SeededEndpointInput[]
+): Promise<TestClient[]> {
+  const clients: TestClient[] = [];
+
+  for (const user of users) {
+    const client = await createClient();
+
+    await installTestServerEndpoints(client.context, endpoints);
+    await installDeterministicVoiceSettings(client.page);
+    await installWebRTCTracking(client.page);
+
+    clients.push({
+      ...client,
+      user
+    });
+  }
+
+  return clients;
+}
+
+async function installDeterministicVoiceSettings(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    localStorage.setItem('metoyou_voice_settings', JSON.stringify({
+      inputVolume: 100,
+      outputVolume: 100,
+      audioBitrate: 96,
+      latencyProfile: 'balanced',
+      includeSystemAudio: false,
+      noiseReduction: false,
+      screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    }));
+  });
+}
+
+async function openSearchView(page: Page): Promise<void> {
+  const searchInput = page.getByPlaceholder('Search servers...');
+
+  if (await searchInput.isVisible().catch(() => false)) {
+    return;
+  }
+
+  await page.locator('button[title="Create Server"]').click();
+  await expect(searchInput).toBeVisible({ timeout: 20_000 });
+}
+
+async function joinRoomFromSearch(page: Page, roomName: string): Promise<void> {
+  const searchInput = page.getByPlaceholder('Search servers...');
+
+  await expect(searchInput).toBeVisible({ timeout: 20_000 });
+  await searchInput.fill(roomName);
+
+  const roomCard = page.locator('button', { hasText: roomName }).first();
+
+  await expect(roomCard).toBeVisible({ timeout: 20_000 });
+  await roomCard.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+  await waitForCurrentRoomName(page, roomName);
+}
+
+async function openSavedRoomByName(page: Page, roomName: string): Promise<void> {
+  const roomButton = page.locator(`button[title="${roomName}"]`);
+
+  await expect(roomButton).toBeVisible({ timeout: 20_000 });
+  await roomButton.click();
+  await expect(page).toHaveURL(/\/room\//, { timeout: 20_000 });
+  await expect(page.locator('app-rooms-side-panel').first()).toBeVisible({ timeout: 20_000 });
+  await waitForCurrentRoomName(page, roomName);
+}
+
+async function waitForCurrentRoomName(page: Page, roomName: string, timeout = 20_000): Promise<void> {
+  await page.waitForFunction(
+    (expectedRoomName) => {
+      interface RoomShape {
+        name?: string;
+      }
+
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+
+      return currentRoom?.name === expectedRoomName;
+    },
+    roomName,
+    { timeout }
+  );
+}
+
+async function openVoiceWorkspace(page: Page): Promise<void> {
+  const viewButton = page.locator('app-rooms-side-panel').getByRole('button', { name: /view|open/i })
+    .first();
+
+  if (await page.locator('app-voice-workspace').isVisible()
+    .catch(() => false)) {
+    return;
+  }
+
+  await expect(viewButton).toBeVisible({ timeout: 10_000 });
+  await viewButton.click();
+}
+
+async function joinVoiceChannelUntilConnected(page: Page, channelName: string, attempts = 3): Promise<void> {
+  const room = new ChatRoomPage(page);
+
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= attempts; attempt++) {
+    await room.joinVoiceChannel(channelName);
+
+    try {
+      await waitForLocalVoiceChannelConnection(page, channelName, 20_000);
+      await expect(room.muteButton).toBeVisible({ timeout: 10_000 });
+      return;
+    } catch (error) {
+      lastError = error;
+      await page.waitForTimeout(1_000);
+    }
+  }
+
+  const diagnostics = await getVoiceJoinDiagnostics(page, channelName);
+  const displayName = diagnostics.currentUser?.displayName ?? 'Unknown user';
+
+  throw new Error([
+    `Failed to connect ${displayName} to voice channel ${channelName}.`,
+    lastError instanceof Error ? `Last error: ${lastError.message}` : 'Last error: unavailable',
+    `Current room: ${diagnostics.currentRoom?.name ?? 'none'} (${diagnostics.currentRoom?.id ?? 'n/a'})`,
+    `Current user id: ${diagnostics.currentUser?.id ?? 'none'} / ${diagnostics.currentUser?.oderId ?? 'none'}`,
+    `Current user voice state: ${JSON.stringify(diagnostics.currentUser?.voiceState ?? null)}`,
+    `Voice channel id: ${diagnostics.voiceChannel?.id ?? 'missing'}`,
+    `Visible voice roster: ${diagnostics.voiceUsers.join(', ') || 'none'}`,
+    `Connected signaling managers: ${diagnostics.connectedSignalCount}`,
+    `Local voice facade state: ${JSON.stringify(diagnostics.localVoiceState)}`,
+    `Voice connection error: ${diagnostics.connectionErrorMessage ?? 'none'}`
+  ].join('\n'));
+}
+
+async function waitForLocalVoiceChannelConnection(page: Page, channelName: string, timeout = 20_000): Promise<void> {
+  await page.waitForFunction(
+    (name) => {
+      interface VoiceStateShape {
+        isConnected?: boolean;
+        roomId?: string;
+        serverId?: string;
+      }
+
+      interface UserShape {
+        voiceState?: VoiceStateShape;
+      }
+
+      interface ChannelShape {
+        id: string;
+        name: string;
+        type: 'text' | 'voice';
+      }
+
+      interface RoomShape {
+        id: string;
+        channels?: ChannelShape[];
+      }
+
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+      const currentUser = (component['currentUser'] as (() => UserShape | null) | undefined)?.() ?? null;
+      const voiceChannel = currentRoom?.channels?.find((channel) => channel.type === 'voice' && channel.name === name);
+      const voiceState = currentUser?.voiceState;
+
+      return !!voiceChannel
+        && voiceState?.isConnected === true
+        && voiceState.roomId === voiceChannel.id
+        && voiceState.serverId === currentRoom.id;
+    },
+    channelName,
+    { timeout }
+  );
+}
+
+async function getVoiceJoinDiagnostics(page: Page, channelName: string): Promise<{
+  connectedSignalCount: number;
+  connectionErrorMessage: string | null;
+  currentRoom: { id?: string; name?: string } | null;
+  currentUser: { id?: string; oderId?: string; displayName?: string; voiceState?: Record<string, unknown> } | null;
+  localVoiceState: {
+    isVoiceConnected: boolean;
+    localStreamTracks: number;
+    rawMicTracks: number;
+  };
+  voiceChannel: { id?: string; name?: string } | null;
+  voiceUsers: string[];
+}> {
+  return await page.evaluate((name) => {
+    interface VoiceStateShape {
+      isConnected?: boolean;
+      isMuted?: boolean;
+      isDeafened?: boolean;
+      roomId?: string;
+      serverId?: string;
+    }
+
+    interface UserShape {
+      id?: string;
+      oderId?: string;
+      displayName?: string;
+      voiceState?: VoiceStateShape;
+    }
+
+    interface ChannelShape {
+      id: string;
+      name: string;
+      type: 'text' | 'voice';
+    }
+
+    interface RoomShape {
+      id?: string;
+      name?: string;
+      channels?: ChannelShape[];
+    }
+
+    interface AngularDebugApi {
+      getComponent: (element: Element) => Record<string, unknown>;
+    }
+
+    const host = document.querySelector('app-rooms-side-panel');
+    const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+    if (!host || !debugApi?.getComponent) {
+      return {
+        connectedSignalCount: 0,
+        connectionErrorMessage: 'Angular debug API unavailable',
+        currentRoom: null,
+        currentUser: null,
+        localVoiceState: {
+          isVoiceConnected: false,
+          localStreamTracks: 0,
+          rawMicTracks: 0
+        },
+        voiceChannel: null,
+        voiceUsers: []
+      };
+    }
+
+    const component = debugApi.getComponent(host);
+    const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+    const currentUser = (component['currentUser'] as (() => UserShape | null) | undefined)?.() ?? null;
+    const voiceChannel = currentRoom?.channels?.find((channel) => channel.type === 'voice' && channel.name === name) ?? null;
+    const voiceUsers = voiceChannel
+      ? ((component['voiceUsersInRoom'] as ((roomId: string) => UserShape[]) | undefined)?.(voiceChannel.id) ?? [])
+        .map((user) => user.displayName ?? 'Unknown user')
+      : [];
+    const voiceConnection = component['voiceConnection'] as {
+      getLocalStream?: () => MediaStream | null;
+      getRawMicStream?: () => MediaStream | null;
+      isVoiceConnected?: () => boolean;
+    } | undefined;
+    const realtime = component['realtime'] as {
+      connectionErrorMessage?: () => string | null;
+      signalingTransportHandler?: {
+        getConnectedSignalingManagers?: () => { signalUrl: string }[];
+      };
+    } | undefined;
+
+    return {
+      connectedSignalCount: realtime?.signalingTransportHandler?.getConnectedSignalingManagers?.().length ?? 0,
+      connectionErrorMessage: realtime?.connectionErrorMessage?.() ?? null,
+      currentRoom,
+      currentUser,
+      localVoiceState: {
+        isVoiceConnected: voiceConnection?.isVoiceConnected?.() ?? false,
+        localStreamTracks: voiceConnection?.getLocalStream?.()?.getTracks().length ?? 0,
+        rawMicTracks: voiceConnection?.getRawMicStream?.()?.getTracks().length ?? 0
+      },
+      voiceChannel,
+      voiceUsers
+    };
+  }, channelName);
+}
+
+async function waitForConnectedSignalManagerCount(page: Page, expectedCount: number): Promise<void> {
+  await page.waitForFunction(
+    (count) => {
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const realtime = component['realtime'] as {
+        signalingTransportHandler?: {
+          getConnectedSignalingManagers?: () => { signalUrl: string }[];
+        };
+      } | undefined;
+      const countValue = realtime?.signalingTransportHandler?.getConnectedSignalingManagers?.().length ?? 0;
+
+      return countValue === count;
+    },
+    expectedCount,
+    { timeout: 30_000 }
+  );
+}
+
+async function getConnectedSignalManagerCount(page: Page): Promise<number> {
+  return await page.evaluate(() => {
+    interface AngularDebugApi {
+      getComponent: (element: Element) => Record<string, unknown>;
+    }
+
+    const host = document.querySelector('app-rooms-side-panel');
+    const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+    if (!host || !debugApi?.getComponent) {
+      return 0;
+    }
+
+    const component = debugApi.getComponent(host);
+    const realtime = component['realtime'] as {
+      signalingTransportHandler?: {
+        getConnectedSignalingManagers?: () => { signalUrl: string }[];
+      };
+    } | undefined;
+
+    return realtime?.signalingTransportHandler?.getConnectedSignalingManagers?.().length ?? 0;
+  });
+}
+
+async function waitForVoiceWorkspaceUserCount(page: Page, expectedCount: number): Promise<void> {
+  await page.waitForFunction(
+    (count) => {
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-voice-workspace');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const connectedUsers = (component['connectedVoiceUsers'] as (() => unknown[]) | undefined)?.() ?? [];
+
+      return connectedUsers.length === count;
+    },
+    expectedCount,
+    { timeout: 45_000 }
+  );
+}
+
+async function waitForVoiceRosterCount(page: Page, channelName: string, expectedCount: number): Promise<void> {
+  await page.waitForFunction(
+    ({ expected, name }) => {
+      interface ChannelShape {
+        id: string;
+        name: string;
+        type: 'text' | 'voice';
+      }
+
+      interface RoomShape {
+        channels?: ChannelShape[];
+      }
+
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return false;
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+      const channelId = currentRoom?.channels?.find((channel) => channel.type === 'voice' && channel.name === name)?.id;
+
+      if (!channelId) {
+        return false;
+      }
+
+      const roster = (component['voiceUsersInRoom'] as ((roomId: string) => unknown[]) | undefined)?.(channelId) ?? [];
+
+      return roster.length === expected;
+    },
+    { expected: expectedCount, name: channelName },
+    { timeout: 30_000 }
+  );
+}
+
+async function waitForVoiceStateAcrossPages(
+  clients: readonly TestClient[],
+  displayName: string,
+  expectedState: { isMuted: boolean; isDeafened: boolean }
+): Promise<void> {
+  for (const client of clients) {
+    await client.page.waitForFunction(
+      ({ expectedDisplayName, expectedMuted, expectedDeafened }) => {
+        interface VoiceStateShape {
+          isMuted?: boolean;
+          isDeafened?: boolean;
+        }
+
+        interface ChannelShape {
+          id: string;
+          name: string;
+          type: 'text' | 'voice';
+        }
+
+        interface UserShape {
+          displayName: string;
+          voiceState?: VoiceStateShape;
+        }
+
+        interface RoomShape {
+          channels?: ChannelShape[];
+        }
+
+        interface AngularDebugApi {
+          getComponent: (element: Element) => Record<string, unknown>;
+        }
+
+        const host = document.querySelector('app-rooms-side-panel');
+        const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+        if (!host || !debugApi?.getComponent) {
+          return false;
+        }
+
+        const component = debugApi.getComponent(host);
+        const currentRoom = (component['currentRoom'] as (() => RoomShape | null) | undefined)?.() ?? null;
+        const voiceChannel = currentRoom?.channels?.find((channel) => channel.type === 'voice');
+
+        if (!voiceChannel) {
+          return false;
+        }
+
+        const roster = (component['voiceUsersInRoom'] as ((roomId: string) => UserShape[]) | undefined)?.(voiceChannel.id) ?? [];
+        const entry = roster.find((user) => user.displayName === expectedDisplayName);
+
+        return entry?.voiceState?.isMuted === expectedMuted
+          && entry?.voiceState?.isDeafened === expectedDeafened;
+      },
+      {
+        expectedDisplayName: displayName,
+        expectedMuted: expectedState.isMuted,
+        expectedDeafened: expectedState.isDeafened
+      },
+      { timeout: 30_000 }
+    );
+  }
+}

e2e/tests/voice/voice-full-journey.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '../../fixtures/multi-client';
 import {
   installWebRTCTracking,
+  installAutoResumeAudioContext,
   waitForPeerConnected,
   isPeerStillConnected,
   getAudioStatsDelta,
@@ -13,7 +14,7 @@ import { ServerSearchPage } from '../../pages/server-search.page';
 import { ChatRoomPage } from '../../pages/chat-room.page';
 
 /**
- * Full user journey: register → create server → join → voice → verify audio
+ * Full user journey: register -> create server -> join -> voice -> verify audio
  * for 10+ seconds of stable connectivity.
  *
  * Uses two independent browser contexts (Alice & Bob) to simulate real
@@ -25,7 +26,7 @@ const BOB = { username: `bob_${Date.now()}`, displayName: 'Bob', password: 'Test
 const SERVER_NAME = `E2E Test Server ${Date.now()}`;
 const VOICE_CHANNEL = 'General';
 
-test.describe('Full user journey: register → server → voice chat', () => {
+test.describe('Full user journey: register -> server -> voice chat', () => {
   test('two users register, create server, join voice, and stay connected 10+ seconds with audio', async ({ createClient }) => {
     test.setTimeout(180_000); // 3 min - covers registration, server creation, voice establishment, and 10s stability check
 
@@ -35,6 +36,20 @@ test.describe('Full user journey: register → server → voice chat', () => {
     // Install WebRTC tracking before any navigation
     await installWebRTCTracking(alice.page);
     await installWebRTCTracking(bob.page);
+    await installAutoResumeAudioContext(alice.page);
+    await installAutoResumeAudioContext(bob.page);
+
+    // Seed deterministic voice settings so noise reduction doesn't
+    // swallow the fake audio tone.
+    const voiceSettings = JSON.stringify({
+      inputVolume: 100, outputVolume: 100, audioBitrate: 96,
+      latencyProfile: 'balanced', includeSystemAudio: false,
+      noiseReduction: false, screenShareQuality: 'balanced',
+      askScreenShareQuality: false
+    });
+
+    await alice.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
+    await bob.page.addInitScript((settingsValue: string) => localStorage.setItem('metoyou_voice_settings', settingsValue), voiceSettings);
 
     // Forward browser console for debugging
     alice.page.on('console', msg => console.log('[Alice]', msg.text()));
@@ -146,8 +161,38 @@ test.describe('Full user journey: register → server → voice chat', () => {
     // ── Step 7: Verify audio is flowing in both directions ───────────
 
     await test.step('Audio packets are flowing between Alice and Bob', async () => {
-      const aliceDelta = await waitForAudioFlow(alice.page, 30_000);
-      const bobDelta = await waitForAudioFlow(bob.page, 30_000);
+      // Chromium's --use-fake-device-for-media-stream can produce a
+      // silent capture track on the very first getUserMedia call.  If
+      // bidirectional audio doesn't flow within a short window, leave
+      // and rejoin voice to re-acquire the mic.
+      let aliceDelta = await waitForAudioFlow(alice.page, 15_000);
+      let bobDelta = await waitForAudioFlow(bob.page, 15_000);
+
+      const isFlowing = (delta: typeof aliceDelta) =>
+        (delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0) &&
+        (delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0);
+
+      if (!isFlowing(aliceDelta) || !isFlowing(bobDelta)) {
+        const aliceRoom = new ChatRoomPage(alice.page);
+        const bobRoom = new ChatRoomPage(bob.page);
+
+        await aliceRoom.disconnectButton.click();
+        await bobRoom.disconnectButton.click();
+        await alice.page.waitForTimeout(2_000);
+
+        await aliceRoom.joinVoiceChannel(VOICE_CHANNEL);
+        await expect(alice.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+        await bobRoom.joinVoiceChannel(VOICE_CHANNEL);
+        await expect(bob.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+
+        await waitForPeerConnected(alice.page, 30_000);
+        await waitForPeerConnected(bob.page, 30_000);
+        await waitForAudioStatsPresent(alice.page, 20_000);
+        await waitForAudioStatsPresent(bob.page, 20_000);
+
+        aliceDelta = await waitForAudioFlow(alice.page, 30_000);
+        bobDelta = await waitForAudioFlow(bob.page, 30_000);
+      }
 
       if (aliceDelta.outboundBytesDelta === 0 || aliceDelta.inboundBytesDelta === 0
         || bobDelta.outboundBytesDelta === 0 || bobDelta.inboundBytesDelta === 0) {

electron/README.md

@@ -0,0 +1,31 @@
+# Electron Shell
+
+Electron main-process package for MetoYou / Toju. This directory owns desktop bootstrap, the preload bridge, IPC handlers, desktop persistence glue, updater integration, and window-level behavior.
+
+## Commands
+
+- `npm run build:electron` builds the Electron TypeScript output to `dist/electron`.
+- `npm run electron` builds the product client and Electron, then launches the desktop app.
+- `npm run electron:dev` starts the Angular client and Electron together.
+- `npm run dev` starts the full desktop stack: server, Angular client, and Electron.
+- `npm run electron:build`, `npm run electron:build:win`, `npm run electron:build:mac`, and `npm run electron:build:linux` create packaged desktop builds.
+
+## Structure
+
+| Path | Description |
+| --- | --- |
+| `main.ts` | Electron app bootstrap and process entry point |
+| `preload.ts` | Typed renderer-facing preload bridge |
+| `app/` | App lifecycle and startup composition |
+| `ipc/` | Renderer-invoked IPC handlers |
+| `cqrs/` | Local database command/query handlers and mappings |
+| `db/`, `entities/`, `migrations/` | Desktop persistence and schema evolution |
+| `audio/` | Desktop audio integrations |
+| `update/` | Desktop updater flow |
+| `window/` | Window creation and window-level behavior |
+
+## Notes
+
+- When adding a renderer-facing capability, update the Electron implementation, `preload.ts`, and the renderer bridge in `toju-app/` together.
+- Treat `dist/electron/` and `dist-electron/` as generated output.
+- See [AGENTS.md](AGENTS.md) for package-level editing rules.

electron/cqrs/commands/handlers/saveUser.ts

@@ -10,6 +10,8 @@ export async function handleSaveUser(command: SaveUserCommand, dataSource: DataS
     oderId: user.oderId ?? null,
     username: user.username ?? null,
     displayName: user.displayName ?? null,
+    description: user.description ?? null,
+    profileUpdatedAt: user.profileUpdatedAt ?? null,
     avatarUrl: user.avatarUrl ?? null,
     avatarHash: user.avatarHash ?? null,
     avatarMime: user.avatarMime ?? null,

electron/cqrs/mappers.ts

@@ -46,6 +46,8 @@ export function rowToUser(row: UserEntity) {
     oderId: row.oderId ?? '',
     username: row.username ?? '',
     displayName: row.displayName ?? '',
+    description: row.description ?? undefined,
+    profileUpdatedAt: row.profileUpdatedAt ?? undefined,
     avatarUrl: row.avatarUrl ?? undefined,
     avatarHash: row.avatarHash ?? undefined,
     avatarMime: row.avatarMime ?? undefined,

electron/cqrs/queries/handlers/getCurrentUserId.ts

@@ -0,0 +1,9 @@
+import { DataSource } from 'typeorm';
+import { MetaEntity } from '../../../entities';
+
+export async function handleGetCurrentUserId(dataSource: DataSource): Promise<string | null> {
+  const metaRepo = dataSource.getRepository(MetaEntity);
+  const metaRow = await metaRepo.findOne({ where: { key: 'currentUserId' } });
+
+  return metaRow?.value?.trim() || null;
+}

electron/cqrs/queries/index.ts

@@ -8,6 +8,7 @@ import {
   GetMessageByIdQuery,
   GetReactionsForMessageQuery,
   GetUserQuery,
+  GetCurrentUserIdQuery,
   GetRoomQuery,
   GetBansForRoomQuery,
   IsUserBannedQuery,
@@ -19,6 +20,7 @@ import { handleGetMessageById } from './handlers/getMessageById';
 import { handleGetReactionsForMessage } from './handlers/getReactionsForMessage';
 import { handleGetUser } from './handlers/getUser';
 import { handleGetCurrentUser } from './handlers/getCurrentUser';
+import { handleGetCurrentUserId } from './handlers/getCurrentUserId';
 import { handleGetUsersByRoom } from './handlers/getUsersByRoom';
 import { handleGetRoom } from './handlers/getRoom';
 import { handleGetAllRooms } from './handlers/getAllRooms';
@@ -34,6 +36,7 @@ export const buildQueryHandlers = (dataSource: DataSource): Record<QueryTypeKey,
   [QueryType.GetReactionsForMessage]:   (query) => handleGetReactionsForMessage(query as GetReactionsForMessageQuery, dataSource),
   [QueryType.GetUser]:                  (query) => handleGetUser(query as GetUserQuery, dataSource),
   [QueryType.GetCurrentUser]:           () => handleGetCurrentUser(dataSource),
+  [QueryType.GetCurrentUserId]:         () => handleGetCurrentUserId(dataSource),
   [QueryType.GetUsersByRoom]:           () => handleGetUsersByRoom(dataSource),
   [QueryType.GetRoom]:                  (query) => handleGetRoom(query as GetRoomQuery, dataSource),
   [QueryType.GetAllRooms]:              () => handleGetAllRooms(dataSource),

electron/cqrs/relations.ts

@@ -66,6 +66,8 @@ export interface RoomMemberRecord {
   oderId?: string;
   username: string;
   displayName: string;
+  description?: string;
+  profileUpdatedAt?: number;
   avatarUrl?: string;
   avatarHash?: string;
   avatarMime?: string;
@@ -338,16 +340,18 @@ function normalizeRoomMember(rawMember: Record<string, unknown>, now: number): R
   const { joinedAt, lastSeenAt } = resolveRoomMemberTimes(rawMember, now);
   const username = trimmedString(rawMember, 'username');
   const displayName = trimmedString(rawMember, 'displayName');
+  const description = trimmedString(rawMember, 'description');
+  const profileUpdatedAt = isFiniteNumber(rawMember['profileUpdatedAt']) ? rawMember['profileUpdatedAt'] : undefined;
   const avatarUrl = trimmedString(rawMember, 'avatarUrl');
   const avatarHash = trimmedString(rawMember, 'avatarHash');
   const avatarMime = trimmedString(rawMember, 'avatarMime');
   const avatarUpdatedAt = isFiniteNumber(rawMember['avatarUpdatedAt']) ? rawMember['avatarUpdatedAt'] : undefined;
-
-  return {
+  const member: RoomMemberRecord = {
     id: normalizedId || normalizedKey,
     oderId: normalizedOderId || undefined,
     username: username || fallbackUsername({ id: normalizedId || normalizedKey, oderId: normalizedOderId || undefined, displayName }),
     displayName: displayName || fallbackDisplayName({ id: normalizedId || normalizedKey, oderId: normalizedOderId || undefined, username }),
+    profileUpdatedAt,
     avatarUrl: avatarUrl || undefined,
     avatarHash: avatarHash || undefined,
     avatarMime: avatarMime || undefined,
@@ -357,6 +361,12 @@ function normalizeRoomMember(rawMember: Record<string, unknown>, now: number): R
     joinedAt,
     lastSeenAt
   };
+
+  if (Object.prototype.hasOwnProperty.call(rawMember, 'description')) {
+    member.description = description || undefined;
+  }
+
+  return member;
 }
 
 function mergeRoomMembers(existingMember: RoomMemberRecord | undefined, incomingMember: RoomMemberRecord): RoomMemberRecord {
@@ -365,6 +375,11 @@ function mergeRoomMembers(existingMember: RoomMemberRecord | undefined, incoming
   }
 
   const preferIncoming = incomingMember.lastSeenAt >= existingMember.lastSeenAt;
+  const existingProfileUpdatedAt = existingMember.profileUpdatedAt ?? 0;
+  const incomingProfileUpdatedAt = incomingMember.profileUpdatedAt ?? 0;
+  const preferIncomingProfile = incomingProfileUpdatedAt === existingProfileUpdatedAt
+    ? preferIncoming
+    : incomingProfileUpdatedAt > existingProfileUpdatedAt;
   const existingAvatarUpdatedAt = existingMember.avatarUpdatedAt ?? 0;
   const incomingAvatarUpdatedAt = incomingMember.avatarUpdatedAt ?? 0;
   const preferIncomingAvatar = incomingAvatarUpdatedAt === existingAvatarUpdatedAt
@@ -377,9 +392,13 @@ function mergeRoomMembers(existingMember: RoomMemberRecord | undefined, incoming
     username: preferIncoming
       ? (incomingMember.username || existingMember.username)
       : (existingMember.username || incomingMember.username),
-    displayName: preferIncoming
+    displayName: preferIncomingProfile
       ? (incomingMember.displayName || existingMember.displayName)
       : (existingMember.displayName || incomingMember.displayName),
+    description: preferIncomingProfile
+      ? (Object.prototype.hasOwnProperty.call(incomingMember, 'description') ? incomingMember.description : existingMember.description)
+      : existingMember.description,
+    profileUpdatedAt: Math.max(existingProfileUpdatedAt, incomingProfileUpdatedAt) || undefined,
     avatarUrl: preferIncomingAvatar
       ? (incomingMember.avatarUrl || existingMember.avatarUrl)
       : (existingMember.avatarUrl || incomingMember.avatarUrl),
@@ -780,6 +799,8 @@ export async function replaceRoomRelations(
           oderId: member.oderId ?? null,
           username: member.username,
           displayName: member.displayName,
+          description: member.description ?? null,
+          profileUpdatedAt: member.profileUpdatedAt ?? null,
           avatarUrl: member.avatarUrl ?? null,
           avatarHash: member.avatarHash ?? null,
           avatarMime: member.avatarMime ?? null,
@@ -930,6 +951,8 @@ export async function loadRoomRelationsMap(
       oderId: row.oderId ?? undefined,
       username: row.username,
       displayName: row.displayName,
+      description: row.description ?? undefined,
+      profileUpdatedAt: row.profileUpdatedAt ?? undefined,
       avatarUrl: row.avatarUrl ?? undefined,
       avatarHash: row.avatarHash ?? undefined,
       avatarMime: row.avatarMime ?? undefined,

electron/cqrs/types.ts

@@ -27,6 +27,7 @@ export const QueryType = {
   GetReactionsForMessage: 'get-reactions-for-message',
   GetUser: 'get-user',
   GetCurrentUser: 'get-current-user',
+  GetCurrentUserId: 'get-current-user-id',
   GetUsersByRoom: 'get-users-by-room',
   GetRoom: 'get-room',
   GetAllRooms: 'get-all-rooms',
@@ -105,6 +106,8 @@ export interface UserPayload {
   oderId?: string;
   username?: string;
   displayName?: string;
+  description?: string;
+  profileUpdatedAt?: number;
   avatarUrl?: string;
   avatarHash?: string;
   avatarMime?: string;
@@ -212,6 +215,7 @@ export interface GetMessageByIdQuery { type: typeof QueryType.GetMessageById; pa
 export interface GetReactionsForMessageQuery { type: typeof QueryType.GetReactionsForMessage; payload: { messageId: string } }
 export interface GetUserQuery { type: typeof QueryType.GetUser; payload: { userId: string } }
 export interface GetCurrentUserQuery { type: typeof QueryType.GetCurrentUser; payload: Record<string, never> }
+export interface GetCurrentUserIdQuery { type: typeof QueryType.GetCurrentUserId; payload: Record<string, never> }
 export interface GetUsersByRoomQuery { type: typeof QueryType.GetUsersByRoom; payload: { roomId: string } }
 export interface GetRoomQuery { type: typeof QueryType.GetRoom; payload: { roomId: string } }
 export interface GetAllRoomsQuery { type: typeof QueryType.GetAllRooms; payload: Record<string, never> }
@@ -227,6 +231,7 @@ export type Query =
   | GetReactionsForMessageQuery
   | GetUserQuery
   | GetCurrentUserQuery
+  | GetCurrentUserIdQuery
   | GetUsersByRoomQuery
   | GetRoomQuery
   | GetAllRoomsQuery

electron/db/database.ts

@@ -1,3 +1,4 @@
+import { randomBytes } from 'crypto';
 import { app } from 'electron';
 import * as fs from 'fs';
 import * as fsp from 'fs/promises';
@@ -20,23 +21,93 @@ import {
 import { settings } from '../settings';
 
 let applicationDataSource: DataSource | undefined;
+let dbFilePath = '';
+let dbBackupPath = '';
+
+// SQLite files start with this 16-byte header string.
+const SQLITE_MAGIC = 'SQLite format 3\0';
 
 export function getDataSource(): DataSource | undefined {
   return applicationDataSource;
 }
 
+/**
+ * Returns true when `data` looks like a valid SQLite file
+ * (correct header magic and at least one complete page).
+ */
+function isValidSqlite(data: Uint8Array): boolean {
+  if (data.length < 100)
+    return false;
+
+  const header = Buffer.from(data.buffer, data.byteOffset, 16).toString('ascii');
+
+  return header === SQLITE_MAGIC;
+}
+
+/**
+ * Back up the current DB file so there is always a recovery point.
+ * If the main file is corrupted/empty but a valid backup exists,
+ * restore the backup before the app loads the database.
+ */
+function safeguardDbFile(): Uint8Array | undefined {
+  if (!fs.existsSync(dbFilePath))
+    return undefined;
+
+  const data = new Uint8Array(fs.readFileSync(dbFilePath));
+
+  if (isValidSqlite(data)) {
+    fs.copyFileSync(dbFilePath, dbBackupPath);
+    console.log('[DB] Backed up database to', dbBackupPath);
+
+    return data;
+  }
+
+  console.warn(`[DB] ${dbFilePath} appears corrupt (${data.length} bytes) - checking backup`);
+
+  if (fs.existsSync(dbBackupPath)) {
+    const backup = new Uint8Array(fs.readFileSync(dbBackupPath));
+
+    if (isValidSqlite(backup)) {
+      fs.copyFileSync(dbBackupPath, dbFilePath);
+      console.warn('[DB] Restored database from backup', dbBackupPath);
+
+      return backup;
+    }
+
+    console.error('[DB] Backup is also invalid - starting with a fresh database');
+  } else {
+    console.error('[DB] No backup available - starting with a fresh database');
+  }
+
+  return undefined;
+}
+
+/**
+ * Write the database to disk atomically: write a temp file first,
+ * then rename it over the real file. rename() is atomic on the same
+ * filesystem, so a crash mid-write can never leave a half-written DB.
+ */
+async function atomicSave(data: Uint8Array): Promise<void> {
+  const tmpPath = dbFilePath + '.tmp-' + randomBytes(6).toString('hex');
+
+  try {
+    await fsp.writeFile(tmpPath, Buffer.from(data));
+    await fsp.rename(tmpPath, dbFilePath);
+  } catch (err) {
+    await fsp.unlink(tmpPath).catch(() => {});
+    throw err;
+  }
+}
+
 export async function initializeDatabase(): Promise<void> {
   const userDataPath = app.getPath('userData');
   const dbDir = path.join(userDataPath, 'metoyou');
 
   await fsp.mkdir(dbDir, { recursive: true });
-  const databaseFilePath = path.join(dbDir, settings.databaseName);
+  dbFilePath = path.join(dbDir, settings.databaseName);
+  dbBackupPath = dbFilePath + '.bak';
 
-  let database: Uint8Array | undefined;
-
-  if (fs.existsSync(databaseFilePath)) {
-    database = fs.readFileSync(databaseFilePath);
-  }
+  const database = safeguardDbFile();
 
   applicationDataSource = new DataSource({
     type: 'sqljs',
@@ -59,12 +130,12 @@ export async function initializeDatabase(): Promise<void> {
     synchronize: false,
     logging: false,
     autoSave: true,
-    location: databaseFilePath
+    autoSaveCallback: atomicSave
   });
 
   try {
     await applicationDataSource.initialize();
-    console.log('[DB] Connection initialised at:', databaseFilePath);
+    console.log('[DB] Connection initialised at:', dbFilePath);
 
     try {
       await applicationDataSource.runMigrations();

electron/entities/RoomMemberEntity.ts

@@ -24,6 +24,12 @@ export class RoomMemberEntity {
   @Column('text')
   displayName!: string;
 
+  @Column('text', { nullable: true })
+  description!: string | null;
+
+  @Column('integer', { nullable: true })
+  profileUpdatedAt!: number | null;
+
   @Column('text', { nullable: true })
   avatarUrl!: string | null;
 

electron/entities/UserEntity.ts

@@ -18,6 +18,12 @@ export class UserEntity {
   @Column('text', { nullable: true })
   displayName!: string | null;
 
+  @Column('text', { nullable: true })
+  description!: string | null;
+
+  @Column('integer', { nullable: true })
+  profileUpdatedAt!: number | null;
+
   @Column('text', { nullable: true })
   avatarUrl!: string | null;
 

electron/migrations/1000000000007-AddUserProfileMetadata.ts

@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddUserProfileMetadata1000000000007 implements MigrationInterface {
+  name = 'AddUserProfileMetadata1000000000007';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "users" ADD COLUMN "description" TEXT`);
+    await queryRunner.query(`ALTER TABLE "users" ADD COLUMN "profileUpdatedAt" INTEGER`);
+    await queryRunner.query(`ALTER TABLE "room_members" ADD COLUMN "description" TEXT`);
+    await queryRunner.query(`ALTER TABLE "room_members" ADD COLUMN "profileUpdatedAt" INTEGER`);
+  }
+
+  public async down(): Promise<void> {
+    // SQLite column removal requires table rebuilds. Keep rollback no-op.
+  }
+}

electron/update/desktop-updater.ts

@@ -500,7 +500,7 @@ async function performUpdateCheck(
     setDesktopUpdateState({
       lastCheckedAt: Date.now(),
       status: 'checking',
-      statusMessage: `Checking for MetoYou ${targetRelease.version}…`,
+      statusMessage: `Checking for MetoYou ${targetRelease.version}...`,
       targetVersion: targetRelease.version
     });
 
@@ -687,7 +687,7 @@ export function initializeDesktopUpdater(): void {
 
     setDesktopUpdateState({
       status: 'checking',
-      statusMessage: 'Checking for desktop updates…'
+      statusMessage: 'Checking for desktop updates...'
     });
   });
 
@@ -698,7 +698,7 @@ export function initializeDesktopUpdater(): void {
     setDesktopUpdateState({
       lastCheckedAt: Date.now(),
       status: 'downloading',
-      statusMessage: `Downloading MetoYou ${nextVersion ?? 'update'}…`,
+      statusMessage: `Downloading MetoYou ${nextVersion ?? 'update'}...`,
       targetVersion: nextVersion
     });
   });

electron/window/create-window.ts

@@ -15,8 +15,37 @@ let mainWindow: BrowserWindow | null = null;
 let tray: Tray | null = null;
 let closeToTrayEnabled = true;
 let appQuitting = false;
+let youtubeRequestHeadersConfigured = false;
 
 const WINDOW_STATE_CHANGED_CHANNEL = 'window-state-changed';
+const YOUTUBE_EMBED_REFERRER = 'https://toju.app/';
+
+function ensureYoutubeEmbedRequestHeaders(): void {
+  if (youtubeRequestHeadersConfigured || !app.isPackaged) {
+    return;
+  }
+
+  youtubeRequestHeadersConfigured = true;
+
+  session.defaultSession.webRequest.onBeforeSendHeaders(
+    {
+      urls: [
+        'https://www.youtube-nocookie.com/*',
+        'https://www.youtube.com/*',
+        'https://*.youtube.com/*',
+        'https://*.googlevideo.com/*',
+        'https://*.ytimg.com/*'
+      ]
+    },
+    (details, callback) => {
+      const requestHeaders = { ...details.requestHeaders };
+
+      requestHeaders['Referer'] ??= YOUTUBE_EMBED_REFERRER;
+
+      callback({ requestHeaders });
+    }
+  );
+}
 
 function getAssetPath(...segments: string[]): string {
   const basePath = app.isPackaged
@@ -163,6 +192,7 @@ export async function createWindow(): Promise<void> {
 
   closeToTrayEnabled = readDesktopSettings().closeToTray;
   ensureTray();
+  ensureYoutubeEmbedRequestHeaders();
 
   mainWindow = new BrowserWindow({
     width: 1400,

eslint.config.js

@@ -5,41 +5,7 @@ const angular = require('angular-eslint');
 const stylisticTs = require('@stylistic/eslint-plugin-ts');
 const stylisticJs = require('@stylistic/eslint-plugin-js');
 const newlines = require('eslint-plugin-import-newlines');
-
-// Inline plugin: ban en dash (–, U+2013) and em dash (—, U+2014) from source files
-const noDashPlugin = {
-  rules: {
-    'no-unicode-dashes': {
-      meta: { fixable: 'code' },
-      create(context) {
-        const BANNED = [
-          { char: '\u2013', name: 'en dash (–)' },
-          { char: '\u2014', name: 'em dash (—)' }
-        ];
-        return {
-          Program() {
-            const src = context.getSourceCode().getText();
-            for (const { char, name } of BANNED) {
-              let idx = src.indexOf(char);
-              while (idx !== -1) {
-                const start = idx;
-                const end = idx + char.length;
-                context.report({
-                  loc: context.getSourceCode().getLocFromIndex(idx),
-                  message: `Unicode ${name} is not allowed. Use a regular hyphen (-) instead.`,
-                  fix(fixer) {
-                    return fixer.replaceTextRange([start, end], '-');
-                  }
-                });
-                idx = src.indexOf(char, idx + 1);
-              }
-            }
-          }
-        };
-      }
-    }
-  }
-};
+const metoyouEslintRules = require('./tools/eslint-rules');
 
 module.exports = tseslint.config(
   {
@@ -51,7 +17,7 @@ module.exports = tseslint.config(
       '@stylistic/ts': stylisticTs,
       '@stylistic/js': stylisticJs,
       'import-newlines': newlines,
-      'no-dashes': noDashPlugin
+      'metoyou': metoyouEslintRules
     },
     extends: [
       eslint.configs.recommended,
@@ -69,7 +35,7 @@ module.exports = tseslint.config(
             styles: 0
           }
         ],
-      'no-dashes/no-unicode-dashes': 'error',
+      'metoyou/no-unicode-symbols': 'error',
       '@typescript-eslint/no-extraneous-class': 'off',
       '@angular-eslint/component-class-suffix': [ 'error', { suffixes: ['Component','Page','Stub'] } ],
       '@angular-eslint/directive-class-suffix': 'error',
@@ -200,10 +166,10 @@ module.exports = tseslint.config(
   // HTML template formatting rules (external Angular templates only)
   {
     files: ['toju-app/src/app/**/*.html'],
-    plugins: { 'no-dashes': noDashPlugin },
+    plugins: { 'metoyou': metoyouEslintRules },
     extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
     rules: {
-      'no-dashes/no-unicode-dashes': 'error',
+      'metoyou/no-unicode-symbols': 'error',
       // Angular template best practices
       '@angular-eslint/template/button-has-type': 'warn',
       '@angular-eslint/template/cyclomatic-complexity': ['warn', { maxComplexity: 10 }],

server/README.md

@@ -0,0 +1,42 @@
+# Server
+
+Node/TypeScript signaling server for MetoYou / Toju. This package owns the public server-directory API, join-request flows, websocket runtime, and server-side persistence.
+
+## Install
+
+1. Run `cd server`.
+2. Run `npm install`.
+
+## Commands
+
+- `npm run dev` starts the server with `ts-node-dev` reload.
+- `npm run build` compiles TypeScript to `dist/`.
+- `npm run start` runs the compiled server.
+- From the repository root, `npm run server:dev`, `npm run server:build`, and `npm run server:start` call the same package commands.
+
+## Runtime Config
+
+- The server loads the repository-root `.env` file on startup.
+- `SSL` can override the effective HTTP protocol, and `PORT` can override the effective port.
+- `DB_PATH` can override the SQLite database file location.
+- `data/variables.json` is normalized on startup and stores `klipyApiKey`, `releaseManifestUrl`, `serverPort`, `serverProtocol`, `serverHost`, and `linkPreview`.
+- Packaged server builds store `metoyou.sqlite` in the OS app-data directory by default so upgrades do not overwrite runtime data. On first start, the server copies forward legacy packaged databases that still live beside the executable.
+- When HTTPS is enabled, certificates are read from the repository `.certs/` directory.
+
+## Structure
+
+| Path | Description |
+| --- | --- |
+| `src/index.ts` | Bootstrap and server startup |
+| `src/app/` | Express app composition |
+| `src/routes/` | REST API routes |
+| `src/websocket/` | WebSocket runtime and signaling transport |
+| `src/cqrs/` | Command/query handlers |
+| `src/config/` | Runtime config loading and normalization |
+| `src/db/`, `src/entities/`, `src/migrations/` | Persistence layer |
+| `data/` | Runtime data files such as `variables.json` |
+
+## Notes
+
+- `dist/` and `../dist-server/` are generated output.
+- See [AGENTS.md](AGENTS.md) for package-specific editing guidance.

server/src/db/database.ts

@@ -1,4 +1,6 @@
+import { randomBytes } from 'crypto';
 import fs from 'fs';
+import fsp from 'fs/promises';
 import path from 'path';
 import { DataSource } from 'typeorm';
 import {
@@ -15,7 +17,21 @@ import {
   ServerBanEntity
 } from '../entities';
 import { serverMigrations } from '../migrations';
-import { findExistingPath, resolveRuntimePath } from '../runtime-paths';
+import {
+  findExistingPath,
+  isPackagedRuntime,
+  resolvePersistentDataPath,
+  resolveRuntimePath
+} from '../runtime-paths';
+
+const LEGACY_PACKAGED_DB_FILE = path.join(resolveRuntimePath('data'), 'metoyou.sqlite');
+const LEGACY_PACKAGED_DB_BACKUP = LEGACY_PACKAGED_DB_FILE + '.bak';
+
+function resolveDefaultDbFile(): string {
+  return isPackagedRuntime()
+    ? resolvePersistentDataPath('metoyou.sqlite')
+    : LEGACY_PACKAGED_DB_FILE;
+}
 
 function resolveDbFile(): string {
   const envPath = process.env.DB_PATH;
@@ -24,7 +40,7 @@ function resolveDbFile(): string {
     return path.resolve(envPath);
   }
 
-  return path.join(resolveRuntimePath('data'), 'metoyou.sqlite');
+  return resolveDefaultDbFile();
 }
 
 const DB_FILE = resolveDbFile();
@@ -35,6 +51,55 @@ const SQLITE_MAGIC = 'SQLite format 3\0';
 
 let applicationDataSource: DataSource | undefined;
 
+function restoreFromBackup(reason: string): Uint8Array | undefined {
+  if (!fs.existsSync(DB_BACKUP)) {
+    console.error(`[DB] ${reason}. No backup available - starting with a fresh database`);
+
+    return undefined;
+  }
+
+  const backup = new Uint8Array(fs.readFileSync(DB_BACKUP));
+
+  if (!isValidSqlite(backup)) {
+    console.error(`[DB] ${reason}. Backup is also invalid - starting with a fresh database`);
+
+    return undefined;
+  }
+
+  fs.copyFileSync(DB_BACKUP, DB_FILE);
+  console.warn('[DB] Restored database from backup', DB_BACKUP);
+
+  return backup;
+}
+
+async function migrateLegacyPackagedDatabase(): Promise<void> {
+  if (process.env.DB_PATH || !isPackagedRuntime() || path.resolve(DB_FILE) === path.resolve(LEGACY_PACKAGED_DB_FILE)) {
+    return;
+  }
+
+  let migrated = false;
+
+  if (!fs.existsSync(DB_FILE)) {
+    if (fs.existsSync(LEGACY_PACKAGED_DB_FILE)) {
+      await fsp.copyFile(LEGACY_PACKAGED_DB_FILE, DB_FILE);
+      migrated = true;
+    } else if (fs.existsSync(LEGACY_PACKAGED_DB_BACKUP)) {
+      await fsp.copyFile(LEGACY_PACKAGED_DB_BACKUP, DB_FILE);
+      migrated = true;
+    }
+  }
+
+  if (!fs.existsSync(DB_BACKUP) && fs.existsSync(LEGACY_PACKAGED_DB_BACKUP)) {
+    await fsp.copyFile(LEGACY_PACKAGED_DB_BACKUP, DB_BACKUP);
+    migrated = true;
+  }
+
+  if (migrated) {
+    console.log('[DB] Migrated packaged database files to:', DATA_DIR);
+    console.log('[DB] Legacy packaged database location was:', LEGACY_PACKAGED_DB_FILE);
+  }
+}
+
 /**
  * Returns true when `data` looks like a valid SQLite file
  * (correct header magic and at least one complete page).
@@ -54,8 +119,11 @@ function isValidSqlite(data: Uint8Array): boolean {
  * restore the backup before the server loads the database.
  */
 function safeguardDbFile(): Uint8Array | undefined {
-  if (!fs.existsSync(DB_FILE))
-    return undefined;
+  if (!fs.existsSync(DB_FILE)) {
+    console.warn(`[DB] ${DB_FILE} is missing - checking backup`);
+
+    return restoreFromBackup('Database file missing');
+  }
 
   const data = new Uint8Array(fs.readFileSync(DB_FILE));
 
@@ -70,22 +138,7 @@ function safeguardDbFile(): Uint8Array | undefined {
   // The main file is corrupt or empty.
   console.warn(`[DB] ${DB_FILE} appears corrupt (${data.length} bytes) - checking backup`);
 
-  if (fs.existsSync(DB_BACKUP)) {
-    const backup = new Uint8Array(fs.readFileSync(DB_BACKUP));
-
-    if (isValidSqlite(backup)) {
-      fs.copyFileSync(DB_BACKUP, DB_FILE);
-      console.warn('[DB] Restored database from backup', DB_BACKUP);
-
-      return backup;
-    }
-
-    console.error('[DB] Backup is also invalid - starting with a fresh database');
-  } else {
-    console.error('[DB] No backup available - starting with a fresh database');
-  }
-
-  return undefined;
+  return restoreFromBackup(`Database file is invalid (${data.length} bytes)`);
 }
 
 function resolveSqlJsConfig(): { locateFile: (file: string) => string } {
@@ -101,6 +154,23 @@ function resolveSqlJsConfig(): { locateFile: (file: string) => string } {
   };
 }
 
+/**
+ * Write the database to disk atomically: write a temp file first,
+ * then rename it over the real file. rename() is atomic on the same
+ * filesystem, so a crash mid-write can never leave a half-written DB.
+ */
+async function atomicSave(data: Uint8Array): Promise<void> {
+  const tmpPath = DB_FILE + '.tmp-' + randomBytes(6).toString('hex');
+
+  try {
+    await fsp.writeFile(tmpPath, Buffer.from(data));
+    await fsp.rename(tmpPath, DB_FILE);
+  } catch (err) {
+    await fsp.unlink(tmpPath).catch(() => {});
+    throw err;
+  }
+}
+
 export function getDataSource(): DataSource {
   if (!applicationDataSource?.isInitialized) {
     throw new Error('DataSource not initialised');
@@ -113,6 +183,8 @@ export async function initDatabase(): Promise<void> {
   if (!fs.existsSync(DATA_DIR))
     fs.mkdirSync(DATA_DIR, { recursive: true });
 
+  await migrateLegacyPackagedDatabase();
+
   const database = safeguardDbFile();
 
   try {
@@ -136,7 +208,7 @@ export async function initDatabase(): Promise<void> {
       synchronize: process.env.DB_SYNCHRONIZE === 'true',
       logging: false,
       autoSave: true,
-      location: DB_FILE,
+      autoSaveCallback: atomicSave,
       sqlJsConfig: resolveSqlJsConfig()
     });
   } catch (error) {

server/src/index.ts

@@ -137,7 +137,7 @@ async function gracefulShutdown(signal: string): Promise<void> {
     staleJoinRequestInterval = null;
   }
 
-  console.log(`\n[Shutdown] ${signal} received - closing database…`);
+  console.log(`\n[Shutdown] ${signal} received - closing database...`);
 
   if (listeningServer?.listening) {
     try {

server/src/runtime-paths.ts

@@ -1,6 +1,9 @@
 import fs from 'fs';
+import os from 'os';
 import path from 'path';
 
+const PACKAGED_DATA_DIRECTORY_NAME = 'MetoYou Server';
+
 type PackagedProcess = NodeJS.Process & { pkg?: unknown };
 
 function uniquePaths(paths: string[]): string[] {
@@ -21,6 +24,33 @@ export function resolveRuntimePath(...segments: string[]): string {
   return path.join(getRuntimeBaseDir(), ...segments);
 }
 
+function resolvePackagedDataDirectory(): string {
+  const homeDirectory = os.homedir();
+
+  switch (process.platform) {
+    case 'win32':
+      return path.join(
+        process.env.APPDATA || path.join(homeDirectory, 'AppData', 'Roaming'),
+        PACKAGED_DATA_DIRECTORY_NAME
+      );
+    case 'darwin':
+      return path.join(homeDirectory, 'Library', 'Application Support', PACKAGED_DATA_DIRECTORY_NAME);
+    default:
+      return path.join(
+        process.env.XDG_DATA_HOME || path.join(homeDirectory, '.local', 'share'),
+        PACKAGED_DATA_DIRECTORY_NAME
+      );
+  }
+}
+
+export function resolvePersistentDataPath(...segments: string[]): string {
+  if (!isPackagedRuntime()) {
+    return resolveRuntimePath(...segments);
+  }
+
+  return path.join(resolvePackagedDataDirectory(), ...segments);
+}
+
 export function resolveProjectRootPath(...segments: string[]): string {
   return path.resolve(__dirname, '..', '..', ...segments);
 }

server/src/websocket/handler-status.spec.ts

@@ -2,13 +2,18 @@ import {
   describe,
   it,
   expect,
-  beforeEach
+  beforeEach,
+  vi
 } from 'vitest';
 import { connectedUsers } from './state';
 import { handleWebSocketMessage } from './handler';
 import { ConnectedUser } from './types';
 import { WebSocket } from 'ws';
 
+vi.mock('../services/server-access.service', () => ({
+  authorizeWebSocketJoin: vi.fn(async () => ({ allowed: true as const }))
+}));
+
 /**
  * Minimal mock WebSocket that records sent messages.
  */
@@ -149,7 +154,7 @@ describe('server websocket handler - status_update', () => {
     // Identify first (required for handler)
     await handleWebSocketMessage('conn-1', { type: 'identify', oderId: 'user-1', displayName: 'User 1' });
 
-    // user-2 joins server → should receive server_users with user-1's status
+    // user-2 joins server -> should receive server_users with user-1's status
     getSentMessagesStore(user2).sentMessages.length = 0;
     await handleWebSocketMessage('conn-2', { type: 'join_server', serverId: 'server-1' });
 
@@ -197,3 +202,94 @@ describe('server websocket handler - user_joined includes status', () => {
     }
   });
 });
+
+describe('server websocket handler - profile metadata in presence messages', () => {
+  beforeEach(() => {
+    connectedUsers.clear();
+  });
+
+  it('broadcasts updated profile metadata when an identified user changes it', async () => {
+    const alice = createConnectedUser('conn-1', 'user-1', {
+      displayName: 'Alice',
+      viewedServerId: 'server-1'
+    });
+    const bob = createConnectedUser('conn-2', 'user-2', {
+      viewedServerId: 'server-1'
+    });
+
+    alice.serverIds.add('server-1');
+    bob.serverIds.add('server-1');
+    getSentMessagesStore(bob).sentMessages.length = 0;
+
+    await handleWebSocketMessage('conn-1', {
+      type: 'identify',
+      oderId: 'user-1',
+      displayName: 'Alice Updated',
+      description: 'Updated bio',
+      profileUpdatedAt: 789
+    });
+
+    const messages = getSentMessagesStore(bob).sentMessages.map((messageText: string) => JSON.parse(messageText));
+    const joinMsg = messages.find((message: { type: string }) => message.type === 'user_joined');
+
+    expect(joinMsg?.displayName).toBe('Alice Updated');
+    expect(joinMsg?.description).toBe('Updated bio');
+    expect(joinMsg?.profileUpdatedAt).toBe(789);
+    expect(joinMsg?.serverId).toBe('server-1');
+  });
+
+  it('includes description and profileUpdatedAt in server_users responses', async () => {
+    const alice = createConnectedUser('conn-1', 'user-1');
+    const bob = createConnectedUser('conn-2', 'user-2');
+
+    alice.serverIds.add('server-1');
+    bob.serverIds.add('server-1');
+
+    await handleWebSocketMessage('conn-1', {
+      type: 'identify',
+      oderId: 'user-1',
+      displayName: 'Alice',
+      description: 'Alice bio',
+      profileUpdatedAt: 123
+    });
+
+    getSentMessagesStore(bob).sentMessages.length = 0;
+
+    await handleWebSocketMessage('conn-2', {
+      type: 'view_server',
+      serverId: 'server-1'
+    });
+
+    const messages = getSentMessagesStore(bob).sentMessages.map((messageText: string) => JSON.parse(messageText));
+    const serverUsersMsg = messages.find((message: { type: string }) => message.type === 'server_users');
+    const aliceInList = serverUsersMsg?.users?.find((userEntry: { oderId: string }) => userEntry.oderId === 'user-1');
+
+    expect(aliceInList?.description).toBe('Alice bio');
+    expect(aliceInList?.profileUpdatedAt).toBe(123);
+  });
+
+  it('includes description and profileUpdatedAt in user_joined broadcasts', async () => {
+    const bob = createConnectedUser('conn-2', 'user-2');
+
+    bob.serverIds.add('server-1');
+    bob.viewedServerId = 'server-1';
+
+    createConnectedUser('conn-1', 'user-1', {
+      displayName: 'Alice',
+      description: 'Alice bio',
+      profileUpdatedAt: 456,
+      viewedServerId: 'server-1'
+    });
+
+    await handleWebSocketMessage('conn-1', {
+      type: 'join_server',
+      serverId: 'server-1'
+    });
+
+    const messages = getSentMessagesStore(bob).sentMessages.map((messageText: string) => JSON.parse(messageText));
+    const joinMsg = messages.find((message: { type: string }) => message.type === 'user_joined');
+
+    expect(joinMsg?.description).toBe('Alice bio');
+    expect(joinMsg?.profileUpdatedAt).toBe(456);
+  });
+});

server/src/websocket/handler.ts

@@ -20,6 +20,22 @@ function normalizeDisplayName(value: unknown, fallback = 'User'): string {
   return normalized || fallback;
 }
 
+function normalizeDescription(value: unknown): string | undefined {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+
+  const normalized = value.trim();
+
+  return normalized || undefined;
+}
+
+function normalizeProfileUpdatedAt(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0
+    ? value
+    : undefined;
+}
+
 function readMessageId(value: unknown): string | undefined {
   if (typeof value !== 'string') {
     return undefined;
@@ -37,7 +53,13 @@ function readMessageId(value: unknown): string | undefined {
 /** Sends the current user list for a given server to a single connected user. */
 function sendServerUsers(user: ConnectedUser, serverId: string): void {
   const users = getUniqueUsersInServer(serverId, user.oderId)
-    .map(cu => ({ oderId: cu.oderId, displayName: normalizeDisplayName(cu.displayName), status: cu.status ?? 'online' }));
+    .map(cu => ({
+      oderId: cu.oderId,
+      displayName: normalizeDisplayName(cu.displayName),
+      description: cu.description,
+      profileUpdatedAt: cu.profileUpdatedAt,
+      status: cu.status ?? 'online'
+    }));
 
   user.ws.send(JSON.stringify({ type: 'server_users', serverId, users }));
 }
@@ -45,6 +67,9 @@ function sendServerUsers(user: ConnectedUser, serverId: string): void {
 function handleIdentify(user: ConnectedUser, message: WsMessage, connectionId: string): void {
   const newOderId = readMessageId(message['oderId']) ?? connectionId;
   const newScope = typeof message['connectionScope'] === 'string' ? message['connectionScope'] : undefined;
+  const previousDisplayName = normalizeDisplayName(user.displayName);
+  const previousDescription = user.description;
+  const previousProfileUpdatedAt = user.profileUpdatedAt;
 
   // Close stale connections from the same identity AND the same connection
   // scope so offer routing always targets the freshest socket (e.g. after
@@ -67,9 +92,38 @@ function handleIdentify(user: ConnectedUser, message: WsMessage, connectionId: s
 
   user.oderId = newOderId;
   user.displayName = normalizeDisplayName(message['displayName'], normalizeDisplayName(user.displayName));
+
+  if (Object.prototype.hasOwnProperty.call(message, 'description')) {
+    user.description = normalizeDescription(message['description']);
+  }
+
+  if (Object.prototype.hasOwnProperty.call(message, 'profileUpdatedAt')) {
+    user.profileUpdatedAt = normalizeProfileUpdatedAt(message['profileUpdatedAt']);
+  }
+
   user.connectionScope = newScope;
   connectedUsers.set(connectionId, user);
   console.log(`User identified: ${user.displayName} (${user.oderId})`);
+
+  if (
+    user.displayName === previousDisplayName
+    && user.description === previousDescription
+    && user.profileUpdatedAt === previousProfileUpdatedAt
+  ) {
+    return;
+  }
+
+  for (const serverId of user.serverIds) {
+    broadcastToServer(serverId, {
+      type: 'user_joined',
+      oderId: user.oderId,
+      displayName: normalizeDisplayName(user.displayName),
+      description: user.description,
+      profileUpdatedAt: user.profileUpdatedAt,
+      status: user.status ?? 'online',
+      serverId
+    }, user.oderId);
+  }
 }
 
 async function handleJoinServer(user: ConnectedUser, message: WsMessage, connectionId: string): Promise<void> {
@@ -108,6 +162,8 @@ async function handleJoinServer(user: ConnectedUser, message: WsMessage, connect
       type: 'user_joined',
       oderId: user.oderId,
       displayName: normalizeDisplayName(user.displayName),
+      description: user.description,
+      profileUpdatedAt: user.profileUpdatedAt,
       status: user.status ?? 'online',
       serverId: sid
     }, user.oderId);
@@ -220,7 +276,7 @@ function handleStatusUpdate(user: ConnectedUser, message: WsMessage, connectionI
 
   user.status = status as ConnectedUser['status'];
   connectedUsers.set(connectionId, user);
-  console.log(`User ${normalizeDisplayName(user.displayName)} (${user.oderId}) status → ${status}`);
+  console.log(`User ${normalizeDisplayName(user.displayName)} (${user.oderId}) status -> ${status}`);
 
   for (const serverId of user.serverIds) {
     broadcastToServer(serverId, {

server/src/websocket/types.ts

@@ -6,6 +6,8 @@ export interface ConnectedUser {
   serverIds: Set<string>;
   viewedServerId?: string;
   displayName?: string;
+  description?: string;
+  profileUpdatedAt?: number;
   /**
    * Opaque scope string sent by the client (typically the signal URL it
    * connected through).  Stale-connection eviction only targets connections

toju-app/README.md

@@ -0,0 +1,42 @@
+# Product Client
+
+Angular 21 renderer for MetoYou / Toju. This package is managed from the repository root, so the main build, test, lint, and Electron integration commands are run there rather than from a local `package.json`.
+
+## Commands
+
+- `npm run start` starts the Angular dev server.
+- `npm run build` builds the client to `dist/client`.
+- `npm run watch` runs the Angular build in watch mode.
+- `npm run test` runs the product-client Vitest suite.
+- `npm run lint` runs ESLint across the repo.
+- `npm run format` formats Angular HTML templates.
+- `npm run sort:props` sorts Angular template properties.
+- `npm run electron:dev` or `npm run dev` runs the client with Electron.
+
+## Structure
+
+| Path | Description |
+| --- | --- |
+| `src/app/domains/` | Bounded contexts and public domain entry points |
+| `src/app/infrastructure/` | Shared technical runtime such as persistence and realtime |
+| `src/app/shared-kernel/` | Cross-domain contracts and shared models |
+| `src/app/features/` | App-level composition and transitional feature shells |
+| `src/app/core/` | Platform adapters, compatibility entry points, and cross-domain technical helpers |
+| `src/app/shared/` | Shared UI primitives and utilities |
+| `src/app/store/` | NgRx reducers, effects, selectors, and actions |
+| `public/` | Static assets copied into the Angular build |
+
+## Key Docs
+
+- [src/app/domains/README.md](src/app/domains/README.md)
+- [src/app/shared-kernel/README.md](src/app/shared-kernel/README.md)
+- [src/app/infrastructure/persistence/README.md](src/app/infrastructure/persistence/README.md)
+- [src/app/infrastructure/realtime/README.md](src/app/infrastructure/realtime/README.md)
+- [../docs/architecture.md](../docs/architecture.md)
+- [AGENTS.md](AGENTS.md)
+
+## Notes
+
+- `angular.json` defines build, serve, and lint targets for the product client.
+- Product-client tests currently run through the root Vitest setup instead of an Angular `test` architect target.
+- If the renderer-to-desktop contract changes, update the Angular bridge, Electron preload API, and IPC handlers together.

toju-app/angular.json

@@ -97,7 +97,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "2.2MB",
-                  "maximumError": "2.32MB"
+                  "maximumError": "2.35MB"
                 },
                 {
                   "type": "anyComponentStyle",

toju-app/src/app/app.html

@@ -28,7 +28,7 @@
           @if (themeStudioFullscreenComponent()) {
           <ng-container *ngComponentOutlet="themeStudioFullscreenComponent()" />
           } @else {
-          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio…</div>
+          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio...</div>
           }
         </div>
         } @else { @if (showDesktopUpdateNotice()) {

toju-app/src/app/app.ts

@@ -44,7 +44,11 @@ import { NativeContextMenuComponent } from './features/shell/native-context-menu
 import { UsersActions } from './store/users/users.actions';
 import { RoomsActions } from './store/rooms/rooms.actions';
 import { selectCurrentRoom } from './store/rooms/rooms.selectors';
-import { ROOM_URL_PATTERN, STORAGE_KEY_CURRENT_USER_ID } from './core/constants';
+import { ROOM_URL_PATTERN } from './core/constants';
+import {
+  clearStoredCurrentUserId,
+  getStoredCurrentUserId
+} from './core/storage/current-user-storage';
 import {
   ThemeNodeDirective,
   ThemePickerOverlayComponent,
@@ -219,8 +223,19 @@ export class App implements OnInit, OnDestroy {
 
     void this.desktopUpdates.initialize();
 
+    let currentUserId = getStoredCurrentUserId();
+
     await this.databaseService.initialize();
 
+    if (currentUserId) {
+      const persistedUserId = await this.databaseService.getCurrentUserId();
+
+      if (persistedUserId !== currentUserId) {
+        clearStoredCurrentUserId();
+        currentUserId = null;
+      }
+    }
+
     try {
       const apiBase = this.servers.getApiBaseUrl();
 
@@ -231,31 +246,28 @@ export class App implements OnInit, OnDestroy {
 
     await this.setupDesktopDeepLinks();
 
-    this.store.dispatch(UsersActions.loadCurrentUser());
-
     this.userStatus.start();
-
-    this.store.dispatch(RoomsActions.loadRooms());
-
-    const currentUserId = localStorage.getItem(STORAGE_KEY_CURRENT_USER_ID);
+    const currentUrl = this.getCurrentRouteUrl();
 
     if (!currentUserId) {
-      if (!this.isPublicRoute(this.router.url)) {
+      if (!this.isPublicRoute(currentUrl)) {
         this.router.navigate(['/login'], {
           queryParams: {
-            returnUrl: this.router.url
+            returnUrl: currentUrl
           }
         }).catch(() => {});
       }
     } else {
-      const current = this.router.url;
+      this.store.dispatch(UsersActions.loadCurrentUser());
+      this.store.dispatch(RoomsActions.loadRooms());
+
       const generalSettings = loadGeneralSettingsFromStorage();
       const lastViewedChat = loadLastViewedChatFromStorage(currentUserId);
 
       if (
         generalSettings.reopenLastViewedChat
         && lastViewedChat
-        && (current === '/' || current === '/search')
+        && (currentUrl === '/' || currentUrl === '/search')
       ) {
         this.router.navigate(['/room', lastViewedChat.roomId], { replaceUrl: true }).catch(() => {});
       }
@@ -388,9 +400,31 @@ export class App implements OnInit, OnDestroy {
   }
 
   private isPublicRoute(url: string): boolean {
-    return url === '/login' ||
-      url === '/register' ||
-      url.startsWith('/invite/');
+    const path = this.getRoutePath(url);
+
+    return path === '/login' ||
+      path === '/register' ||
+      path.startsWith('/invite/');
+  }
+
+  private getCurrentRouteUrl(): string {
+    if (typeof window === 'undefined') {
+      return this.router.url;
+    }
+
+    const currentUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
+    return currentUrl || this.router.url;
+  }
+
+  private getRoutePath(url: string): string {
+    if (!url) {
+      return '/';
+    }
+
+    const [path] = url.split(/[?#]/, 1);
+
+    return path || '/';
   }
 
   private parseDesktopInviteUrl(url: string): { inviteId: string; sourceUrl: string } | null {

toju-app/src/app/core/constants.ts

@@ -5,6 +5,7 @@ export const STORAGE_KEY_CONNECTION_SETTINGS = 'metoyou_connection_settings';
 export const STORAGE_KEY_NOTIFICATION_SETTINGS = 'metoyou_notification_settings';
 export const STORAGE_KEY_VOICE_SETTINGS = 'metoyou_voice_settings';
 export const STORAGE_KEY_DEBUGGING_SETTINGS = 'metoyou_debugging_settings';
+export const STORAGE_KEY_ICE_SERVERS = 'metoyou_ice_servers';
 export const STORAGE_KEY_THEME_ACTIVE = 'metoyou_theme_active';
 export const STORAGE_KEY_THEME_DRAFT = 'metoyou_theme_draft';
 export const STORAGE_KEY_USER_VOLUMES = 'metoyou_user_volumes';

toju-app/src/app/core/services/debugging/debugging-network-snapshot.builder.ts

@@ -1508,7 +1508,7 @@ class DebugNetworkSnapshotBuilder {
     if (value.length <= 12)
       return value;
 
-    return `${value.slice(0, 6)}…${value.slice(-4)}`;
+    return `${value.slice(0, 6)}...${value.slice(-4)}`;
   }
 
   private getEntryPayloadRecord(payload: unknown): Record<string, unknown> | null {

toju-app/src/app/core/storage/current-user-storage.ts

@@ -0,0 +1,59 @@
+import { STORAGE_KEY_CURRENT_USER_ID } from '../constants';
+
+const METOYOU_STORAGE_PREFIX = 'metoyou_';
+
+function normaliseStorageUserId(userId?: string | null): string | null {
+  const trimmedUserId = userId?.trim();
+
+  return trimmedUserId || null;
+}
+
+export function getStoredCurrentUserId(): string | null {
+  try {
+    const raw = normaliseStorageUserId(localStorage.getItem(STORAGE_KEY_CURRENT_USER_ID));
+
+    return raw || null;
+  } catch {
+    return null;
+  }
+}
+
+export function getUserScopedStorageKey(baseKey: string, userId?: string | null): string {
+  const scopedUserId = userId === undefined
+    ? getStoredCurrentUserId()
+    : normaliseStorageUserId(userId);
+
+  return scopedUserId
+    ? `${baseKey}__${encodeURIComponent(scopedUserId)}`
+    : baseKey;
+}
+
+export function setStoredCurrentUserId(userId: string): void {
+  try {
+    localStorage.setItem(STORAGE_KEY_CURRENT_USER_ID, userId);
+  } catch {}
+}
+
+export function clearStoredCurrentUserId(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY_CURRENT_USER_ID);
+  } catch {}
+}
+
+export function clearStoredLocalAppData(): void {
+  try {
+    const keysToRemove: string[] = [];
+
+    for (let index = 0; index < localStorage.length; index += 1) {
+      const key = localStorage.key(index);
+
+      if (key?.startsWith(METOYOU_STORAGE_PREFIX)) {
+        keysToRemove.push(key);
+      }
+    }
+
+    for (const key of keysToRemove) {
+      localStorage.removeItem(key);
+    }
+  } catch {}
+}

toju-app/src/app/domains/authentication/README.md

@@ -24,7 +24,7 @@ authentication/
 
 ## Service overview
 
-`AuthenticationService` resolves the API base URL from `ServerDirectoryFacade`, then makes POST requests for login and registration. It does not hold session state itself; after a successful login the calling component stores `currentUserId` in localStorage and dispatches `UsersActions.setCurrentUser` into the NgRx store.
+`AuthenticationService` resolves the API base URL from `ServerDirectoryFacade`, then makes POST requests for login and registration. It does not hold session state itself; after a successful login the calling component dispatches `UsersActions.authenticateUser`, and the users effects prepare the local persistence boundary before exposing the new user in the NgRx store.
 
 ```mermaid
 graph TD
@@ -58,6 +58,7 @@ sequenceDiagram
     participant SD as ServerDirectoryFacade
     participant API as Server API
     participant Store as NgRx Store
+    participant Effects as UsersEffects
 
     User->>Login: Submit credentials
     Login->>Auth: login(username, password)
@@ -66,13 +67,15 @@ sequenceDiagram
     Auth->>API: POST /api/auth/login
     API-->>Auth: { userId, displayName }
     Auth-->>Login: success
-    Login->>Store: UsersActions.setCurrentUser
-    Login->>Login: localStorage.setItem(currentUserId)
+    Login->>Store: UsersActions.authenticateUser
+    Store->>Effects: prepare persisted user scope
+    Effects->>Store: reset stale room/user/message state
+    Effects->>Store: UsersActions.setCurrentUser
 ```
 
 ## Registration flow
 
-Registration follows the same pattern but posts to `/api/auth/register` with an additional `displayName` field. On success the user is treated as logged in and the same store dispatch happens.
+Registration follows the same pattern but posts to `/api/auth/register` with an additional `displayName` field. On success the user is treated as logged in and the same authenticated-user transition runs, switching the browser persistence layer to that user's local scope before the app reloads rooms and user state.
 
 ## User bar
 

toju-app/src/app/domains/authentication/feature/login/login.component.ts

@@ -15,7 +15,6 @@ import { AuthenticationService } from '../../application/services/authentication
 import { ServerDirectoryFacade } from '../../../server-directory';
 import { UsersActions } from '../../../../store/users/users.actions';
 import { User } from '../../../../shared-kernel';
-import { STORAGE_KEY_CURRENT_USER_ID } from '../../../../core/constants';
 
 @Component({
   selector: 'app-login',
@@ -70,9 +69,7 @@ export class LoginComponent {
           joinedAt: Date.now()
         };
 
-        try { localStorage.setItem(STORAGE_KEY_CURRENT_USER_ID, resp.id); } catch {}
-
-        this.store.dispatch(UsersActions.setCurrentUser({ user }));
+        this.store.dispatch(UsersActions.authenticateUser({ user }));
         const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
 
         if (returnUrl?.startsWith('/')) {

toju-app/src/app/domains/authentication/feature/register/register.component.ts

@@ -15,7 +15,6 @@ import { AuthenticationService } from '../../application/services/authentication
 import { ServerDirectoryFacade } from '../../../server-directory';
 import { UsersActions } from '../../../../store/users/users.actions';
 import { User } from '../../../../shared-kernel';
-import { STORAGE_KEY_CURRENT_USER_ID } from '../../../../core/constants';
 
 @Component({
   selector: 'app-register',
@@ -72,9 +71,7 @@ export class RegisterComponent {
           joinedAt: Date.now()
         };
 
-        try { localStorage.setItem(STORAGE_KEY_CURRENT_USER_ID, resp.id); } catch {}
-
-        this.store.dispatch(UsersActions.setCurrentUser({ user }));
+        this.store.dispatch(UsersActions.authenticateUser({ user }));
         const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
 
         if (returnUrl?.startsWith('/')) {

toju-app/src/app/domains/authentication/feature/user-bar/user-bar.component.ts

@@ -11,7 +11,11 @@ import { UserAvatarComponent } from '../../../../shared';
 @Component({
   selector: 'app-user-bar',
   standalone: true,
-  imports: [CommonModule, NgIcon, UserAvatarComponent],
+  imports: [
+    CommonModule,
+    NgIcon,
+    UserAvatarComponent
+  ],
   viewProviders: [
     provideIcons({
       lucideLogIn,

toju-app/src/app/domains/chat/domain/rules/link-embed.rules.ts

@@ -0,0 +1,149 @@
+export type SpotifyResourceType = 'album' | 'artist' | 'episode' | 'playlist' | 'show' | 'track';
+export type SoundcloudResourceType = 'playlist' | 'track';
+
+export interface SpotifyResource {
+  type: SpotifyResourceType;
+  id: string;
+}
+
+export interface SoundcloudResource {
+  canonicalUrl: string;
+  type: SoundcloudResourceType;
+}
+
+const SPOTIFY_RESOURCE_TYPES = new Set<SpotifyResourceType>([
+  'album',
+  'artist',
+  'episode',
+  'playlist',
+  'show',
+  'track'
+]);
+const SPOTIFY_URI_PATTERN = /^spotify:(album|artist|episode|playlist|show|track):([a-zA-Z0-9]+)$/i;
+const SOUNDCLOUD_HOST_PATTERN = /^(?:www\.|m\.)?soundcloud\.com$/i;
+const YOUTUBE_HOST_PATTERN = /^(?:www\.|m\.|music\.)?youtube\.com$/i;
+const YOUTU_BE_HOST_PATTERN = /^(?:www\.)?youtu\.be$/i;
+const YOUTUBE_VIDEO_ID_PATTERN = /^[\w-]{11}$/;
+
+function parseUrl(url: string): URL | null {
+  try {
+    return new URL(url);
+  } catch {
+    return null;
+  }
+}
+
+export function extractYoutubeVideoId(url: string): string | null {
+  const parsedUrl = parseUrl(url);
+
+  if (!parsedUrl) {
+    return null;
+  }
+
+  if (YOUTU_BE_HOST_PATTERN.test(parsedUrl.hostname)) {
+    const shortId = parsedUrl.pathname.split('/').filter(Boolean)[0] ?? '';
+
+    return YOUTUBE_VIDEO_ID_PATTERN.test(shortId) ? shortId : null;
+  }
+
+  if (!YOUTUBE_HOST_PATTERN.test(parsedUrl.hostname)) {
+    return null;
+  }
+
+  const pathSegments = parsedUrl.pathname.split('/').filter(Boolean);
+
+  if (parsedUrl.pathname === '/watch') {
+    const queryId = parsedUrl.searchParams.get('v') ?? '';
+
+    return YOUTUBE_VIDEO_ID_PATTERN.test(queryId) ? queryId : null;
+  }
+
+  if (pathSegments.length >= 2 && (pathSegments[0] === 'embed' || pathSegments[0] === 'shorts')) {
+    const pathId = pathSegments[1];
+
+    return YOUTUBE_VIDEO_ID_PATTERN.test(pathId) ? pathId : null;
+  }
+
+  return null;
+}
+
+export function isYoutubeUrl(url?: string): boolean {
+  return !!url && extractYoutubeVideoId(url) !== null;
+}
+
+export function extractSpotifyResource(url: string): SpotifyResource | null {
+  const spotifyUriMatch = url.match(SPOTIFY_URI_PATTERN);
+
+  if (spotifyUriMatch?.[1] && spotifyUriMatch[2]) {
+    return {
+      type: spotifyUriMatch[1].toLowerCase() as SpotifyResourceType,
+      id: spotifyUriMatch[2]
+    };
+  }
+
+  const parsedUrl = parseUrl(url);
+
+  if (!parsedUrl || !/^(?:open|play)\.spotify\.com$/i.test(parsedUrl.hostname)) {
+    return null;
+  }
+
+  const segments = parsedUrl.pathname.split('/').filter(Boolean);
+
+  if (segments.length >= 2 && SPOTIFY_RESOURCE_TYPES.has(segments[0] as SpotifyResourceType)) {
+    return {
+      type: segments[0] as SpotifyResourceType,
+      id: segments[1]
+    };
+  }
+
+  if (segments.length >= 4 && segments[0] === 'user' && segments[2] === 'playlist') {
+    return {
+      type: 'playlist',
+      id: segments[3]
+    };
+  }
+
+  return null;
+}
+
+export function isSpotifyUrl(url?: string): boolean {
+  return !!url && extractSpotifyResource(url) !== null;
+}
+
+export function extractSoundcloudResource(url: string): SoundcloudResource | null {
+  const parsedUrl = parseUrl(url);
+
+  if (!parsedUrl || !SOUNDCLOUD_HOST_PATTERN.test(parsedUrl.hostname)) {
+    return null;
+  }
+
+  const segments = parsedUrl.pathname.split('/').filter(Boolean);
+
+  if (segments.length === 2) {
+    const canonicalUrl = new URL(`https://soundcloud.com/${segments[0]}/${segments[1]}`);
+
+    return {
+      canonicalUrl: canonicalUrl.toString(),
+      type: 'track'
+    };
+  }
+
+  if (segments.length === 3 && segments[1] === 'sets') {
+    const canonicalUrl = new URL(`https://soundcloud.com/${segments[0]}/sets/${segments[2]}`);
+
+    return {
+      canonicalUrl: canonicalUrl.toString(),
+      type: 'playlist'
+    };
+  }
+
+  return null;
+}
+
+export function isSoundcloudUrl(url?: string): boolean {
+  return !!url && extractSoundcloudResource(url) !== null;
+}
+
+export function hasDedicatedChatEmbed(url?: string): boolean {
+  return isYoutubeUrl(url) || isSpotifyUrl(url) || isSoundcloudUrl(url);
+}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.html

@@ -100,11 +100,13 @@
 
         @if (msg.linkMetadata?.length) {
           @for (meta of msg.linkMetadata; track meta.url) {
-            <app-chat-link-embed
-              [metadata]="meta"
-              [canRemove]="isOwnMessage() || isAdmin()"
-              (removed)="removeEmbed(meta.url)"
-            />
+            @if (shouldShowLinkEmbed(meta.url)) {
+              <app-chat-link-embed
+                [metadata]="meta"
+                [canRemove]="isOwnMessage() || isAdmin()"
+                (removed)="removeEmbed(meta.url)"
+              />
+            }
           }
         }
 
@@ -188,7 +190,7 @@
                           [class.text-destructive]="!!att.requestError"
                           [class.text-muted-foreground]="!att.requestError"
                         >
-                          {{ att.requestError || 'Waiting for image source…' }}
+                          {{ att.requestError || 'Waiting for image source...' }}
                         </div>
                       </div>
                     </div>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts

@@ -31,6 +31,7 @@ import {
   MAX_AUTO_SAVE_SIZE_BYTES
 } from '../../../../../attachment';
 import { KlipyService } from '../../../../application/services/klipy.service';
+import { hasDedicatedChatEmbed } from '../../../../domain/rules/link-embed.rules';
 import {
   DELETED_MESSAGE_CONTENT,
   Message,
@@ -278,6 +279,10 @@ export class ChatMessageItemComponent {
     });
   }
 
+  shouldShowLinkEmbed(url?: string): boolean {
+    return !hasDedicatedChatEmbed(url);
+  }
+
   requestReferenceScroll(messageId: string): void {
     this.referenceRequested.emit(messageId);
   }
@@ -414,8 +419,8 @@ export class ChatMessageItemComponent {
     }
 
     return this.isVideoAttachment(attachment)
-      ? 'Waiting for video source…'
-      : 'Waiting for audio source…';
+      ? 'Waiting for video source...'
+      : 'Waiting for audio source...';
   }
 
   getMediaAttachmentActionLabel(attachment: Attachment): string {
@@ -497,8 +502,8 @@ export class ChatMessageItemComponent {
             ? 'Large video. Accept the download to watch it in chat.'
             : 'Large audio file. Accept the download to play it in chat.'
           : isVideo
-            ? 'Waiting for video source…'
-            : 'Waiting for audio source…',
+            ? 'Waiting for video source...'
+            : 'Waiting for audio source...',
       progressPercent: attachment.size > 0
         ? ((attachment.receivedBytes || 0) * 100) / attachment.size
         : 0

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-markdown/chat-message-markdown.component.html

@@ -45,6 +45,14 @@
       <div class="block">
         <app-chat-youtube-embed [url]="node.url" />
       </div>
+    } @else if (isSpotifyUrl(node.url)) {
+      <div class="block">
+        <app-chat-spotify-embed [url]="node.url" />
+      </div>
+    } @else if (isSoundcloudUrl(node.url)) {
+      <div class="block">
+        <app-chat-soundcloud-embed [url]="node.url" />
+      </div>
     }
   </ng-template>
 </remark>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-markdown/chat-message-markdown.component.ts

@@ -5,8 +5,15 @@ import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+import {
+  isSoundcloudUrl,
+  isSpotifyUrl,
+  isYoutubeUrl
+} from '../../../../../domain/rules/link-embed.rules';
 import { ChatImageProxyFallbackDirective } from '../../../../chat-image-proxy-fallback.directive';
-import { ChatYoutubeEmbedComponent, isYoutubeUrl } from '../chat-youtube-embed/chat-youtube-embed.component';
+import { ChatSoundcloudEmbedComponent } from '../chat-soundcloud-embed/chat-soundcloud-embed.component';
+import { ChatSpotifyEmbedComponent } from '../chat-spotify-embed/chat-spotify-embed.component';
+import { ChatYoutubeEmbedComponent } from '../chat-youtube-embed/chat-youtube-embed.component';
 
 const PRISM_LANGUAGE_ALIASES: Record<string, string> = {
   cs: 'csharp',
@@ -40,6 +47,8 @@ const REMARK_PROCESSOR = unified()
     RemarkModule,
     MermaidComponent,
     ChatImageProxyFallbackDirective,
+    ChatSpotifyEmbedComponent,
+    ChatSoundcloudEmbedComponent,
     ChatYoutubeEmbedComponent
   ],
   templateUrl: './chat-message-markdown.component.html'
@@ -63,6 +72,14 @@ export class ChatMessageMarkdownComponent {
     return isYoutubeUrl(url);
   }
 
+  isSpotifyUrl(url?: string): boolean {
+    return isSpotifyUrl(url);
+  }
+
+  isSoundcloudUrl(url?: string): boolean {
+    return isSoundcloudUrl(url);
+  }
+
   isMermaidCodeBlock(lang?: string): boolean {
     return this.normalizeCodeLanguage(lang) === 'mermaid';
   }

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-soundcloud-embed/chat-soundcloud-embed.component.html

@@ -0,0 +1,11 @@
+@if (embedUrl(); as soundcloudEmbedUrl) {
+  <div class="mt-2 w-[480px] max-w-full overflow-hidden rounded-md border border-border/60 bg-secondary/20">
+    <iframe
+      [src]="soundcloudEmbedUrl"
+      [style.height.px]="embedHeight()"
+      class="w-full border-0"
+      loading="lazy"
+      title="SoundCloud player"
+    ></iframe>
+  </div>
+}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-soundcloud-embed/chat-soundcloud-embed.component.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  computed,
+  inject,
+  input
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { extractSoundcloudResource } from '../../../../../domain/rules/link-embed.rules';
+
+@Component({
+  selector: 'app-chat-soundcloud-embed',
+  standalone: true,
+  templateUrl: './chat-soundcloud-embed.component.html'
+})
+export class ChatSoundcloudEmbedComponent {
+  readonly url = input.required<string>();
+
+  readonly resource = computed(() => extractSoundcloudResource(this.url()));
+
+  readonly embedHeight = computed(() => this.resource()?.type === 'playlist' ? 352 : 166);
+
+  readonly embedUrl = computed(() => {
+    const resource = this.resource();
+
+    if (!resource) {
+      return '';
+    }
+
+    const embedUrl = new URL('https://w.soundcloud.com/player/');
+
+    embedUrl.searchParams.set('url', resource.canonicalUrl);
+    embedUrl.searchParams.set('auto_play', 'false');
+    embedUrl.searchParams.set('hide_related', 'false');
+    embedUrl.searchParams.set('show_comments', 'false');
+    embedUrl.searchParams.set('show_user', 'true');
+    embedUrl.searchParams.set('show_reposts', 'false');
+    embedUrl.searchParams.set('show_teaser', 'true');
+    embedUrl.searchParams.set('visual', resource.type === 'playlist' ? 'true' : 'false');
+
+    return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl.toString());
+  });
+
+  private readonly sanitizer = inject(DomSanitizer);
+}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-spotify-embed/chat-spotify-embed.component.html

@@ -0,0 +1,12 @@
+@if (embedUrl(); as spotifyEmbedUrl) {
+  <div class="mt-2 w-[480px] max-w-full overflow-hidden rounded-md border border-border/60 bg-secondary/20">
+    <iframe
+      [src]="spotifyEmbedUrl"
+      [style.height.px]="embedHeight()"
+      class="w-full border-0"
+      loading="lazy"
+      title="Spotify player"
+      allowfullscreen
+    ></iframe>
+  </div>
+}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-spotify-embed/chat-spotify-embed.component.ts

@@ -0,0 +1,51 @@
+import {
+  Component,
+  computed,
+  inject,
+  input
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { extractSpotifyResource } from '../../../../../domain/rules/link-embed.rules';
+
+@Component({
+  selector: 'app-chat-spotify-embed',
+  standalone: true,
+  templateUrl: './chat-spotify-embed.component.html'
+})
+export class ChatSpotifyEmbedComponent {
+  readonly url = input.required<string>();
+
+  readonly resource = computed(() => extractSpotifyResource(this.url()));
+
+  readonly embedHeight = computed(() => {
+    const resource = this.resource();
+
+    if (!resource) {
+      return 0;
+    }
+
+    switch (resource.type) {
+      case 'track':
+      case 'episode':
+        return 152;
+      default:
+        return 352;
+    }
+  });
+
+  readonly embedUrl = computed(() => {
+    const resource = this.resource();
+
+    if (!resource) {
+      return '';
+    }
+
+    const embedUrl = new URL(`https://open.spotify.com/embed/${resource.type}/${encodeURIComponent(resource.id)}`);
+
+    embedUrl.searchParams.set('utm_source', 'generator');
+
+    return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl.toString());
+  });
+
+  private readonly sanitizer = inject(DomSanitizer);
+}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-youtube-embed/chat-youtube-embed.component.html

@@ -3,7 +3,6 @@
     <iframe
       [src]="embedUrl()"
       class="aspect-video w-full"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
       loading="lazy"
     ></iframe>

toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-youtube-embed/chat-youtube-embed.component.ts

@@ -5,8 +5,21 @@ import {
   input
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { extractYoutubeVideoId } from '../../../../../domain/rules/link-embed.rules';
 
-const YOUTUBE_URL_PATTERN = /(?:youtube\.com\/(?:watch\?.*v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/;
+const YOUTUBE_EMBED_FALLBACK_ORIGIN = 'https://toju.app';
+
+function resolveYoutubeClientOrigin(): string {
+  if (typeof window === 'undefined') {
+    return YOUTUBE_EMBED_FALLBACK_ORIGIN;
+  }
+
+  const origin = window.location.origin;
+
+  return /^https?:\/\//.test(origin)
+    ? origin
+    : YOUTUBE_EMBED_FALLBACK_ORIGIN;
+}
 
 @Component({
   selector: 'app-chat-youtube-embed',
@@ -16,11 +29,7 @@ const YOUTUBE_URL_PATTERN = /(?:youtube\.com\/(?:watch\?.*v=|embed\/|shorts\/)|y
 export class ChatYoutubeEmbedComponent {
   readonly url = input.required<string>();
 
-  readonly videoId = computed(() => {
-    const match = this.url().match(YOUTUBE_URL_PATTERN);
-
-    return match?.[1] ?? null;
-  });
+  readonly videoId = computed(() => extractYoutubeVideoId(this.url()));
 
   readonly embedUrl = computed(() => {
     const id = this.videoId();
@@ -28,14 +37,16 @@ export class ChatYoutubeEmbedComponent {
     if (!id)
       return '';
 
+    const clientOrigin = resolveYoutubeClientOrigin();
+    const embedUrl = new URL(`https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}`);
+
+    embedUrl.searchParams.set('origin', clientOrigin);
+    embedUrl.searchParams.set('widget_referrer', clientOrigin);
+
     return this.sanitizer.bypassSecurityTrustResourceUrl(
-      `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}`
+      embedUrl.toString()
     );
   });
 
   private readonly sanitizer = inject(DomSanitizer);
 }
-
-export function isYoutubeUrl(url?: string): boolean {
-  return !!url && YOUTUBE_URL_PATTERN.test(url);
-}

toju-app/src/app/domains/chat/feature/chat-messages/components/message-list/chat-message-list.component.html

@@ -7,7 +7,7 @@
   @if (syncing() && !loading()) {
     <div class="flex items-center justify-center gap-2 py-1.5 text-xs text-muted-foreground">
       <div class="h-3 w-3 animate-spin rounded-full border-b-2 border-primary"></div>
-      <span>Syncing messages…</span>
+      <span>Syncing messages...</span>
     </div>
   }
 

toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html

@@ -62,7 +62,7 @@
     @if (loading() && results().length === 0) {
       <div class="flex h-full min-h-56 flex-col items-center justify-center gap-3 text-muted-foreground">
         <span class="h-6 w-6 animate-spin rounded-full border-2 border-primary/20 border-t-primary"></span>
-        <p class="text-sm">Loading GIFs from KLIPY…</p>
+        <p class="text-sm">Loading GIFs from KLIPY...</p>
       </div>
     } @else if (results().length === 0) {
       <div
@@ -125,7 +125,7 @@
         [disabled]="loading()"
         class="rounded-full border border-border/80 bg-background/60 px-4 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
       >
-        {{ loading() ? 'Loading…' : 'Load more' }}
+        {{ loading() ? 'Loading...' : 'Load more' }}
       </button>
     }
   </div>

toju-app/src/app/domains/notifications/README.md

@@ -90,7 +90,8 @@ All effects in this domain are `dispatch: false`. The effect layer never owns no
 | `hydrateUnreadCounts$` | `loadRoomsSuccess` and `loadCurrentUserSuccess` | Rebuilds unread counts from persisted messages once both rooms and user identity exist |
 | `markVisibleChannelRead$` | Room activation and channel selection | Clears unread for the current visible channel |
 | `handleIncomingMessage$` | `MessagesActions.receiveMessage` | Updates unread counts and triggers desktop delivery for live messages |
-| `refreshCurrentRoomUnread$` | `loadMessagesSuccess` and `syncMessages` | Recomputes unread counts for the active room from the latest message snapshot |
+| `refreshViewedRoomUnread$` | `loadMessagesSuccess` | Recomputes unread counts for the active room from the latest viewed-room snapshot |
+| `refreshSyncedRoomUnread$` | `syncMessages` | Recomputes unread counts for every room represented in a sync batch, including background servers |
 
 ## Incoming message flow
 

toju-app/src/app/domains/notifications/application/effects/notifications.effects.spec.ts

@@ -0,0 +1,34 @@
+import { type Message } from '../../../../shared-kernel';
+import { groupMessagesByRoom } from './notifications.effects';
+
+function createMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: 'message-1',
+    roomId: 'room-1',
+    senderId: 'user-1',
+    senderName: 'User 1',
+    content: 'hello',
+    timestamp: 1,
+    reactions: [],
+    isDeleted: false,
+    ...overrides
+  };
+}
+
+describe('groupMessagesByRoom', () => {
+  it('groups sync batches by room id', () => {
+    const grouped = groupMessagesByRoom([
+      createMessage({ id: 'a1', roomId: 'room-a' }),
+      createMessage({ id: 'b1', roomId: 'room-b' }),
+      createMessage({ id: 'a2', roomId: 'room-a' })
+    ]);
+
+    expect(Array.from(grouped.keys())).toEqual(['room-a', 'room-b']);
+    expect(grouped.get('room-a')?.map((message) => message.id)).toEqual(['a1', 'a2']);
+    expect(grouped.get('room-b')?.map((message) => message.id)).toEqual(['b1']);
+  });
+
+  it('returns empty map for empty sync batch', () => {
+    expect(groupMessagesByRoom([]).size).toBe(0);
+  });
+});

toju-app/src/app/domains/notifications/application/effects/notifications.effects.ts

@@ -11,6 +11,7 @@ import {
   tap,
   withLatestFrom
 } from 'rxjs/operators';
+import type { Message } from '../../../../shared-kernel';
 import { MessagesActions } from '../../../../store/messages/messages.actions';
 import { RoomsActions } from '../../../../store/rooms/rooms.actions';
 import { selectCurrentRoom, selectSavedRooms } from '../../../../store/rooms/rooms.selectors';
@@ -18,6 +19,23 @@ import { UsersActions } from '../../../../store/users/users.actions';
 import { selectCurrentUser } from '../../../../store/users/users.selectors';
 import { NotificationsFacade } from '../facades/notifications.facade';
 
+export function groupMessagesByRoom(messages: Message[]): Map<string, Message[]> {
+  const messagesByRoom = new Map<string, Message[]>();
+
+  for (const message of messages) {
+    const roomMessages = messagesByRoom.get(message.roomId);
+
+    if (roomMessages) {
+      roomMessages.push(message);
+      continue;
+    }
+
+    messagesByRoom.set(message.roomId, [message]);
+  }
+
+  return messagesByRoom;
+}
+
 @Injectable()
 export class NotificationsEffects {
   private readonly actions$ = inject(Actions);
@@ -92,10 +110,10 @@ export class NotificationsEffects {
     { dispatch: false }
   );
 
-  refreshCurrentRoomUnread$ = createEffect(
+  refreshViewedRoomUnread$ = createEffect(
     () =>
       this.actions$.pipe(
-        ofType(MessagesActions.loadMessagesSuccess, MessagesActions.syncMessages),
+        ofType(MessagesActions.loadMessagesSuccess),
         withLatestFrom(this.store.select(selectCurrentRoom)),
         tap(([{ messages }, room]) => {
           if (room) {
@@ -105,4 +123,17 @@ export class NotificationsEffects {
       ),
     { dispatch: false }
   );
+
+  refreshSyncedRoomUnread$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(MessagesActions.syncMessages),
+        tap(({ messages }) => {
+          for (const [roomId, roomMessages] of groupMessagesByRoom(messages)) {
+            this.notifications.refreshRoomUnreadFromMessages(roomId, roomMessages);
+          }
+        })
+      )
+    , { dispatch: false }
+  );
 }

toju-app/src/app/domains/notifications/domain/logic/notification.logic.ts

@@ -151,7 +151,7 @@ function formatMessagePreview(senderName: string, content: string): string {
   }
 
   const preview = normalisedContent.length > MESSAGE_PREVIEW_LIMIT
-    ? `${normalisedContent.slice(0, MESSAGE_PREVIEW_LIMIT - 1)}…`
+    ? `${normalisedContent.slice(0, MESSAGE_PREVIEW_LIMIT - 1)}...`
     : normalisedContent;
 
   return `${senderName}: ${preview}`;

toju-app/src/app/domains/profile-avatar/README.md

@@ -1,6 +1,6 @@
 # Profile Avatar Domain
 
-Owns local profile picture workflow: source validation, crop/zoom editor state, static 256x256 WebP rendering, animated avatar preservation, desktop file persistence, and P2P avatar sync metadata.
+Owns local profile picture workflow plus peer-synced profile-card metadata: source validation, crop/zoom editor state, static 256x256 WebP rendering, animated avatar preservation, desktop file persistence, and P2P avatar/profile sync metadata.
 
 ## Responsibilities
 
@@ -9,7 +9,9 @@ Owns local profile picture workflow: source validation, crop/zoom editor state,
 - Render static avatars to `256x256` WebP with client-side compression.
 - Preserve animated `.gif` and animated `.webp` uploads without flattening frames.
 - Persist desktop copy at `user/<username>/profile/profile.<ext>` under app data.
+- Let the local user edit their profile-card display name and description.
 - Expose helpers used by store effects to keep avatar metadata (`avatarHash`, `avatarMime`, `avatarUpdatedAt`) consistent.
+- Reuse the avatar summary/request/full handshake to sync profile text (`displayName`, `description`, `profileUpdatedAt`) alongside avatar state.
 
 ## Module map
 
@@ -33,12 +35,14 @@ graph TD
 ## Flow
 
 1. `ProfileCardComponent` opens file picker from editable avatar button.
-2. `ProfileAvatarEditorComponent` previews exact crop using drag + zoom.
-3. `ProfileAvatarImageService` renders static uploads to `256x256` WebP, but keeps animated GIF and WebP sources intact.
-4. `ProfileAvatarStorageService` writes desktop copy when Electron is available.
-5. `UserAvatarEffects` broadcasts avatar summary, answers requests, streams chunks, and persists received avatars locally.
+2. `ProfileCardComponent` saves display-name and description edits through the users store.
+3. `ProfileAvatarEditorComponent` previews exact crop using drag + zoom.
+4. `ProfileAvatarImageService` renders static uploads to `256x256` WebP, but keeps animated GIF and WebP sources intact.
+5. `ProfileAvatarStorageService` writes desktop copy when Electron is available.
+6. `UserAvatarEffects` broadcasts avatar/profile summaries, answers requests, streams chunks when needed, and persists received profile state locally.
 
 ## Notes
 
 - Static uploads are normalized to WebP. Animated GIF and animated WebP uploads keep their original animation, mime type, and full-frame presentation.
 - `avatarUrl` stays local display data. Version conflict resolution uses `avatarUpdatedAt` and `avatarHash`.
+- Profile text uses its own `profileUpdatedAt` version so display-name and description changes can sync without replacing a newer avatar.

toju-app/src/app/domains/profile-avatar/feature/profile-avatar-editor/profile-avatar-editor.component.html

@@ -1,8 +1,8 @@
 <div
   class="fixed inset-0 z-[112] bg-black/70 backdrop-blur-sm"
-  (click)="cancelled.emit()"
-  (keydown.enter)="cancelled.emit()"
-  (keydown.space)="cancelled.emit()"
+  (click)="cancelled.emit(undefined)"
+  (keydown.enter)="cancelled.emit(undefined)"
+  (keydown.space)="cancelled.emit(undefined)"
   role="button"
   tabindex="0"
   aria-label="Close profile image editor"
@@ -11,7 +11,6 @@
 <div class="fixed inset-0 z-[113] flex items-center justify-center p-4 pointer-events-none">
   <div
     class="pointer-events-auto flex max-h-[calc(100vh-2rem)] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl"
-    (click)="$event.stopPropagation()"
     role="dialog"
     aria-modal="true"
     tabindex="-1"
@@ -135,7 +134,7 @@
       <button
         type="button"
         class="rounded-lg bg-secondary px-4 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
-        (click)="cancelled.emit()"
+        (click)="cancelled.emit(undefined)"
         [disabled]="processing()"
       >
         Cancel

toju-app/src/app/domains/profile-avatar/feature/profile-avatar-editor/profile-avatar-editor.component.ts

@@ -27,7 +27,7 @@ import {
 export class ProfileAvatarEditorComponent {
   readonly source = input.required<EditableProfileAvatarSource>();
 
-  readonly cancelled = output<void>();
+  readonly cancelled = output<undefined>();
   readonly confirmed = output<ProcessedProfileAvatar>();
 
   readonly frameSize = PROFILE_AVATAR_EDITOR_FRAME_SIZE;
@@ -53,7 +53,7 @@ export class ProfileAvatarEditorComponent {
   @HostListener('document:keydown.escape')
   onEscape(): void {
     if (!this.processing()) {
-      this.cancelled.emit();
+      this.cancelled.emit(undefined);
     }
   }
 

toju-app/src/app/domains/profile-avatar/feature/profile-avatar-editor/profile-avatar-editor.service.ts

@@ -1,13 +1,7 @@
 import { Injectable, inject } from '@angular/core';
-import {
-  Overlay,
-  OverlayRef
-} from '@angular/cdk/overlay';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import {
-  EditableProfileAvatarSource,
-  ProcessedProfileAvatar
-} from '../../domain/profile-avatar.models';
+import { EditableProfileAvatarSource, ProcessedProfileAvatar } from '../../domain/profile-avatar.models';
 import { ProfileAvatarEditorComponent } from './profile-avatar-editor.component';
 
 export const PROFILE_AVATAR_EDITOR_OVERLAY_CLASS = 'profile-avatar-editor-overlay-pane';
@@ -25,7 +19,9 @@ export class ProfileAvatarEditorService {
     const overlayRef = this.overlay.create({
       disposeOnNavigation: true,
       panelClass: PROFILE_AVATAR_EDITOR_OVERLAY_CLASS,
-      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+      positionStrategy: this.overlay.position().global()
+        .centerHorizontally()
+        .centerVertically(),
       scrollStrategy: this.overlay.scrollStrategies.block()
     });
 
@@ -55,7 +51,6 @@ export class ProfileAvatarEditorService {
         overlayRef.dispose();
         resolve(result);
       };
-
       const cancelSub = componentRef.instance.cancelled.subscribe(() => finish(null));
       const confirmSub = componentRef.instance.confirmed.subscribe((avatar) => finish(avatar));
       const detachSub = overlayRef.detachments().subscribe(() => finish(null));

toju-app/src/app/domains/profile-avatar/index.ts

@@ -2,6 +2,6 @@ export * from './domain/profile-avatar.models';
 export { ProfileAvatarFacade } from './application/services/profile-avatar.facade';
 export { ProfileAvatarEditorComponent } from './feature/profile-avatar-editor/profile-avatar-editor.component';
 export {
-	PROFILE_AVATAR_EDITOR_OVERLAY_CLASS,
-	ProfileAvatarEditorService
+  PROFILE_AVATAR_EDITOR_OVERLAY_CLASS,
+  ProfileAvatarEditorService
 } from './feature/profile-avatar-editor/profile-avatar-editor.service';

toju-app/src/app/domains/profile-avatar/infrastructure/services/profile-avatar-image.service.spec.ts

@@ -1,7 +1,5 @@
-import {
-  isAnimatedGif,
-  isAnimatedWebp
-} from './profile-avatar-image.service';
+/* eslint-disable @stylistic/js/array-element-newline */
+import { isAnimatedGif, isAnimatedWebp } from './profile-avatar-image.service';
 
 describe('profile-avatar image animation detection', () => {
   it('detects animated gifs with multiple frames', () => {

toju-app/src/app/domains/profile-avatar/infrastructure/services/profile-avatar-storage.service.ts

@@ -1,10 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
-import { User } from '../../../../shared-kernel';
-import {
-  ProcessedProfileAvatar,
-  resolveProfileAvatarStorageFileName
-} from '../../domain/profile-avatar.models';
+import type { User } from '../../../../shared-kernel';
+import { resolveProfileAvatarStorageFileName, type ProcessedProfileAvatar } from '../../domain/profile-avatar.models';
 
 const LEGACY_PROFILE_FILE_NAMES = [
   'profile.webp',

toju-app/src/app/domains/server-directory/README.md

@@ -79,7 +79,7 @@ graph TD
 
 ## Endpoint lifecycle
 
-On startup, `ServerEndpointStateService` loads endpoints from localStorage, reconciles them with the configured defaults from the environment, and ensures at least one endpoint is active.
+On startup, `ServerEndpointStateService` loads endpoints from localStorage, reconciles them with the configured defaults from the environment, and ensures at least one endpoint is active. Configured default endpoints are treated as active by default unless the user explicitly disabled or removed them.
 
 ```mermaid
 stateDiagram-v2
@@ -167,6 +167,7 @@ Default servers are configured in the environment file. The state service builds
 
 - Stored endpoints are matched to defaults by `defaultKey` or URL
 - Missing defaults are added unless the user explicitly removed them (tracked in a separate localStorage key)
+- Default endpoints stay active by default unless the user explicitly disabled them (tracked separately from the endpoint payload)
 - `restoreDefaultServers()` re-adds any removed defaults and clears the removal tracking
 - The primary default URL is used as a fallback when no endpoint is resolved
 

toju-app/src/app/domains/server-directory/application/services/server-endpoint-state.service.spec.ts

@@ -0,0 +1,134 @@
+import { Injector, runInInjectionContext } from '@angular/core';
+import { environment } from '../../../../../environments/environment';
+import type { ServerEndpoint } from '../../domain/models/server-directory.model';
+import {
+  DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY,
+  SERVER_ENDPOINTS_STORAGE_KEY
+} from '../../infrastructure/constants/server-directory.infrastructure.constants';
+import { ServerEndpointStorageService } from '../../infrastructure/services/server-endpoint-storage.service';
+import { ServerEndpointStateService } from './server-endpoint-state.service';
+
+function createLocalStorageMock(): Storage {
+  const store = new Map<string, string>();
+
+  return {
+    get length(): number {
+      return store.size;
+    },
+    clear(): void {
+      store.clear();
+    },
+    getItem(key: string): string | null {
+      return store.get(key) ?? null;
+    },
+    key(index: number): string | null {
+      return [...store.keys()][index] ?? null;
+    },
+    removeItem(key: string): void {
+      store.delete(key);
+    },
+    setItem(key: string, value: string): void {
+      store.set(key, value);
+    }
+  };
+}
+
+Object.defineProperty(globalThis, 'localStorage', {
+  value: createLocalStorageMock(),
+  configurable: true
+});
+
+function getConfiguredDefaultServer(key: string): { key?: string; name?: string; url?: string } {
+  const defaultServer = environment.defaultServers.find((server) => server.key === key);
+
+  if (!defaultServer) {
+    throw new Error(`Missing configured default server for key: ${key}`);
+  }
+
+  return defaultServer;
+}
+
+function seedStoredEndpoints(endpoints: ServerEndpoint[]): void {
+  localStorage.setItem(SERVER_ENDPOINTS_STORAGE_KEY, JSON.stringify(endpoints));
+}
+
+function createService(): ServerEndpointStateService {
+  const injector = Injector.create({
+    providers: [
+      {
+        provide: ServerEndpointStorageService,
+        useClass: ServerEndpointStorageService,
+        deps: []
+      }
+    ]
+  });
+
+  return runInInjectionContext(injector, () => new ServerEndpointStateService());
+}
+
+describe('ServerEndpointStateService', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('reactivates configured default endpoints unless the user disabled them', () => {
+    const defaultServer = getConfiguredDefaultServer('toju-primary');
+
+    seedStoredEndpoints([
+      {
+        id: 'default-server',
+        name: 'Stored Default',
+        url: defaultServer.url ?? '',
+        isActive: false,
+        isDefault: true,
+        defaultKey: defaultServer.key,
+        status: 'unknown'
+      }
+    ]);
+
+    const service = createService();
+    const endpoint = service.servers().find((candidate) => candidate.defaultKey === defaultServer.key);
+
+    expect(endpoint?.isActive).toBe(true);
+  });
+
+  it('keeps a configured default endpoint inactive after the user turned it off', () => {
+    const defaultServer = getConfiguredDefaultServer('toju-primary');
+
+    seedStoredEndpoints([
+      {
+        id: 'default-server',
+        name: 'Stored Default',
+        url: defaultServer.url ?? '',
+        isActive: true,
+        isDefault: true,
+        defaultKey: defaultServer.key,
+        status: 'unknown'
+      }
+    ]);
+    localStorage.setItem(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY, JSON.stringify([defaultServer.key]));
+
+    const service = createService();
+    const endpoint = service.servers().find((candidate) => candidate.defaultKey === defaultServer.key);
+
+    expect(endpoint?.isActive).toBe(false);
+  });
+
+  it('persists turning a configured default endpoint off and back on', () => {
+    const defaultServer = getConfiguredDefaultServer('toju-primary');
+    const service = createService();
+    const endpoint = service.servers().find((candidate) => candidate.defaultKey === defaultServer.key);
+
+    expect(endpoint).toBeDefined();
+
+    service.deactivateServer(endpoint!.id);
+
+    expect(service.servers().find((candidate) => candidate.id === endpoint!.id)?.isActive).toBe(false);
+    expect(JSON.parse(localStorage.getItem(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY) ?? '[]')).toContain(defaultServer.key);
+
+    service.setActiveServer(endpoint!.id);
+
+    expect(service.servers().find((candidate) => candidate.id === endpoint!.id)?.isActive).toBe(true);
+    expect(localStorage.getItem(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY)).toBeNull();
+  });
+});

toju-app/src/app/domains/server-directory/application/services/server-endpoint-state.service.ts

@@ -145,6 +145,7 @@ export class ServerEndpointStateService {
 
     if (target.isDefault) {
       this.markDefaultEndpointRemoved(target);
+      this.clearDefaultEndpointDisabled(target);
     }
 
     const updatedEndpoints = ensureAnyActiveEndpoint(
@@ -171,6 +172,7 @@ export class ServerEndpointStateService {
 
     this._servers.update((endpoints) => ensureAnyActiveEndpoint([...endpoints, ...restoredEndpoints]));
     this.storage.clearRemovedDefaultEndpointKeys();
+    this.clearDisabledDefaultEndpointKeys(restoredEndpoints);
     this.saveEndpoints();
     return restoredEndpoints;
   }
@@ -190,6 +192,12 @@ export class ServerEndpointStateService {
       );
     });
 
+    const target = this._servers().find((endpoint) => endpoint.id === endpointId);
+
+    if (target?.isDefault) {
+      this.clearDefaultEndpointDisabled(target);
+    }
+
     this.saveEndpoints();
   }
 
@@ -206,6 +214,12 @@ export class ServerEndpointStateService {
       )
     );
 
+    const target = this._servers().find((endpoint) => endpoint.id === endpointId);
+
+    if (target?.isDefault) {
+      this.markDefaultEndpointDisabled(target);
+    }
+
     this.saveEndpoints();
   }
 
@@ -258,6 +272,7 @@ export class ServerEndpointStateService {
   private reconcileStoredEndpoints(storedEndpoints: ServerEndpoint[]): ServerEndpoint[] {
     const reconciled: ServerEndpoint[] = [];
     const claimedDefaultKeys = new Set<string>();
+    const disabledDefaultKeys = this.storage.loadDisabledDefaultEndpointKeys();
     const removedDefaultKeys = this.storage.loadRemovedDefaultEndpointKeys();
 
     for (const endpoint of storedEndpoints) {
@@ -279,6 +294,7 @@ export class ServerEndpointStateService {
           ...endpoint,
           name: matchedDefault.name,
           url: matchedDefault.url,
+          isActive: this.isDefaultEndpointActive(matchedDefault.defaultKey, endpoint.status ?? 'unknown', disabledDefaultKeys),
           isDefault: true,
           defaultKey: matchedDefault.defaultKey,
           status: endpoint.status ?? 'unknown'
@@ -303,7 +319,7 @@ export class ServerEndpointStateService {
         reconciled.push({
           ...defaultEndpoint,
           id: uuidv4(),
-          isActive: defaultEndpoint.isActive
+          isActive: this.isDefaultEndpointActive(defaultEndpoint.defaultKey, defaultEndpoint.status, disabledDefaultKeys)
         });
       }
     }
@@ -324,6 +340,64 @@ export class ServerEndpointStateService {
     this.storage.saveRemovedDefaultEndpointKeys(removedDefaultKeys);
   }
 
+  private markDefaultEndpointDisabled(endpoint: ServerEndpoint): void {
+    const defaultKey = endpoint.defaultKey ?? findDefaultEndpointKeyByUrl(this.defaultEndpoints, endpoint.url);
+
+    if (!defaultKey) {
+      return;
+    }
+
+    const disabledDefaultKeys = this.storage.loadDisabledDefaultEndpointKeys();
+
+    disabledDefaultKeys.add(defaultKey);
+    this.storage.saveDisabledDefaultEndpointKeys(disabledDefaultKeys);
+  }
+
+  private clearDefaultEndpointDisabled(endpoint: ServerEndpoint): void {
+    const defaultKey = endpoint.defaultKey ?? findDefaultEndpointKeyByUrl(this.defaultEndpoints, endpoint.url);
+
+    if (!defaultKey) {
+      return;
+    }
+
+    const disabledDefaultKeys = this.storage.loadDisabledDefaultEndpointKeys();
+
+    if (!disabledDefaultKeys.delete(defaultKey)) {
+      return;
+    }
+
+    this.storage.saveDisabledDefaultEndpointKeys(disabledDefaultKeys);
+  }
+
+  private clearDisabledDefaultEndpointKeys(endpoints: ServerEndpoint[]): void {
+    const disabledDefaultKeys = this.storage.loadDisabledDefaultEndpointKeys();
+    let didChange = false;
+
+    for (const endpoint of endpoints) {
+      const defaultKey = endpoint.defaultKey ?? findDefaultEndpointKeyByUrl(this.defaultEndpoints, endpoint.url);
+
+      if (!defaultKey) {
+        continue;
+      }
+
+      didChange = disabledDefaultKeys.delete(defaultKey) || didChange;
+    }
+
+    if (!didChange) {
+      return;
+    }
+
+    this.storage.saveDisabledDefaultEndpointKeys(disabledDefaultKeys);
+  }
+
+  private isDefaultEndpointActive(
+    defaultKey: string,
+    status: ServerEndpoint['status'],
+    disabledDefaultKeys: Set<string>
+  ): boolean {
+    return status !== 'incompatible' && !disabledDefaultKeys.has(defaultKey);
+  }
+
   private saveEndpoints(): void {
     this.storage.saveEndpoints(this._servers());
   }

toju-app/src/app/domains/server-directory/feature/invite/invite.component.ts

@@ -27,7 +27,7 @@ export class InviteComponent implements OnInit {
   readonly currentUser = inject(Store).selectSignal(selectCurrentUser);
   readonly invite = signal<ServerInviteInfo | null>(null);
   readonly status = signal<'loading' | 'redirecting' | 'joining' | 'error'>('loading');
-  readonly message = signal('Loading invite…');
+  readonly message = signal('Loading invite...');
 
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
@@ -121,7 +121,7 @@ export class InviteComponent implements OnInit {
 
     this.invite.set(invite);
     this.status.set('joining');
-    this.message.set(`Joining ${invite.server.name}…`);
+    this.message.set(`Joining ${invite.server.name}...`);
 
     const currentUser = await this.hydrateCurrentUser();
     const joinResponse = await firstValueFrom(this.serverDirectory.requestJoin({
@@ -163,7 +163,7 @@ export class InviteComponent implements OnInit {
 
   private async redirectToLogin(): Promise<void> {
     this.status.set('redirecting');
-    this.message.set('Redirecting to login…');
+    this.message.set('Redirecting to login...');
 
     await this.router.navigate(['/login'], {
       queryParams: {

toju-app/src/app/domains/server-directory/infrastructure/constants/server-directory.infrastructure.constants.ts

@@ -1,3 +1,4 @@
 export const SERVER_ENDPOINTS_STORAGE_KEY = 'metoyou_server_endpoints';
 export const REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY = 'metoyou_removed_default_server_keys';
+export const DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY = 'metoyou_disabled_default_server_keys';
 export const SERVER_HEALTH_CHECK_TIMEOUT_MS = 5000;

toju-app/src/app/domains/server-directory/infrastructure/services/server-endpoint-storage.service.ts

@@ -1,5 +1,9 @@
 import { Injectable } from '@angular/core';
-import { REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY, SERVER_ENDPOINTS_STORAGE_KEY } from '../constants/server-directory.infrastructure.constants';
+import {
+  DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY,
+  REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY,
+  SERVER_ENDPOINTS_STORAGE_KEY
+} from '../constants/server-directory.infrastructure.constants';
 import type { ServerEndpoint } from '../../domain/models/server-directory.model';
 
 @Injectable({ providedIn: 'root' })
@@ -26,8 +30,32 @@ export class ServerEndpointStorageService {
     localStorage.setItem(SERVER_ENDPOINTS_STORAGE_KEY, JSON.stringify(endpoints));
   }
 
+  loadDisabledDefaultEndpointKeys(): Set<string> {
+    return this.loadStringSet(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+  }
+
+  saveDisabledDefaultEndpointKeys(keys: Set<string>): void {
+    this.saveStringSet(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY, keys);
+  }
+
+  clearDisabledDefaultEndpointKeys(): void {
+    localStorage.removeItem(DISABLED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+  }
+
   loadRemovedDefaultEndpointKeys(): Set<string> {
-    const stored = localStorage.getItem(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+    return this.loadStringSet(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+  }
+
+  saveRemovedDefaultEndpointKeys(keys: Set<string>): void {
+    this.saveStringSet(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY, keys);
+  }
+
+  clearRemovedDefaultEndpointKeys(): void {
+    localStorage.removeItem(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+  }
+
+  private loadStringSet(storageKey: string): Set<string> {
+    const stored = localStorage.getItem(storageKey);
 
     if (!stored) {
       return new Set<string>();
@@ -46,16 +74,12 @@ export class ServerEndpointStorageService {
     }
   }
 
-  saveRemovedDefaultEndpointKeys(keys: Set<string>): void {
+  private saveStringSet(storageKey: string, keys: Set<string>): void {
     if (keys.size === 0) {
-      this.clearRemovedDefaultEndpointKeys();
+      localStorage.removeItem(storageKey);
       return;
     }
 
-    localStorage.setItem(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY, JSON.stringify([...keys]));
-  }
-
-  clearRemovedDefaultEndpointKeys(): void {
-    localStorage.removeItem(REMOVED_DEFAULT_SERVER_KEYS_STORAGE_KEY);
+    localStorage.setItem(storageKey, JSON.stringify([...keys]));
   }
 }

toju-app/src/app/domains/voice-connection/application/facades/voice-connection.facade.ts

@@ -53,6 +53,14 @@ export class VoiceConnectionFacade {
     return this.realtime.getRawMicStream();
   }
 
+  reportConnectionError(message: string): void {
+    this.realtime.reportConnectionError(message);
+  }
+
+  clearConnectionError(): void {
+    this.realtime.clearConnectionError();
+  }
+
   async enableVoice(): Promise<MediaStream> {
     return await this.realtime.enableVoice();
   }

toju-app/src/app/domains/voice-connection/application/services/voice-connectivity-health.service.ts

@@ -0,0 +1,139 @@
+import {
+  Injectable,
+  inject,
+  computed,
+  type Signal
+} from '@angular/core';
+import { Store } from '@ngrx/store';
+import { selectCurrentUser, selectOnlineUsers } from '../../../../store/users/users.selectors';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { RealtimeSessionFacade } from '../../../../core/realtime';
+import type { User } from '../../../../shared-kernel';
+
+/**
+ * Connectivity health status for a single peer in voice.
+ */
+export interface PeerConnectivityHealth {
+  peerId: string;
+  /** Number of voice peers this peer can send/receive audio to/from. */
+  connectedPeerCount: number;
+  /** Total peers expected in voice. */
+  totalVoicePeers: number;
+  /** true when this peer has the fewest connections -> warning target. */
+  hasDesync: boolean;
+}
+
+/**
+ * Tracks per-peer voice connectivity health by comparing the number
+ * of connected audio streams each peer has. Peers with fewest
+ * bidirectional audio connections are flagged.
+ *
+ * Uses peer latency data as proxy for healthy bidirectional connection.
+ */
+@Injectable({ providedIn: 'root' })
+export class VoiceConnectivityHealthService {
+  readonly currentUser: Signal<User | null | undefined>;
+  readonly onlineUsers: Signal<User[]>;
+  readonly desyncPeerIds: Signal<ReadonlySet<string>>;
+  readonly localUserHasDesync: Signal<boolean>;
+
+  private readonly webrtc = inject(RealtimeSessionFacade);
+
+  constructor() {
+    const store = inject(Store);
+
+    this.currentUser = toSignal(store.select(selectCurrentUser));
+    this.onlineUsers = toSignal(store.select(selectOnlineUsers), { initialValue: [] });
+
+    /**
+     * Map of peerId -> true for peers that have connectivity issues.
+     * A peer is flagged when it has fewer healthy connections than the
+     * majority of users in the same voice channel.
+     */
+    this.desyncPeerIds = computed<ReadonlySet<string>>(() => {
+      const me = this.currentUser();
+      const myVoice = me?.voiceState;
+
+      if (!myVoice?.isConnected || !myVoice.roomId || !myVoice.serverId) {
+        return new Set<string>();
+      }
+
+      // Find all users in same voice room
+      const voiceUsers = this.onlineUsers().filter(
+        (user) =>
+          user.voiceState?.isConnected
+          && user.voiceState.roomId === myVoice.roomId
+          && user.voiceState.serverId === myVoice.serverId
+      );
+
+      if (voiceUsers.length < 2) {
+        return new Set<string>();
+      }
+
+      // Use peer latencies as proxy. A peer we can ping has a working
+      // data-channel (= working RTCPeerConnection). Peers without latency
+      // measurements are considered unreachable.
+      const connectedPeers = this.webrtc.connectedPeers();
+      const connectedSet = new Set(connectedPeers);
+      const myKey = me?.oderId || me?.id;
+
+      if (!myKey) {
+        return new Set<string>();
+      }
+
+      // Count how many voice peers each voice user is connected to (from
+      // the local perspective). We can only see our own connections - but
+      // if WE can't reach peer X while we CAN reach peers Y and Z, peer X
+      // is the one with issues.
+      const unreachableFromUs = new Set<string>();
+
+      for (const user of voiceUsers) {
+        const key = user.oderId || user.id;
+
+        if (key === myKey) {
+          continue;
+        }
+
+        const hasConnection = connectedSet.has(key)
+          || connectedSet.has(user.id)
+          || connectedSet.has(user.oderId ?? '');
+
+        if (!hasConnection) {
+          unreachableFromUs.add(key);
+        }
+      }
+
+      // If we can reach everyone, no desync
+      if (unreachableFromUs.size === 0) {
+        return new Set<string>();
+      }
+
+      // If we can't reach ANYONE, the problem is likely on our end
+      const reachableCount = voiceUsers.length - 1 - unreachableFromUs.size;
+
+      if (reachableCount === 0 && voiceUsers.length > 2) {
+        // Everyone unreachable from us -> WE are the problem
+        return new Set([myKey]);
+      }
+
+      return unreachableFromUs;
+    });
+
+    /**
+     * Whether the LOCAL user is the one with connectivity issues.
+     */
+    this.localUserHasDesync = computed(() => {
+      const me = this.currentUser();
+      const myKey = me?.oderId || me?.id;
+
+      return !!myKey && this.desyncPeerIds().has(myKey);
+    });
+  }
+
+  /**
+   * Check if a specific peer has a desync warning.
+   */
+  hasPeerDesync(peerKey: string): boolean {
+    return this.desyncPeerIds().has(peerKey);
+  }
+}

toju-app/src/app/domains/voice-connection/application/services/voice-playback.service.ts

@@ -209,7 +209,7 @@ export class VoicePlaybackService {
    *       ↓
    *   muted <audio> element  (Chrome workaround - primes the stream)
    *       ↓
-   *   MediaStreamSource → GainNode → MediaStreamDestination → output <audio>
+   *   MediaStreamSource -> GainNode -> MediaStreamDestination -> output <audio>
    */
   private createPipeline(peerId: string, stream: MediaStream): void {
     // Chromium/Electron needs a muted <audio> element before Web Audio can read the stream.

toju-app/src/app/domains/voice-connection/index.ts

@@ -1,4 +1,5 @@
 export * from './application/facades/voice-connection.facade';
 export * from './application/services/voice-activity.service';
 export * from './application/services/voice-playback.service';
+export * from './application/services/voice-connectivity-health.service';
 export * from './domain/models/voice-connection.model';

toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.ts

@@ -235,8 +235,15 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
       this.voicePlayback.playPendingStreams(this.playbackOptions());
 
       // Persist settings after successful connection
+      this.webrtcService.clearConnectionError();
       this.saveSettings();
-    } catch (_error) {}
+    } catch (error) {
+      const message = error instanceof Error
+        ? error.message
+        : 'Failed to connect voice session.';
+
+      this.webrtcService.reportConnectionError(message);
+    }
   }
 
   // Retry connection when there's a connection error

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.html

@@ -61,6 +61,8 @@
               [class.hover:text-foreground/80]="activeChannelId() !== ch.id"
               (click)="selectTextChannel(ch.id)"
               (contextmenu)="openChannelContextMenu($event, ch)"
+              data-channel-type="text"
+              [attr.data-channel-name]="ch.name"
             >
               <span class="text-muted-foreground text-base">#</span>
               @if (renamingChannelId() === ch.id) {
@@ -129,6 +131,8 @@
                 [class.bg-secondary]="isCurrentRoom(ch.id)"
                 [disabled]="!voiceEnabled()"
                 [title]="isCurrentRoom(ch.id) ? 'Open stream workspace' : 'Join voice channel'"
+                data-channel-type="voice"
+                [attr.data-channel-name]="ch.name"
               >
                 <span class="flex items-center gap-2 text-foreground/80">
                   <ng-icon
@@ -185,6 +189,14 @@
                         [ringClass]="getVoiceUserRingClass(u)"
                       />
                       <span class="text-sm text-foreground/80 truncate flex-1">{{ u.displayName }}</span>
+                      <!-- Connectivity warning -->
+                      @if (hasConnectivityIssue(u)) {
+                        <ng-icon
+                          name="lucideAlertTriangle"
+                          class="w-3.5 h-3.5 text-amber-500 shrink-0"
+                          title="Connection issue - this user may not hear all participants. Consider adding a TURN server in Settings -> Network."
+                        />
+                      }
                       <!-- Ping latency indicator -->
                       @if (u.id !== currentUser()?.id) {
                         <span
@@ -395,6 +407,15 @@
 
   <!-- Voice controls pinned to sidebar bottom (hidden when floating controls visible) -->
   @if (panelMode() === 'channels' && showVoiceControls() && voiceEnabled()) {
+    @if (localUserHasDesync()) {
+      <div class="mx-2 mb-1 flex items-center gap-2 rounded-md bg-amber-500/15 px-3 py-2 text-xs text-amber-400">
+        <ng-icon
+          name="lucideAlertTriangle"
+          class="w-4 h-4 shrink-0"
+        />
+        <span>You may have connectivity issues. Adding a TURN server in Settings -> Network may help.</span>
+      </div>
+    }
     <div
       class="border-t border-border px-2 py-3"
       [class.invisible]="showFloatingControls()"

toju-app/src/app/features/room/rooms-side-panel/rooms-side-panel.component.ts

@@ -15,6 +15,7 @@ import {
   lucideMic,
   lucideMicOff,
   lucideChevronLeft,
+  lucideAlertTriangle,
   lucideMonitor,
   lucideVideo,
   lucideHash,
@@ -35,7 +36,11 @@ import { MessagesActions } from '../../../store/messages/messages.actions';
 import { RealtimeSessionFacade } from '../../../core/realtime';
 import { ScreenShareFacade } from '../../../domains/screen-share';
 import { NotificationsFacade } from '../../../domains/notifications';
-import { VoiceActivityService, VoiceConnectionFacade } from '../../../domains/voice-connection';
+import {
+  VoiceActivityService,
+  VoiceConnectionFacade,
+  VoiceConnectivityHealthService
+} from '../../../domains/voice-connection';
 import { VoiceSessionFacade, VoiceWorkspaceService } from '../../../domains/voice-session';
 import { VoicePlaybackService } from '../../../domains/voice-connection';
 import { VoiceControlsComponent } from '../../../domains/voice-session/feature/voice-controls/voice-controls.component';
@@ -83,6 +88,7 @@ type PanelMode = 'channels' | 'users';
       lucideMic,
       lucideMicOff,
       lucideChevronLeft,
+      lucideAlertTriangle,
       lucideMonitor,
       lucideVideo,
       lucideHash,
@@ -104,6 +110,7 @@ export class RoomsSidePanelComponent {
   private voicePlayback = inject(VoicePlaybackService);
   private profileCard = inject(ProfileCardService);
   private readonly voiceActivity = inject(VoiceActivityService);
+  private readonly voiceConnectivity = inject(VoiceConnectivityHealthService);
 
   readonly panelMode = input<PanelMode>('channels');
   readonly showVoiceControls = input(true);
@@ -115,6 +122,7 @@ export class RoomsSidePanelComponent {
   activeChannelId = this.store.selectSignal(selectActiveChannelId);
   textChannels = this.store.selectSignal(selectTextChannels);
   voiceChannels = this.store.selectSignal(selectVoiceChannels);
+  localUserHasDesync = this.voiceConnectivity.localUserHasDesync;
   roomMembers = computed(() => this.currentRoom()?.members ?? []);
   roomMemberIdentifiers = computed(() => {
     const identifiers = new Set<string>();
@@ -199,6 +207,8 @@ export class RoomsSidePanelComponent {
       oderId: member.oderId || member.id,
       username: member.username,
       displayName: member.displayName,
+      description: member.description,
+      profileUpdatedAt: member.profileUpdatedAt,
       avatarUrl: member.avatarUrl,
       status: 'disconnected',
       role: member.role,
@@ -246,6 +256,10 @@ export class RoomsSidePanelComponent {
     );
   }
 
+  hasConnectivityIssue(user: User): boolean {
+    return this.voiceConnectivity.hasPeerDesync(user.oderId || user.id);
+  }
+
   canManageChannels(): boolean {
     const room = this.currentRoom();
     const user = this.currentUser();
@@ -557,23 +571,32 @@ export class RoomsSidePanelComponent {
     const current = this.currentUser();
 
     if (this.openExistingVoiceWorkspace(room, current ?? null, roomId)) {
+      this.voiceConnection.clearConnectionError();
       return;
     }
 
-    if (!room || !this.canJoinRequestedVoiceRoom(room, current ?? null, roomId)) {
+    if (!room) {
+      this.voiceConnection.reportConnectionError('No active room selected for voice join.');
+      return;
+    }
+
+    if (!this.canJoinRequestedVoiceRoom(room, current ?? null, roomId)) {
+      this.voiceConnection.reportConnectionError('You do not have permission to join this voice channel.');
       return;
     }
 
     if (!this.prepareCrossServerVoiceJoin(room, current ?? null)) {
+      this.voiceConnection.reportConnectionError('Disconnect from the current voice server before joining a different server.');
       return;
     }
 
     this.enableVoiceForJoin(room, current ?? null, roomId)
       .then(() => this.onVoiceJoinSucceeded(roomId, room, current ?? null))
-      .catch(() => undefined);
+      .catch((error) => this.handleVoiceJoinFailure(error));
   }
 
   private onVoiceJoinSucceeded(roomId: string, room: Room, current: User | null): void {
+    this.voiceConnection.clearConnectionError();
     this.updateVoiceStateStore(roomId, room, current);
     this.trackCurrentUserMic();
     this.startVoiceHeartbeat(roomId, room);
@@ -581,6 +604,14 @@ export class RoomsSidePanelComponent {
     this.startVoiceSession(roomId, room);
   }
 
+  private handleVoiceJoinFailure(error: unknown): void {
+    const message = error instanceof Error
+      ? error.message
+      : 'Failed to join voice channel.';
+
+    this.voiceConnection.reportConnectionError(message);
+  }
+
   private trackCurrentUserMic(): void {
     const userId = this.currentUser()?.oderId || this.currentUser()?.id;
     const micStream = this.voiceConnection.getRawMicStream();

toju-app/src/app/features/servers/servers-rail/servers-rail.component.ts

@@ -489,16 +489,9 @@ export class ServersRailComponent {
       ensureEndpoint: !!resolvedRoom.sourceUrl
     });
 
-    const authoritativeServer = (
-      selector
-        ? await firstValueFrom(this.serverDirectory.getServer(room.id, selector))
-        : null
-    ) ?? await firstValueFrom(this.serverDirectory.findServerAcrossActiveEndpoints(room.id, {
-      sourceId: resolvedRoom.sourceId,
-      sourceName: resolvedRoom.sourceName,
-      sourceUrl: resolvedRoom.sourceUrl,
-      fallbackName: resolvedRoom.sourceName ?? resolvedRoom.name
-    }));
+    const authoritativeServer = selector
+      ? await firstValueFrom(this.serverDirectory.getServer(room.id, selector))
+      : null;
 
     if (!authoritativeServer) {
       return {

toju-app/src/app/features/settings/settings-modal/ice-server-settings/ice-server-settings.component.html

@@ -0,0 +1,161 @@
+<section data-testid="ice-server-settings">
+  <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center gap-2">
+      <ng-icon
+        name="lucideShield"
+        class="w-5 h-5 text-muted-foreground"
+      />
+      <h4 class="text-sm font-semibold text-foreground">ICE Servers (STUN / TURN)</h4>
+    </div>
+    <button
+      type="button"
+      data-testid="ice-restore-defaults"
+      (click)="restoreDefaults()"
+      class="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
+    >
+      <ng-icon
+        name="lucideRotateCcw"
+        class="w-3.5 h-3.5"
+      />
+      Restore Defaults
+    </button>
+  </div>
+
+  <p class="text-xs text-muted-foreground mb-3">
+    ICE servers are used for NAT traversal. STUN discovers your public address; TURN relays traffic when direct connections fail. Higher entries have
+    priority.
+  </p>
+
+  <!-- ICE Server List -->
+  <div
+    class="space-y-2 mb-3"
+    data-testid="ice-server-list"
+  >
+    @for (entry of entries(); track trackEntry($index, entry); let i = $index) {
+      <div
+        class="flex items-center gap-3 p-2.5 rounded-lg border transition-colors"
+        [class.border-blue-500/40]="entry.type === 'turn'"
+        [class.bg-blue-500/5]="entry.type === 'turn'"
+        [class.border-border]="entry.type === 'stun'"
+        [class.bg-secondary/30]="entry.type === 'stun'"
+        [attr.data-testid]="'ice-entry-' + i"
+      >
+        <span
+          class="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded"
+          [class.bg-muted]="entry.type === 'stun'"
+          [class.text-muted-foreground]="entry.type === 'stun'"
+          [class.bg-blue-500/15]="entry.type === 'turn'"
+          [class.text-blue-400]="entry.type === 'turn'"
+        >
+          {{ entry.type }}
+        </span>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm text-foreground truncate">{{ entry.urls }}</p>
+          @if (entry.type === 'turn' && entry.username) {
+            <p class="text-[10px] text-muted-foreground truncate">User: {{ entry.username }}</p>
+          }
+        </div>
+        <div class="flex items-center gap-0.5 flex-shrink-0">
+          <button
+            type="button"
+            (click)="moveUp(i)"
+            [disabled]="i === 0"
+            class="grid h-7 w-7 place-items-center rounded-lg transition-colors hover:bg-secondary disabled:opacity-30"
+            title="Move up (higher priority)"
+          >
+            <ng-icon
+              name="lucideArrowUp"
+              class="w-3.5 h-3.5 text-muted-foreground"
+            />
+          </button>
+          <button
+            type="button"
+            (click)="moveDown(i)"
+            [disabled]="i === entries().length - 1"
+            class="grid h-7 w-7 place-items-center rounded-lg transition-colors hover:bg-secondary disabled:opacity-30"
+            title="Move down (lower priority)"
+          >
+            <ng-icon
+              name="lucideArrowDown"
+              class="w-3.5 h-3.5 text-muted-foreground"
+            />
+          </button>
+          <button
+            type="button"
+            (click)="removeEntry(entry.id)"
+            class="grid h-7 w-7 place-items-center rounded-lg transition-colors hover:bg-destructive/10"
+            title="Remove"
+          >
+            <ng-icon
+              name="lucideTrash2"
+              class="w-3.5 h-3.5 text-muted-foreground hover:text-destructive"
+            />
+          </button>
+        </div>
+      </div>
+    }
+    @if (entries().length === 0) {
+      <p class="text-xs text-muted-foreground italic py-2">No ICE servers configured. P2P connections may fail across networks.</p>
+    }
+  </div>
+
+  <!-- Add New ICE Server -->
+  <div class="border-t border-border pt-3">
+    <h4 class="text-xs font-medium text-foreground mb-2">Add ICE Server</h4>
+    <div class="space-y-1.5">
+      <div class="flex gap-2">
+        <select
+          [(ngModel)]="newType"
+          data-testid="ice-type-select"
+          class="px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        >
+          <option value="stun">STUN</option>
+          <option value="turn">TURN</option>
+        </select>
+        <input
+          type="text"
+          [(ngModel)]="newUrl"
+          data-testid="ice-url-input"
+          [placeholder]="newType === 'stun' ? 'stun:stun.example.com:19302' : 'turn:turn.example.com:3478'"
+          class="flex-1 px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+      @if (newType === 'turn') {
+        <div class="flex gap-2">
+          <input
+            type="text"
+            [(ngModel)]="newUsername"
+            data-testid="ice-username-input"
+            placeholder="Username"
+            class="flex-1 px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+          <input
+            type="password"
+            [(ngModel)]="newCredential"
+            data-testid="ice-credential-input"
+            placeholder="Credential"
+            class="flex-1 px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      }
+      <div class="flex justify-end">
+        <button
+          type="button"
+          data-testid="ice-add-button"
+          (click)="addEntry()"
+          [disabled]="!newUrl"
+          class="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <ng-icon
+            name="lucidePlus"
+            class="w-3.5 h-3.5"
+          />
+          Add Server
+        </button>
+      </div>
+    </div>
+    @if (addError()) {
+      <p class="text-xs text-destructive mt-1.5">{{ addError() }}</p>
+    }
+  </div>
+</section>

toju-app/src/app/features/settings/settings-modal/ice-server-settings/ice-server-settings.component.ts

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/member-ordering */
+import {
+  Component,
+  inject,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  lucideShield,
+  lucidePlus,
+  lucideTrash2,
+  lucideArrowUp,
+  lucideArrowDown,
+  lucideRotateCcw
+} from '@ng-icons/lucide';
+
+import { IceServerSettingsService, IceServerEntry } from '../../../../infrastructure/realtime/ice-server-settings.service';
+
+@Component({
+  selector: 'app-ice-server-settings',
+  standalone: true,
+  host: {
+    style: 'display: block;'
+  },
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgIcon
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideShield,
+      lucidePlus,
+      lucideTrash2,
+      lucideArrowUp,
+      lucideArrowDown,
+      lucideRotateCcw
+    })
+  ],
+  templateUrl: './ice-server-settings.component.html'
+})
+export class IceServerSettingsComponent {
+  private iceSettings = inject(IceServerSettingsService);
+
+  entries = this.iceSettings.entries;
+
+  addError = signal<string | null>(null);
+  newType: 'stun' | 'turn' = 'stun';
+  newUrl = '';
+  newUsername = '';
+  newCredential = '';
+
+  addEntry(): void {
+    this.addError.set(null);
+
+    const url = this.newUrl.trim();
+
+    if (!url) {
+      this.addError.set('URL is required');
+      return;
+    }
+
+    const prefix = this.newType === 'stun' ? 'stun:' : 'turn';
+
+    if (!url.startsWith(prefix) && !url.startsWith('turns:')) {
+      this.addError.set(`URL must start with ${this.newType === 'stun' ? 'stun:' : 'turn: or turns:'}`);
+      return;
+    }
+
+    if (this.newType === 'turn' && !this.newUsername.trim()) {
+      this.addError.set('Username is required for TURN servers');
+      return;
+    }
+
+    if (this.newType === 'turn' && !this.newCredential.trim()) {
+      this.addError.set('Credential is required for TURN servers');
+      return;
+    }
+
+    if (this.entries().some((entry) => entry.urls === url)) {
+      this.addError.set('This URL already exists');
+      return;
+    }
+
+    this.iceSettings.addEntry({
+      type: this.newType,
+      urls: url,
+      ...(this.newType === 'turn'
+        ? { username: this.newUsername.trim(), credential: this.newCredential.trim() }
+        : {})
+    });
+
+    this.newUrl = '';
+    this.newUsername = '';
+    this.newCredential = '';
+  }
+
+  removeEntry(id: string): void {
+    this.iceSettings.removeEntry(id);
+  }
+
+  moveUp(index: number): void {
+    if (index > 0)
+      this.iceSettings.moveEntry(index, index - 1);
+  }
+
+  moveDown(index: number): void {
+    if (index < this.entries().length - 1)
+      this.iceSettings.moveEntry(index, index + 1);
+  }
+
+  restoreDefaults(): void {
+    this.iceSettings.restoreDefaults();
+  }
+
+  trackEntry(_index: number, entry: IceServerEntry): string {
+    return entry.id;
+  }
+}

toju-app/src/app/features/settings/settings-modal/network-settings/network-settings.component.html

@@ -199,4 +199,7 @@
       </div>
     </div>
   </section>
+
+  <!-- ICE Server Settings (STUN / TURN) -->
+  <app-ice-server-settings />
 </div>

toju-app/src/app/features/settings/settings-modal/network-settings/network-settings.component.ts

@@ -20,6 +20,7 @@ import {
 
 import { ServerDirectoryFacade } from '../../../../domains/server-directory';
 import { STORAGE_KEY_CONNECTION_SETTINGS } from '../../../../core/constants';
+import { IceServerSettingsComponent } from '../ice-server-settings/ice-server-settings.component';
 
 @Component({
   selector: 'app-network-settings',
@@ -27,7 +28,8 @@ import { STORAGE_KEY_CONNECTION_SETTINGS } from '../../../../core/constants';
   imports: [
     CommonModule,
     FormsModule,
-    NgIcon
+    NgIcon,
+    IceServerSettingsComponent
   ],
   viewProviders: [
     provideIcons({

toju-app/src/app/features/settings/settings-modal/settings-modal.component.html

@@ -70,7 +70,7 @@
                   [value]="selectedServerId() || ''"
                   (change)="onServerSelect($event)"
                 >
-                  <option value="">Select a server…</option>
+                  <option value="">Select a server...</option>
                   @for (room of manageableRooms(); track room.id) {
                     <option [value]="room.id">{{ room.name }}</option>
                   }

toju-app/src/app/features/settings/settings-modal/updates-settings/updates-settings.component.html

@@ -73,7 +73,7 @@
             [value]="state().preferredVersion || ''"
             (change)="onVersionChange($event)"
           >
-            <option value="">Choose a release…</option>
+            <option value="">Choose a release...</option>
             @for (version of state().availableVersions; track version) {
               <option [value]="version">{{ version }}</option>
             }