fix typing indicator on wrong server

Experimental fix for solving replacement of mic audio when enabling screenshare audio on windows electron

On Windows Electron, startWithElectronDesktopCapturer uses getUserMedia({ chromeMediaSource: 'desktop' }) for both video and audio. This getUserMedia desktop audio call can interfere with / replace the existing mic getUserMedia stream, killing voice audio.

BREAKING CHANGE: possibly streaming

.env.example

@@ -1,4 +1,5 @@
 # Toggle SSL for local development (true/false)
 # When true: ng serve uses --ssl, Express API uses HTTPS, Electron loads https://
 # When false: plain HTTP everywhere (only works on localhost)
+# Overrides server/data/variables.json for local development only
 SSL=true

.gitea/workflows/deploy-web-apps.yml

@@ -0,0 +1,43 @@
+name: Deploy Web Apps
+
+on:
+  push:
+    branches: [main, master]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: windows
+
+    defaults:
+      run:
+        shell: powershell
+
+    steps:
+      - name: Checkout
+        uses: https://github.com/actions/checkout@v4
+
+      - name: Install root dependencies
+        env:
+          NODE_ENV: development
+        run: npm ci
+
+      - name: Install website dependencies
+        env:
+          NODE_ENV: development
+        run: npm ci --prefix website
+
+      - name: Build Toju web app
+        run: npm run build
+
+      - name: Build Toju website
+        run: |
+          Push-Location website
+          npm run build
+          Pop-Location
+
+      - name: Deploy both apps to IIS
+        run: >
+          ./tools/deploy-web-apps.ps1
+          -WebsitePort 4341
+          -AppPort 4492

README.md

@@ -17,7 +17,7 @@ Desktop chat app with three parts:
 Root `.env`:
 
 - `SSL=true` uses HTTPS for Angular, the server, and Electron dev mode
-- `PORT=3001` changes the server port
+- `PORT=3001` changes the server port in local development and overrides the server app setting
 
 If `SSL=true`, run `./generate-cert.sh` once.
 
@@ -25,6 +25,10 @@ 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
 

dev.sh

@@ -33,4 +33,4 @@ fi
 exec npx concurrently --kill-others \
   "cd server && npm run dev" \
   "$NG_SERVE" \
-  "wait-on $WAIT_URL $HEALTH_URL && cross-env NODE_ENV=development SSL=$SSL electron . --no-sandbox --disable-dev-shm-usage"
+  "wait-on $WAIT_URL $HEALTH_URL && cross-env NODE_ENV=development SSL=$SSL node tools/launch-electron.js . --no-sandbox --disable-dev-shm-usage"

electron/app/deep-links.ts

@@ -0,0 +1,121 @@
+import { app } from 'electron';
+import * as path from 'path';
+import { createWindow, getMainWindow } from '../window/create-window';
+
+const CUSTOM_PROTOCOL = 'toju';
+const DEEP_LINK_PREFIX = `${CUSTOM_PROTOCOL}://`;
+const DEV_SINGLE_INSTANCE_EXIT_CODE_ENV = 'METOYOU_SINGLE_INSTANCE_EXIT_CODE';
+
+let pendingDeepLink: string | null = null;
+
+function resolveDevSingleInstanceExitCode(): number | null {
+  const rawValue = process.env[DEV_SINGLE_INSTANCE_EXIT_CODE_ENV];
+
+  if (!rawValue) {
+    return null;
+  }
+
+  const parsedValue = Number.parseInt(rawValue, 10);
+
+  return Number.isInteger(parsedValue) && parsedValue > 0
+    ? parsedValue
+    : null;
+}
+
+function extractDeepLink(argv: string[]): string | null {
+  return argv.find((argument) => typeof argument === 'string' && argument.startsWith(DEEP_LINK_PREFIX)) || null;
+}
+
+function focusMainWindow(): void {
+  const mainWindow = getMainWindow();
+
+  if (!mainWindow || mainWindow.isDestroyed()) {
+    return;
+  }
+
+  if (mainWindow.isMinimized()) {
+    mainWindow.restore();
+  }
+
+  mainWindow.show();
+  mainWindow.focus();
+}
+
+function forwardDeepLink(url: string): void {
+  const mainWindow = getMainWindow();
+
+  if (!mainWindow || mainWindow.isDestroyed() || mainWindow.webContents.isLoadingMainFrame()) {
+    pendingDeepLink = url;
+
+    if (app.isReady() && (!mainWindow || mainWindow.isDestroyed())) {
+      void createWindow();
+    }
+
+    return;
+  }
+
+  focusMainWindow();
+  mainWindow.webContents.send('deep-link-received', url);
+}
+
+function registerProtocolClient(): void {
+  if (process.defaultApp) {
+    const appEntrypoint = process.argv[1];
+
+    if (appEntrypoint) {
+      app.setAsDefaultProtocolClient(CUSTOM_PROTOCOL, process.execPath, [path.resolve(appEntrypoint)]);
+      return;
+    }
+  }
+
+  app.setAsDefaultProtocolClient(CUSTOM_PROTOCOL);
+}
+
+export function initializeDeepLinkHandling(): boolean {
+  const hasSingleInstanceLock = app.requestSingleInstanceLock();
+
+  if (!hasSingleInstanceLock) {
+    const devExitCode = resolveDevSingleInstanceExitCode();
+
+    if (devExitCode != null) {
+      app.exit(devExitCode);
+    } else {
+      app.quit();
+    }
+
+    return false;
+  }
+
+  registerProtocolClient();
+
+  const initialDeepLink = extractDeepLink(process.argv);
+
+  if (initialDeepLink) {
+    pendingDeepLink = initialDeepLink;
+  }
+
+  app.on('second-instance', (_event, argv) => {
+    focusMainWindow();
+
+    const deepLink = extractDeepLink(argv);
+
+    if (deepLink) {
+      forwardDeepLink(deepLink);
+    }
+  });
+
+  app.on('open-url', (event, url) => {
+    event.preventDefault();
+    forwardDeepLink(url);
+  });
+
+  return true;
+}
+
+export function consumePendingDeepLink(): string | null {
+  const deepLink = pendingDeepLink;
+
+  pendingDeepLink = null;
+
+  return deepLink;
+}

electron/app/flags.ts

@@ -3,7 +3,6 @@ import { readDesktopSettings } from '../desktop-settings';
 
 export function configureAppFlags(): void {
   linuxSpecificFlags();
-  audioFlags();
   networkFlags();
   setupGpuEncodingFlags();
   chromiumFlags();
@@ -15,21 +14,40 @@ function chromiumFlags(): void {
 
   // Suppress Autofill devtools errors
   app.commandLine.appendSwitch('disable-features', 'Autofill,AutofillAssistant,AutofillServerCommunication');
-}
 
-function audioFlags(): void {
+  // Collect all enabled features into a single switch to avoid later calls overwriting earlier ones
+  const enabledFeatures: string[] = [];
+
   if (process.platform === 'linux') {
-    // Use the new PipeWire-based audio pipeline on Linux for better screen share audio capture support
-    app.commandLine.appendSwitch('enable-features', 'AudioServiceOutOfProcess');
+    // PipeWire-based audio pipeline for screen share audio capture
+    enabledFeatures.push('AudioServiceOutOfProcess');
+    // PipeWire-based screen capture so the xdg-desktop-portal system picker works
+    enabledFeatures.push('WebRTCPipeWireCapturer');
+  }
+
+  const desktopSettings = readDesktopSettings();
+
+  if (process.platform === 'linux' && desktopSettings.vaapiVideoEncode) {
+    enabledFeatures.push('VaapiVideoEncode');
+  }
+
+  if (enabledFeatures.length > 0) {
+    app.commandLine.appendSwitch('enable-features', enabledFeatures.join(','));
   }
 }
 
 function linuxSpecificFlags(): void {
-  // Disable sandbox on Linux to avoid SUID / /tmp shared-memory issues
-  if (process.platform === 'linux') {
-    app.commandLine.appendSwitch('no-sandbox');
-    app.commandLine.appendSwitch('disable-dev-shm-usage');
+  if (process.platform !== 'linux') {
+    return;
   }
+
+  // Disable sandbox on Linux to avoid SUID / /tmp shared-memory issues
+  app.commandLine.appendSwitch('no-sandbox');
+  app.commandLine.appendSwitch('disable-dev-shm-usage');
+
+  // Chromium chooses the Linux Ozone platform before Electron runs this file.
+  // The launch scripts pass `--ozone-platform=wayland` up front for Wayland
+  // sessions so the browser process selects the correct backend early enough.
 }
 
 function networkFlags(): void {
@@ -46,11 +64,6 @@ function setupGpuEncodingFlags(): void {
     app.disableHardwareAcceleration();
   }
 
-  if (process.platform === 'linux' && desktopSettings.vaapiVideoEncode) {
-    // Enable VA-API hardware video encoding on Linux
-    app.commandLine.appendSwitch('enable-features', 'VaapiVideoEncode');
-  }
-
   app.commandLine.appendSwitch('enable-gpu-rasterization');
   app.commandLine.appendSwitch('enable-zero-copy');
   app.commandLine.appendSwitch('enable-native-gpu-memory-buffers');

electron/audio/linux-screen-share-routing.ts

@@ -32,6 +32,11 @@ interface SinkInputDetails extends ShortSinkInputEntry {
   properties: Record<string, string>;
 }
 
+interface DescendantProcessInfo {
+  ids: ReadonlySet<string>;
+  binaryNames: ReadonlySet<string>;
+}
+
 interface PactlJsonSinkInputEntry {
   index?: number | string;
   properties?: Record<string, unknown>;
@@ -44,6 +49,7 @@ interface LinuxScreenShareAudioRoutingState {
   screenShareLoopbackModuleId: string | null;
   voiceLoopbackModuleId: string | null;
   rerouteIntervalId: ReturnType<typeof setInterval> | null;
+  subscribeProcess: ChildProcess | null;
 }
 
 interface LinuxScreenShareMonitorCaptureState {
@@ -77,7 +83,8 @@ const routingState: LinuxScreenShareAudioRoutingState = {
   restoreSinkName: null,
   screenShareLoopbackModuleId: null,
   voiceLoopbackModuleId: null,
-  rerouteIntervalId: null
+  rerouteIntervalId: null,
+  subscribeProcess: null
 };
 const monitorCaptureState: LinuxScreenShareMonitorCaptureState = {
   captureId: null,
@@ -126,12 +133,21 @@ export async function activateLinuxScreenShareAudioRouting(): Promise<LinuxScree
     routingState.screenShareLoopbackModuleId = await loadLoopbackModule(SCREEN_SHARE_MONITOR_SOURCE_NAME, restoreSinkName);
     routingState.voiceLoopbackModuleId = await loadLoopbackModule(`${VOICE_SINK_NAME}.monitor`, restoreSinkName);
 
-    await setDefaultSink(SCREEN_SHARE_SINK_NAME);
-    await moveSinkInputs(SCREEN_SHARE_SINK_NAME, (sinkName) => !!sinkName && sinkName !== SCREEN_SHARE_SINK_NAME && sinkName !== VOICE_SINK_NAME);
+    // Set the default sink to the voice sink so that new app audio
+    // streams (received WebRTC voice) never land on the screenshare
+    // capture sink.  This prevents the feedback loop where remote
+    // voice audio was picked up by parec before the reroute interval
+    // could move the stream away.
+    await setDefaultSink(VOICE_SINK_NAME);
 
     routingState.active = true;
-    await rerouteAppSinkInputsToVoiceSink();
+
+    // Let the combined reroute decide placement for every existing
+    // stream. This avoids briefly shoving the app's own playback to the
+    // screenshare sink before ownership detection can move it back.
+    await rerouteSinkInputs();
     startSinkInputRerouteLoop();
+    startSubscribeWatcher();
 
     return buildRoutingInfo(true, true);
   } catch (error) {
@@ -148,6 +164,7 @@ export async function activateLinuxScreenShareAudioRouting(): Promise<LinuxScree
 export async function deactivateLinuxScreenShareAudioRouting(): Promise<boolean> {
   const restoreSinkName = routingState.restoreSinkName;
 
+  stopSubscribeWatcher();
   stopSinkInputRerouteLoop();
   await stopLinuxScreenShareMonitorCapture();
 
@@ -166,6 +183,7 @@ export async function deactivateLinuxScreenShareAudioRouting(): Promise<boolean>
   routingState.restoreSinkName = null;
   routingState.screenShareLoopbackModuleId = null;
   routingState.voiceLoopbackModuleId = null;
+  routingState.subscribeProcess = null;
 
   return true;
 }
@@ -425,34 +443,52 @@ async function setDefaultSink(sinkName: string): Promise<void> {
   await runPactl('set-default-sink', sinkName);
 }
 
-async function rerouteAppSinkInputsToVoiceSink(): Promise<void> {
+/**
+ * Combined reroute that enforces sink placement in both directions:
+ * - App-owned sink inputs that are NOT on the voice sink are moved there.
+ * - Non-app sink inputs that ARE on the voice sink are moved to the
+ *   screenshare sink so they are captured by parec.
+ *
+ * This two-way approach, combined with the voice sink being the PulseAudio
+ * default, ensures that received WebRTC voice audio can never leak into the
+ * screenshare monitor source.
+ */
+async function rerouteSinkInputs(): Promise<void> {
   const [
     sinks,
     sinkInputs,
-    descendantProcessIds
+    descendantProcessInfo
   ] = await Promise.all([
     listSinks(),
     listSinkInputDetails(),
-    collectDescendantProcessIds(process.pid)
+    collectDescendantProcessInfo(process.pid)
   ]);
   const sinkNamesByIndex = new Map(sinks.map((sink) => [sink.index, sink.name]));
 
   await Promise.all(
     sinkInputs.map(async (sinkInput) => {
-      if (!isAppOwnedSinkInput(sinkInput, descendantProcessIds)) {
-        return;
-      }
-
       const sinkName = sinkNamesByIndex.get(sinkInput.sinkIndex) ?? null;
+      const appOwned = isAppOwnedSinkInput(sinkInput, descendantProcessInfo);
+
+      // App-owned streams must stay on the voice sink.
+      if (appOwned && sinkName !== VOICE_SINK_NAME) {
+        try {
+          await runPactl('move-sink-input', sinkInput.index, VOICE_SINK_NAME);
+        } catch {
+          // Streams can disappear or be recreated while rerouting.
+        }
 
-      if (sinkName === VOICE_SINK_NAME) {
         return;
       }
 
-      try {
-        await runPactl('move-sink-input', sinkInput.index, VOICE_SINK_NAME);
-      } catch {
-        // Streams can disappear or be recreated while rerouting.
+      // Non-app streams sitting on the voice sink should be moved to the
+      // screenshare sink for desktop-audio capture.
+      if (!appOwned && sinkName === VOICE_SINK_NAME) {
+        try {
+          await runPactl('move-sink-input', sinkInput.index, SCREEN_SHARE_SINK_NAME);
+        } catch {
+          // Streams can disappear or be recreated while rerouting.
+        }
       }
     })
   );
@@ -515,7 +551,7 @@ function startSinkInputRerouteLoop(): void {
   }
 
   routingState.rerouteIntervalId = setInterval(() => {
-    void rerouteAppSinkInputsToVoiceSink();
+    void rerouteSinkInputs();
   }, REROUTE_INTERVAL_MS);
 }
 
@@ -528,13 +564,108 @@ function stopSinkInputRerouteLoop(): void {
   routingState.rerouteIntervalId = null;
 }
 
+/**
+ * Spawns `pactl subscribe` to receive PulseAudio events in real time.
+ * When a new or changed sink-input is detected, a reroute is triggered
+ * immediately instead of waiting for the next interval tick.  This
+ * drastically reduces the time non-app desktop audio spends on the
+ * voice sink before being moved to the screenshare sink.
+ */
+function startSubscribeWatcher(): void {
+  if (routingState.subscribeProcess) {
+    return;
+  }
+
+  let proc: ChildProcess;
+
+  try {
+    proc = spawn('pactl', ['subscribe'], {
+      env: process.env,
+      stdio: [
+        'ignore',
+        'pipe',
+        'ignore'
+      ]
+    });
+  } catch {
+    // If pactl subscribe fails to spawn, the interval loop still covers us.
+    return;
+  }
+
+  routingState.subscribeProcess = proc;
+
+  let pending = false;
+
+  proc.stdout?.on('data', (chunk: Buffer) => {
+    if (!routingState.active) {
+      return;
+    }
+
+    const text = chunk.toString();
+
+    if (/Event '(?:new|change)' on sink-input/.test(text)) {
+      if (!pending) {
+        pending = true;
+
+        // Batch rapid-fire events with a short delay.
+        setTimeout(() => {
+          pending = false;
+          void rerouteSinkInputs();
+        }, 50);
+      }
+    }
+  });
+
+  proc.on('close', () => {
+    if (routingState.subscribeProcess === proc) {
+      routingState.subscribeProcess = null;
+    }
+  });
+
+  proc.on('error', () => {
+    if (routingState.subscribeProcess === proc) {
+      routingState.subscribeProcess = null;
+    }
+  });
+}
+
+function stopSubscribeWatcher(): void {
+  const proc = routingState.subscribeProcess;
+
+  if (!proc) {
+    return;
+  }
+
+  routingState.subscribeProcess = null;
+
+  if (!proc.killed) {
+    proc.kill('SIGTERM');
+  }
+}
+
 function isAppOwnedSinkInput(
   sinkInput: SinkInputDetails,
-  descendantProcessIds: ReadonlySet<string>
+  descendantProcessInfo: DescendantProcessInfo
 ): boolean {
   const processId = sinkInput.properties['application.process.id'];
 
-  return typeof processId === 'string' && descendantProcessIds.has(processId);
+  if (typeof processId === 'string' && descendantProcessInfo.ids.has(processId)) {
+    return true;
+  }
+
+  const processBinary = normalizeProcessBinary(sinkInput.properties['application.process.binary']);
+
+  if (processBinary && descendantProcessInfo.binaryNames.has(processBinary)) {
+    return true;
+  }
+
+  const applicationName = normalizeProcessBinary(sinkInput.properties['application.name']);
+
+  if (applicationName && descendantProcessInfo.binaryNames.has(applicationName)) {
+    return true;
+  }
+
+  return false;
 }
 
 async function moveSinkInputs(
@@ -697,31 +828,45 @@ async function listSinkInputDetails(): Promise<SinkInputDetails[]> {
   return entries.filter((entry) => !!entry.sinkIndex);
 }
 
-async function collectDescendantProcessIds(rootProcessId: number): Promise<Set<string>> {
-  const { stdout } = await execFileAsync('ps', ['-eo', 'pid=,ppid='], {
+async function collectDescendantProcessInfo(rootProcessId: number): Promise<DescendantProcessInfo> {
+  const { stdout } = await execFileAsync('ps', ['-eo', 'pid=,ppid=,comm='], {
     env: process.env
   });
   const childrenByParentId = new Map<string, string[]>();
+  const binaryNameByProcessId = new Map<string, string>();
 
   stdout
     .split(/\r?\n/)
     .map((line) => line.trim())
     .filter(Boolean)
     .forEach((line) => {
-      const [pid, ppid] = line.split(/\s+/);
+      const match = line.match(/^(\d+)\s+(\d+)\s+(.+)$/);
 
-      if (!pid || !ppid) {
+      if (!match) {
         return;
       }
 
+      const [
+        ,
+        pid,
+        ppid,
+        command
+      ] = match;
       const siblings = childrenByParentId.get(ppid) ?? [];
 
       siblings.push(pid);
       childrenByParentId.set(ppid, siblings);
+
+      const normalizedBinaryName = normalizeProcessBinary(command);
+
+      if (normalizedBinaryName) {
+        binaryNameByProcessId.set(pid, normalizedBinaryName);
+      }
     });
 
   const rootId = `${rootProcessId}`;
   const descendantIds = new Set<string>([rootId]);
+  const descendantBinaryNames = new Set<string>();
   const queue = [rootId];
 
   while (queue.length > 0) {
@@ -731,6 +876,12 @@ async function collectDescendantProcessIds(rootProcessId: number): Promise<Set<s
       continue;
     }
 
+    const binaryName = binaryNameByProcessId.get(currentId);
+
+    if (binaryName) {
+      descendantBinaryNames.add(binaryName);
+    }
+
     for (const childId of childrenByParentId.get(currentId) ?? []) {
       if (descendantIds.has(childId)) {
         continue;
@@ -741,7 +892,30 @@ async function collectDescendantProcessIds(rootProcessId: number): Promise<Set<s
     }
   }
 
-  return descendantIds;
+  return {
+    ids: descendantIds,
+    binaryNames: descendantBinaryNames
+  };
+}
+
+function normalizeProcessBinary(value: string | undefined): string | null {
+  if (!value) {
+    return null;
+  }
+
+  const trimmed = value.trim();
+
+  if (!trimmed) {
+    return null;
+  }
+
+  const basename = trimmed
+    .split(/[\\/]/)
+    .pop()
+    ?.trim()
+    .toLowerCase() ?? '';
+
+  return basename || null;
 }
 
 function stripSurroundingQuotes(value: string): string {

electron/cqrs/commands/handlers/saveRoom.ts

@@ -12,6 +12,7 @@ export async function handleSaveRoom(command: SaveRoomCommand, dataSource: DataS
     topic: room.topic ?? null,
     hostId: room.hostId,
     password: room.password ?? null,
+    hasPassword: room.hasPassword ? 1 : 0,
     isPrivate: room.isPrivate ? 1 : 0,
     createdAt: room.createdAt,
     userCount: room.userCount ?? 0,
@@ -20,7 +21,10 @@ export async function handleSaveRoom(command: SaveRoomCommand, dataSource: DataS
     iconUpdatedAt: room.iconUpdatedAt ?? null,
     permissions: room.permissions != null ? JSON.stringify(room.permissions) : null,
     channels: room.channels != null ? JSON.stringify(room.channels) : null,
-    members: room.members != null ? JSON.stringify(room.members) : null
+    members: room.members != null ? JSON.stringify(room.members) : null,
+    sourceId: room.sourceId ?? null,
+    sourceName: room.sourceName ?? null,
+    sourceUrl: room.sourceUrl ?? null
   });
 
   await repo.save(entity);

electron/cqrs/commands/handlers/updateRoom.ts

@@ -9,6 +9,7 @@ import {
 } from './utils/applyUpdates';
 
 const ROOM_TRANSFORMS: TransformMap = {
+  hasPassword: boolToInt,
   isPrivate: boolToInt,
   userCount: (val) => (val ?? 0),
   permissions: jsonOrNull,

electron/cqrs/mappers.ts

@@ -57,6 +57,7 @@ export function rowToRoom(row: RoomEntity) {
     topic: row.topic ?? undefined,
     hostId: row.hostId,
     password: row.password ?? undefined,
+    hasPassword: !!row.hasPassword,
     isPrivate: !!row.isPrivate,
     createdAt: row.createdAt,
     userCount: row.userCount,
@@ -65,7 +66,10 @@ export function rowToRoom(row: RoomEntity) {
     iconUpdatedAt: row.iconUpdatedAt ?? undefined,
     permissions: row.permissions ? JSON.parse(row.permissions) : undefined,
     channels: row.channels ? JSON.parse(row.channels) : undefined,
-    members: row.members ? JSON.parse(row.members) : undefined
+    members: row.members ? JSON.parse(row.members) : undefined,
+    sourceId: row.sourceId ?? undefined,
+    sourceName: row.sourceName ?? undefined,
+    sourceUrl: row.sourceUrl ?? undefined
   };
 }
 

electron/cqrs/types.ts

@@ -84,6 +84,7 @@ export interface RoomPayload {
   topic?: string;
   hostId: string;
   password?: string;
+  hasPassword?: boolean;
   isPrivate?: boolean;
   createdAt: number;
   userCount?: number;
@@ -93,6 +94,9 @@ export interface RoomPayload {
   permissions?: unknown;
   channels?: unknown[];
   members?: unknown[];
+  sourceId?: string;
+  sourceName?: string;
+  sourceUrl?: string;
 }
 
 export interface BanPayload {

electron/entities/RoomEntity.ts

@@ -24,6 +24,9 @@ export class RoomEntity {
   @Column('text', { nullable: true })
   password!: string | null;
 
+  @Column('integer', { default: 0 })
+  hasPassword!: number;
+
   @Column('integer', { default: 0 })
   isPrivate!: number;
 
@@ -50,4 +53,13 @@ export class RoomEntity {
 
   @Column('text', { nullable: true })
   members!: string | null;
+
+  @Column('text', { nullable: true })
+  sourceId!: string | null;
+
+  @Column('text', { nullable: true })
+  sourceName!: string | null;
+
+  @Column('text', { nullable: true })
+  sourceUrl!: string | null;
 }

electron/ipc/system.ts

@@ -30,6 +30,7 @@ import {
   restartToApplyUpdate,
   type DesktopUpdateServerContext
 } from '../update/desktop-updater';
+import { consumePendingDeepLink } from '../app/deep-links';
 
 const DEFAULT_MIME_TYPE = 'application/octet-stream';
 const FILE_CLIPBOARD_FORMATS = [
@@ -83,6 +84,57 @@ interface ClipboardFilePayload {
   path?: string;
 }
 
+function resolveLinuxDisplayServer(): string {
+  if (process.platform !== 'linux') {
+    return 'N/A';
+  }
+
+  const ozonePlatform = app.commandLine.getSwitchValue('ozone-platform')
+    .trim()
+    .toLowerCase();
+
+  if (ozonePlatform === 'wayland') {
+    return 'Wayland';
+  }
+
+  if (ozonePlatform === 'x11') {
+    return 'X11';
+  }
+
+  const ozonePlatformHint = app.commandLine.getSwitchValue('ozone-platform-hint')
+    .trim()
+    .toLowerCase();
+
+  if (ozonePlatformHint === 'wayland') {
+    return 'Wayland';
+  }
+
+  if (ozonePlatformHint === 'x11') {
+    return 'X11';
+  }
+
+  const sessionType = String(process.env['XDG_SESSION_TYPE'] || '').trim()
+    .toLowerCase();
+
+  if (sessionType === 'wayland') {
+    return 'Wayland';
+  }
+
+  if (sessionType === 'x11') {
+    return 'X11';
+  }
+
+  if (String(process.env['WAYLAND_DISPLAY'] || '').trim().length > 0) {
+    return 'Wayland';
+  }
+
+  if (String(process.env['DISPLAY'] || '').trim().length > 0) {
+    return 'X11';
+  }
+
+  return 'Unknown (Linux)';
+}
+
 function isSupportedClipboardFileFormat(format: string): boolean {
   return FILE_CLIPBOARD_FORMATS.some(
     (supportedFormat) => supportedFormat.toLowerCase() === format.toLowerCase()
@@ -194,6 +246,10 @@ async function readClipboardFiles(): Promise<ClipboardFilePayload[]> {
 }
 
 export function setupSystemHandlers(): void {
+  ipcMain.on('get-linux-display-server', (event) => {
+    event.returnValue = resolveLinuxDisplayServer();
+  });
+
   ipcMain.handle('open-external', async (_event, url: string) => {
     if (typeof url === 'string' && (url.startsWith('http://') || url.startsWith('https://'))) {
       await shell.openExternal(url);
@@ -203,27 +259,35 @@ export function setupSystemHandlers(): void {
     return false;
   });
 
-  ipcMain.handle('get-sources', async () => {
-    const thumbnailSize = { width: 240, height: 150 };
-    const [screenSources, windowSources] = await Promise.all([
-      desktopCapturer.getSources({
-        types: ['screen'],
-        thumbnailSize
-      }),
-      desktopCapturer.getSources({
-        types: ['window'],
-        thumbnailSize,
-        fetchWindowIcons: true
-      })
-    ]);
-    const sources = [...screenSources, ...windowSources];
-    const uniqueSources = new Map(sources.map((source) => [source.id, source]));
+  ipcMain.handle('consume-pending-deep-link', () => consumePendingDeepLink());
 
-    return [...uniqueSources.values()].map((source) => ({
-      id: source.id,
-      name: source.name,
-      thumbnail: source.thumbnail.toDataURL()
-    }));
+  ipcMain.handle('get-sources', async () => {
+    try {
+      const thumbnailSize = { width: 240, height: 150 };
+      const [screenSources, windowSources] = await Promise.all([
+        desktopCapturer.getSources({
+          types: ['screen'],
+          thumbnailSize
+        }),
+        desktopCapturer.getSources({
+          types: ['window'],
+          thumbnailSize,
+          fetchWindowIcons: true
+        })
+      ]);
+      const sources = [...screenSources, ...windowSources];
+      const uniqueSources = new Map(sources.map((source) => [source.id, source]));
+
+      return [...uniqueSources.values()].map((source) => ({
+        id: source.id,
+        name: source.name,
+        thumbnail: source.thumbnail.toDataURL()
+      }));
+    } catch {
+      // desktopCapturer.getSources fails on Wayland; return empty so the
+      // renderer falls through to getDisplayMedia with the system picker.
+      return [];
+    }
   });
 
   ipcMain.handle('prepare-linux-screen-share-audio-routing', async () => {

electron/main.ts

@@ -1,6 +1,10 @@
 import 'reflect-metadata';
+import { initializeDeepLinkHandling } from './app/deep-links';
 import { configureAppFlags } from './app/flags';
 import { registerAppLifecycle } from './app/lifecycle';
 
 configureAppFlags();
-registerAppLifecycle();
+
+if (initializeDeepLinkHandling()) {
+  registerAppLifecycle();
+}

electron/migrations/1000000000002-AddRoomSourceAndPasswordState.ts

@@ -0,0 +1,26 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddRoomSourceAndPasswordState1000000000002 implements MigrationInterface {
+  name = 'AddRoomSourceAndPasswordState1000000000002';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "rooms" ADD COLUMN "hasPassword" INTEGER NOT NULL DEFAULT 0`);
+    await queryRunner.query(`ALTER TABLE "rooms" ADD COLUMN "sourceId" TEXT`);
+    await queryRunner.query(`ALTER TABLE "rooms" ADD COLUMN "sourceName" TEXT`);
+    await queryRunner.query(`ALTER TABLE "rooms" ADD COLUMN "sourceUrl" TEXT`);
+    await queryRunner.query(`
+      UPDATE "rooms"
+      SET "hasPassword" = CASE
+        WHEN "password" IS NOT NULL AND TRIM("password") <> '' THEN 1
+        ELSE 0
+      END
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "rooms" DROP COLUMN "sourceUrl"`);
+    await queryRunner.query(`ALTER TABLE "rooms" DROP COLUMN "sourceName"`);
+    await queryRunner.query(`ALTER TABLE "rooms" DROP COLUMN "sourceId"`);
+    await queryRunner.query(`ALTER TABLE "rooms" DROP COLUMN "hasPassword"`);
+  }
+}

electron/preload.ts

@@ -4,6 +4,7 @@ import { Command, Query } from './cqrs/types';
 const LINUX_SCREEN_SHARE_MONITOR_AUDIO_CHUNK_CHANNEL = 'linux-screen-share-monitor-audio-chunk';
 const LINUX_SCREEN_SHARE_MONITOR_AUDIO_ENDED_CHANNEL = 'linux-screen-share-monitor-audio-ended';
 const AUTO_UPDATE_STATE_CHANGED_CHANNEL = 'auto-update-state-changed';
+const DEEP_LINK_RECEIVED_CHANNEL = 'deep-link-received';
 
 export interface LinuxScreenShareAudioRoutingInfo {
   available: boolean;
@@ -83,7 +84,24 @@ export interface DesktopUpdateState {
   targetVersion: string | null;
 }
 
+function readLinuxDisplayServer(): string {
+  if (process.platform !== 'linux') {
+    return 'N/A';
+  }
+
+  try {
+    const displayServer = ipcRenderer.sendSync('get-linux-display-server');
+
+    return typeof displayServer === 'string' && displayServer.trim().length > 0
+      ? displayServer
+      : 'Unknown (Linux)';
+  } catch {
+    return 'Unknown (Linux)';
+  }
+}
+
 export interface ElectronAPI {
+  linuxDisplayServer: string;
   minimizeWindow: () => void;
   maximizeWindow: () => void;
   closeWindow: () => void;
@@ -98,6 +116,7 @@ export interface ElectronAPI {
   onLinuxScreenShareMonitorAudioChunk: (listener: (payload: LinuxScreenShareMonitorAudioChunkPayload) => void) => () => void;
   onLinuxScreenShareMonitorAudioEnded: (listener: (payload: LinuxScreenShareMonitorAudioEndedPayload) => void) => () => void;
   getAppDataPath: () => Promise<string>;
+  consumePendingDeepLink: () => Promise<string | null>;
   getDesktopSettings: () => Promise<{
     autoUpdateMode: 'auto' | 'off' | 'version';
     hardwareAcceleration: boolean;
@@ -126,6 +145,7 @@ export interface ElectronAPI {
     restartRequired: boolean;
   }>;
   relaunchApp: () => Promise<boolean>;
+  onDeepLinkReceived: (listener: (url: string) => void) => () => void;
   readClipboardFiles: () => Promise<ClipboardFilePayload[]>;
   readFile: (filePath: string) => Promise<string>;
   writeFile: (filePath: string, data: string) => Promise<boolean>;
@@ -139,6 +159,7 @@ export interface ElectronAPI {
 }
 
 const electronAPI: ElectronAPI = {
+  linuxDisplayServer: readLinuxDisplayServer(),
   minimizeWindow: () => ipcRenderer.send('window-minimize'),
   maximizeWindow: () => ipcRenderer.send('window-maximize'),
   closeWindow: () => ipcRenderer.send('window-close'),
@@ -180,6 +201,7 @@ const electronAPI: ElectronAPI = {
     };
   },
   getAppDataPath: () => ipcRenderer.invoke('get-app-data-path'),
+  consumePendingDeepLink: () => ipcRenderer.invoke('consume-pending-deep-link'),
   getDesktopSettings: () => ipcRenderer.invoke('get-desktop-settings'),
   getAutoUpdateState: () => ipcRenderer.invoke('get-auto-update-state'),
   configureAutoUpdateContext: (context) => ipcRenderer.invoke('configure-auto-update-context', context),
@@ -198,6 +220,17 @@ const electronAPI: ElectronAPI = {
   },
   setDesktopSettings: (patch) => ipcRenderer.invoke('set-desktop-settings', patch),
   relaunchApp: () => ipcRenderer.invoke('relaunch-app'),
+  onDeepLinkReceived: (listener) => {
+    const wrappedListener = (_event: Electron.IpcRendererEvent, url: string) => {
+      listener(url);
+    };
+
+    ipcRenderer.on(DEEP_LINK_RECEIVED_CHANNEL, wrappedListener);
+
+    return () => {
+      ipcRenderer.removeListener(DEEP_LINK_RECEIVED_CHANNEL, wrappedListener);
+    };
+  },
   readClipboardFiles: () => ipcRenderer.invoke('read-clipboard-files'),
   readFile: (filePath) => ipcRenderer.invoke('read-file', filePath),
   writeFile: (filePath, data) => ipcRenderer.invoke('write-file', filePath, data),

electron/window/create-window.ts

@@ -1,6 +1,8 @@
 import {
   app,
   BrowserWindow,
+  desktopCapturer,
+  session,
   shell
 } from 'electron';
 import * as fs from 'fs';
@@ -61,6 +63,34 @@ export async function createWindow(): Promise<void> {
     }
   });
 
+  if (process.platform === 'linux') {
+    session.defaultSession.setDisplayMediaRequestHandler(
+      async (_request, respond) => {
+        // On Linux/Wayland the system picker (useSystemPicker: true) handles
+        // the portal. This handler is only reached if the system picker is
+        // unavailable (e.g. X11 without a portal). Fall back to
+        // desktopCapturer so the user still gets something.
+        try {
+          const sources = await desktopCapturer.getSources({
+            types: ['window', 'screen'],
+            thumbnailSize: { width: 150, height: 150 }
+          });
+          const firstSource = sources[0];
+
+          if (firstSource) {
+            respond({ video: firstSource });
+            return;
+          }
+        } catch {
+          // desktopCapturer also unavailable
+        }
+
+        respond({});
+      },
+      { useSystemPicker: true }
+    );
+  }
+
   if (process.env['NODE_ENV'] === 'development') {
     const devUrl = process.env['SSL'] === 'true'
       ? 'https://localhost:4200'

package.json

@@ -21,10 +21,10 @@
     "server:build": "cd server && npm run build",
     "server:start": "cd server && npm start",
     "server:dev": "cd server && npm run dev",
-    "electron": "ng build && npm run build:electron && electron . --no-sandbox --disable-dev-shm-usage",
-    "electron:dev": "concurrently \"ng serve\" \"wait-on http://localhost:4200 && npm run build:electron && cross-env NODE_ENV=development electron . --no-sandbox --disable-dev-shm-usage\"",
+    "electron": "ng build && npm run build:electron && node tools/launch-electron.js . --no-sandbox --disable-dev-shm-usage",
+    "electron:dev": "concurrently \"ng serve\" \"wait-on http://localhost:4200 && npm run build:electron && cross-env NODE_ENV=development node tools/launch-electron.js . --no-sandbox --disable-dev-shm-usage\"",
     "electron:full": "./dev.sh",
-    "electron:full:build": "npm run build:all && concurrently --kill-others \"cd server && npm start\" \"cross-env NODE_ENV=production electron . --no-sandbox --disable-dev-shm-usage\"",
+    "electron:full:build": "npm run build:all && concurrently --kill-others \"cd server && npm start\" \"cross-env NODE_ENV=production node tools/launch-electron.js . --no-sandbox --disable-dev-shm-usage\"",
     "migration:generate": "typeorm migration:generate electron/migrations/Auto -d dist/electron/data-source.js",
     "migration:create": "typeorm migration:create electron/migrations/New",
     "migration:run": "typeorm migration:run -d dist/electron/data-source.js",
@@ -36,7 +36,7 @@
     "electron:build:all": "npm run build:prod && npm run build:electron && electron-builder --win --mac --linux",
     "build:prod:all": "npm run build:prod && npm run build:electron && cd server && npm run build",
     "build:prod:win": "npm run build:prod:all && electron-builder --win",
-    "dev": "npm run electron:full",
+    "dev": "npm run build:electron && npm run electron:full",
     "dev:app": "npm run electron:dev",
     "lint": "eslint .",
     "lint:fix": "npm run format && npm run sort:props && eslint . --fix",
@@ -120,6 +120,14 @@
   "build": {
     "appId": "com.metoyou.app",
     "productName": "MetoYou",
+    "protocols": [
+      {
+        "name": "Toju Invite Links",
+        "schemes": [
+          "toju"
+        ]
+      }
+    ],
     "directories": {
       "output": "dist-electron"
     },

public/web.config

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <system.webServer>
+    <staticContent>
+      <remove fileExtension=".wasm" />
+      <remove fileExtension=".webmanifest" />
+      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
+      <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
+    </staticContent>
+    <rewrite>
+      <rules>
+        <rule name="Angular Routes" stopProcessing="true">
+          <match url=".*" />
+          <conditions logicalGrouping="MatchAll">
+            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+          </conditions>
+          <action type="Rewrite" url="/index.html" />
+        </rule>
+      </rules>
+    </rewrite>
+  </system.webServer>
+</configuration>

server/src/app.ts

@@ -5,6 +5,7 @@ import { registerRoutes } from './routes';
 export function createApp(): express.Express {
   const app = express();
 
+  app.set('trust proxy', true);
   app.use(cors());
   app.use(express.json());
 

server/src/config/variables.ts

@@ -2,13 +2,20 @@ import fs from 'fs';
 import path from 'path';
 import { resolveRuntimePath } from '../runtime-paths';
 
+export type ServerHttpProtocol = 'http' | 'https';
+
 export interface ServerVariablesConfig {
   klipyApiKey: string;
   releaseManifestUrl: string;
+  serverPort: number;
+  serverProtocol: ServerHttpProtocol;
+  serverHost: string;
 }
 
 const DATA_DIR = resolveRuntimePath('data');
 const VARIABLES_FILE = path.join(DATA_DIR, 'variables.json');
+const DEFAULT_SERVER_PORT = 3001;
+const DEFAULT_SERVER_PROTOCOL: ServerHttpProtocol = 'http';
 
 function normalizeKlipyApiKey(value: unknown): string {
   return typeof value === 'string' ? value.trim() : '';
@@ -18,6 +25,51 @@ function normalizeReleaseManifestUrl(value: unknown): string {
   return typeof value === 'string' ? value.trim() : '';
 }
 
+function normalizeServerHost(value: unknown): string {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function normalizeServerProtocol(
+  value: unknown,
+  fallback: ServerHttpProtocol = DEFAULT_SERVER_PROTOCOL
+): ServerHttpProtocol {
+  if (typeof value === 'boolean') {
+    return value ? 'https' : 'http';
+  }
+
+  if (typeof value !== 'string') {
+    return fallback;
+  }
+
+  const normalized = value.trim().toLowerCase();
+
+  if (normalized === 'https' || normalized === 'true') {
+    return 'https';
+  }
+
+  if (normalized === 'http' || normalized === 'false') {
+    return 'http';
+  }
+
+  return fallback;
+}
+
+function normalizeServerPort(value: unknown, fallback = DEFAULT_SERVER_PORT): number {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number.parseInt(value.trim(), 10)
+      : Number.NaN;
+
+  return Number.isInteger(parsed) && parsed >= 1 && parsed <= 65535
+    ? parsed
+    : fallback;
+}
+
+function hasEnvironmentOverride(value: string | undefined): value is string {
+  return typeof value === 'string' && value.trim().length > 0;
+}
+
 function readRawVariables(): { rawContents: string; parsed: Record<string, unknown> } {
   if (!fs.existsSync(VARIABLES_FILE)) {
     return { rawContents: '', parsed: {} };
@@ -52,10 +104,14 @@ export function ensureVariablesConfig(): ServerVariablesConfig {
   }
 
   const { rawContents, parsed } = readRawVariables();
+  const { serverIpAddress: legacyServerIpAddress, ...remainingParsed } = parsed;
   const normalized = {
-    ...parsed,
-    klipyApiKey: normalizeKlipyApiKey(parsed.klipyApiKey),
-    releaseManifestUrl: normalizeReleaseManifestUrl(parsed.releaseManifestUrl)
+    ...remainingParsed,
+    klipyApiKey: normalizeKlipyApiKey(remainingParsed.klipyApiKey),
+    releaseManifestUrl: normalizeReleaseManifestUrl(remainingParsed.releaseManifestUrl),
+    serverPort: normalizeServerPort(remainingParsed.serverPort),
+    serverProtocol: normalizeServerProtocol(remainingParsed.serverProtocol),
+    serverHost: normalizeServerHost(remainingParsed.serverHost ?? legacyServerIpAddress)
   };
   const nextContents = JSON.stringify(normalized, null, 2) + '\n';
 
@@ -65,7 +121,10 @@ export function ensureVariablesConfig(): ServerVariablesConfig {
 
   return {
     klipyApiKey: normalized.klipyApiKey,
-    releaseManifestUrl: normalized.releaseManifestUrl
+    releaseManifestUrl: normalized.releaseManifestUrl,
+    serverPort: normalized.serverPort,
+    serverProtocol: normalized.serverProtocol,
+    serverHost: normalized.serverHost
   };
 }
 
@@ -84,3 +143,29 @@ export function hasKlipyApiKey(): boolean {
 export function getReleaseManifestUrl(): string {
   return getVariablesConfig().releaseManifestUrl;
 }
+
+export function getServerProtocol(): ServerHttpProtocol {
+  if (hasEnvironmentOverride(process.env.SSL)) {
+    return normalizeServerProtocol(process.env.SSL);
+  }
+
+  return getVariablesConfig().serverProtocol;
+}
+
+export function getServerPort(): number {
+  if (hasEnvironmentOverride(process.env.PORT)) {
+    return normalizeServerPort(process.env.PORT);
+  }
+
+  return getVariablesConfig().serverPort;
+}
+
+export function getServerHost(): string | undefined {
+  const serverHost = getVariablesConfig().serverHost;
+
+  return serverHost || undefined;
+}
+
+export function isHttpsServerEnabled(): boolean {
+  return getServerProtocol() === 'https';
+}

server/src/cqrs/commands/handlers/deleteServer.ts

@@ -1,10 +1,19 @@
 import { DataSource } from 'typeorm';
-import { ServerEntity, JoinRequestEntity } from '../../../entities';
+import {
+  ServerEntity,
+  JoinRequestEntity,
+  ServerMembershipEntity,
+  ServerInviteEntity,
+  ServerBanEntity
+} from '../../../entities';
 import { DeleteServerCommand } from '../../types';
 
 export async function handleDeleteServer(command: DeleteServerCommand, dataSource: DataSource): Promise<void> {
   const { serverId } = command.payload;
 
   await dataSource.getRepository(JoinRequestEntity).delete({ serverId });
+  await dataSource.getRepository(ServerMembershipEntity).delete({ serverId });
+  await dataSource.getRepository(ServerInviteEntity).delete({ serverId });
+  await dataSource.getRepository(ServerBanEntity).delete({ serverId });
   await dataSource.getRepository(ServerEntity).delete(serverId);
 }

server/src/cqrs/commands/handlers/upsertServer.ts

@@ -11,6 +11,7 @@ export async function handleUpsertServer(command: UpsertServerCommand, dataSourc
     description: server.description ?? null,
     ownerId: server.ownerId,
     ownerPublicKey: server.ownerPublicKey,
+    passwordHash: server.passwordHash ?? null,
     isPrivate: server.isPrivate ? 1 : 0,
     maxUsers: server.maxUsers,
     currentUsers: server.currentUsers,

server/src/cqrs/mappers.ts

@@ -24,6 +24,8 @@ export function rowToServer(row: ServerEntity): ServerPayload {
     description: row.description ?? undefined,
     ownerId: row.ownerId,
     ownerPublicKey: row.ownerPublicKey,
+    hasPassword: !!row.passwordHash,
+    passwordHash: row.passwordHash ?? undefined,
     isPrivate: !!row.isPrivate,
     maxUsers: row.maxUsers,
     currentUsers: row.currentUsers,

server/src/cqrs/types.ts

@@ -34,6 +34,8 @@ export interface ServerPayload {
   description?: string;
   ownerId: string;
   ownerPublicKey: string;
+  hasPassword?: boolean;
+  passwordHash?: string | null;
   isPrivate: boolean;
   maxUsers: number;
   currentUsers: number;

server/src/db/database.ts

@@ -4,7 +4,10 @@ import { DataSource } from 'typeorm';
 import {
   AuthUserEntity,
   ServerEntity,
-  JoinRequestEntity
+  JoinRequestEntity,
+  ServerMembershipEntity,
+  ServerInviteEntity,
+  ServerBanEntity
 } from '../entities';
 import { serverMigrations } from '../migrations';
 import { findExistingPath, resolveRuntimePath } from '../runtime-paths';
@@ -51,7 +54,10 @@ export async function initDatabase(): Promise<void> {
       entities: [
         AuthUserEntity,
         ServerEntity,
-        JoinRequestEntity
+        JoinRequestEntity,
+        ServerMembershipEntity,
+        ServerInviteEntity,
+        ServerBanEntity
       ],
       migrations: serverMigrations,
       synchronize: false,

server/src/entities/ServerBanEntity.ts

@@ -0,0 +1,35 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column,
+  Index
+} from 'typeorm';
+
+@Entity('server_bans')
+export class ServerBanEntity {
+  @PrimaryColumn('text')
+  id!: string;
+
+  @Index()
+  @Column('text')
+  serverId!: string;
+
+  @Index()
+  @Column('text')
+  userId!: string;
+
+  @Column('text')
+  bannedBy!: string;
+
+  @Column('text', { nullable: true })
+  displayName!: string | null;
+
+  @Column('text', { nullable: true })
+  reason!: string | null;
+
+  @Column('integer', { nullable: true })
+  expiresAt!: number | null;
+
+  @Column('integer')
+  createdAt!: number;
+}

server/src/entities/ServerEntity.ts

@@ -21,6 +21,9 @@ export class ServerEntity {
   @Column('text')
   ownerPublicKey!: string;
 
+  @Column('text', { nullable: true })
+  passwordHash!: string | null;
+
   @Column('integer', { default: 0 })
   isPrivate!: number;
 

server/src/entities/ServerInviteEntity.ts

@@ -0,0 +1,29 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column,
+  Index
+} from 'typeorm';
+
+@Entity('server_invites')
+export class ServerInviteEntity {
+  @PrimaryColumn('text')
+  id!: string;
+
+  @Index()
+  @Column('text')
+  serverId!: string;
+
+  @Column('text')
+  createdBy!: string;
+
+  @Column('text', { nullable: true })
+  createdByDisplayName!: string | null;
+
+  @Column('integer')
+  createdAt!: number;
+
+  @Index()
+  @Column('integer')
+  expiresAt!: number;
+}

server/src/entities/ServerMembershipEntity.ts

@@ -0,0 +1,26 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column,
+  Index
+} from 'typeorm';
+
+@Entity('server_memberships')
+export class ServerMembershipEntity {
+  @PrimaryColumn('text')
+  id!: string;
+
+  @Index()
+  @Column('text')
+  serverId!: string;
+
+  @Index()
+  @Column('text')
+  userId!: string;
+
+  @Column('integer')
+  joinedAt!: number;
+
+  @Column('integer')
+  lastAccessAt!: number;
+}

server/src/entities/index.ts

@@ -1,3 +1,6 @@
 export { AuthUserEntity } from './AuthUserEntity';
 export { ServerEntity } from './ServerEntity';
 export { JoinRequestEntity } from './JoinRequestEntity';
+export { ServerMembershipEntity } from './ServerMembershipEntity';
+export { ServerInviteEntity } from './ServerInviteEntity';
+export { ServerBanEntity } from './ServerBanEntity';

server/src/index.ts

@@ -14,23 +14,39 @@ import { deleteStaleJoinRequests } from './cqrs';
 import { createApp } from './app';
 import {
   ensureVariablesConfig,
+  getServerHost,
   getVariablesConfigPath,
-  hasKlipyApiKey
+  getServerPort,
+  getServerProtocol,
+  ServerHttpProtocol
 } from './config/variables';
 import { setupWebSocket } from './websocket';
 
-const USE_SSL = (process.env.SSL ?? 'false').toLowerCase() === 'true';
-const PORT = process.env.PORT || 3001;
+function formatHostForUrl(host: string): string {
+  if (host.startsWith('[') || !host.includes(':')) {
+    return host;
+  }
 
-function buildServer(app: ReturnType<typeof createApp>) {
-  if (USE_SSL) {
+  return `[${host}]`;
+}
+
+function getDisplayHost(serverHost: string | undefined): string {
+  if (!serverHost || serverHost === '0.0.0.0' || serverHost === '::') {
+    return 'localhost';
+  }
+
+  return serverHost;
+}
+
+function buildServer(app: ReturnType<typeof createApp>, serverProtocol: ServerHttpProtocol) {
+  if (serverProtocol === 'https') {
     const certDir = resolveCertificateDirectory();
     const certFile = path.join(certDir, 'localhost.crt');
     const keyFile = path.join(certDir, 'localhost.key');
 
     if (!fs.existsSync(certFile) || !fs.existsSync(keyFile)) {
-      console.error(`SSL=true but certs not found in ${certDir}`);
-      console.error('Run ./generate-cert.sh first.');
+      console.error(`HTTPS is enabled but certs were not found in ${certDir}`);
+      console.error('Add localhost.crt and localhost.key there, or switch serverProtocol to "http".');
       process.exit(1);
     }
 
@@ -44,17 +60,31 @@ function buildServer(app: ReturnType<typeof createApp>) {
 }
 
 async function bootstrap(): Promise<void> {
-  ensureVariablesConfig();
+  const variablesConfig = ensureVariablesConfig();
+  const serverProtocol = getServerProtocol();
+  const serverPort = getServerPort();
+  const serverHost = getServerHost();
+  const bindHostLabel = serverHost || 'default interface';
+
   console.log('[Config] Variables loaded from:', getVariablesConfigPath());
 
-  if (!hasKlipyApiKey()) {
+  if (
+    variablesConfig.serverProtocol !== serverProtocol
+    || variablesConfig.serverPort !== serverPort
+  ) {
+    console.log(`[Config] Server runtime override active: protocol=${serverProtocol}, host=${bindHostLabel}, port=${serverPort}`);
+  } else {
+    console.log(`[Config] Server runtime config: protocol=${serverProtocol}, host=${bindHostLabel}, port=${serverPort}`);
+  }
+
+  if (!variablesConfig.klipyApiKey) {
     console.log('[KLIPY] API key not configured. GIF search is disabled.');
   }
 
   await initDatabase();
 
   const app = createApp();
-  const server = buildServer(app);
+  const server = buildServer(app, serverProtocol);
 
   setupWebSocket(server);
 
@@ -64,14 +94,29 @@ async function bootstrap(): Promise<void> {
       .catch(err => console.error('Failed to clean up stale join requests:', err));
   }, 60 * 1000);
 
-  server.listen(PORT, () => {
-    const proto = USE_SSL ? 'https' : 'http';
-    const wsProto = USE_SSL ? 'wss' : 'ws';
+  const onListening = () => {
+    const displayHost = formatHostForUrl(getDisplayHost(serverHost));
+    const wsProto = serverProtocol === 'https' ? 'wss' : 'ws';
+    const localHostNames = [
+      'localhost',
+      '127.0.0.1',
+      '::1'
+    ];
 
-    console.log(`MetoYou signaling server running on port ${PORT} (SSL=${USE_SSL})`);
-    console.log(`   REST API: ${proto}://localhost:${PORT}/api`);
-    console.log(`   WebSocket: ${wsProto}://localhost:${PORT}`);
-  });
+    console.log(`MetoYou signaling server running on port ${serverPort} (${serverProtocol.toUpperCase()}, bind host=${bindHostLabel})`);
+    console.log(`   REST API: ${serverProtocol}://${displayHost}:${serverPort}/api`);
+    console.log(`   WebSocket: ${wsProto}://${displayHost}:${serverPort}`);
+
+    if (serverProtocol === 'https' && serverHost && !localHostNames.includes(serverHost)) {
+      console.warn('[Config] HTTPS certificates must match the configured serverHost/server IP.');
+    }
+  };
+
+  if (serverHost) {
+    server.listen(serverPort, serverHost, onListening);
+  } else {
+    server.listen(serverPort, onListening);
+  }
 }
 
 bootstrap().catch((err) => {

server/src/migrations/1000000000001-ServerAccessControl.ts

@@ -0,0 +1,56 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class ServerAccessControl1000000000001 implements MigrationInterface {
+  name = 'ServerAccessControl1000000000001';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "servers" ADD COLUMN "passwordHash" TEXT`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_memberships" (
+        "id"           TEXT PRIMARY KEY NOT NULL,
+        "serverId"     TEXT NOT NULL,
+        "userId"       TEXT NOT NULL,
+        "joinedAt"     INTEGER NOT NULL,
+        "lastAccessAt" INTEGER NOT NULL
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_memberships_serverId" ON "server_memberships" ("serverId")`);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_memberships_userId" ON "server_memberships" ("userId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_invites" (
+        "id"                   TEXT PRIMARY KEY NOT NULL,
+        "serverId"             TEXT NOT NULL,
+        "createdBy"            TEXT NOT NULL,
+        "createdByDisplayName" TEXT,
+        "createdAt"            INTEGER NOT NULL,
+        "expiresAt"            INTEGER NOT NULL
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_invites_serverId" ON "server_invites" ("serverId")`);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_invites_expiresAt" ON "server_invites" ("expiresAt")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_bans" (
+        "id"          TEXT PRIMARY KEY NOT NULL,
+        "serverId"    TEXT NOT NULL,
+        "userId"      TEXT NOT NULL,
+        "bannedBy"    TEXT NOT NULL,
+        "displayName" TEXT,
+        "reason"      TEXT,
+        "expiresAt"   INTEGER,
+        "createdAt"   INTEGER NOT NULL
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_bans_serverId" ON "server_bans" ("serverId")`);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_bans_userId" ON "server_bans" ("userId")`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_bans"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_invites"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_memberships"`);
+    await queryRunner.query(`ALTER TABLE "servers" DROP COLUMN "passwordHash"`);
+  }
+}

server/src/migrations/index.ts

@@ -1,3 +1,7 @@
 import { InitialSchema1000000000000 } from './1000000000000-InitialSchema';
+import { ServerAccessControl1000000000001 } from './1000000000001-ServerAccessControl';
 
-export const serverMigrations = [InitialSchema1000000000000];
+export const serverMigrations = [
+	InitialSchema1000000000000,
+	ServerAccessControl1000000000001
+];

server/src/routes/index.ts

@@ -5,6 +5,7 @@ import proxyRouter from './proxy';
 import usersRouter from './users';
 import serversRouter from './servers';
 import joinRequestsRouter from './join-requests';
+import { invitesApiRouter, invitePageRouter } from './invites';
 
 export function registerRoutes(app: Express): void {
   app.use('/api', healthRouter);
@@ -12,5 +13,7 @@ export function registerRoutes(app: Express): void {
   app.use('/api', proxyRouter);
   app.use('/api/users', usersRouter);
   app.use('/api/servers', serversRouter);
+  app.use('/api/invites', invitesApiRouter);
   app.use('/api/requests', joinRequestsRouter);
+  app.use('/invite', invitePageRouter);
 }

server/src/routes/invite-utils.ts

@@ -0,0 +1,57 @@
+import { Request } from 'express';
+
+function buildOrigin(protocol: string, host: string): string {
+  return `${protocol}://${host}`.replace(/\/+$/, '');
+}
+
+function originFromUrl(url: URL): string {
+  return buildOrigin(url.protocol.replace(':', ''), url.host);
+}
+
+export function getRequestOrigin(request: Request): string {
+  const forwardedProtoHeader = request.get('x-forwarded-proto');
+  const forwardedHostHeader = request.get('x-forwarded-host');
+  const protocol = forwardedProtoHeader?.split(',')[0]?.trim() || request.protocol;
+  const host = forwardedHostHeader?.split(',')[0]?.trim() || request.get('host') || 'localhost';
+
+  return buildOrigin(protocol, host);
+}
+
+export function deriveWebAppOrigin(signalOrigin: string): string {
+  const url = new URL(signalOrigin);
+
+  if (url.hostname === 'signal.toju.app' && !url.port) {
+    return 'https://web.toju.app';
+  }
+
+  if (url.hostname.startsWith('signal.')) {
+    url.hostname = url.hostname.replace(/^signal\./, 'web.');
+
+    if (url.port === '3001') {
+      url.port = '4200';
+    }
+
+    return originFromUrl(url);
+  }
+
+  if (url.port === '3001') {
+    url.port = '4200';
+    return originFromUrl(url);
+  }
+
+  return 'https://web.toju.app';
+}
+
+export function buildInviteUrl(signalOrigin: string, inviteId: string): string {
+  return `${signalOrigin.replace(/\/+$/, '')}/invite/${encodeURIComponent(inviteId)}`;
+}
+
+export function buildBrowserInviteUrl(signalOrigin: string, inviteId: string): string {
+  const browserOrigin = deriveWebAppOrigin(signalOrigin);
+
+  return `${browserOrigin.replace(/\/+$/, '')}/invite/${encodeURIComponent(inviteId)}?server=${encodeURIComponent(signalOrigin)}`;
+}
+
+export function buildAppInviteUrl(signalOrigin: string, inviteId: string): string {
+  return `toju://invite/${encodeURIComponent(inviteId)}?server=${encodeURIComponent(signalOrigin)}`;
+}

server/src/routes/invites.ts

@@ -0,0 +1,331 @@
+import { Router } from 'express';
+import { getUserById } from '../cqrs';
+import { rowToServer } from '../cqrs/mappers';
+import { ServerPayload } from '../cqrs/types';
+import { getActiveServerInvite } from '../services/server-access.service';
+import {
+  buildAppInviteUrl,
+  buildBrowserInviteUrl,
+  buildInviteUrl,
+  getRequestOrigin
+} from './invite-utils';
+
+export const invitesApiRouter = Router();
+export const invitePageRouter = Router();
+
+async function enrichServer(server: ServerPayload, sourceUrl: string) {
+  const owner = await getUserById(server.ownerId);
+  const { passwordHash, ...publicServer } = server;
+
+  return {
+    ...publicServer,
+    hasPassword: server.hasPassword ?? !!passwordHash,
+    ownerName: owner?.displayName,
+    sourceUrl,
+    userCount: server.currentUsers
+  };
+}
+
+function renderInvitePage(options: {
+  appUrl?: string;
+  browserUrl?: string;
+  error?: string;
+  expiresAt?: number;
+  inviteUrl?: string;
+  isExpired: boolean;
+  ownerName?: string;
+  serverDescription?: string;
+  serverName: string;
+}) {
+  const expiryLabel = options.expiresAt
+    ? new Date(options.expiresAt).toLocaleString('en-US', {
+      dateStyle: 'medium',
+      timeStyle: 'short'
+    })
+    : null;
+  const statusLabel = options.isExpired ? 'Expired' : 'Active';
+  const statusColor = options.isExpired ? '#f87171' : '#4ade80';
+  const buttonOpacity = options.isExpired ? 'opacity:0.5;pointer-events:none;' : '';
+  const errorBlock = options.error
+    ? `<div class="notice notice-error">${options.error}</div>`
+    : '';
+  const description = options.serverDescription
+    ? `<p class="description">${options.serverDescription}</p>`
+    : '<p class="description">You have been invited to join a Toju server.</p>';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Invite to ${options.serverName}</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #050816;
+        --bg-soft: rgba(11, 18, 42, 0.78);
+        --card: rgba(15, 23, 42, 0.92);
+        --border: rgba(148, 163, 184, 0.18);
+        --text: #f8fafc;
+        --muted: #cbd5e1;
+        --primary: #8b5cf6;
+        --primary-soft: rgba(139, 92, 246, 0.16);
+        --secondary: rgba(148, 163, 184, 0.16);
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        color: var(--text);
+        background:
+          radial-gradient(circle at top left, rgba(59, 130, 246, 0.28), transparent 32%),
+          radial-gradient(circle at top right, rgba(139, 92, 246, 0.24), transparent 30%),
+          linear-gradient(180deg, #050816 0%, #0b1120 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px 20px;
+      }
+      .shell {
+        width: min(100%, 760px);
+        border: 1px solid var(--border);
+        border-radius: 28px;
+        background: var(--bg-soft);
+        backdrop-filter: blur(22px);
+        box-shadow: 0 30px 90px rgba(15, 23, 42, 0.5);
+        overflow: hidden;
+      }
+      .hero {
+        padding: 36px 36px 28px;
+        border-bottom: 1px solid var(--border);
+        background: linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.55));
+      }
+      .eyebrow {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 14px;
+        border-radius: 999px;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--muted);
+        background: var(--secondary);
+      }
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: ${statusColor};
+        box-shadow: 0 0 0 6px color-mix(in srgb, ${statusColor} 18%, transparent);
+      }
+      h1 {
+        margin: 18px 0 10px;
+        font-size: clamp(2rem, 3vw, 3.25rem);
+        line-height: 1.05;
+      }
+      .description {
+        margin: 0;
+        color: var(--muted);
+        font-size: 1rem;
+        line-height: 1.6;
+        max-width: 44rem;
+      }
+      .content {
+        display: grid;
+        gap: 20px;
+        padding: 28px 36px 36px;
+      }
+      .meta-grid {
+        display: grid;
+        gap: 16px;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      }
+      .meta-card {
+        border: 1px solid var(--border);
+        border-radius: 18px;
+        background: var(--card);
+        padding: 18px;
+      }
+      .meta-label {
+        font-size: 11px;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--muted);
+        opacity: 0.8;
+      }
+      .meta-value {
+        margin-top: 10px;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .actions {
+        display: grid;
+        gap: 14px;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      }
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        min-height: 56px;
+        padding: 0 18px;
+        border-radius: 16px;
+        border: 1px solid transparent;
+        color: var(--text);
+        text-decoration: none;
+        font-weight: 700;
+        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+      }
+      .button:hover {
+        transform: translateY(-1px);
+      }
+      .button-primary {
+        background: linear-gradient(135deg, #8b5cf6, #6366f1);
+        box-shadow: 0 18px 36px rgba(99, 102, 241, 0.28);
+      }
+      .button-secondary {
+        border-color: var(--border);
+        background: rgba(15, 23, 42, 0.8);
+      }
+      .notice {
+        border-radius: 16px;
+        padding: 14px 16px;
+        border: 1px solid var(--border);
+        background: rgba(15, 23, 42, 0.72);
+        color: var(--muted);
+        line-height: 1.6;
+      }
+      .notice-error {
+        border-color: rgba(248, 113, 113, 0.32);
+        background: rgba(127, 29, 29, 0.18);
+        color: #fecaca;
+      }
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px 18px;
+        align-items: center;
+        justify-content: space-between;
+        color: var(--muted);
+        font-size: 0.95rem;
+      }
+      .footer a {
+        color: #c4b5fd;
+        text-decoration: none;
+      }
+      .footer a:hover {
+        text-decoration: underline;
+      }
+      code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        color: #ddd6fe;
+      }
+      @media (max-width: 640px) {
+        .hero, .content { padding-inline: 22px; }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <div class="eyebrow"><span class="status-dot"></span>${statusLabel} invite</div>
+        <h1>Join ${options.serverName}</h1>
+        ${description}
+      </section>
+
+      <section class="content">
+        ${errorBlock}
+        <div class="meta-grid">
+          <article class="meta-card">
+            <div class="meta-label">Server</div>
+            <div class="meta-value">${options.serverName}</div>
+          </article>
+          <article class="meta-card">
+            <div class="meta-label">Owner</div>
+            <div class="meta-value">${options.ownerName || 'Unknown'}</div>
+          </article>
+          <article class="meta-card">
+            <div class="meta-label">Expires</div>
+            <div class="meta-value">${expiryLabel || 'Expired'}</div>
+          </article>
+        </div>
+
+        <div class="actions" style="${buttonOpacity}">
+          <a class="button button-primary" href="${options.browserUrl || '#'}">Join in browser</a>
+          <a class="button button-secondary" href="${options.appUrl || '#'}">Open with Toju</a>
+        </div>
+
+        <div class="notice">
+          Invite links bypass private and password restrictions, but banned users still cannot join.
+          If Toju is not installed yet, use the desktop button after installing from <a href="https://toju.app/downloads">toju.app/downloads</a>.
+        </div>
+
+        <div class="footer">
+          <span>Share link: <code>${options.inviteUrl || 'Unavailable'}</code></span>
+          <a href="https://toju.app/downloads">Download Toju</a>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>`;
+}
+
+invitesApiRouter.get('/:id', async (req, res) => {
+  const signalOrigin = getRequestOrigin(req);
+  const bundle = await getActiveServerInvite(req.params['id']);
+
+  if (!bundle) {
+    return res.status(404).json({ error: 'Invite link has expired or is invalid', errorCode: 'INVITE_EXPIRED' });
+  }
+
+  const server = rowToServer(bundle.server);
+
+  res.json({
+    id: bundle.invite.id,
+    serverId: bundle.invite.serverId,
+    createdAt: bundle.invite.createdAt,
+    expiresAt: bundle.invite.expiresAt,
+    inviteUrl: buildInviteUrl(signalOrigin, bundle.invite.id),
+    browserUrl: buildBrowserInviteUrl(signalOrigin, bundle.invite.id),
+    appUrl: buildAppInviteUrl(signalOrigin, bundle.invite.id),
+    sourceUrl: signalOrigin,
+    createdBy: bundle.invite.createdBy,
+    createdByDisplayName: bundle.invite.createdByDisplayName ?? undefined,
+    isExpired: bundle.invite.expiresAt <= Date.now(),
+    server: await enrichServer(server, signalOrigin)
+  });
+});
+
+invitePageRouter.get('/:id', async (req, res) => {
+  const signalOrigin = getRequestOrigin(req);
+  const bundle = await getActiveServerInvite(req.params['id']);
+
+  if (!bundle) {
+    res.status(404).send(renderInvitePage({
+      error: 'This invite has expired or is no longer available.',
+      isExpired: true,
+      serverName: 'Toju server'
+    }));
+
+    return;
+  }
+
+  const server = rowToServer(bundle.server);
+  const owner = await getUserById(server.ownerId);
+
+  res.send(renderInvitePage({
+    serverName: server.name,
+    serverDescription: server.description,
+    ownerName: owner?.displayName,
+    expiresAt: bundle.invite.expiresAt,
+    inviteUrl: buildInviteUrl(signalOrigin, bundle.invite.id),
+    browserUrl: buildBrowserInviteUrl(signalOrigin, bundle.invite.id),
+    appUrl: buildAppInviteUrl(signalOrigin, bundle.invite.id),
+    isExpired: bundle.invite.expiresAt <= Date.now()
+  }));
+});

server/src/routes/servers.ts

@@ -1,29 +1,90 @@
-import { Router } from 'express';
+import { Response, Router } from 'express';
 import { v4 as uuidv4 } from 'uuid';
-import { ServerPayload, JoinRequestPayload } from '../cqrs/types';
+import { ServerPayload } from '../cqrs/types';
 import {
   getAllPublicServers,
   getServerById,
   getUserById,
   upsertServer,
   deleteServer,
-  createJoinRequest,
   getPendingRequestsForServer
 } from '../cqrs';
-import { notifyServerOwner } from '../websocket/broadcast';
+import {
+  banServerUser,
+  buildSignalingUrl,
+  createServerInvite,
+  joinServerWithAccess,
+  leaveServerUser,
+  passwordHashForInput,
+  ServerAccessError,
+  kickServerUser,
+  ensureServerMembership,
+  unbanServerUser
+} from '../services/server-access.service';
+import {
+  buildAppInviteUrl,
+  buildBrowserInviteUrl,
+  buildInviteUrl,
+  getRequestOrigin
+} from './invite-utils';
 
 const router = Router();
 
-async function enrichServer(server: ServerPayload) {
+function normalizeRole(role: unknown): string | null {
+  return typeof role === 'string' ? role.trim().toLowerCase() : null;
+}
+
+function isAllowedRole(role: string | null, allowedRoles: string[]): boolean {
+  return !!role && allowedRoles.includes(role);
+}
+
+async function enrichServer(server: ServerPayload, sourceUrl?: string) {
   const owner = await getUserById(server.ownerId);
+  const { passwordHash, ...publicServer } = server;
 
   return {
-    ...server,
+    ...publicServer,
+    hasPassword: server.hasPassword ?? !!passwordHash,
     ownerName: owner?.displayName,
+    sourceUrl,
     userCount: server.currentUsers
   };
 }
 
+function sendAccessError(error: unknown, res: Response) {
+  if (error instanceof ServerAccessError) {
+    res.status(error.status).json({ error: error.message, errorCode: error.code });
+    return;
+  }
+
+  console.error('Unhandled server access error:', error);
+  res.status(500).json({ error: 'Internal server error', errorCode: 'INTERNAL_ERROR' });
+}
+
+async function buildInviteResponse(invite: {
+  id: string;
+  createdAt: number;
+  expiresAt: number;
+  createdBy: string;
+  createdByDisplayName: string | null;
+  serverId: string;
+}, server: ServerPayload, signalOrigin: string) {
+  return {
+    id: invite.id,
+    serverId: invite.serverId,
+    createdAt: invite.createdAt,
+    expiresAt: invite.expiresAt,
+    inviteUrl: buildInviteUrl(signalOrigin, invite.id),
+    browserUrl: buildBrowserInviteUrl(signalOrigin, invite.id),
+    appUrl: buildAppInviteUrl(signalOrigin, invite.id),
+    sourceUrl: signalOrigin,
+    createdBy: invite.createdBy,
+    createdByDisplayName: invite.createdByDisplayName ?? undefined,
+    isExpired: invite.expiresAt <= Date.now(),
+    server: await enrichServer(server, signalOrigin)
+  };
+}
+
 router.get('/', async (req, res) => {
   const { q, tags, limit = 20, offset = 0 } = req.query;
 
@@ -54,17 +115,30 @@ router.get('/', async (req, res) => {
 });
 
 router.post('/', async (req, res) => {
-  const { id: clientId, name, description, ownerId, ownerPublicKey, isPrivate, maxUsers, tags } = req.body;
+  const {
+    id: clientId,
+    name,
+    description,
+    ownerId,
+    ownerPublicKey,
+    isPrivate,
+    maxUsers,
+    password,
+    tags
+  } = req.body;
 
   if (!name || !ownerId || !ownerPublicKey)
     return res.status(400).json({ error: 'Missing required fields' });
 
+  const passwordHash = passwordHashForInput(password);
   const server: ServerPayload = {
     id: clientId || uuidv4(),
     name,
     description,
     ownerId,
     ownerPublicKey,
+    hasPassword: !!passwordHash,
+    passwordHash,
     isPrivate: isPrivate ?? false,
     maxUsers: maxUsers ?? 0,
     currentUsers: 0,
@@ -74,25 +148,216 @@ router.post('/', async (req, res) => {
   };
 
   await upsertServer(server);
-  res.status(201).json(server);
+  await ensureServerMembership(server.id, ownerId);
+
+  res.status(201).json(await enrichServer(server, getRequestOrigin(req)));
 });
 
 router.put('/:id', async (req, res) => {
   const { id } = req.params;
-  const { currentOwnerId, ...updates } = req.body;
+  const {
+    currentOwnerId,
+    actingRole,
+    password,
+    hasPassword: _ignoredHasPassword,
+    passwordHash: _ignoredPasswordHash,
+    ...updates
+  } = req.body;
   const existing = await getServerById(id);
   const authenticatedOwnerId = currentOwnerId ?? req.body.ownerId;
+  const normalizedRole = normalizeRole(actingRole);
 
   if (!existing)
     return res.status(404).json({ error: 'Server not found' });
 
-  if (existing.ownerId !== authenticatedOwnerId)
+  if (
+    existing.ownerId !== authenticatedOwnerId &&
+    !isAllowedRole(normalizedRole, ['host', 'admin'])
+  ) {
     return res.status(403).json({ error: 'Not authorized' });
+  }
 
-  const server: ServerPayload = { ...existing, ...updates, lastSeen: Date.now() };
+  const hasPasswordUpdate = Object.prototype.hasOwnProperty.call(req.body, 'password');
+  const nextPasswordHash = hasPasswordUpdate ? passwordHashForInput(password) : (existing.passwordHash ?? null);
+  const server: ServerPayload = {
+    ...existing,
+    ...updates,
+    hasPassword: !!nextPasswordHash,
+    passwordHash: nextPasswordHash,
+    lastSeen: Date.now()
+  };
 
   await upsertServer(server);
-  res.json(server);
+  res.json(await enrichServer(server, getRequestOrigin(req)));
+});
+
+router.post('/:id/join', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { userId, password, inviteId } = req.body;
+
+  if (!userId) {
+    return res.status(400).json({ error: 'Missing userId', errorCode: 'MISSING_USER' });
+  }
+
+  try {
+    const result = await joinServerWithAccess({
+      serverId,
+      userId: String(userId),
+      password: typeof password === 'string' ? password : undefined,
+      inviteId: typeof inviteId === 'string' ? inviteId : undefined
+    });
+    const origin = getRequestOrigin(req);
+
+    res.json({
+      success: true,
+      signalingUrl: buildSignalingUrl(origin),
+      joinedBefore: result.joinedBefore,
+      via: result.via,
+      server: await enrichServer(result.server, origin)
+    });
+  } catch (error) {
+    sendAccessError(error, res);
+  }
+});
+
+router.post('/:id/invites', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { requesterUserId, requesterDisplayName } = req.body;
+
+  if (!requesterUserId) {
+    return res.status(400).json({ error: 'Missing requesterUserId', errorCode: 'MISSING_USER' });
+  }
+
+  const server = await getServerById(serverId);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  try {
+    const invite = await createServerInvite(
+      serverId,
+      String(requesterUserId),
+      typeof requesterDisplayName === 'string' ? requesterDisplayName : undefined
+    );
+
+    res.status(201).json(await buildInviteResponse(invite, server, getRequestOrigin(req)));
+  } catch (error) {
+    sendAccessError(error, res);
+  }
+});
+
+router.post('/:id/moderation/kick', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { actorUserId, actorRole, targetUserId } = req.body;
+  const server = await getServerById(serverId);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  if (!targetUserId) {
+    return res.status(400).json({ error: 'Missing targetUserId', errorCode: 'MISSING_TARGET' });
+  }
+
+  if (
+    server.ownerId !== actorUserId &&
+    !isAllowedRole(normalizeRole(actorRole), [
+      'host',
+      'admin',
+      'moderator'
+    ])
+  ) {
+    return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
+  }
+
+  await kickServerUser(serverId, String(targetUserId));
+
+  res.json({ ok: true });
+});
+
+router.post('/:id/moderation/ban', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { actorUserId, actorRole, targetUserId, banId, displayName, reason, expiresAt } = req.body;
+  const server = await getServerById(serverId);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  if (!targetUserId) {
+    return res.status(400).json({ error: 'Missing targetUserId', errorCode: 'MISSING_TARGET' });
+  }
+
+  if (
+    server.ownerId !== actorUserId &&
+    !isAllowedRole(normalizeRole(actorRole), [
+      'host',
+      'admin',
+      'moderator'
+    ])
+  ) {
+    return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
+  }
+
+  await banServerUser({
+    serverId,
+    userId: String(targetUserId),
+    banId: typeof banId === 'string' ? banId : undefined,
+    bannedBy: String(actorUserId || ''),
+    displayName: typeof displayName === 'string' ? displayName : undefined,
+    reason: typeof reason === 'string' ? reason : undefined,
+    expiresAt: typeof expiresAt === 'number' ? expiresAt : undefined
+  });
+
+  res.json({ ok: true });
+});
+
+router.post('/:id/moderation/unban', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { actorUserId, actorRole, banId, targetUserId } = req.body;
+  const server = await getServerById(serverId);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  if (
+    server.ownerId !== actorUserId &&
+    !isAllowedRole(normalizeRole(actorRole), [
+      'host',
+      'admin',
+      'moderator'
+    ])
+  ) {
+    return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
+  }
+
+  await unbanServerUser({
+    serverId,
+    banId: typeof banId === 'string' ? banId : undefined,
+    userId: typeof targetUserId === 'string' ? targetUserId : undefined
+  });
+
+  res.json({ ok: true });
+});
+
+router.post('/:id/leave', async (req, res) => {
+  const { id: serverId } = req.params;
+  const { userId } = req.body;
+  const server = await getServerById(serverId);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  if (!userId) {
+    return res.status(400).json({ error: 'Missing userId', errorCode: 'MISSING_USER' });
+  }
+
+  await leaveServerUser(serverId, String(userId));
+
+  res.json({ ok: true });
 });
 
 router.post('/:id/heartbeat', async (req, res) => {
@@ -128,32 +393,6 @@ router.delete('/:id', async (req, res) => {
   res.json({ ok: true });
 });
 
-router.post('/:id/join', async (req, res) => {
-  const { id: serverId } = req.params;
-  const { userId, userPublicKey, displayName } = req.body;
-  const server = await getServerById(serverId);
-
-  if (!server)
-    return res.status(404).json({ error: 'Server not found' });
-
-  const request: JoinRequestPayload = {
-    id: uuidv4(),
-    serverId,
-    userId,
-    userPublicKey,
-    displayName,
-    status: server.isPrivate ? 'pending' : 'approved',
-    createdAt: Date.now()
-  };
-
-  await createJoinRequest(request);
-
-  if (server.isPrivate)
-    notifyServerOwner(server.ownerId, { type: 'join_request', request });
-
-  res.status(201).json(request);
-});
-
 router.get('/:id/requests', async (req, res) => {
   const { id: serverId } = req.params;
   const { ownerId } = req.query;
@@ -170,4 +409,15 @@ router.get('/:id/requests', async (req, res) => {
   res.json({ requests });
 });
 
+router.get('/:id', async (req, res) => {
+  const { id } = req.params;
+  const server = await getServerById(id);
+
+  if (!server) {
+    return res.status(404).json({ error: 'Server not found', errorCode: 'SERVER_NOT_FOUND' });
+  }
+
+  res.json(await enrichServer(server, getRequestOrigin(req)));
+});
+
 export default router;

server/src/services/server-access.service.ts

@@ -0,0 +1,390 @@
+import crypto from 'crypto';
+import { v4 as uuidv4 } from 'uuid';
+import { getDataSource } from '../db/database';
+import {
+  ServerBanEntity,
+  ServerEntity,
+  ServerInviteEntity,
+  ServerMembershipEntity
+} from '../entities';
+import { rowToServer } from '../cqrs/mappers';
+import { ServerPayload } from '../cqrs/types';
+
+export const SERVER_INVITE_EXPIRY_MS = 10 * 24 * 60 * 60 * 1000;
+
+export type JoinAccessVia = 'membership' | 'password' | 'invite' | 'public';
+
+export interface JoinServerAccessResult {
+  joinedBefore: boolean;
+  server: ServerPayload;
+  via: JoinAccessVia;
+}
+
+export interface BanServerUserOptions {
+  banId?: string;
+  bannedBy: string;
+  displayName?: string;
+  expiresAt?: number;
+  reason?: string;
+  serverId: string;
+  userId: string;
+}
+
+export class ServerAccessError extends Error {
+  constructor(
+    readonly status: number,
+    readonly code: string,
+    message: string
+  ) {
+    super(message);
+    this.name = 'ServerAccessError';
+  }
+}
+
+function getServerRepository() {
+  return getDataSource().getRepository(ServerEntity);
+}
+
+function getMembershipRepository() {
+  return getDataSource().getRepository(ServerMembershipEntity);
+}
+
+function getInviteRepository() {
+  return getDataSource().getRepository(ServerInviteEntity);
+}
+
+function getBanRepository() {
+  return getDataSource().getRepository(ServerBanEntity);
+}
+
+function normalizePassword(password?: string | null): string | null {
+  const normalized = password?.trim() ?? '';
+
+  return normalized.length > 0 ? normalized : null;
+}
+
+function isServerOwner(server: ServerEntity, userId: string): boolean {
+  return server.ownerId === userId;
+}
+
+export function hashServerPassword(password: string): string {
+  return crypto.createHash('sha256').update(password)
+    .digest('hex');
+}
+
+export function passwordHashForInput(password?: string | null): string | null {
+  const normalized = normalizePassword(password);
+
+  return normalized ? hashServerPassword(normalized) : null;
+}
+
+export function buildSignalingUrl(origin: string): string {
+  return origin.replace(/^http/i, 'ws');
+}
+
+export async function pruneExpiredServerAccessArtifacts(now: number = Date.now()): Promise<void> {
+  await getInviteRepository()
+    .createQueryBuilder()
+    .delete()
+    .where('expiresAt <= :now', { now })
+    .execute();
+
+  await getBanRepository()
+    .createQueryBuilder()
+    .delete()
+    .where('expiresAt IS NOT NULL AND expiresAt <= :now', { now })
+    .execute();
+}
+
+export async function getServerRecord(serverId: string): Promise<ServerEntity | null> {
+  return await getServerRepository().findOne({ where: { id: serverId } });
+}
+
+export async function getActiveServerBan(serverId: string, userId: string): Promise<ServerBanEntity | null> {
+  const banRepo = getBanRepository();
+  const ban = await banRepo.findOne({ where: { serverId, userId } });
+
+  if (!ban)
+    return null;
+
+  if (ban.expiresAt && ban.expiresAt <= Date.now()) {
+    await banRepo.delete({ id: ban.id });
+    return null;
+  }
+
+  return ban;
+}
+
+export async function isServerUserBanned(serverId: string, userId: string): Promise<boolean> {
+  return !!(await getActiveServerBan(serverId, userId));
+}
+
+export async function findServerMembership(serverId: string, userId: string): Promise<ServerMembershipEntity | null> {
+  return await getMembershipRepository().findOne({ where: { serverId, userId } });
+}
+
+export async function ensureServerMembership(serverId: string, userId: string): Promise<ServerMembershipEntity> {
+  const repo = getMembershipRepository();
+  const now = Date.now();
+  const existing = await repo.findOne({ where: { serverId, userId } });
+
+  if (existing) {
+    existing.lastAccessAt = now;
+    await repo.save(existing);
+    return existing;
+  }
+
+  const entity = repo.create({
+    id: uuidv4(),
+    serverId,
+    userId,
+    joinedAt: now,
+    lastAccessAt: now
+  });
+
+  await repo.save(entity);
+  return entity;
+}
+
+export async function removeServerMembership(serverId: string, userId: string): Promise<void> {
+  await getMembershipRepository().delete({ serverId, userId });
+}
+
+export async function assertCanCreateInvite(serverId: string, requesterUserId: string): Promise<ServerEntity> {
+  const server = await getServerRecord(serverId);
+
+  if (!server) {
+    throw new ServerAccessError(404, 'SERVER_NOT_FOUND', 'Server not found');
+  }
+
+  if (await isServerUserBanned(serverId, requesterUserId)) {
+    throw new ServerAccessError(403, 'BANNED', 'Banned users cannot create invites');
+  }
+
+  const membership = await findServerMembership(serverId, requesterUserId);
+
+  if (server.ownerId !== requesterUserId && !membership) {
+    throw new ServerAccessError(403, 'NOT_MEMBER', 'Only joined users can create invites');
+  }
+
+  return server;
+}
+
+export async function createServerInvite(
+  serverId: string,
+  createdBy: string,
+  createdByDisplayName?: string
+): Promise<ServerInviteEntity> {
+  await assertCanCreateInvite(serverId, createdBy);
+
+  const repo = getInviteRepository();
+  const now = Date.now();
+  const invite = repo.create({
+    id: uuidv4(),
+    serverId,
+    createdBy,
+    createdByDisplayName: createdByDisplayName ?? null,
+    createdAt: now,
+    expiresAt: now + SERVER_INVITE_EXPIRY_MS
+  });
+
+  await repo.save(invite);
+  return invite;
+}
+
+export async function getActiveServerInvite(
+  inviteId: string
+): Promise<{ invite: ServerInviteEntity; server: ServerEntity } | null> {
+  await pruneExpiredServerAccessArtifacts();
+
+  const invite = await getInviteRepository().findOne({ where: { id: inviteId } });
+
+  if (!invite) {
+    return null;
+  }
+
+  if (invite.expiresAt <= Date.now()) {
+    await getInviteRepository().delete({ id: invite.id });
+    return null;
+  }
+
+  const server = await getServerRecord(invite.serverId);
+
+  if (!server) {
+    return null;
+  }
+
+  return { invite, server };
+}
+
+export async function joinServerWithAccess(options: {
+  inviteId?: string;
+  password?: string;
+  serverId: string;
+  userId: string;
+}): Promise<JoinServerAccessResult> {
+  await pruneExpiredServerAccessArtifacts();
+
+  const server = await getServerRecord(options.serverId);
+
+  if (!server) {
+    throw new ServerAccessError(404, 'SERVER_NOT_FOUND', 'Server not found');
+  }
+
+  if (await isServerUserBanned(server.id, options.userId)) {
+    throw new ServerAccessError(403, 'BANNED', 'Banned users cannot join this server');
+  }
+
+  if (isServerOwner(server, options.userId)) {
+    const existingMembership = await findServerMembership(server.id, options.userId);
+
+    await ensureServerMembership(server.id, options.userId);
+
+    return {
+      joinedBefore: !!existingMembership,
+      server: rowToServer(server),
+      via: 'membership'
+    };
+  }
+
+  if (options.inviteId) {
+    const inviteBundle = await getActiveServerInvite(options.inviteId);
+
+    if (!inviteBundle || inviteBundle.server.id !== server.id) {
+      throw new ServerAccessError(410, 'INVITE_EXPIRED', 'Invite link has expired or is invalid');
+    }
+
+    const existingMembership = await findServerMembership(server.id, options.userId);
+
+    await ensureServerMembership(server.id, options.userId);
+
+    return {
+      joinedBefore: !!existingMembership,
+      server: rowToServer(server),
+      via: 'invite'
+    };
+  }
+
+  const membership = await findServerMembership(server.id, options.userId);
+
+  if (membership) {
+    await ensureServerMembership(server.id, options.userId);
+
+    return {
+      joinedBefore: true,
+      server: rowToServer(server),
+      via: 'membership'
+    };
+  }
+
+  if (server.passwordHash) {
+    const passwordHash = passwordHashForInput(options.password);
+
+    if (!passwordHash || passwordHash !== server.passwordHash) {
+      throw new ServerAccessError(403, 'PASSWORD_REQUIRED', 'Password required to join this server');
+    }
+
+    await ensureServerMembership(server.id, options.userId);
+
+    return {
+      joinedBefore: false,
+      server: rowToServer(server),
+      via: 'password'
+    };
+  }
+
+  if (server.isPrivate) {
+    throw new ServerAccessError(403, 'PRIVATE_SERVER', 'Private servers require an invite link');
+  }
+
+  await ensureServerMembership(server.id, options.userId);
+
+  return {
+    joinedBefore: false,
+    server: rowToServer(server),
+    via: 'public'
+  };
+}
+
+export async function authorizeWebSocketJoin(serverId: string, userId: string): Promise<{ allowed: boolean; reason?: string }> {
+  await pruneExpiredServerAccessArtifacts();
+
+  const server = await getServerRecord(serverId);
+
+  if (!server) {
+    return { allowed: false,
+      reason: 'SERVER_NOT_FOUND' };
+  }
+
+  if (await isServerUserBanned(serverId, userId)) {
+    return { allowed: false,
+      reason: 'BANNED' };
+  }
+
+  if (isServerOwner(server, userId)) {
+    await ensureServerMembership(serverId, userId);
+    return { allowed: true };
+  }
+
+  const membership = await findServerMembership(serverId, userId);
+
+  if (membership) {
+    await ensureServerMembership(serverId, userId);
+    return { allowed: true };
+  }
+
+  if (!server.isPrivate && !server.passwordHash) {
+    await ensureServerMembership(serverId, userId);
+    return { allowed: true };
+  }
+
+  return {
+    allowed: false,
+    reason: server.isPrivate ? 'PRIVATE_SERVER' : 'PASSWORD_REQUIRED'
+  };
+}
+
+export async function kickServerUser(serverId: string, userId: string): Promise<void> {
+  await removeServerMembership(serverId, userId);
+}
+
+export async function leaveServerUser(serverId: string, userId: string): Promise<void> {
+  await removeServerMembership(serverId, userId);
+}
+
+export async function banServerUser(options: BanServerUserOptions): Promise<ServerBanEntity> {
+  await removeServerMembership(options.serverId, options.userId);
+
+  const repo = getBanRepository();
+  const existing = await repo.findOne({ where: { serverId: options.serverId, userId: options.userId } });
+
+  if (existing) {
+    await repo.delete({ id: existing.id });
+  }
+
+  const entity = repo.create({
+    id: options.banId ?? uuidv4(),
+    serverId: options.serverId,
+    userId: options.userId,
+    bannedBy: options.bannedBy,
+    displayName: options.displayName ?? null,
+    reason: options.reason ?? null,
+    expiresAt: options.expiresAt ?? null,
+    createdAt: Date.now()
+  });
+
+  await repo.save(entity);
+  return entity;
+}
+
+export async function unbanServerUser(options: { banId?: string; serverId: string; userId?: string }): Promise<void> {
+  const repo = getBanRepository();
+
+  if (options.banId) {
+    await repo.delete({ id: options.banId, serverId: options.serverId });
+  }
+
+  if (options.userId) {
+    await repo.delete({ serverId: options.serverId, userId: options.userId });
+  }
+}

server/src/websocket/handler.ts

@@ -1,6 +1,7 @@
 import { connectedUsers } from './state';
 import { ConnectedUser } from './types';
 import { broadcastToServer, findUserByOderId } from './broadcast';
+import { authorizeWebSocketJoin } from '../services/server-access.service';
 
 interface WsMessage {
   [key: string]: unknown;
@@ -10,7 +11,7 @@ interface WsMessage {
 /** Sends the current user list for a given server to a single connected user. */
 function sendServerUsers(user: ConnectedUser, serverId: string): void {
   const users = Array.from(connectedUsers.values())
-    .filter(cu => cu.serverIds.has(serverId) && cu.oderId !== user.oderId && cu.displayName)
+    .filter(cu => cu.serverIds.has(serverId) && cu.oderId !== user.oderId)
     .map(cu => ({ oderId: cu.oderId, displayName: cu.displayName ?? 'Anonymous' }));
 
   user.ws.send(JSON.stringify({ type: 'server_users', serverId, users }));
@@ -23,8 +24,24 @@ function handleIdentify(user: ConnectedUser, message: WsMessage, connectionId: s
   console.log(`User identified: ${user.displayName} (${user.oderId})`);
 }
 
-function handleJoinServer(user: ConnectedUser, message: WsMessage, connectionId: string): void {
+async function handleJoinServer(user: ConnectedUser, message: WsMessage, connectionId: string): Promise<void> {
   const sid = String(message['serverId']);
+
+  if (!sid)
+    return;
+
+  const authorization = await authorizeWebSocketJoin(sid, user.oderId);
+
+  if (!authorization.allowed) {
+    user.ws.send(JSON.stringify({
+      type: 'access_denied',
+      serverId: sid,
+      reason: authorization.reason
+    }));
+
+    return;
+  }
+
   const isNew = !user.serverIds.has(sid);
 
   user.serverIds.add(sid);
@@ -71,7 +88,8 @@ function handleLeaveServer(user: ConnectedUser, message: WsMessage, connectionId
     type: 'user_left',
     oderId: user.oderId,
     displayName: user.displayName ?? 'Anonymous',
-    serverId: leaveSid
+    serverId: leaveSid,
+    serverIds: Array.from(user.serverIds)
   }, user.oderId);
 }
 
@@ -121,7 +139,7 @@ function handleTyping(user: ConnectedUser, message: WsMessage): void {
   }
 }
 
-export function handleWebSocketMessage(connectionId: string, message: WsMessage): void {
+export async function handleWebSocketMessage(connectionId: string, message: WsMessage): Promise<void> {
   const user = connectedUsers.get(connectionId);
 
   if (!user)
@@ -133,7 +151,7 @@ export function handleWebSocketMessage(connectionId: string, message: WsMessage)
       break;
 
     case 'join_server':
-      handleJoinServer(user, message, connectionId);
+      await handleJoinServer(user, message, connectionId);
       break;
 
     case 'view_server':

server/src/websocket/index.ts

@@ -9,39 +9,87 @@ import { connectedUsers } from './state';
 import { broadcastToServer } from './broadcast';
 import { handleWebSocketMessage } from './handler';
 
+/** How often to ping all connected clients (ms). */
+const PING_INTERVAL_MS = 30_000;
+/** Maximum time a client can go without a pong before we consider it dead (ms). */
+const PONG_TIMEOUT_MS = 45_000;
+
+function removeDeadConnection(connectionId: string): void {
+  const user = connectedUsers.get(connectionId);
+
+  if (user) {
+    console.log(`Removing dead connection: ${user.displayName ?? 'Unknown'} (${user.oderId})`);
+
+    user.serverIds.forEach((sid) => {
+      broadcastToServer(sid, {
+        type: 'user_left',
+        oderId: user.oderId,
+        displayName: user.displayName,
+        serverId: sid,
+        serverIds: []
+      }, user.oderId);
+    });
+
+    try {
+      user.ws.terminate();
+    } catch {
+      console.warn(`Failed to terminate WebSocket for ${user.displayName ?? 'Unknown'} (${user.oderId})`);
+    }
+  }
+
+  connectedUsers.delete(connectionId);
+}
+
 export function setupWebSocket(server: Server<typeof IncomingMessage, typeof ServerResponse>): void {
   const wss = new WebSocketServer({ server });
+  // Periodically ping all clients and reap dead connections
+  const pingInterval = setInterval(() => {
+    const now = Date.now();
+
+    connectedUsers.forEach((user, connectionId) => {
+      if (now - user.lastPong > PONG_TIMEOUT_MS) {
+        removeDeadConnection(connectionId);
+        return;
+      }
+
+      if (user.ws.readyState === WebSocket.OPEN) {
+        try {
+          user.ws.ping();
+        } catch {
+          console.warn(`Failed to ping client ${user.displayName ?? 'Unknown'} (${user.oderId})`);
+        }
+      }
+    });
+  }, PING_INTERVAL_MS);
+
+  wss.on('close', () => clearInterval(pingInterval));
 
   wss.on('connection', (ws: WebSocket) => {
     const connectionId = uuidv4();
+    const now = Date.now();
 
-    connectedUsers.set(connectionId, { oderId: connectionId, ws, serverIds: new Set() });
+    connectedUsers.set(connectionId, { oderId: connectionId, ws, serverIds: new Set(), lastPong: now });
 
-    ws.on('message', (data) => {
+    ws.on('pong', () => {
+      const user = connectedUsers.get(connectionId);
+
+      if (user) {
+        user.lastPong = Date.now();
+      }
+    });
+
+    ws.on('message', async (data) => {
       try {
         const message = JSON.parse(data.toString());
 
-        handleWebSocketMessage(connectionId, message);
+        await handleWebSocketMessage(connectionId, message);
       } catch (err) {
         console.error('Invalid WebSocket message:', err);
       }
     });
 
     ws.on('close', () => {
-      const user = connectedUsers.get(connectionId);
-
-      if (user) {
-        user.serverIds.forEach((sid) => {
-          broadcastToServer(sid, {
-            type: 'user_left',
-            oderId: user.oderId,
-            displayName: user.displayName,
-            serverId: sid
-          }, user.oderId);
-        });
-      }
-
-      connectedUsers.delete(connectionId);
+      removeDeadConnection(connectionId);
     });
 
     ws.send(JSON.stringify({ type: 'connected', connectionId, serverTime: Date.now() }));

server/src/websocket/types.ts

@@ -6,4 +6,6 @@ export interface ConnectedUser {
   serverIds: Set<string>;
   viewedServerId?: string;
   displayName?: string;
+  /** Timestamp of the last pong received (used to detect dead connections). */
+  lastPong: number;
 }

src/app/app.routes.ts

@@ -17,6 +17,11 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./features/auth/register/register.component').then((module) => module.RegisterComponent)
   },
+  {
+    path: 'invite/:inviteId',
+    loadComponent: () =>
+      import('./features/invite/invite.component').then((module) => module.InviteComponent)
+  },
   {
     path: 'search',
     loadComponent: () =>

src/app/app.ts

@@ -2,6 +2,7 @@
 import {
   Component,
   OnInit,
+  OnDestroy,
   inject,
   HostListener
 } from '@angular/core';
@@ -35,6 +36,15 @@ import {
   STORAGE_KEY_LAST_VISITED_ROUTE
 } from './core/constants';
 
+interface DeepLinkElectronApi {
+  consumePendingDeepLink?: () => Promise<string | null>;
+  onDeepLinkReceived?: (listener: (url: string) => void) => () => void;
+}
+
+type DeepLinkWindow = Window & {
+  electronAPI?: DeepLinkElectronApi;
+};
+
 @Component({
   selector: 'app-root',
   imports: [
@@ -50,7 +60,7 @@ import {
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App implements OnInit {
+export class App implements OnInit, OnDestroy {
   store = inject(Store);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
   desktopUpdates = inject(DesktopAppUpdateService);
@@ -63,6 +73,7 @@ export class App implements OnInit {
   private timeSync = inject(TimeSyncService);
   private voiceSession = inject(VoiceSessionService);
   private externalLinks = inject(ExternalLinkService);
+  private deepLinkCleanup: (() => void) | null = null;
 
   @HostListener('document:click', ['$event'])
   onGlobalLinkClick(evt: MouseEvent): void {
@@ -80,6 +91,8 @@ export class App implements OnInit {
       await this.timeSync.syncWithEndpoint(apiBase);
     } catch {}
 
+    await this.setupDesktopDeepLinks();
+
     this.store.dispatch(UsersActions.loadCurrentUser());
 
     this.store.dispatch(RoomsActions.loadRooms());
@@ -87,8 +100,12 @@ export class App implements OnInit {
     const currentUserId = localStorage.getItem(STORAGE_KEY_CURRENT_USER_ID);
 
     if (!currentUserId) {
-      if (this.router.url !== '/login' && this.router.url !== '/register') {
-        this.router.navigate(['/login']).catch(() => {});
+      if (!this.isPublicRoute(this.router.url)) {
+        this.router.navigate(['/login'], {
+          queryParams: {
+            returnUrl: this.router.url
+          }
+        }).catch(() => {});
       }
     } else {
       const last = localStorage.getItem(STORAGE_KEY_LAST_VISITED_ROUTE);
@@ -116,6 +133,11 @@ export class App implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.deepLinkCleanup?.();
+    this.deepLinkCleanup = null;
+  }
+
   openNetworkSettings(): void {
     this.settingsModal.open('network');
   }
@@ -131,4 +153,78 @@ export class App implements OnInit {
   async restartToApplyUpdate(): Promise<void> {
     await this.desktopUpdates.restartToApplyUpdate();
   }
+
+  private async setupDesktopDeepLinks(): Promise<void> {
+    const electronApi = this.getDeepLinkElectronApi();
+
+    if (!electronApi) {
+      return;
+    }
+
+    this.deepLinkCleanup = electronApi.onDeepLinkReceived?.((url) => {
+      void this.handleDesktopDeepLink(url);
+    }) || null;
+
+    const pendingDeepLink = await electronApi.consumePendingDeepLink?.();
+
+    if (pendingDeepLink) {
+      await this.handleDesktopDeepLink(pendingDeepLink);
+    }
+  }
+
+  private async handleDesktopDeepLink(url: string): Promise<void> {
+    const invite = this.parseDesktopInviteUrl(url);
+
+    if (!invite) {
+      return;
+    }
+
+    await this.router.navigate(['/invite', invite.inviteId], {
+      queryParams: {
+        server: invite.sourceUrl
+      }
+    });
+  }
+
+  private getDeepLinkElectronApi(): DeepLinkElectronApi | null {
+    return typeof window !== 'undefined'
+      ? (window as DeepLinkWindow).electronAPI ?? null
+      : null;
+  }
+
+  private isPublicRoute(url: string): boolean {
+    return url === '/login' ||
+      url === '/register' ||
+      url.startsWith('/invite/');
+  }
+
+  private parseDesktopInviteUrl(url: string): { inviteId: string; sourceUrl: string } | null {
+    try {
+      const parsedUrl = new URL(url);
+
+      if (parsedUrl.protocol !== 'toju:') {
+        return null;
+      }
+
+      const pathSegments = [parsedUrl.hostname, ...parsedUrl.pathname.split('/').filter(Boolean)]
+        .map((segment) => decodeURIComponent(segment));
+
+      if (pathSegments[0] !== 'invite' || !pathSegments[1]) {
+        return null;
+      }
+
+      const sourceUrl = parsedUrl.searchParams.get('server')?.trim();
+
+      if (!sourceUrl) {
+        return null;
+      }
+
+      return {
+        inviteId: pathSegments[1],
+        sourceUrl
+      };
+    } catch {
+      return null;
+    }
+  }
 }

src/app/core/models/index.ts

@@ -71,6 +71,7 @@ export interface Room {
   topic?: string;
   hostId: string;
   password?: string;
+  hasPassword?: boolean;
   isPrivate: boolean;
   createdAt: number;
   userCount: number;
@@ -80,6 +81,9 @@ export interface Room {
   permissions?: RoomPermissions;
   channels?: Channel[];
   members?: RoomMember[];
+  sourceId?: string;
+  sourceName?: string;
+  sourceUrl?: string;
 }
 
 export interface RoomSettings {
@@ -88,6 +92,7 @@ export interface RoomSettings {
   topic?: string;
   isPrivate: boolean;
   password?: string;
+  hasPassword?: boolean;
   maxUsers?: number;
   rules?: string[];
 }
@@ -265,14 +270,14 @@ export interface ChatEvent {
   displayName?: string;
   emoji?: string;
   reason?: string;
-  settings?: RoomSettings;
+  settings?: Partial<RoomSettings>;
   permissions?: Partial<RoomPermissions>;
   voiceState?: Partial<VoiceState>;
   isScreenSharing?: boolean;
   icon?: string;
   iconUpdatedAt?: number;
   role?: UserRole;
-  room?: Room;
+  room?: Partial<Room>;
   channels?: Channel[];
   members?: RoomMember[];
   ban?: BanEntry;
@@ -292,11 +297,13 @@ export interface ServerInfo {
   ownerPublicKey?: string;
   userCount: number;
   maxUsers: number;
+  hasPassword?: boolean;
   isPrivate: boolean;
   tags?: string[];
   createdAt: number;
   sourceId?: string;
   sourceName?: string;
+  sourceUrl?: string;
 }
 
 export interface JoinRequest {

src/app/core/services/attachment.service.ts

@@ -5,6 +5,10 @@ import {
   signal,
   effect
 } from '@angular/core';
+import {
+  NavigationEnd,
+  Router
+} from '@angular/router';
 import { take } from 'rxjs';
 import { v4 as uuidv4 } from 'uuid';
 import { WebRTCService } from './webrtc.service';
@@ -12,6 +16,7 @@ import { Store } from '@ngrx/store';
 import { selectCurrentRoomName } from '../../store/rooms/rooms.selectors';
 import { DatabaseService } from './database.service';
 import { recordDebugNetworkFileChunk } from './debug-network-metrics.service';
+import { ROOM_URL_PATTERN } from '../constants';
 import type {
   ChatAttachmentAnnouncement,
   ChatAttachmentMeta,
@@ -145,9 +150,14 @@ export class AttachmentService {
   private readonly webrtc = inject(WebRTCService);
   private readonly ngrxStore = inject(Store);
   private readonly database = inject(DatabaseService);
+  private readonly router = inject(Router);
 
   /** Primary index: `messageId → Attachment[]`. */
   private attachmentsByMessage = new Map<string, Attachment[]>();
+  /** Runtime cache of `messageId → roomId` for attachment gating. */
+  private messageRoomIds = new Map<string, string>();
+  /** Room currently being watched in the router, or `null` outside room routes. */
+  private watchedRoomId: string | null = this.extractWatchedRoomId(this.router.url);
 
   /** Incremented on every mutation so signal consumers re-render. */
   updated = signal<number>(0);
@@ -190,6 +200,24 @@ export class AttachmentService {
         this.initFromDatabase();
       }
     });
+
+    this.router.events.subscribe((event) => {
+      if (!(event instanceof NavigationEnd)) {
+        return;
+      }
+
+      this.watchedRoomId = this.extractWatchedRoomId(event.urlAfterRedirects || event.url);
+
+      if (this.watchedRoomId) {
+        void this.requestAutoDownloadsForRoom(this.watchedRoomId);
+      }
+    });
+
+    this.webrtc.onPeerConnected.subscribe(() => {
+      if (this.watchedRoomId) {
+        void this.requestAutoDownloadsForRoom(this.watchedRoomId);
+      }
+    });
   }
 
   private getElectronApi(): AttachmentElectronApi | undefined {
@@ -201,6 +229,44 @@ export class AttachmentService {
     return this.attachmentsByMessage.get(messageId) ?? [];
   }
 
+  /** Cache the room that owns a message so background downloads can be gated by the watched server. */
+  rememberMessageRoom(messageId: string, roomId: string): void {
+    if (!messageId || !roomId)
+      return;
+
+    this.messageRoomIds.set(messageId, roomId);
+  }
+
+  /** Queue best-effort auto-download checks for a message's eligible attachments. */
+  queueAutoDownloadsForMessage(messageId: string, attachmentId?: string): void {
+    void this.requestAutoDownloadsForMessage(messageId, attachmentId);
+  }
+
+  /** Auto-request eligible missing attachments for the currently watched room. */
+  async requestAutoDownloadsForRoom(roomId: string): Promise<void> {
+    if (!roomId || !this.isRoomWatched(roomId))
+      return;
+
+    if (this.database.isReady()) {
+      const messages = await this.database.getMessages(roomId, 500, 0);
+
+      for (const message of messages) {
+        this.rememberMessageRoom(message.id, message.roomId);
+        await this.requestAutoDownloadsForMessage(message.id);
+      }
+
+      return;
+    }
+
+    for (const [messageId] of this.attachmentsByMessage) {
+      const attachmentRoomId = await this.resolveMessageRoomId(messageId);
+
+      if (attachmentRoomId === roomId) {
+        await this.requestAutoDownloadsForMessage(messageId);
+      }
+    }
+  }
+
   /** Remove every attachment associated with a message. */
   async deleteForMessage(messageId: string): Promise<void> {
     const attachments = this.attachmentsByMessage.get(messageId) ?? [];
@@ -219,6 +285,7 @@ export class AttachmentService {
     }
 
     this.attachmentsByMessage.delete(messageId);
+    this.messageRoomIds.delete(messageId);
     this.clearMessageScopedState(messageId);
 
     if (hadCachedAttachments) {
@@ -276,8 +343,15 @@ export class AttachmentService {
    * @param attachmentMap - Map of `messageId → AttachmentMeta[]` from peer.
    */
   registerSyncedAttachments(
-    attachmentMap: Record<string, AttachmentMeta[]>
+    attachmentMap: Record<string, AttachmentMeta[]>,
+    messageRoomIds?: Record<string, string>
   ): void {
+    if (messageRoomIds) {
+      for (const [messageId, roomId] of Object.entries(messageRoomIds)) {
+        this.rememberMessageRoom(messageId, roomId);
+      }
+    }
+
     const newAttachments: Attachment[] = [];
 
     for (const [messageId, metas] of Object.entries(attachmentMap)) {
@@ -306,6 +380,7 @@ export class AttachmentService {
 
       for (const attachment of newAttachments) {
         void this.persistAttachmentMeta(attachment);
+        this.queueAutoDownloadsForMessage(attachment.messageId, attachment.id);
       }
     }
   }
@@ -375,9 +450,9 @@ export class AttachmentService {
    * message to all connected peers.
    *
    * 1. Each file is assigned a UUID.
-   * 2. A `file-announce` event is broadcast to peers.
-   * 3. Inline-preview media ≤ {@link MAX_AUTO_SAVE_SIZE_BYTES}
-   *    are immediately streamed as chunked base-64.
+  * 2. A `file-announce` event is broadcast to peers.
+  * 3. Peers watching the message's server can request any
+  *    auto-download-eligible media on demand.
    *
    * @param messageId     - ID of the parent message.
    * @param files         - Array of user-selected `File` objects.
@@ -437,10 +512,6 @@ export class AttachmentService {
 
       this.webrtc.broadcastMessage(fileAnnounceEvent);
 
-      // Auto-stream small inline-preview media
-      if (this.isMedia(attachment) && attachment.size <= MAX_AUTO_SAVE_SIZE_BYTES) {
-        await this.streamFileToPeers(messageId, fileId, file);
-      }
     }
 
     const existingList = this.attachmentsByMessage.get(messageId) ?? [];
@@ -482,6 +553,7 @@ export class AttachmentService {
     this.attachmentsByMessage.set(messageId, list);
     this.touch();
     void this.persistAttachmentMeta(attachment);
+    this.queueAutoDownloadsForMessage(messageId, attachment.id);
   }
 
   /**
@@ -772,6 +844,38 @@ export class AttachmentService {
     return `${messageId}:${fileId}`;
   }
 
+  private async requestAutoDownloadsForMessage(messageId: string, attachmentId?: string): Promise<void> {
+    if (!messageId)
+      return;
+
+    const roomId = await this.resolveMessageRoomId(messageId);
+
+    if (!roomId || !this.isRoomWatched(roomId) || this.webrtc.getConnectedPeers().length === 0) {
+      return;
+    }
+
+    const attachments = this.attachmentsByMessage.get(messageId) ?? [];
+
+    for (const attachment of attachments) {
+      if (attachmentId && attachment.id !== attachmentId)
+        continue;
+
+      if (!this.shouldAutoRequestWhenWatched(attachment))
+        continue;
+
+      if (attachment.available)
+        continue;
+
+      if ((attachment.receivedBytes ?? 0) > 0)
+        continue;
+
+      if (this.pendingRequests.has(this.buildRequestKey(messageId, attachment.id)))
+        continue;
+
+      this.requestFromAnyPeer(messageId, attachment);
+    }
+  }
+
   private clearMessageScopedState(messageId: string): void {
     const scopedPrefix = `${messageId}:`;
 
@@ -867,6 +971,12 @@ export class AttachmentService {
       attachment.mime.startsWith('audio/');
   }
 
+  /** Auto-download only the assets that already supported eager loading when watched. */
+  private shouldAutoRequestWhenWatched(attachment: Attachment): boolean {
+    return attachment.isImage ||
+      (this.isMedia(attachment) && attachment.size <= MAX_AUTO_SAVE_SIZE_BYTES);
+  }
+
   /** Check whether a completed download should be cached on disk. */
   private shouldPersistDownloadedAttachment(attachment: Attachment): boolean {
     return attachment.size <= MAX_AUTO_SAVE_SIZE_BYTES ||
@@ -1167,6 +1277,38 @@ export class AttachmentService {
     } catch { /* load is best-effort */ }
   }
 
+  private extractWatchedRoomId(url: string): string | null {
+    const roomMatch = url.match(ROOM_URL_PATTERN);
+
+    return roomMatch ? roomMatch[1] : null;
+  }
+
+  private isRoomWatched(roomId: string | null | undefined): boolean {
+    return !!roomId && roomId === this.watchedRoomId;
+  }
+
+  private async resolveMessageRoomId(messageId: string): Promise<string | null> {
+    const cachedRoomId = this.messageRoomIds.get(messageId);
+
+    if (cachedRoomId)
+      return cachedRoomId;
+
+    if (!this.database.isReady())
+      return null;
+
+    try {
+      const message = await this.database.getMessageById(messageId);
+
+      if (!message?.roomId)
+        return null;
+
+      this.rememberMessageRoom(messageId, message.roomId);
+      return message.roomId;
+    } catch {
+      return null;
+    }
+  }
+
   /** One-time migration from localStorage to the database. */
   private async migrateFromLocalStorage(): Promise<void> {
     try {

src/app/core/services/debugging/debugging.service.ts

@@ -218,7 +218,16 @@ export class DebuggingService {
 
     const rawMessage = args.map((arg) => this.stringifyPreview(arg)).join(' ')
       .trim() || '(empty console call)';
-    const consoleMetadata = this.extractConsoleMetadata(rawMessage);
+
+    // Use only string args for label/message extraction so that
+    // stringified object payloads don't pollute the parsed message.
+    // Object payloads are captured separately via extractConsolePayload.
+    const metadataSource = args
+      .filter((arg): arg is string => typeof arg === 'string')
+      .join(' ')
+      .trim() || rawMessage;
+
+    const consoleMetadata = this.extractConsoleMetadata(metadataSource);
     const payload = this.extractConsolePayload(args);
     const payloadText = payload === undefined
       ? null

src/app/core/services/server-directory.service.ts

@@ -12,11 +12,7 @@ import {
   forkJoin
 } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import {
-  ServerInfo,
-  JoinRequest,
-  User
-} from '../models/index';
+import { ServerInfo, User } from '../models/index';
 import { v4 as uuidv4 } from 'uuid';
 import { environment } from '../../../environments/environment';
 
@@ -40,6 +36,69 @@ export interface ServerEndpoint {
   latency?: number;
 }
 
+export interface ServerSourceSelector {
+  sourceId?: string;
+  sourceUrl?: string;
+}
+
+export interface ServerJoinAccessRequest {
+  roomId: string;
+  userId: string;
+  userPublicKey: string;
+  displayName: string;
+  password?: string;
+  inviteId?: string;
+}
+
+export interface ServerJoinAccessResponse {
+  success: boolean;
+  signalingUrl: string;
+  joinedBefore: boolean;
+  via: 'membership' | 'password' | 'invite' | 'public';
+  server: ServerInfo;
+}
+
+export interface CreateServerInviteRequest {
+  requesterUserId: string;
+  requesterDisplayName?: string;
+  requesterRole?: string;
+}
+
+export interface ServerInviteInfo {
+  id: string;
+  serverId: string;
+  createdAt: number;
+  expiresAt: number;
+  inviteUrl: string;
+  browserUrl: string;
+  appUrl: string;
+  sourceUrl: string;
+  createdBy?: string;
+  createdByDisplayName?: string;
+  isExpired: boolean;
+  server: ServerInfo;
+}
+
+export interface KickServerMemberRequest {
+  actorUserId: string;
+  actorRole?: string;
+  targetUserId: string;
+}
+
+export interface BanServerMemberRequest extends KickServerMemberRequest {
+  banId?: string;
+  displayName?: string;
+  reason?: string;
+  expiresAt?: number;
+}
+
+export interface UnbanServerMemberRequest {
+  actorUserId: string;
+  actorRole?: string;
+  banId?: string;
+  targetUserId?: string;
+}
+
 /** localStorage key that persists the user's configured endpoints. */
 const ENDPOINTS_STORAGE_KEY = 'metoyou_server_endpoints';
 /** Timeout (ms) for server health-check and alternative-endpoint pings. */
@@ -92,7 +151,7 @@ function buildDefaultServerUrl(): string {
 
 /** Blueprint for the built-in default endpoint. */
 const DEFAULT_ENDPOINT: Omit<ServerEndpoint, 'id'> = {
-  name: 'Local Server',
+  name: 'Default Server',
   url: buildDefaultServerUrl(),
   isActive: true,
   isDefault: true,
@@ -131,7 +190,7 @@ export class ServerDirectoryService {
    *
    * @param server - Name and URL of the endpoint to add.
    */
-  addServer(server: { name: string; url: string }): void {
+  addServer(server: { name: string; url: string }): ServerEndpoint {
     const sanitisedUrl = this.sanitiseUrl(server.url);
     const newEndpoint: ServerEndpoint = {
       id: uuidv4(),
@@ -144,6 +203,40 @@ export class ServerDirectoryService {
 
     this._servers.update((endpoints) => [...endpoints, newEndpoint]);
     this.saveEndpoints();
+    return newEndpoint;
+  }
+
+  /** Ensure an endpoint exists for a given URL, optionally activating it. */
+  ensureServerEndpoint(
+    server: { name: string; url: string },
+    options?: { setActive?: boolean }
+  ): ServerEndpoint {
+    const sanitisedUrl = this.sanitiseUrl(server.url);
+    const existing = this.findServerByUrl(sanitisedUrl);
+
+    if (existing) {
+      if (options?.setActive) {
+        this.setActiveServer(existing.id);
+      }
+
+      return existing;
+    }
+
+    const created = this.addServer({ name: server.name,
+      url: sanitisedUrl });
+
+    if (options?.setActive) {
+      this.setActiveServer(created.id);
+    }
+
+    return created;
+  }
+
+  /** Find a configured endpoint by URL. */
+  findServerByUrl(url: string): ServerEndpoint | undefined {
+    const sanitisedUrl = this.sanitiseUrl(url);
+
+    return this._servers().find((endpoint) => this.sanitiseUrl(endpoint.url) === sanitisedUrl);
   }
 
   /**
@@ -265,18 +358,13 @@ export class ServerDirectoryService {
   }
 
   /** Expose the API base URL for external consumers. */
-  getApiBaseUrl(): string {
-    return this.buildApiBaseUrl();
+  getApiBaseUrl(selector?: ServerSourceSelector): string {
+    return this.buildApiBaseUrl(selector);
   }
 
   /** Get the WebSocket URL derived from the active endpoint. */
-  getWebSocketUrl(): string {
-    const active = this.activeServer();
-
-    if (!active)
-      return buildDefaultServerUrl().replace(/^http/, 'ws');
-
-    return active.url.replace(/^http/, 'ws');
+  getWebSocketUrl(selector?: ServerSourceSelector): string {
+    return this.resolveBaseServerUrl(selector).replace(/^http/, 'ws');
   }
 
   /**
@@ -310,11 +398,11 @@ export class ServerDirectoryService {
   }
 
   /** Fetch details for a single server. */
-  getServer(serverId: string): Observable<ServerInfo | null> {
+  getServer(serverId: string, selector?: ServerSourceSelector): Observable<ServerInfo | null> {
     return this.http
-      .get<ServerInfo>(`${this.buildApiBaseUrl()}/servers/${serverId}`)
+      .get<ServerInfo>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}`)
       .pipe(
-        map((server) => this.normalizeServerInfo(server, this.activeServer())),
+        map((server) => this.normalizeServerInfo(server, this.resolveEndpoint(selector))),
         catchError((error) => {
           console.error('Failed to get server:', error);
           return of(null);
@@ -324,10 +412,11 @@ export class ServerDirectoryService {
 
   /** Register a new server listing in the directory. */
   registerServer(
-    server: Omit<ServerInfo, 'createdAt'> & { id?: string }
+    server: Omit<ServerInfo, 'createdAt'> & { id?: string; password?: string | null },
+    selector?: ServerSourceSelector
   ): Observable<ServerInfo> {
     return this.http
-      .post<ServerInfo>(`${this.buildApiBaseUrl()}/servers`, server)
+      .post<ServerInfo>(`${this.buildApiBaseUrl(selector)}/servers`, server)
       .pipe(
         catchError((error) => {
           console.error('Failed to register server:', error);
@@ -339,10 +428,15 @@ export class ServerDirectoryService {
   /** Update an existing server listing. */
   updateServer(
     serverId: string,
-    updates: Partial<ServerInfo> & { currentOwnerId: string }
+    updates: Partial<ServerInfo> & {
+      currentOwnerId: string;
+      actingRole?: string;
+      password?: string | null;
+    },
+    selector?: ServerSourceSelector
   ): Observable<ServerInfo> {
     return this.http
-      .put<ServerInfo>(`${this.buildApiBaseUrl()}/servers/${serverId}`, updates)
+      .put<ServerInfo>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}`, updates)
       .pipe(
         catchError((error) => {
           console.error('Failed to update server:', error);
@@ -352,9 +446,9 @@ export class ServerDirectoryService {
   }
 
   /** Remove a server listing from the directory. */
-  unregisterServer(serverId: string): Observable<void> {
+  unregisterServer(serverId: string, selector?: ServerSourceSelector): Observable<void> {
     return this.http
-      .delete<void>(`${this.buildApiBaseUrl()}/servers/${serverId}`)
+      .delete<void>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}`)
       .pipe(
         catchError((error) => {
           console.error('Failed to unregister server:', error);
@@ -364,9 +458,9 @@ export class ServerDirectoryService {
   }
 
   /** Retrieve users currently connected to a server. */
-  getServerUsers(serverId: string): Observable<User[]> {
+  getServerUsers(serverId: string, selector?: ServerSourceSelector): Observable<User[]> {
     return this.http
-      .get<User[]>(`${this.buildApiBaseUrl()}/servers/${serverId}/users`)
+      .get<User[]>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/users`)
       .pipe(
         catchError((error) => {
           console.error('Failed to get server users:', error);
@@ -377,11 +471,12 @@ export class ServerDirectoryService {
 
   /** Send a join request for a server and receive the signaling URL. */
   requestJoin(
-    request: JoinRequest
-  ): Observable<{ success: boolean; signalingUrl?: string }> {
+    request: ServerJoinAccessRequest,
+    selector?: ServerSourceSelector
+  ): Observable<ServerJoinAccessResponse> {
     return this.http
-      .post<{ success: boolean; signalingUrl?: string }>(
-        `${this.buildApiBaseUrl()}/servers/${request.roomId}/join`,
+      .post<ServerJoinAccessResponse>(
+        `${this.buildApiBaseUrl(selector)}/servers/${request.roomId}/join`,
         request
       )
       .pipe(
@@ -392,10 +487,86 @@ export class ServerDirectoryService {
       );
   }
 
-  /** Notify the directory that a user has left a server. */
-  notifyLeave(serverId: string, userId: string): Observable<void> {
+  /** Create an expiring invite link for a server. */
+  createInvite(
+    serverId: string,
+    request: CreateServerInviteRequest,
+    selector?: ServerSourceSelector
+  ): Observable<ServerInviteInfo> {
     return this.http
-      .post<void>(`${this.buildApiBaseUrl()}/servers/${serverId}/leave`, { userId })
+      .post<ServerInviteInfo>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/invites`, request)
+      .pipe(
+        catchError((error) => {
+          console.error('Failed to create invite:', error);
+          return throwError(() => error);
+        })
+      );
+  }
+
+  /** Retrieve public invite metadata. */
+  getInvite(inviteId: string, selector?: ServerSourceSelector): Observable<ServerInviteInfo> {
+    return this.http
+      .get<ServerInviteInfo>(`${this.buildApiBaseUrl(selector)}/invites/${inviteId}`)
+      .pipe(
+        catchError((error) => {
+          console.error('Failed to get invite:', error);
+          return throwError(() => error);
+        })
+      );
+  }
+
+  /** Remove a member's stored join access for a server. */
+  kickServerMember(
+    serverId: string,
+    request: KickServerMemberRequest,
+    selector?: ServerSourceSelector
+  ): Observable<void> {
+    return this.http
+      .post<void>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/moderation/kick`, request)
+      .pipe(
+        catchError((error) => {
+          console.error('Failed to kick server member:', error);
+          return throwError(() => error);
+        })
+      );
+  }
+
+  /** Ban a member from a server invite/password access list. */
+  banServerMember(
+    serverId: string,
+    request: BanServerMemberRequest,
+    selector?: ServerSourceSelector
+  ): Observable<void> {
+    return this.http
+      .post<void>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/moderation/ban`, request)
+      .pipe(
+        catchError((error) => {
+          console.error('Failed to ban server member:', error);
+          return throwError(() => error);
+        })
+      );
+  }
+
+  /** Remove a stored server ban. */
+  unbanServerMember(
+    serverId: string,
+    request: UnbanServerMemberRequest,
+    selector?: ServerSourceSelector
+  ): Observable<void> {
+    return this.http
+      .post<void>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/moderation/unban`, request)
+      .pipe(
+        catchError((error) => {
+          console.error('Failed to unban server member:', error);
+          return throwError(() => error);
+        })
+      );
+  }
+
+  /** Remove a user's remembered membership after leaving a server. */
+  notifyLeave(serverId: string, userId: string, selector?: ServerSourceSelector): Observable<void> {
+    return this.http
+      .post<void>(`${this.buildApiBaseUrl(selector)}/servers/${serverId}/leave`, { userId })
       .pipe(
         catchError((error) => {
           console.error('Failed to notify leave:', error);
@@ -432,17 +603,8 @@ export class ServerDirectoryService {
    * Build the active endpoint's API base URL, stripping trailing
    * slashes and accidental `/api` suffixes.
    */
-  private buildApiBaseUrl(): string {
-    const active = this.activeServer();
-    const rawUrl = active ? active.url : buildDefaultServerUrl();
-
-    let base = rawUrl.replace(/\/+$/, '');
-
-    if (base.toLowerCase().endsWith('/api')) {
-      base = base.slice(0, -4);
-    }
-
-    return `${base}/api`;
+  private buildApiBaseUrl(selector?: ServerSourceSelector): string {
+    return `${this.resolveBaseServerUrl(selector)}/api`;
   }
 
   /** Strip trailing slashes and `/api` suffix from a URL. */
@@ -456,6 +618,26 @@ export class ServerDirectoryService {
     return cleaned;
   }
 
+  private resolveEndpoint(selector?: ServerSourceSelector): ServerEndpoint | null {
+    if (selector?.sourceId) {
+      return this._servers().find((endpoint) => endpoint.id === selector.sourceId) ?? null;
+    }
+
+    if (selector?.sourceUrl) {
+      return this.findServerByUrl(selector.sourceUrl) ?? null;
+    }
+
+    return this.activeServer() ?? this._servers()[0] ?? null;
+  }
+
+  private resolveBaseServerUrl(selector?: ServerSourceSelector): string {
+    if (selector?.sourceUrl) {
+      return this.sanitiseUrl(selector.sourceUrl);
+    }
+
+    return this.resolveEndpoint(selector)?.url ?? buildDefaultServerUrl();
+  }
+
   /**
    * Handle both `{ servers: [...] }` and direct `ServerInfo[]`
    * response shapes from the directory API.
@@ -560,45 +742,44 @@ export class ServerDirectoryService {
     source?: ServerEndpoint | null
   ): ServerInfo {
     const candidate = server as Record<string, unknown>;
-    const userCount = typeof candidate['userCount'] === 'number'
-      ? candidate['userCount']
-      : (typeof candidate['currentUsers'] === 'number' ? candidate['currentUsers'] : 0);
-    const maxUsers = typeof candidate['maxUsers'] === 'number' ? candidate['maxUsers'] : 0;
-    const isPrivate = typeof candidate['isPrivate'] === 'boolean'
-      ? candidate['isPrivate']
-      : candidate['isPrivate'] === 1;
+    const sourceName = this.getStringValue(candidate['sourceName']);
+    const sourceUrl = this.getStringValue(candidate['sourceUrl']);
 
     return {
-      id: typeof candidate['id'] === 'string' ? candidate['id'] : '',
-      name: typeof candidate['name'] === 'string' ? candidate['name'] : 'Unnamed server',
-      description: typeof candidate['description'] === 'string' ? candidate['description'] : undefined,
-      topic: typeof candidate['topic'] === 'string' ? candidate['topic'] : undefined,
-      hostName:
-        typeof candidate['hostName'] === 'string'
-          ? candidate['hostName']
-          : (typeof candidate['sourceName'] === 'string'
-            ? candidate['sourceName']
-            : (source?.name ?? 'Unknown API')),
-      ownerId: typeof candidate['ownerId'] === 'string' ? candidate['ownerId'] : undefined,
-      ownerName: typeof candidate['ownerName'] === 'string' ? candidate['ownerName'] : undefined,
-      ownerPublicKey:
-        typeof candidate['ownerPublicKey'] === 'string' ? candidate['ownerPublicKey'] : undefined,
-      userCount,
-      maxUsers,
-      isPrivate,
+      id: this.getStringValue(candidate['id']) ?? '',
+      name: this.getStringValue(candidate['name']) ?? 'Unnamed server',
+      description: this.getStringValue(candidate['description']),
+      topic: this.getStringValue(candidate['topic']),
+      hostName: this.getStringValue(candidate['hostName']) ?? sourceName ?? source?.name ?? 'Unknown API',
+      ownerId: this.getStringValue(candidate['ownerId']),
+      ownerName: this.getStringValue(candidate['ownerName']),
+      ownerPublicKey: this.getStringValue(candidate['ownerPublicKey']),
+      userCount: this.getNumberValue(candidate['userCount'], this.getNumberValue(candidate['currentUsers'])),
+      maxUsers: this.getNumberValue(candidate['maxUsers']),
+      hasPassword: this.getBooleanValue(candidate['hasPassword']),
+      isPrivate: this.getBooleanValue(candidate['isPrivate']),
       tags: Array.isArray(candidate['tags']) ? candidate['tags'] as string[] : [],
-      createdAt: typeof candidate['createdAt'] === 'number' ? candidate['createdAt'] : Date.now(),
-      sourceId:
-        typeof candidate['sourceId'] === 'string'
-          ? candidate['sourceId']
-          : source?.id,
-      sourceName:
-        typeof candidate['sourceName'] === 'string'
-          ? candidate['sourceName']
-          : source?.name
+      createdAt: this.getNumberValue(candidate['createdAt'], Date.now()),
+      sourceId: this.getStringValue(candidate['sourceId']) ?? source?.id,
+      sourceName: sourceName ?? source?.name,
+      sourceUrl: sourceUrl
+        ? this.sanitiseUrl(sourceUrl)
+        : (source ? this.sanitiseUrl(source.url) : undefined)
     };
   }
 
+  private getBooleanValue(value: unknown): boolean {
+    return typeof value === 'boolean' ? value : value === 1;
+  }
+
+  private getNumberValue(value: unknown, fallback = 0): number {
+    return typeof value === 'number' ? value : fallback;
+  }
+
+  private getStringValue(value: unknown): string | undefined {
+    return typeof value === 'string' ? value : undefined;
+  }
+
   /** Load endpoints from localStorage, syncing the built-in default endpoint if needed. */
   private loadEndpoints(): void {
     const stored = localStorage.getItem(ENDPOINTS_STORAGE_KEY);

src/app/core/services/webrtc.service.ts

@@ -71,6 +71,7 @@ type IncomingSignalingMessage = Omit<Partial<SignalingMessage>, 'type' | 'payloa
   oderId?: string;
   serverTime?: number;
   serverId?: string;
+  serverIds?: string[];
   users?: SignalingUserSummary[];
   displayName?: string;
   fromUserId?: string;
@@ -92,8 +93,8 @@ export class WebRTCService implements OnDestroy {
   private activeServerId: string | null = null;
   /** The server ID where voice is currently active, or `null` when not in voice. */
   private voiceServerId: string | null = null;
-  /** Maps each remote peer ID to the server they were discovered from. */
-  private readonly peerServerMap = new Map<string, string>();
+  /** Maps each remote peer ID to the shared servers they currently belong to. */
+  private readonly peerServerMap = new Map<string, Set<string>>();
   private readonly serviceDestroyed$ = new Subject<void>();
   private remoteScreenShareRequestsEnabled = false;
   private readonly desiredRemoteScreenSharePeers = new Set<string>();
@@ -109,6 +110,7 @@ export class WebRTCService implements OnDestroy {
   private readonly _isNoiseReductionEnabled = signal(false);
   private readonly _screenStreamSignal = signal<MediaStream | null>(null);
   private readonly _isScreenShareRemotePlaybackSuppressed = signal(false);
+  private readonly _forceDefaultRemotePlaybackOutput = signal(false);
   private readonly _hasConnectionError = signal(false);
   private readonly _connectionErrorMessage = signal<string | null>(null);
   private readonly _hasEverConnected = signal(false);
@@ -131,6 +133,7 @@ export class WebRTCService implements OnDestroy {
   readonly isNoiseReductionEnabled = computed(() => this._isNoiseReductionEnabled());
   readonly screenStream = computed(() => this._screenStreamSignal());
   readonly isScreenShareRemotePlaybackSuppressed = computed(() => this._isScreenShareRemotePlaybackSuppressed());
+  readonly forceDefaultRemotePlaybackOutput = computed(() => this._forceDefaultRemotePlaybackOutput());
   readonly hasConnectionError = computed(() => this._hasConnectionError());
   readonly connectionErrorMessage = computed(() => this._connectionErrorMessage());
   readonly shouldShowConnectionError = computed(() => {
@@ -220,6 +223,7 @@ export class WebRTCService implements OnDestroy {
         this._isScreenSharing.set(state.active);
         this._screenStreamSignal.set(state.stream);
         this._isScreenShareRemotePlaybackSuppressed.set(state.suppressRemotePlayback);
+        this._forceDefaultRemotePlaybackOutput.set(state.forceDefaultRemotePlaybackOutput);
       }
     });
 
@@ -272,6 +276,7 @@ export class WebRTCService implements OnDestroy {
 
     this.peerManager.peerDisconnected$.subscribe((peerId) => {
       this.activeRemoteScreenSharePeers.delete(peerId);
+      this.peerServerMap.delete(peerId);
       this.screenShareManager.clearScreenShareRequest(peerId);
     });
 
@@ -346,6 +351,10 @@ export class WebRTCService implements OnDestroy {
       if (!user.oderId)
         continue;
 
+      if (message.serverId) {
+        this.trackPeerInServer(user.oderId, message.serverId);
+      }
+
       const existing = this.peerManager.activePeerConnections.get(user.oderId);
       const healthy = this.isPeerHealthy(existing);
 
@@ -364,10 +373,6 @@ export class WebRTCService implements OnDestroy {
 
       this.peerManager.createPeerConnection(user.oderId, true);
       this.peerManager.createAndSendOffer(user.oderId);
-
-      if (message.serverId) {
-        this.peerServerMap.set(user.oderId, message.serverId);
-      }
     }
   }
 
@@ -376,6 +381,10 @@ export class WebRTCService implements OnDestroy {
       displayName: message.displayName,
       oderId: message.oderId
     });
+
+    if (message.oderId && message.serverId) {
+      this.trackPeerInServer(message.oderId, message.serverId);
+    }
   }
 
   private handleUserLeftSignalingMessage(message: IncomingSignalingMessage): void {
@@ -386,8 +395,16 @@ export class WebRTCService implements OnDestroy {
     });
 
     if (message.oderId) {
-      this.peerManager.removePeer(message.oderId);
-      this.peerServerMap.delete(message.oderId);
+      const hasRemainingSharedServers = Array.isArray(message.serverIds)
+        ? this.replacePeerSharedServers(message.oderId, message.serverIds)
+        : (message.serverId
+          ? this.untrackPeerFromServer(message.oderId, message.serverId)
+          : false);
+
+      if (!hasRemainingSharedServers) {
+        this.peerManager.removePeer(message.oderId);
+        this.peerServerMap.delete(message.oderId);
+      }
     }
   }
 
@@ -401,7 +418,7 @@ export class WebRTCService implements OnDestroy {
     const offerEffectiveServer = this.voiceServerId || this.activeServerId;
 
     if (offerEffectiveServer && !this.peerServerMap.has(fromUserId)) {
-      this.peerServerMap.set(fromUserId, offerEffectiveServer);
+      this.trackPeerInServer(fromUserId, offerEffectiveServer);
     }
 
     this.peerManager.handleOffer(fromUserId, sdp);
@@ -438,8 +455,8 @@ export class WebRTCService implements OnDestroy {
   private closePeersNotInServer(serverId: string): void {
     const peersToClose: string[] = [];
 
-    this.peerServerMap.forEach((peerServerId, peerId) => {
-      if (peerServerId !== serverId) {
+    this.peerServerMap.forEach((peerServerIds, peerId) => {
+      if (!peerServerIds.has(serverId)) {
         peersToClose.push(peerId);
       }
     });
@@ -476,6 +493,45 @@ export class WebRTCService implements OnDestroy {
     return this.signalingManager.connect(serverUrl);
   }
 
+  private trackPeerInServer(peerId: string, serverId: string): void {
+    if (!peerId || !serverId)
+      return;
+
+    const trackedServers = this.peerServerMap.get(peerId) ?? new Set<string>();
+
+    trackedServers.add(serverId);
+    this.peerServerMap.set(peerId, trackedServers);
+  }
+
+  private replacePeerSharedServers(peerId: string, serverIds: string[]): boolean {
+    const sharedServerIds = serverIds.filter((serverId) => this.memberServerIds.has(serverId));
+
+    if (sharedServerIds.length === 0) {
+      this.peerServerMap.delete(peerId);
+      return false;
+    }
+
+    this.peerServerMap.set(peerId, new Set(sharedServerIds));
+    return true;
+  }
+
+  private untrackPeerFromServer(peerId: string, serverId: string): boolean {
+    const trackedServers = this.peerServerMap.get(peerId);
+
+    if (!trackedServers)
+      return false;
+
+    trackedServers.delete(serverId);
+
+    if (trackedServers.size === 0) {
+      this.peerServerMap.delete(peerId);
+      return false;
+    }
+
+    this.peerServerMap.set(peerId, trackedServers);
+    return true;
+  }
+
   /**
    * Ensure the signaling WebSocket is connected, reconnecting if needed.
    *
@@ -513,6 +569,16 @@ export class WebRTCService implements OnDestroy {
     this.activeServerId = serverId;
   }
 
+  /** The server ID currently being viewed / active, or `null`. */
+  get currentServerId(): string | null {
+    return this.activeServerId;
+  }
+
+  /** The last signaling URL used by the client, if any. */
+  getCurrentSignalingUrl(): string | null {
+    return this.signalingManager.getLastUrl();
+  }
+
   /**
    * Send an identify message to the signaling server.
    *
@@ -907,6 +973,7 @@ export class WebRTCService implements OnDestroy {
     this._isScreenSharing.set(false);
     this._screenStreamSignal.set(null);
     this._isScreenShareRemotePlaybackSuppressed.set(false);
+    this._forceDefaultRemotePlaybackOutput.set(false);
   }
 
   /** Synchronise Angular signals from the MediaManager's internal state. */

src/app/core/services/webrtc/media.manager.ts

@@ -103,10 +103,10 @@ export class MediaManager {
    * Replace the callback set at runtime.
    * Needed because of circular initialisation between managers.
    *
-   * @param cb - The new callback interface to wire into this manager.
+   * @param nextCallbacks - The new callback interface to wire into this manager.
    */
-  setCallbacks(cb: MediaManagerCallbacks): void {
-    this.callbacks = cb;
+  setCallbacks(nextCallbacks: MediaManagerCallbacks): void {
+    this.callbacks = nextCallbacks;
   }
 
   /** Returns the current local media stream, or `null` if voice is disabled. */
@@ -485,28 +485,21 @@ export class MediaManager {
     if (!this.localMediaStream)
       return;
 
-    const localAudioTrack = this.localMediaStream.getAudioTracks()[0] || null;
-    const localVideoTrack = this.localMediaStream.getVideoTracks()[0] || null;
+    const localStream = this.localMediaStream;
+    const localAudioTrack = localStream.getAudioTracks()[0] || null;
+    const localVideoTrack = localStream.getVideoTracks()[0] || null;
 
     peers.forEach((peerData, peerId) => {
       if (localAudioTrack) {
-        let audioSender =
-          peerData.audioSender ||
-          peerData.connection.getSenders().find((s) => s.track?.kind === TRACK_KIND_AUDIO);
-
-        if (!audioSender) {
-          audioSender = peerData.connection.addTransceiver(TRACK_KIND_AUDIO, {
-            direction: TRANSCEIVER_SEND_RECV
-          }).sender;
-        }
+        const audioTransceiver = this.getOrCreateReusableTransceiver(peerData, TRACK_KIND_AUDIO, {
+          preferredSender: peerData.audioSender,
+          excludedSenders: [peerData.screenAudioSender]
+        });
+        const audioSender = audioTransceiver.sender;
 
         peerData.audioSender = audioSender;
 
         // Restore direction after removeTrack (which sets it to recvonly)
-        const audioTransceiver = peerData.connection
-          .getTransceivers()
-          .find((t) => t.sender === audioSender);
-
         if (
           audioTransceiver &&
           (audioTransceiver.direction === TRANSCEIVER_RECV_ONLY ||
@@ -515,29 +508,25 @@ export class MediaManager {
           audioTransceiver.direction = TRANSCEIVER_SEND_RECV;
         }
 
+        if (typeof audioSender.setStreams === 'function') {
+          audioSender.setStreams(localStream);
+        }
+
         audioSender
           .replaceTrack(localAudioTrack)
           .then(() => this.logger.info('audio replaceTrack ok', { peerId }))
-          .catch((e) => this.logger.error('audio replaceTrack failed', e));
+          .catch((error) => this.logger.error('audio replaceTrack failed', error));
       }
 
       if (localVideoTrack) {
-        let videoSender =
-          peerData.videoSender ||
-          peerData.connection.getSenders().find((s) => s.track?.kind === TRACK_KIND_VIDEO);
-
-        if (!videoSender) {
-          videoSender = peerData.connection.addTransceiver(TRACK_KIND_VIDEO, {
-            direction: TRANSCEIVER_SEND_RECV
-          }).sender;
-        }
+        const videoTransceiver = this.getOrCreateReusableTransceiver(peerData, TRACK_KIND_VIDEO, {
+          preferredSender: peerData.videoSender,
+          excludedSenders: [peerData.screenVideoSender]
+        });
+        const videoSender = videoTransceiver.sender;
 
         peerData.videoSender = videoSender;
 
-        const videoTransceiver = peerData.connection
-          .getTransceivers()
-          .find((t) => t.sender === videoSender);
-
         if (
           videoTransceiver &&
           (videoTransceiver.direction === TRANSCEIVER_RECV_ONLY ||
@@ -546,16 +535,64 @@ export class MediaManager {
           videoTransceiver.direction = TRANSCEIVER_SEND_RECV;
         }
 
+        if (typeof videoSender.setStreams === 'function') {
+          videoSender.setStreams(localStream);
+        }
+
         videoSender
           .replaceTrack(localVideoTrack)
           .then(() => this.logger.info('video replaceTrack ok', { peerId }))
-          .catch((e) => this.logger.error('video replaceTrack failed', e));
+          .catch((error) => this.logger.error('video replaceTrack failed', error));
       }
 
       this.callbacks.renegotiate(peerId);
     });
   }
 
+  private getOrCreateReusableTransceiver(
+    peerData: PeerData,
+    kind: typeof TRACK_KIND_AUDIO | typeof TRACK_KIND_VIDEO,
+    options: {
+      preferredSender?: RTCRtpSender;
+      excludedSenders?: (RTCRtpSender | undefined)[];
+    }
+  ): RTCRtpTransceiver {
+    const excludedSenders = new Set(
+      (options.excludedSenders ?? []).filter((sender): sender is RTCRtpSender => !!sender)
+    );
+    const existingTransceivers = peerData.connection.getTransceivers();
+    const preferredTransceiver = options.preferredSender
+      ? existingTransceivers.find((transceiver) => transceiver.sender === options.preferredSender)
+      : null;
+
+    if (preferredTransceiver) {
+      return preferredTransceiver;
+    }
+
+    const attachedSenderTransceiver = existingTransceivers.find((transceiver) =>
+      !excludedSenders.has(transceiver.sender)
+      && transceiver.sender.track?.kind === kind
+    );
+
+    if (attachedSenderTransceiver) {
+      return attachedSenderTransceiver;
+    }
+
+    const reusableReceiverTransceiver = existingTransceivers.find((transceiver) =>
+      !excludedSenders.has(transceiver.sender)
+      && !transceiver.sender.track
+      && transceiver.receiver.track?.kind === kind
+    );
+
+    if (reusableReceiverTransceiver) {
+      return reusableReceiverTransceiver;
+    }
+
+    return peerData.connection.addTransceiver(kind, {
+      direction: TRANSCEIVER_SEND_RECV
+    });
+  }
+
   /** Broadcast a voice-presence state event to all connected peers. */
   private broadcastVoicePresence(): void {
     const oderId = this.callbacks.getIdentifyOderId();

src/app/core/services/webrtc/peer-connection-manager/connection/create-peer-connection.ts

@@ -127,7 +127,9 @@ export function createPeerConnection(
     isInitiator,
     pendingIceCandidates: [],
     audioSender: undefined,
-    videoSender: undefined
+    videoSender: undefined,
+    remoteVoiceStreamIds: new Set<string>(),
+    remoteScreenShareStreamIds: new Set<string>()
   };
 
   if (isInitiator) {
@@ -151,6 +153,10 @@ export function createPeerConnection(
 
     localStream.getTracks().forEach((track) => {
       if (track.kind === TRACK_KIND_AUDIO && peerData.audioSender) {
+        if (typeof peerData.audioSender.setStreams === 'function') {
+          peerData.audioSender.setStreams(localStream);
+        }
+
         peerData.audioSender
           .replaceTrack(track)
           .then(() => logger.info('audio replaceTrack (init) ok', { remotePeerId }))
@@ -158,6 +164,10 @@ export function createPeerConnection(
             logger.error('audio replaceTrack failed at createPeerConnection', error)
           );
       } else if (track.kind === TRACK_KIND_VIDEO && peerData.videoSender) {
+        if (typeof peerData.videoSender.setStreams === 'function') {
+          peerData.videoSender.setStreams(localStream);
+        }
+
         peerData.videoSender
           .replaceTrack(track)
           .then(() => logger.info('video replaceTrack (init) ok', { remotePeerId }))

src/app/core/services/webrtc/peer-connection-manager/streams/remote-streams.ts

@@ -9,6 +9,7 @@ export function handleRemoteTrack(
 ): void {
   const { logger, state } = context;
   const track = event.track;
+  const isScreenAudio = isScreenShareAudioTrack(context, event, remotePeerId);
   const settings =
     typeof track.getSettings === 'function' ? track.getSettings() : ({} as MediaTrackSettings);
 
@@ -34,10 +35,10 @@ export function handleRemoteTrack(
   }
 
   const compositeStream = buildCompositeRemoteStream(state, remotePeerId, track);
-  const voiceStream = isVoiceAudioTrack(context, event, remotePeerId)
+  const voiceStream = isVoiceAudioTrack(track, isScreenAudio)
     ? buildAudioOnlyStream(state.remotePeerVoiceStreams.get(remotePeerId), track)
     : null;
-  const screenShareStream = isScreenShareTrack(context, event, remotePeerId)
+  const screenShareStream = isScreenShareTrack(track, isScreenAudio)
     ? buildScreenShareStream(state.remotePeerScreenShareStreams.get(remotePeerId), track)
     : null;
 
@@ -53,6 +54,12 @@ export function handleRemoteTrack(
     state.remotePeerScreenShareStreams.set(remotePeerId, screenShareStream);
   }
 
+  rememberIncomingStreamIds(state, event, remotePeerId, {
+    isScreenAudio,
+    isVoiceAudio: !!voiceStream,
+    isScreenTrack: !!screenShareStream
+  });
+
   publishRemoteStreamUpdate(context, remotePeerId, compositeStream);
 }
 
@@ -61,6 +68,7 @@ export function clearRemoteScreenShareStream(
   remotePeerId: string
 ): void {
   const { state } = context;
+  const peerData = state.activePeerConnections.get(remotePeerId);
   const screenShareStream = state.remotePeerScreenShareStreams.get(remotePeerId);
 
   if (!screenShareStream) {
@@ -79,6 +87,8 @@ export function clearRemoteScreenShareStream(
   removeTracksFromStreamMap(state.remotePeerVoiceStreams, remotePeerId, screenShareTrackIds);
   state.remotePeerScreenShareStreams.delete(remotePeerId);
 
+  peerData?.remoteScreenShareStreamIds.clear();
+
   publishRemoteStreamUpdate(context, remotePeerId, compositeStream);
 }
 
@@ -152,11 +162,20 @@ function removeRemoteTrack(
   trackId: string
 ): void {
   const { state } = context;
+  const peerData = state.activePeerConnections.get(remotePeerId);
   const compositeStream = removeTrackFromStreamMap(state.remotePeerStreams, remotePeerId, trackId);
 
   removeTrackFromStreamMap(state.remotePeerVoiceStreams, remotePeerId, trackId);
   removeTrackFromStreamMap(state.remotePeerScreenShareStreams, remotePeerId, trackId);
 
+  if (!state.remotePeerVoiceStreams.has(remotePeerId)) {
+    peerData?.remoteVoiceStreamIds.clear();
+  }
+
+  if (!state.remotePeerScreenShareStreams.has(remotePeerId)) {
+    peerData?.remoteScreenShareStreamIds.clear();
+  }
+
   publishRemoteStreamUpdate(context, remotePeerId, compositeStream);
 }
 
@@ -224,20 +243,12 @@ function publishRemoteStreamUpdate(
   });
 }
 
-function isVoiceAudioTrack(
-  context: PeerConnectionManagerContext,
-  event: RTCTrackEvent,
-  remotePeerId: string
-): boolean {
-  return event.track.kind === TRACK_KIND_AUDIO && !isScreenShareAudioTrack(context, event, remotePeerId);
+function isVoiceAudioTrack(track: MediaStreamTrack, isScreenAudio: boolean): boolean {
+  return track.kind === TRACK_KIND_AUDIO && !isScreenAudio;
 }
 
-function isScreenShareTrack(
-  context: PeerConnectionManagerContext,
-  event: RTCTrackEvent,
-  remotePeerId: string
-): boolean {
-  return event.track.kind === TRACK_KIND_VIDEO || isScreenShareAudioTrack(context, event, remotePeerId);
+function isScreenShareTrack(track: MediaStreamTrack, isScreenAudio: boolean): boolean {
+  return track.kind === TRACK_KIND_VIDEO || isScreenAudio;
 }
 
 function isScreenShareAudioTrack(
@@ -255,12 +266,34 @@ function isScreenShareAudioTrack(
     return false;
   }
 
+  const incomingStreamIds = getIncomingStreamIds(event);
+
+  if (incomingStreamIds.some((streamId) => peerData.remoteScreenShareStreamIds.has(streamId))) {
+    return true;
+  }
+
+  if (incomingStreamIds.some((streamId) => peerData.remoteVoiceStreamIds.has(streamId))) {
+    return false;
+  }
+
+  if (event.streams.some((stream) => stream.getVideoTracks().some((track) => track.readyState === 'live'))) {
+    return true;
+  }
+
+  const screenAudioTransceiver = peerData.connection.getTransceivers().find(
+    (transceiver) => transceiver.sender === peerData.screenAudioSender
+  );
+
+  if (screenAudioTransceiver && matchesTransceiver(event.transceiver, screenAudioTransceiver)) {
+    return true;
+  }
+
   const voiceAudioTransceiver = peerData.connection.getTransceivers().find(
     (transceiver) => transceiver.sender === peerData.audioSender
   );
 
   if (voiceAudioTransceiver) {
-    return event.transceiver !== voiceAudioTransceiver;
+    return !matchesTransceiver(event.transceiver, voiceAudioTransceiver);
   }
 
   const audioTransceivers = peerData.connection.getTransceivers().filter((transceiver) =>
@@ -272,3 +305,52 @@ function isScreenShareAudioTrack(
 
   return transceiverIndex > 0;
 }
+
+function rememberIncomingStreamIds(
+  state: PeerConnectionManagerContext['state'],
+  event: RTCTrackEvent,
+  remotePeerId: string,
+  options: {
+    isScreenAudio: boolean;
+    isVoiceAudio: boolean;
+    isScreenTrack: boolean;
+  }
+): void {
+  const peerData = state.activePeerConnections.get(remotePeerId);
+
+  if (!peerData) {
+    return;
+  }
+
+  const incomingStreamIds = getIncomingStreamIds(event);
+
+  if (incomingStreamIds.length === 0) {
+    return;
+  }
+
+  if (event.track.kind === TRACK_KIND_VIDEO || options.isScreenAudio || options.isScreenTrack) {
+    incomingStreamIds.forEach((streamId) => {
+      peerData.remoteScreenShareStreamIds.add(streamId);
+      peerData.remoteVoiceStreamIds.delete(streamId);
+    });
+
+    return;
+  }
+
+  if (options.isVoiceAudio) {
+    incomingStreamIds.forEach((streamId) => {
+      peerData.remoteVoiceStreamIds.add(streamId);
+      peerData.remoteScreenShareStreamIds.delete(streamId);
+    });
+  }
+}
+
+function getIncomingStreamIds(event: RTCTrackEvent): string[] {
+  return event.streams
+    .map((stream) => stream.id)
+    .filter((streamId): streamId is string => !!streamId);
+}
+
+function matchesTransceiver(left: RTCRtpTransceiver, right: RTCRtpTransceiver): boolean {
+  return left === right || (!!left.mid && !!right.mid && left.mid === right.mid);
+}

src/app/core/services/webrtc/screen-share-platforms/browser-screen-share.capture.ts

@@ -0,0 +1,56 @@
+import { ScreenShareQualityPreset, ScreenShareStartOptions } from '../screen-share.config';
+import { WebRTCLogger } from '../webrtc-logger';
+
+export class BrowserScreenShareCapture {
+  constructor(private readonly logger: WebRTCLogger) {}
+
+  async startCapture(
+    options: ScreenShareStartOptions,
+    preset: ScreenShareQualityPreset
+  ): Promise<MediaStream> {
+    const displayConstraints = this.buildDisplayMediaConstraints(options, preset);
+
+    this.logger.info('getDisplayMedia constraints', displayConstraints);
+
+    if (!navigator.mediaDevices?.getDisplayMedia) {
+      throw new Error('navigator.mediaDevices.getDisplayMedia is not available.');
+    }
+
+    return await navigator.mediaDevices.getDisplayMedia(displayConstraints);
+  }
+
+  private buildDisplayMediaConstraints(
+    options: ScreenShareStartOptions,
+    preset: ScreenShareQualityPreset
+  ): DisplayMediaStreamOptions {
+    const supportedConstraints = navigator.mediaDevices?.getSupportedConstraints?.() as Record<string, boolean> | undefined;
+    const audioConstraints: Record<string, unknown> | false = options.includeSystemAudio
+      ? {
+        echoCancellation: false,
+        noiseSuppression: false,
+        autoGainControl: false
+      }
+      : false;
+
+    if (audioConstraints && supportedConstraints?.['restrictOwnAudio']) {
+      audioConstraints['restrictOwnAudio'] = true;
+    }
+
+    if (audioConstraints && supportedConstraints?.['suppressLocalAudioPlayback']) {
+      audioConstraints['suppressLocalAudioPlayback'] = true;
+    }
+
+    return {
+      video: {
+        width: { ideal: preset.width, max: preset.width },
+        height: { ideal: preset.height, max: preset.height },
+        frameRate: { ideal: preset.frameRate, max: preset.frameRate }
+      },
+      audio: audioConstraints,
+      monitorTypeSurfaces: 'include',
+      selfBrowserSurface: 'exclude',
+      surfaceSwitching: 'include',
+      systemAudio: options.includeSystemAudio ? 'include' : 'exclude'
+    } as DisplayMediaStreamOptions;
+  }
+}

src/app/core/services/webrtc/screen-share-platforms/desktop-electron-screen-share.capture.ts

@@ -0,0 +1,163 @@
+import { ScreenShareQualityPreset, ScreenShareStartOptions } from '../screen-share.config';
+import { ELECTRON_ENTIRE_SCREEN_SOURCE_NAME } from '../webrtc.constants';
+import { WebRTCLogger } from '../webrtc-logger';
+import {
+  DesktopSource,
+  ElectronDesktopCaptureResult,
+  ElectronDesktopMediaStreamConstraints,
+  ElectronDesktopSourceSelection,
+  ScreenShareElectronApi
+} from './shared';
+
+interface DesktopElectronScreenShareCaptureDependencies {
+  getElectronApi(): ScreenShareElectronApi | null;
+  getSelectDesktopSource(): ((
+    sources: readonly DesktopSource[],
+    options: { includeSystemAudio: boolean }
+  ) => Promise<ElectronDesktopSourceSelection>) | undefined;
+}
+
+export class DesktopElectronScreenShareCapture {
+  constructor(
+    private readonly logger: WebRTCLogger,
+    private readonly dependencies: DesktopElectronScreenShareCaptureDependencies
+  ) {}
+
+  isAvailable(): boolean {
+    return !!this.dependencies.getElectronApi()?.getSources && !this.isLinuxElectron();
+  }
+
+  shouldSuppressRemotePlaybackDuringShare(includeSystemAudio: boolean): boolean {
+    return includeSystemAudio && this.isWindowsElectron();
+  }
+
+  async startCapture(
+    options: ScreenShareStartOptions,
+    preset: ScreenShareQualityPreset
+  ): Promise<ElectronDesktopCaptureResult> {
+    const electronApi = this.dependencies.getElectronApi();
+
+    if (!electronApi?.getSources) {
+      throw new Error('Electron desktop capture is unavailable.');
+    }
+
+    const sources = await electronApi.getSources();
+    const selection = await this.resolveSourceSelection(sources, options.includeSystemAudio);
+    const captureOptions = {
+      ...options,
+      includeSystemAudio: selection.includeSystemAudio
+    };
+
+    if (!selection.source) {
+      throw new Error('No desktop capture sources were available.');
+    }
+
+    this.logger.info('Selected Electron desktop source', {
+      includeSystemAudio: selection.includeSystemAudio,
+      sourceId: selection.source.id,
+      sourceName: selection.source.name
+    });
+
+    const constraints = this.buildConstraints(selection.source.id, captureOptions, preset);
+
+    this.logger.info('desktopCapturer constraints', constraints);
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      throw new Error('navigator.mediaDevices.getUserMedia is not available (requires HTTPS or localhost).');
+    }
+
+    return {
+      includeSystemAudio: selection.includeSystemAudio,
+      stream: await navigator.mediaDevices.getUserMedia(constraints)
+    };
+  }
+
+  private async resolveSourceSelection(
+    sources: DesktopSource[],
+    includeSystemAudio: boolean
+  ): Promise<ElectronDesktopSourceSelection> {
+    const orderedSources = this.sortSources(sources);
+    const defaultSource = orderedSources.find((source) => source.name === ELECTRON_ENTIRE_SCREEN_SOURCE_NAME)
+      ?? orderedSources[0];
+
+    if (orderedSources.length === 0) {
+      throw new Error('No desktop capture sources were available.');
+    }
+
+    const selectDesktopSource = this.dependencies.getSelectDesktopSource();
+
+    if (!this.isWindowsElectron() || orderedSources.length < 2 || !selectDesktopSource) {
+      return {
+        includeSystemAudio,
+        source: defaultSource
+      };
+    }
+
+    return await selectDesktopSource(orderedSources, { includeSystemAudio });
+  }
+
+  private sortSources(sources: DesktopSource[]): DesktopSource[] {
+    return [...sources].sort((left, right) => {
+      const weightDiff = this.getSourceWeight(left) - this.getSourceWeight(right);
+
+      if (weightDiff !== 0) {
+        return weightDiff;
+      }
+
+      return left.name.localeCompare(right.name);
+    });
+  }
+
+  private getSourceWeight(source: DesktopSource): number {
+    return source.name === ELECTRON_ENTIRE_SCREEN_SOURCE_NAME || source.id.startsWith('screen')
+      ? 0
+      : 1;
+  }
+
+  private buildConstraints(
+    sourceId: string,
+    options: ScreenShareStartOptions,
+    preset: ScreenShareQualityPreset
+  ): ElectronDesktopMediaStreamConstraints {
+    const constraints: ElectronDesktopMediaStreamConstraints = {
+      video: {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: sourceId,
+          maxWidth: preset.width,
+          maxHeight: preset.height,
+          maxFrameRate: preset.frameRate
+        }
+      }
+    };
+
+    if (options.includeSystemAudio) {
+      constraints.audio = {
+        mandatory: {
+          chromeMediaSource: 'desktop',
+          chromeMediaSourceId: sourceId
+        }
+      };
+    } else {
+      constraints.audio = false;
+    }
+
+    return constraints;
+  }
+
+  private isLinuxElectron(): boolean {
+    if (!this.dependencies.getElectronApi() || typeof navigator === 'undefined') {
+      return false;
+    }
+
+    return /linux/i.test(`${navigator.userAgent} ${navigator.platform}`);
+  }
+
+  private isWindowsElectron(): boolean {
+    if (!this.isAvailable() || typeof navigator === 'undefined') {
+      return false;
+    }
+
+    return /win/i.test(`${navigator.userAgent} ${navigator.platform}`);
+  }
+}

src/app/core/services/webrtc/screen-share-platforms/linux-electron-screen-share.capture.ts

@@ -0,0 +1,439 @@
+import { ScreenShareQualityPreset, ScreenShareStartOptions } from '../screen-share.config';
+import { WebRTCLogger } from '../webrtc-logger';
+import {
+  LinuxScreenShareAudioRoutingInfo,
+  LinuxScreenShareMonitorAudioChunkPayload,
+  LinuxScreenShareMonitorAudioEndedPayload,
+  LinuxScreenShareMonitorCaptureInfo,
+  ScreenShareElectronApi
+} from './shared';
+
+interface LinuxScreenShareMonitorAudioPipeline {
+  audioContext: AudioContext;
+  audioTrack: MediaStreamTrack;
+  bitsPerSample: number;
+  captureId: string;
+  channelCount: number;
+  mediaDestination: MediaStreamAudioDestinationNode;
+  nextStartTime: number;
+  pendingBytes: Uint8Array;
+  sampleRate: number;
+  unsubscribeChunk: () => void;
+  unsubscribeEnded: () => void;
+}
+
+interface LinuxElectronScreenShareCaptureDependencies {
+  getElectronApi(): ScreenShareElectronApi | null;
+  onCaptureEnded(): void;
+  startDisplayMedia(options: ScreenShareStartOptions, preset: ScreenShareQualityPreset): Promise<MediaStream>;
+}
+
+export class LinuxElectronScreenShareCapture {
+  private audioRoutingActive = false;
+  private audioRoutingResetPromise: Promise<void> | null = null;
+  private monitorAudioPipeline: LinuxScreenShareMonitorAudioPipeline | null = null;
+
+  constructor(
+    private readonly logger: WebRTCLogger,
+    private readonly dependencies: LinuxElectronScreenShareCaptureDependencies
+  ) {}
+
+  isSupported(): boolean {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+      return false;
+    }
+
+    const electronApi = this.dependencies.getElectronApi();
+    const platformHint = `${navigator.userAgent} ${navigator.platform}`;
+
+    return !!electronApi?.prepareLinuxScreenShareAudioRouting
+      && !!electronApi?.activateLinuxScreenShareAudioRouting
+      && !!electronApi?.deactivateLinuxScreenShareAudioRouting
+      && !!electronApi?.startLinuxScreenShareMonitorCapture
+      && !!electronApi?.stopLinuxScreenShareMonitorCapture
+      && !!electronApi?.onLinuxScreenShareMonitorAudioChunk
+      && !!electronApi?.onLinuxScreenShareMonitorAudioEnded
+      && /linux/i.test(platformHint);
+  }
+
+  async awaitPendingReset(): Promise<void> {
+    if (!this.audioRoutingResetPromise) {
+      return;
+    }
+
+    await this.audioRoutingResetPromise;
+  }
+
+  scheduleReset(): void {
+    if (!this.audioRoutingActive || this.audioRoutingResetPromise) {
+      return;
+    }
+
+    this.audioRoutingResetPromise = this.resetAudioRouting()
+      .catch((error) => {
+        this.logger.warn('Failed to reset Linux Electron audio routing', error);
+      })
+      .finally(() => {
+        this.audioRoutingResetPromise = null;
+      });
+  }
+
+  async startCapture(
+    options: ScreenShareStartOptions,
+    preset: ScreenShareQualityPreset
+  ): Promise<MediaStream> {
+    const electronApi = this.getRequiredElectronApi();
+    const routingInfo = await electronApi.prepareLinuxScreenShareAudioRouting();
+
+    this.assertAudioRoutingReady(routingInfo, 'Linux Electron audio routing is unavailable.');
+
+    let desktopStream: MediaStream | null = null;
+
+    try {
+      const activation = await electronApi.activateLinuxScreenShareAudioRouting();
+
+      this.assertAudioRoutingReady(activation, 'Failed to activate Linux Electron audio routing.');
+
+      if (!activation.active) {
+        throw new Error(activation.reason || 'Failed to activate Linux Electron audio routing.');
+      }
+
+      desktopStream = await this.dependencies.startDisplayMedia({
+        ...options,
+        includeSystemAudio: false
+      }, preset);
+
+      const { audioTrack, captureInfo } = await this.startMonitorTrack();
+      const stream = new MediaStream([...desktopStream.getVideoTracks(), audioTrack]);
+
+      desktopStream.getAudioTracks().forEach((track) => track.stop());
+
+      this.audioRoutingActive = true;
+      this.logger.info('Linux Electron screen-share audio routing enabled', {
+        screenShareMonitorSourceName: captureInfo.sourceName,
+        voiceSinkName: activation.voiceSinkName
+      });
+
+      return stream;
+    } catch (error) {
+      desktopStream?.getTracks().forEach((track) => track.stop());
+      await this.resetAudioRouting();
+      throw error;
+    }
+  }
+
+  private getRequiredElectronApi(): Required<Pick<
+    ScreenShareElectronApi,
+    | 'prepareLinuxScreenShareAudioRouting'
+    | 'activateLinuxScreenShareAudioRouting'
+    | 'deactivateLinuxScreenShareAudioRouting'
+    | 'startLinuxScreenShareMonitorCapture'
+    | 'stopLinuxScreenShareMonitorCapture'
+    | 'onLinuxScreenShareMonitorAudioChunk'
+    | 'onLinuxScreenShareMonitorAudioEnded'
+  >> {
+    const electronApi = this.dependencies.getElectronApi();
+
+    if (!electronApi?.prepareLinuxScreenShareAudioRouting
+      || !electronApi.activateLinuxScreenShareAudioRouting
+      || !electronApi.deactivateLinuxScreenShareAudioRouting
+      || !electronApi.startLinuxScreenShareMonitorCapture
+      || !electronApi.stopLinuxScreenShareMonitorCapture
+      || !electronApi.onLinuxScreenShareMonitorAudioChunk
+      || !electronApi.onLinuxScreenShareMonitorAudioEnded) {
+      throw new Error('Linux Electron audio routing is unavailable.');
+    }
+
+    return {
+      prepareLinuxScreenShareAudioRouting: electronApi.prepareLinuxScreenShareAudioRouting,
+      activateLinuxScreenShareAudioRouting: electronApi.activateLinuxScreenShareAudioRouting,
+      deactivateLinuxScreenShareAudioRouting: electronApi.deactivateLinuxScreenShareAudioRouting,
+      startLinuxScreenShareMonitorCapture: electronApi.startLinuxScreenShareMonitorCapture,
+      stopLinuxScreenShareMonitorCapture: electronApi.stopLinuxScreenShareMonitorCapture,
+      onLinuxScreenShareMonitorAudioChunk: electronApi.onLinuxScreenShareMonitorAudioChunk,
+      onLinuxScreenShareMonitorAudioEnded: electronApi.onLinuxScreenShareMonitorAudioEnded
+    };
+  }
+
+  private assertAudioRoutingReady(
+    routingInfo: LinuxScreenShareAudioRoutingInfo,
+    unavailableReason: string
+  ): void {
+    if (!routingInfo.available) {
+      throw new Error(routingInfo.reason || unavailableReason);
+    }
+
+    if (!routingInfo.monitorCaptureSupported) {
+      throw new Error('Linux screen-share monitor capture requires restarting the desktop app so the new Electron main process can load.');
+    }
+  }
+
+  private async resetAudioRouting(): Promise<void> {
+    const electronApi = this.dependencies.getElectronApi();
+    const captureId = this.monitorAudioPipeline?.captureId;
+
+    this.audioRoutingActive = false;
+
+    this.disposeMonitorAudioPipeline();
+
+    try {
+      if (captureId && electronApi?.stopLinuxScreenShareMonitorCapture) {
+        await electronApi.stopLinuxScreenShareMonitorCapture(captureId);
+      }
+    } catch (error) {
+      this.logger.warn('Failed to stop Linux screen-share monitor capture', error);
+    }
+
+    try {
+      if (electronApi?.deactivateLinuxScreenShareAudioRouting) {
+        await electronApi.deactivateLinuxScreenShareAudioRouting();
+      }
+    } catch (error) {
+      this.logger.warn('Failed to deactivate Linux Electron audio routing', error);
+    }
+  }
+
+  private async startMonitorTrack(): Promise<{
+    audioTrack: MediaStreamTrack;
+    captureInfo: LinuxScreenShareMonitorCaptureInfo;
+  }> {
+    const electronApi = this.dependencies.getElectronApi();
+
+    if (!electronApi?.startLinuxScreenShareMonitorCapture
+      || !electronApi?.stopLinuxScreenShareMonitorCapture
+      || !electronApi?.onLinuxScreenShareMonitorAudioChunk
+      || !electronApi?.onLinuxScreenShareMonitorAudioEnded) {
+      throw new Error('Linux screen-share monitor capture is unavailable.');
+    }
+
+    const queuedChunksByCaptureId = new Map<string, Uint8Array[]>();
+    const queuedEndedReasons = new Map<string, string | undefined>();
+
+    let pipeline: LinuxScreenShareMonitorAudioPipeline | null = null;
+    let captureInfo: LinuxScreenShareMonitorCaptureInfo | null = null;
+
+    const queueChunk = (captureId: string, chunk: Uint8Array): void => {
+      const queuedChunks = queuedChunksByCaptureId.get(captureId) || [];
+
+      queuedChunks.push(this.copyBytes(chunk));
+      queuedChunksByCaptureId.set(captureId, queuedChunks);
+    };
+    const onChunk = (payload: LinuxScreenShareMonitorAudioChunkPayload): void => {
+      if (!pipeline || payload.captureId !== pipeline.captureId) {
+        queueChunk(payload.captureId, payload.chunk);
+        return;
+      }
+
+      this.handleMonitorAudioChunk(pipeline, payload.chunk);
+    };
+    const onEnded = (payload: LinuxScreenShareMonitorAudioEndedPayload): void => {
+      if (!pipeline || payload.captureId !== pipeline.captureId) {
+        queuedEndedReasons.set(payload.captureId, payload.reason);
+        return;
+      }
+
+      this.logger.warn('Linux screen-share monitor capture ended', payload);
+      this.dependencies.onCaptureEnded();
+    };
+    const unsubscribeChunk = electronApi.onLinuxScreenShareMonitorAudioChunk(onChunk) as () => void;
+    const unsubscribeEnded = electronApi.onLinuxScreenShareMonitorAudioEnded(onEnded) as () => void;
+
+    try {
+      captureInfo = await electronApi.startLinuxScreenShareMonitorCapture() as LinuxScreenShareMonitorCaptureInfo;
+
+      const audioContext = new AudioContext({ sampleRate: captureInfo.sampleRate });
+      const mediaDestination = audioContext.createMediaStreamDestination();
+
+      await audioContext.resume();
+
+      const audioTrack = mediaDestination.stream.getAudioTracks()[0];
+
+      if (!audioTrack) {
+        throw new Error('Renderer audio pipeline did not produce a screen-share monitor track.');
+      }
+
+      pipeline = {
+        audioContext,
+        audioTrack,
+        bitsPerSample: captureInfo.bitsPerSample,
+        captureId: captureInfo.captureId,
+        channelCount: captureInfo.channelCount,
+        mediaDestination,
+        nextStartTime: audioContext.currentTime + 0.05,
+        pendingBytes: new Uint8Array(0),
+        sampleRate: captureInfo.sampleRate,
+        unsubscribeChunk,
+        unsubscribeEnded
+      };
+
+      this.monitorAudioPipeline = pipeline;
+      const activeCaptureId = captureInfo.captureId;
+
+      audioTrack.addEventListener('ended', () => {
+        if (this.monitorAudioPipeline?.captureId === activeCaptureId) {
+          this.dependencies.onCaptureEnded();
+        }
+      }, { once: true });
+
+      const queuedChunks = queuedChunksByCaptureId.get(captureInfo.captureId) || [];
+      const activePipeline = pipeline;
+
+      queuedChunks.forEach((chunk) => {
+        this.handleMonitorAudioChunk(activePipeline, chunk);
+      });
+
+      queuedChunksByCaptureId.delete(captureInfo.captureId);
+
+      if (queuedEndedReasons.has(captureInfo.captureId)) {
+        throw new Error(queuedEndedReasons.get(captureInfo.captureId)
+          || 'Linux screen-share monitor capture ended before audio initialisation completed.');
+      }
+
+      return {
+        audioTrack,
+        captureInfo
+      };
+    } catch (error) {
+      if (pipeline) {
+        this.disposeMonitorAudioPipeline(pipeline.captureId);
+      } else {
+        unsubscribeChunk();
+        unsubscribeEnded();
+      }
+
+      try {
+        await electronApi.stopLinuxScreenShareMonitorCapture(captureInfo?.captureId);
+      } catch (stopError) {
+        this.logger.warn('Failed to stop Linux screen-share monitor capture after startup failure', stopError);
+      }
+
+      throw error;
+    }
+  }
+
+  private disposeMonitorAudioPipeline(captureId?: string): void {
+    if (!this.monitorAudioPipeline) {
+      return;
+    }
+
+    if (captureId && captureId !== this.monitorAudioPipeline.captureId) {
+      return;
+    }
+
+    const pipeline = this.monitorAudioPipeline;
+
+    this.monitorAudioPipeline = null;
+    pipeline.unsubscribeChunk();
+    pipeline.unsubscribeEnded();
+    pipeline.audioTrack.stop();
+    pipeline.pendingBytes = new Uint8Array(0);
+
+    void pipeline.audioContext.close().catch((error) => {
+      this.logger.warn('Failed to close Linux screen-share monitor audio context', error);
+    });
+  }
+
+  private handleMonitorAudioChunk(
+    pipeline: LinuxScreenShareMonitorAudioPipeline,
+    chunk: Uint8Array
+  ): void {
+    if (pipeline.bitsPerSample !== 16) {
+      this.logger.warn('Unsupported Linux screen-share monitor capture sample size', {
+        bitsPerSample: pipeline.bitsPerSample,
+        captureId: pipeline.captureId
+      });
+
+      return;
+    }
+
+    const bytesPerSample = pipeline.bitsPerSample / 8;
+    const bytesPerFrame = bytesPerSample * pipeline.channelCount;
+
+    if (!Number.isFinite(bytesPerFrame) || bytesPerFrame <= 0) {
+      return;
+    }
+
+    const combinedBytes = this.concatBytes(pipeline.pendingBytes, chunk);
+    const completeByteLength = combinedBytes.byteLength - (combinedBytes.byteLength % bytesPerFrame);
+
+    if (completeByteLength <= 0) {
+      pipeline.pendingBytes = combinedBytes;
+      return;
+    }
+
+    const completeBytes = combinedBytes.subarray(0, completeByteLength);
+
+    pipeline.pendingBytes = this.copyBytes(combinedBytes.subarray(completeByteLength));
+
+    if (pipeline.audioContext.state !== 'running') {
+      void pipeline.audioContext.resume().catch((error) => {
+        this.logger.warn('Failed to resume Linux screen-share monitor audio context', error);
+      });
+    }
+
+    const frameCount = completeByteLength / bytesPerFrame;
+    const audioBuffer = this.createAudioBuffer(pipeline, completeBytes, frameCount);
+    const source = pipeline.audioContext.createBufferSource();
+
+    source.buffer = audioBuffer;
+    source.connect(pipeline.mediaDestination);
+
+    source.onended = () => {
+      source.disconnect();
+    };
+
+    const now = pipeline.audioContext.currentTime;
+    const startTime = Math.max(pipeline.nextStartTime, now + 0.02);
+
+    source.start(startTime);
+    pipeline.nextStartTime = startTime + audioBuffer.duration;
+  }
+
+  private createAudioBuffer(
+    pipeline: LinuxScreenShareMonitorAudioPipeline,
+    bytes: Uint8Array,
+    frameCount: number
+  ): AudioBuffer {
+    const audioBuffer = pipeline.audioContext.createBuffer(pipeline.channelCount, frameCount, pipeline.sampleRate);
+    const sampleData = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    const channelData = Array.from(
+      { length: pipeline.channelCount },
+      (_, channelIndex) => audioBuffer.getChannelData(channelIndex)
+    );
+    const bytesPerSample = pipeline.bitsPerSample / 8;
+    const bytesPerFrame = bytesPerSample * pipeline.channelCount;
+
+    for (let frameIndex = 0; frameIndex < frameCount; frameIndex += 1) {
+      const frameOffset = frameIndex * bytesPerFrame;
+
+      for (let channelIndex = 0; channelIndex < pipeline.channelCount; channelIndex += 1) {
+        const sampleOffset = frameOffset + (channelIndex * bytesPerSample);
+
+        channelData[channelIndex][frameIndex] = sampleData.getInt16(sampleOffset, true) / 32768;
+      }
+    }
+
+    return audioBuffer;
+  }
+
+  private concatBytes(first: Uint8Array, second: Uint8Array): Uint8Array {
+    if (first.byteLength === 0) {
+      return this.copyBytes(second);
+    }
+
+    if (second.byteLength === 0) {
+      return this.copyBytes(first);
+    }
+
+    const combined = new Uint8Array(first.byteLength + second.byteLength);
+
+    combined.set(first, 0);
+    combined.set(second, first.byteLength);
+
+    return combined;
+  }
+
+  private copyBytes(bytes: Uint8Array): Uint8Array {
+    return bytes.byteLength > 0 ? new Uint8Array(bytes) : new Uint8Array(0);
+  }
+}

src/app/core/services/webrtc/screen-share-platforms/shared.ts

@@ -0,0 +1,80 @@
+export interface DesktopSource {
+  id: string;
+  name: string;
+  thumbnail: string;
+}
+
+export interface ElectronDesktopSourceSelection {
+  includeSystemAudio: boolean;
+  source: DesktopSource;
+}
+
+export interface ElectronDesktopCaptureResult {
+  includeSystemAudio: boolean;
+  stream: MediaStream;
+}
+
+export interface LinuxScreenShareAudioRoutingInfo {
+  available: boolean;
+  active: boolean;
+  monitorCaptureSupported: boolean;
+  screenShareSinkName: string;
+  screenShareMonitorSourceName: string;
+  voiceSinkName: string;
+  reason?: string;
+}
+
+export interface LinuxScreenShareMonitorCaptureInfo {
+  bitsPerSample: number;
+  captureId: string;
+  channelCount: number;
+  sampleRate: number;
+  sourceName: string;
+}
+
+export interface LinuxScreenShareMonitorAudioChunkPayload {
+  captureId: string;
+  chunk: Uint8Array;
+}
+
+export interface LinuxScreenShareMonitorAudioEndedPayload {
+  captureId: string;
+  reason?: string;
+}
+
+export interface ScreenShareElectronApi {
+  getSources?: () => Promise<DesktopSource[]>;
+  prepareLinuxScreenShareAudioRouting?: () => Promise<LinuxScreenShareAudioRoutingInfo>;
+  activateLinuxScreenShareAudioRouting?: () => Promise<LinuxScreenShareAudioRoutingInfo>;
+  deactivateLinuxScreenShareAudioRouting?: () => Promise<boolean>;
+  startLinuxScreenShareMonitorCapture?: () => Promise<LinuxScreenShareMonitorCaptureInfo>;
+  stopLinuxScreenShareMonitorCapture?: (captureId?: string) => Promise<boolean>;
+  onLinuxScreenShareMonitorAudioChunk?: (listener: (payload: LinuxScreenShareMonitorAudioChunkPayload) => void) => () => void;
+  onLinuxScreenShareMonitorAudioEnded?: (listener: (payload: LinuxScreenShareMonitorAudioEndedPayload) => void) => () => void;
+}
+
+export type ElectronDesktopVideoConstraint = MediaTrackConstraints & {
+  mandatory: {
+    chromeMediaSource: 'desktop';
+    chromeMediaSourceId: string;
+    maxWidth: number;
+    maxHeight: number;
+    maxFrameRate: number;
+  };
+};
+
+export type ElectronDesktopAudioConstraint = MediaTrackConstraints & {
+  mandatory: {
+    chromeMediaSource: 'desktop';
+    chromeMediaSourceId: string;
+  };
+};
+
+export interface ElectronDesktopMediaStreamConstraints extends MediaStreamConstraints {
+  video: ElectronDesktopVideoConstraint;
+  audio?: false | ElectronDesktopAudioConstraint;
+}
+
+export type ScreenShareWindow = Window & {
+  electronAPI?: ScreenShareElectronApi;
+};

src/app/core/services/webrtc/screen-share.manager.ts

@@ -9,8 +9,7 @@ import {
   TRACK_KIND_AUDIO,
   TRACK_KIND_VIDEO,
   TRANSCEIVER_SEND_RECV,
-  TRANSCEIVER_RECV_ONLY,
-  ELECTRON_ENTIRE_SCREEN_SOURCE_NAME
+  TRANSCEIVER_RECV_ONLY
 } from './webrtc.constants';
 import {
   DEFAULT_SCREEN_SHARE_START_OPTIONS,
@@ -18,6 +17,10 @@ import {
   ScreenShareQualityPreset,
   ScreenShareStartOptions
 } from './screen-share.config';
+import { BrowserScreenShareCapture } from './screen-share-platforms/browser-screen-share.capture';
+import { DesktopElectronScreenShareCapture } from './screen-share-platforms/desktop-electron-screen-share.capture';
+import { LinuxElectronScreenShareCapture } from './screen-share-platforms/linux-electron-screen-share.capture';
+import { ScreenShareElectronApi, ScreenShareWindow } from './screen-share-platforms/shared';
 
 /**
  * Callbacks the ScreenShareManager needs from the owning service.
@@ -45,103 +48,9 @@ export interface LocalScreenShareState {
   includeSystemAudio: boolean;
   stream: MediaStream | null;
   suppressRemotePlayback: boolean;
+  forceDefaultRemotePlaybackOutput: boolean;
 }
 
-interface LinuxScreenShareAudioRoutingInfo {
-  available: boolean;
-  active: boolean;
-  monitorCaptureSupported: boolean;
-  screenShareSinkName: string;
-  screenShareMonitorSourceName: string;
-  voiceSinkName: string;
-  reason?: string;
-}
-
-interface LinuxScreenShareMonitorCaptureInfo {
-  bitsPerSample: number;
-  captureId: string;
-  channelCount: number;
-  sampleRate: number;
-  sourceName: string;
-}
-
-interface LinuxScreenShareMonitorAudioChunkPayload {
-  captureId: string;
-  chunk: Uint8Array;
-}
-
-interface LinuxScreenShareMonitorAudioEndedPayload {
-  captureId: string;
-  reason?: string;
-}
-
-interface LinuxScreenShareMonitorAudioPipeline {
-  audioContext: AudioContext;
-  audioTrack: MediaStreamTrack;
-  bitsPerSample: number;
-  captureId: string;
-  channelCount: number;
-  mediaDestination: MediaStreamAudioDestinationNode;
-  nextStartTime: number;
-  pendingBytes: Uint8Array;
-  sampleRate: number;
-  unsubscribeChunk: () => void;
-  unsubscribeEnded: () => void;
-}
-
-export interface DesktopSource {
-  id: string;
-  name: string;
-  thumbnail: string;
-}
-
-interface ElectronDesktopSourceSelection {
-  includeSystemAudio: boolean;
-  source: DesktopSource;
-}
-
-interface ElectronDesktopCaptureResult {
-  includeSystemAudio: boolean;
-  stream: MediaStream;
-}
-
-interface ScreenShareElectronApi {
-  getSources?: () => Promise<DesktopSource[]>;
-  prepareLinuxScreenShareAudioRouting?: () => Promise<LinuxScreenShareAudioRoutingInfo>;
-  activateLinuxScreenShareAudioRouting?: () => Promise<LinuxScreenShareAudioRoutingInfo>;
-  deactivateLinuxScreenShareAudioRouting?: () => Promise<boolean>;
-  startLinuxScreenShareMonitorCapture?: () => Promise<LinuxScreenShareMonitorCaptureInfo>;
-  stopLinuxScreenShareMonitorCapture?: (captureId?: string) => Promise<boolean>;
-  onLinuxScreenShareMonitorAudioChunk?: (listener: (payload: LinuxScreenShareMonitorAudioChunkPayload) => void) => () => void;
-  onLinuxScreenShareMonitorAudioEnded?: (listener: (payload: LinuxScreenShareMonitorAudioEndedPayload) => void) => () => void;
-}
-
-type ElectronDesktopVideoConstraint = MediaTrackConstraints & {
-  mandatory: {
-    chromeMediaSource: 'desktop';
-    chromeMediaSourceId: string;
-    maxWidth: number;
-    maxHeight: number;
-    maxFrameRate: number;
-  };
-};
-
-type ElectronDesktopAudioConstraint = MediaTrackConstraints & {
-  mandatory: {
-    chromeMediaSource: 'desktop';
-    chromeMediaSourceId: string;
-  };
-};
-
-interface ElectronDesktopMediaStreamConstraints extends MediaStreamConstraints {
-  video: ElectronDesktopVideoConstraint;
-  audio?: false | ElectronDesktopAudioConstraint;
-}
-
-type ScreenShareWindow = Window & {
-  electronAPI?: ScreenShareElectronApi;
-};
-
 export class ScreenShareManager {
   /** The active screen-capture stream. */
   private activeScreenStream: MediaStream | null = null;
@@ -155,22 +64,39 @@ export class ScreenShareManager {
   /** Remote peers that explicitly requested screen-share video. */
   private readonly requestedViewerPeerIds = new Set<string>();
 
+  /** Browser `getDisplayMedia` capture path. */
+  private readonly browserScreenShareCapture: BrowserScreenShareCapture;
+
+  /** Desktop Electron capture path for non-Linux desktop builds. */
+  private readonly desktopElectronScreenShareCapture: DesktopElectronScreenShareCapture;
+
+  /** Linux Electron screen/audio capture path with isolated audio routing. */
+  private readonly linuxElectronScreenShareCapture: LinuxElectronScreenShareCapture;
+
   /** Whether screen sharing is currently active. */
   private isScreenActive = false;
 
-  /** Whether Linux-specific Electron audio routing is currently active. */
-  private linuxElectronAudioRoutingActive = false;
-
-  /** Pending teardown of Linux-specific Electron audio routing. */
-  private linuxAudioRoutingResetPromise: Promise<void> | null = null;
-
-  /** Renderer-side audio pipeline for Linux monitor-source capture. */
-  private linuxMonitorAudioPipeline: LinuxScreenShareMonitorAudioPipeline | null = null;
-
   constructor(
     private readonly logger: WebRTCLogger,
     private callbacks: ScreenShareCallbacks
-  ) {}
+  ) {
+    this.browserScreenShareCapture = new BrowserScreenShareCapture(this.logger);
+    this.desktopElectronScreenShareCapture = new DesktopElectronScreenShareCapture(this.logger, {
+      getElectronApi: () => this.getElectronApi(),
+      getSelectDesktopSource: () => this.callbacks.selectDesktopSource
+    });
+
+    this.linuxElectronScreenShareCapture = new LinuxElectronScreenShareCapture(this.logger, {
+      getElectronApi: () => this.getElectronApi(),
+      onCaptureEnded: () => {
+        if (this.isScreenActive) {
+          this.stopScreenShare();
+        }
+      },
+      startDisplayMedia: async (options, preset) =>
+        await this.browserScreenShareCapture.startCapture(options, preset)
+    });
+  }
 
   /**
    * Replace the callback set at runtime.
@@ -190,10 +116,12 @@ export class ScreenShareManager {
   /**
    * Begin screen sharing.
    *
-  * On Linux Electron builds, prefers a dedicated PulseAudio/PipeWire routing
-  * path so remote voice playback is kept out of captured system audio.
-  * On other Electron builds, uses desktop capture. In browser contexts, uses
-  * `getDisplayMedia`.
+   * On Linux Electron builds, prefers a dedicated PulseAudio/PipeWire routing
+   * path so remote voice playback is kept out of captured system audio.
+   * On Windows Electron builds, prefers `getDisplayMedia` with system audio
+   * so the separate mic `getUserMedia` stream is not disrupted; falls back to
+   * Electron desktop capture only when `getDisplayMedia` fails entirely.
+   * In browser contexts, uses `getDisplayMedia`.
    *
    * @param options - Screen-share capture options.
    * @returns The captured screen {@link MediaStream}.
@@ -205,7 +133,7 @@ export class ScreenShareManager {
       ...options
     };
     const preset = SCREEN_SHARE_QUALITY_PRESETS[shareOptions.quality];
-    const electronDesktopCaptureAvailable = this.isElectronDesktopCaptureAvailable();
+    const electronDesktopCaptureAvailable = this.desktopElectronScreenShareCapture.isAvailable();
 
     let captureMethod: ScreenShareCaptureMethod | null = null;
 
@@ -216,53 +144,64 @@ export class ScreenShareManager {
         this.stopScreenShare();
       }
 
-      await this.awaitPendingLinuxAudioRoutingReset();
+      await this.linuxElectronScreenShareCapture.awaitPendingReset();
 
       this.activeScreenStream = null;
 
-      if (shareOptions.includeSystemAudio && this.isLinuxElectronAudioRoutingSupported()) {
+      if (shareOptions.includeSystemAudio && this.linuxElectronScreenShareCapture.isSupported()) {
         try {
-          this.activeScreenStream = await this.startWithLinuxElectronAudioRouting(shareOptions, preset);
+          this.activeScreenStream = await this.linuxElectronScreenShareCapture.startCapture(shareOptions, preset);
           captureMethod = 'linux-electron';
         } catch (error) {
+          this.rethrowIfScreenShareAborted(error);
           this.logger.warn('Linux Electron audio routing failed; falling back to standard capture', error);
         }
       }
 
-      if (!this.activeScreenStream && shareOptions.includeSystemAudio && !electronDesktopCaptureAvailable) {
+      if (!this.activeScreenStream && shareOptions.includeSystemAudio) {
         try {
-          this.activeScreenStream = await this.startWithDisplayMedia(shareOptions, preset);
+          this.activeScreenStream = await this.browserScreenShareCapture.startCapture(shareOptions, preset);
           captureMethod = 'display-media';
 
           if (this.activeScreenStream.getAudioTracks().length === 0) {
-            this.logger.warn('getDisplayMedia did not provide system audio; trying Electron desktop capture');
-            this.activeScreenStream.getTracks().forEach((track) => track.stop());
-            this.activeScreenStream = null;
-            captureMethod = null;
+            if (electronDesktopCaptureAvailable) {
+              // On Windows Electron, keep the getDisplayMedia stream for video
+              // rather than falling through to getUserMedia desktop audio which
+              // can replace or kill the active mic stream.
+              this.logger.warn(
+                'getDisplayMedia did not provide system audio; '
+                + 'continuing without system audio to preserve mic stream'
+              );
+
+              shareOptions.includeSystemAudio = false;
+            } else {
+              this.logger.warn('getDisplayMedia did not provide system audio; trying next capture method');
+              this.activeScreenStream.getTracks().forEach((track) => track.stop());
+              this.activeScreenStream = null;
+              captureMethod = null;
+            }
           }
         } catch (error) {
+          this.rethrowIfScreenShareAborted(error);
           this.logger.warn('getDisplayMedia with system audio failed; falling back to Electron desktop capture', error);
         }
       }
 
       if (!this.activeScreenStream && electronDesktopCaptureAvailable) {
         try {
-          const electronCapture = await this.startWithElectronDesktopCapturer(shareOptions, preset);
+          const electronCapture = await this.desktopElectronScreenShareCapture.startCapture(shareOptions, preset);
 
           this.activeScreenStream = electronCapture.stream;
           shareOptions.includeSystemAudio = electronCapture.includeSystemAudio;
           captureMethod = 'electron-desktop';
         } catch (error) {
-          if (this.isScreenShareSelectionAborted(error)) {
-            throw error;
-          }
-
+          this.rethrowIfScreenShareAborted(error);
           this.logger.warn('Electron desktop capture failed; falling back to getDisplayMedia', error);
         }
       }
 
       if (!this.activeScreenStream) {
-        this.activeScreenStream = await this.startWithDisplayMedia(shareOptions, preset);
+        this.activeScreenStream = await this.browserScreenShareCapture.startCapture(shareOptions, preset);
         captureMethod = 'display-media';
       }
 
@@ -309,7 +248,7 @@ export class ScreenShareManager {
       this.activeScreenStream = null;
     }
 
-    this.scheduleLinuxAudioRoutingReset();
+    this.linuxElectronScreenShareCapture.scheduleReset();
 
     this.screenAudioStream = null;
     this.activeScreenPreset = null;
@@ -391,18 +330,6 @@ export class ScreenShareManager {
       : null;
   }
 
-  private isElectronDesktopCaptureAvailable(): boolean {
-    return !!this.getElectronApi()?.getSources;
-  }
-
-  private isWindowsElectron(): boolean {
-    if (!this.isElectronDesktopCaptureAvailable() || typeof navigator === 'undefined') {
-      return false;
-    }
-
-    return /win/i.test(`${navigator.userAgent} ${navigator.platform}`);
-  }
-
   private publishLocalScreenShareState(
     includeSystemAudio: boolean,
     captureMethod: ScreenShareCaptureMethod | null
@@ -413,63 +340,13 @@ export class ScreenShareManager {
       includeSystemAudio: this.isScreenActive ? includeSystemAudio : false,
       stream: this.isScreenActive ? this.activeScreenStream : null,
       suppressRemotePlayback: this.isScreenActive
-        && this.shouldSuppressRemotePlaybackDuringShare(includeSystemAudio, captureMethod)
+        && this.desktopElectronScreenShareCapture.shouldSuppressRemotePlaybackDuringShare(includeSystemAudio),
+      forceDefaultRemotePlaybackOutput: this.isScreenActive
+        && includeSystemAudio
+        && captureMethod === 'linux-electron'
     });
   }
 
-  private shouldSuppressRemotePlaybackDuringShare(
-    includeSystemAudio: boolean,
-    captureMethod: ScreenShareCaptureMethod | null
-  ): boolean {
-    return includeSystemAudio && captureMethod === 'electron-desktop' && this.isWindowsElectron();
-  }
-
-  private getRequiredLinuxElectronApi(): Required<Pick<
-    ScreenShareElectronApi,
-    | 'prepareLinuxScreenShareAudioRouting'
-    | 'activateLinuxScreenShareAudioRouting'
-    | 'deactivateLinuxScreenShareAudioRouting'
-    | 'startLinuxScreenShareMonitorCapture'
-    | 'stopLinuxScreenShareMonitorCapture'
-    | 'onLinuxScreenShareMonitorAudioChunk'
-    | 'onLinuxScreenShareMonitorAudioEnded'
-  >> {
-    const electronApi = this.getElectronApi();
-
-    if (!electronApi?.prepareLinuxScreenShareAudioRouting
-      || !electronApi.activateLinuxScreenShareAudioRouting
-      || !electronApi.deactivateLinuxScreenShareAudioRouting
-      || !electronApi.startLinuxScreenShareMonitorCapture
-      || !electronApi.stopLinuxScreenShareMonitorCapture
-      || !electronApi.onLinuxScreenShareMonitorAudioChunk
-      || !electronApi.onLinuxScreenShareMonitorAudioEnded) {
-      throw new Error('Linux Electron audio routing is unavailable.');
-    }
-
-    return {
-      prepareLinuxScreenShareAudioRouting: electronApi.prepareLinuxScreenShareAudioRouting,
-      activateLinuxScreenShareAudioRouting: electronApi.activateLinuxScreenShareAudioRouting,
-      deactivateLinuxScreenShareAudioRouting: electronApi.deactivateLinuxScreenShareAudioRouting,
-      startLinuxScreenShareMonitorCapture: electronApi.startLinuxScreenShareMonitorCapture,
-      stopLinuxScreenShareMonitorCapture: electronApi.stopLinuxScreenShareMonitorCapture,
-      onLinuxScreenShareMonitorAudioChunk: electronApi.onLinuxScreenShareMonitorAudioChunk,
-      onLinuxScreenShareMonitorAudioEnded: electronApi.onLinuxScreenShareMonitorAudioEnded
-    };
-  }
-
-  private assertLinuxAudioRoutingReady(
-    routingInfo: LinuxScreenShareAudioRoutingInfo,
-    unavailableReason: string
-  ): void {
-    if (!routingInfo.available) {
-      throw new Error(routingInfo.reason || unavailableReason);
-    }
-
-    if (!routingInfo.monitorCaptureSupported) {
-      throw new Error('Linux screen-share monitor capture requires restarting the desktop app so the new Electron main process can load.');
-    }
-  }
-
   /**
    * Create a dedicated stream for system audio captured alongside the screen.
    *
@@ -548,6 +425,11 @@ export class ScreenShareManager {
     }
 
     peerData.screenVideoSender = videoSender;
+
+    if (typeof videoSender.setStreams === 'function') {
+      videoSender.setStreams(this.activeScreenStream);
+    }
+
     videoSender.replaceTrack(screenVideoTrack)
       .then(() => {
         this.logger.info('screen video replaceTrack ok', { peerId });
@@ -578,6 +460,11 @@ export class ScreenShareManager {
       }
 
       peerData.screenAudioSender = screenAudioSender;
+
+      if (typeof screenAudioSender.setStreams === 'function') {
+        screenAudioSender.setStreams(this.activeScreenStream);
+      }
+
       screenAudioSender.replaceTrack(screenAudioTrack)
         .then(() => this.logger.info('screen audio replaceTrack ok', { peerId }))
         .catch((error) => this.logger.error('screen audio replaceTrack failed', error));
@@ -621,534 +508,17 @@ export class ScreenShareManager {
     this.callbacks.renegotiate(peerId);
   }
 
-  private async startWithDisplayMedia(
-    options: ScreenShareStartOptions,
-    preset: ScreenShareQualityPreset
-  ): Promise<MediaStream> {
-    const displayConstraints = this.buildDisplayMediaConstraints(options, preset);
-
-    this.logger.info('getDisplayMedia constraints', displayConstraints);
-
-    if (!navigator.mediaDevices?.getDisplayMedia) {
-      throw new Error('navigator.mediaDevices.getDisplayMedia is not available.');
-    }
-
-    return await navigator.mediaDevices.getDisplayMedia(displayConstraints);
-  }
-
-  private async startWithElectronDesktopCapturer(
-    options: ScreenShareStartOptions,
-    preset: ScreenShareQualityPreset
-  ): Promise<ElectronDesktopCaptureResult> {
-    const electronApi = this.getElectronApi();
-
-    if (!electronApi?.getSources) {
-      throw new Error('Electron desktop capture is unavailable.');
-    }
-
-    const sources = await electronApi.getSources();
-    const selection = await this.resolveElectronDesktopSource(sources, options.includeSystemAudio);
-    const captureOptions = {
-      ...options,
-      includeSystemAudio: selection.includeSystemAudio
-    };
-
-    if (!selection.source) {
-      throw new Error('No desktop capture sources were available.');
-    }
-
-    this.logger.info('Selected Electron desktop source', {
-      includeSystemAudio: selection.includeSystemAudio,
-      sourceId: selection.source.id,
-      sourceName: selection.source.name
-    });
-
-    const electronConstraints = this.buildElectronDesktopConstraints(selection.source.id, captureOptions, preset);
-
-    this.logger.info('desktopCapturer constraints', electronConstraints);
-
-    if (!navigator.mediaDevices?.getUserMedia) {
-      throw new Error('navigator.mediaDevices.getUserMedia is not available (requires HTTPS or localhost).');
-    }
-
-    return {
-      includeSystemAudio: selection.includeSystemAudio,
-      stream: await navigator.mediaDevices.getUserMedia(electronConstraints)
-    };
-  }
-
-  private async resolveElectronDesktopSource(
-    sources: DesktopSource[],
-    includeSystemAudio: boolean
-  ): Promise<ElectronDesktopSourceSelection> {
-    const orderedSources = this.sortElectronDesktopSources(sources);
-    const defaultSource = orderedSources.find((source) => source.name === ELECTRON_ENTIRE_SCREEN_SOURCE_NAME)
-      ?? orderedSources[0];
-
-    if (orderedSources.length === 0) {
-      throw new Error('No desktop capture sources were available.');
-    }
-
-    if (!this.isWindowsElectron() || orderedSources.length < 2) {
-      return {
-        includeSystemAudio,
-        source: defaultSource
-      };
-    }
-
-    if (!this.callbacks.selectDesktopSource) {
-      return {
-        includeSystemAudio,
-        source: defaultSource
-      };
-    }
-
-    return await this.callbacks.selectDesktopSource(orderedSources, { includeSystemAudio });
-  }
-
-  private sortElectronDesktopSources(sources: DesktopSource[]): DesktopSource[] {
-    return [...sources].sort((left, right) => {
-      const weightDiff = this.getElectronDesktopSourceWeight(left) - this.getElectronDesktopSourceWeight(right);
-
-      if (weightDiff !== 0) {
-        return weightDiff;
-      }
-
-      return left.name.localeCompare(right.name);
-    });
-  }
-
-  private getElectronDesktopSourceWeight(source: DesktopSource): number {
-    return source.name === ELECTRON_ENTIRE_SCREEN_SOURCE_NAME || source.id.startsWith('screen')
-      ? 0
-      : 1;
-  }
-
   private isScreenShareSelectionAborted(error: unknown): boolean {
-    return error instanceof Error && error.name === 'AbortError';
+    return error instanceof Error
+      && (error.name === 'AbortError' || error.name === 'NotAllowedError');
   }
 
-  private isLinuxElectronAudioRoutingSupported(): boolean {
-    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-      return false;
-    }
-
-    const electronApi = this.getElectronApi();
-    const platformHint = `${navigator.userAgent} ${navigator.platform}`;
-
-    return !!electronApi?.prepareLinuxScreenShareAudioRouting
-      && !!electronApi?.activateLinuxScreenShareAudioRouting
-      && !!electronApi?.deactivateLinuxScreenShareAudioRouting
-      && !!electronApi?.startLinuxScreenShareMonitorCapture
-      && !!electronApi?.stopLinuxScreenShareMonitorCapture
-      && !!electronApi?.onLinuxScreenShareMonitorAudioChunk
-      && !!electronApi?.onLinuxScreenShareMonitorAudioEnded
-      && /linux/i.test(platformHint);
-  }
-
-  private async startWithLinuxElectronAudioRouting(
-    options: ScreenShareStartOptions,
-    preset: ScreenShareQualityPreset
-  ): Promise<MediaStream> {
-    const electronApi = this.getRequiredLinuxElectronApi();
-    const routingInfo = await electronApi.prepareLinuxScreenShareAudioRouting();
-
-    this.assertLinuxAudioRoutingReady(routingInfo, 'Linux Electron audio routing is unavailable.');
-
-    let desktopStream: MediaStream | null = null;
-
-    try {
-      const activation = await electronApi.activateLinuxScreenShareAudioRouting();
-
-      this.assertLinuxAudioRoutingReady(activation, 'Failed to activate Linux Electron audio routing.');
-
-      if (!activation.active) {
-        throw new Error(activation.reason || 'Failed to activate Linux Electron audio routing.');
-      }
-
-      const desktopCapture = await this.startWithElectronDesktopCapturer({
-        ...options,
-        includeSystemAudio: false
-      }, preset);
-
-      desktopStream = desktopCapture.stream;
-
-      const { audioTrack, captureInfo } = await this.startLinuxScreenShareMonitorTrack();
-      const stream = new MediaStream([...desktopStream.getVideoTracks(), audioTrack]);
-
-      desktopStream.getAudioTracks().forEach((track) => track.stop());
-
-      this.linuxElectronAudioRoutingActive = true;
-      this.logger.info('Linux Electron screen-share audio routing enabled', {
-        screenShareMonitorSourceName: captureInfo.sourceName,
-        voiceSinkName: activation.voiceSinkName
-      });
-
-      return stream;
-    } catch (error) {
-      desktopStream?.getTracks().forEach((track) => track.stop());
-      await this.resetLinuxElectronAudioRouting();
+  private rethrowIfScreenShareAborted(error: unknown): void {
+    if (this.isScreenShareSelectionAborted(error)) {
       throw error;
     }
   }
 
-  private scheduleLinuxAudioRoutingReset(): void {
-    if (!this.linuxElectronAudioRoutingActive || this.linuxAudioRoutingResetPromise) {
-      return;
-    }
-
-    this.linuxAudioRoutingResetPromise = this.resetLinuxElectronAudioRouting()
-      .catch((error) => {
-        this.logger.warn('Failed to reset Linux Electron audio routing', error);
-      })
-      .finally(() => {
-        this.linuxAudioRoutingResetPromise = null;
-      });
-  }
-
-  private async awaitPendingLinuxAudioRoutingReset(): Promise<void> {
-    if (!this.linuxAudioRoutingResetPromise) {
-      return;
-    }
-
-    await this.linuxAudioRoutingResetPromise;
-  }
-
-  private async resetLinuxElectronAudioRouting(): Promise<void> {
-    const electronApi = this.getElectronApi();
-    const captureId = this.linuxMonitorAudioPipeline?.captureId;
-
-    this.linuxElectronAudioRoutingActive = false;
-
-    this.disposeLinuxScreenShareMonitorAudioPipeline();
-
-    try {
-      if (captureId && electronApi?.stopLinuxScreenShareMonitorCapture) {
-        await electronApi.stopLinuxScreenShareMonitorCapture(captureId);
-      }
-    } catch (error) {
-      this.logger.warn('Failed to stop Linux screen-share monitor capture', error);
-    }
-
-    try {
-      if (electronApi?.deactivateLinuxScreenShareAudioRouting) {
-        await electronApi.deactivateLinuxScreenShareAudioRouting();
-      }
-    } catch (error) {
-      this.logger.warn('Failed to deactivate Linux Electron audio routing', error);
-    }
-  }
-
-  private async startLinuxScreenShareMonitorTrack(): Promise<{
-    audioTrack: MediaStreamTrack;
-    captureInfo: LinuxScreenShareMonitorCaptureInfo;
-  }> {
-    const electronApi = this.getElectronApi();
-
-    if (!electronApi?.startLinuxScreenShareMonitorCapture
-      || !electronApi?.stopLinuxScreenShareMonitorCapture
-      || !electronApi?.onLinuxScreenShareMonitorAudioChunk
-      || !electronApi?.onLinuxScreenShareMonitorAudioEnded) {
-      throw new Error('Linux screen-share monitor capture is unavailable.');
-    }
-
-    const queuedChunksByCaptureId = new Map<string, Uint8Array[]>();
-    const queuedEndedReasons = new Map<string, string | undefined>();
-
-    let pipeline: LinuxScreenShareMonitorAudioPipeline | null = null;
-    let captureInfo: LinuxScreenShareMonitorCaptureInfo | null = null;
-
-    const queueChunk = (captureId: string, chunk: Uint8Array): void => {
-      const queuedChunks = queuedChunksByCaptureId.get(captureId) || [];
-
-      queuedChunks.push(this.copyLinuxMonitorAudioBytes(chunk));
-      queuedChunksByCaptureId.set(captureId, queuedChunks);
-    };
-    const onChunk = (payload: LinuxScreenShareMonitorAudioChunkPayload): void => {
-      if (!pipeline || payload.captureId !== pipeline.captureId) {
-        queueChunk(payload.captureId, payload.chunk);
-        return;
-      }
-
-      this.handleLinuxScreenShareMonitorAudioChunk(pipeline, payload.chunk);
-    };
-    const onEnded = (payload: LinuxScreenShareMonitorAudioEndedPayload): void => {
-      if (!pipeline || payload.captureId !== pipeline.captureId) {
-        queuedEndedReasons.set(payload.captureId, payload.reason);
-        return;
-      }
-
-      this.logger.warn('Linux screen-share monitor capture ended', payload);
-
-      if (this.isScreenActive && this.linuxMonitorAudioPipeline?.captureId === payload.captureId) {
-        this.stopScreenShare();
-      }
-    };
-    const unsubscribeChunk = electronApi.onLinuxScreenShareMonitorAudioChunk(onChunk) as () => void;
-    const unsubscribeEnded = electronApi.onLinuxScreenShareMonitorAudioEnded(onEnded) as () => void;
-
-    try {
-      captureInfo = await electronApi.startLinuxScreenShareMonitorCapture() as LinuxScreenShareMonitorCaptureInfo;
-
-      const audioContext = new AudioContext({ sampleRate: captureInfo.sampleRate });
-      const mediaDestination = audioContext.createMediaStreamDestination();
-
-      await audioContext.resume();
-
-      const audioTrack = mediaDestination.stream.getAudioTracks()[0];
-
-      if (!audioTrack) {
-        throw new Error('Renderer audio pipeline did not produce a screen-share monitor track.');
-      }
-
-      pipeline = {
-        audioContext,
-        audioTrack,
-        bitsPerSample: captureInfo.bitsPerSample,
-        captureId: captureInfo.captureId,
-        channelCount: captureInfo.channelCount,
-        mediaDestination,
-        nextStartTime: audioContext.currentTime + 0.05,
-        pendingBytes: new Uint8Array(0),
-        sampleRate: captureInfo.sampleRate,
-        unsubscribeChunk,
-        unsubscribeEnded
-      };
-
-      this.linuxMonitorAudioPipeline = pipeline;
-      const activeCaptureId = captureInfo.captureId;
-
-      audioTrack.addEventListener('ended', () => {
-        if (this.isScreenActive && this.linuxMonitorAudioPipeline?.captureId === activeCaptureId) {
-          this.stopScreenShare();
-        }
-      }, { once: true });
-
-      const queuedChunks = queuedChunksByCaptureId.get(captureInfo.captureId) || [];
-      const activePipeline = pipeline;
-
-      queuedChunks.forEach((chunk) => {
-        this.handleLinuxScreenShareMonitorAudioChunk(activePipeline, chunk);
-      });
-
-      queuedChunksByCaptureId.delete(captureInfo.captureId);
-
-      if (queuedEndedReasons.has(captureInfo.captureId)) {
-        throw new Error(queuedEndedReasons.get(captureInfo.captureId)
-          || 'Linux screen-share monitor capture ended before audio initialisation completed.');
-      }
-
-      return {
-        audioTrack,
-        captureInfo
-      };
-    } catch (error) {
-      if (pipeline) {
-        this.disposeLinuxScreenShareMonitorAudioPipeline(pipeline.captureId);
-      } else {
-        unsubscribeChunk();
-        unsubscribeEnded();
-      }
-
-      try {
-        await electronApi.stopLinuxScreenShareMonitorCapture(captureInfo?.captureId);
-      } catch (stopError) {
-        this.logger.warn('Failed to stop Linux screen-share monitor capture after startup failure', stopError);
-      }
-
-      throw error;
-    }
-  }
-
-  private disposeLinuxScreenShareMonitorAudioPipeline(captureId?: string): void {
-    if (!this.linuxMonitorAudioPipeline) {
-      return;
-    }
-
-    if (captureId && captureId !== this.linuxMonitorAudioPipeline.captureId) {
-      return;
-    }
-
-    const pipeline = this.linuxMonitorAudioPipeline;
-
-    this.linuxMonitorAudioPipeline = null;
-    pipeline.unsubscribeChunk();
-    pipeline.unsubscribeEnded();
-    pipeline.audioTrack.stop();
-    pipeline.pendingBytes = new Uint8Array(0);
-
-    void pipeline.audioContext.close().catch((error) => {
-      this.logger.warn('Failed to close Linux screen-share monitor audio context', error);
-    });
-  }
-
-  private handleLinuxScreenShareMonitorAudioChunk(
-    pipeline: LinuxScreenShareMonitorAudioPipeline,
-    chunk: Uint8Array
-  ): void {
-    if (pipeline.bitsPerSample !== 16) {
-      this.logger.warn('Unsupported Linux screen-share monitor capture sample size', {
-        bitsPerSample: pipeline.bitsPerSample,
-        captureId: pipeline.captureId
-      });
-
-      return;
-    }
-
-    const bytesPerSample = pipeline.bitsPerSample / 8;
-    const bytesPerFrame = bytesPerSample * pipeline.channelCount;
-
-    if (!Number.isFinite(bytesPerFrame) || bytesPerFrame <= 0) {
-      return;
-    }
-
-    const combinedBytes = this.concatLinuxMonitorAudioBytes(pipeline.pendingBytes, chunk);
-    const completeByteLength = combinedBytes.byteLength - (combinedBytes.byteLength % bytesPerFrame);
-
-    if (completeByteLength <= 0) {
-      pipeline.pendingBytes = combinedBytes;
-      return;
-    }
-
-    const completeBytes = combinedBytes.subarray(0, completeByteLength);
-
-    pipeline.pendingBytes = this.copyLinuxMonitorAudioBytes(combinedBytes.subarray(completeByteLength));
-
-    if (pipeline.audioContext.state !== 'running') {
-      void pipeline.audioContext.resume().catch((error) => {
-        this.logger.warn('Failed to resume Linux screen-share monitor audio context', error);
-      });
-    }
-
-    const frameCount = completeByteLength / bytesPerFrame;
-    const audioBuffer = this.createLinuxScreenShareAudioBuffer(pipeline, completeBytes, frameCount);
-    const source = pipeline.audioContext.createBufferSource();
-
-    source.buffer = audioBuffer;
-    source.connect(pipeline.mediaDestination);
-
-    source.onended = () => {
-      source.disconnect();
-    };
-
-    const now = pipeline.audioContext.currentTime;
-    const startTime = Math.max(pipeline.nextStartTime, now + 0.02);
-
-    source.start(startTime);
-    pipeline.nextStartTime = startTime + audioBuffer.duration;
-  }
-
-  private createLinuxScreenShareAudioBuffer(
-    pipeline: LinuxScreenShareMonitorAudioPipeline,
-    bytes: Uint8Array,
-    frameCount: number
-  ): AudioBuffer {
-    const audioBuffer = pipeline.audioContext.createBuffer(pipeline.channelCount, frameCount, pipeline.sampleRate);
-    const sampleData = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-    const channelData = Array.from({ length: pipeline.channelCount }, (_, channelIndex) => audioBuffer.getChannelData(channelIndex));
-    const bytesPerSample = pipeline.bitsPerSample / 8;
-    const bytesPerFrame = bytesPerSample * pipeline.channelCount;
-
-    for (let frameIndex = 0; frameIndex < frameCount; frameIndex += 1) {
-      const frameOffset = frameIndex * bytesPerFrame;
-
-      for (let channelIndex = 0; channelIndex < pipeline.channelCount; channelIndex += 1) {
-        const sampleOffset = frameOffset + (channelIndex * bytesPerSample);
-
-        channelData[channelIndex][frameIndex] = sampleData.getInt16(sampleOffset, true) / 32768;
-      }
-    }
-
-    return audioBuffer;
-  }
-
-  private concatLinuxMonitorAudioBytes(first: Uint8Array, second: Uint8Array): Uint8Array {
-    if (first.byteLength === 0) {
-      return this.copyLinuxMonitorAudioBytes(second);
-    }
-
-    if (second.byteLength === 0) {
-      return this.copyLinuxMonitorAudioBytes(first);
-    }
-
-    const combined = new Uint8Array(first.byteLength + second.byteLength);
-
-    combined.set(first, 0);
-    combined.set(second, first.byteLength);
-
-    return combined;
-  }
-
-  private copyLinuxMonitorAudioBytes(bytes: Uint8Array): Uint8Array {
-    return bytes.byteLength > 0 ? new Uint8Array(bytes) : new Uint8Array(0);
-  }
-
-  private buildDisplayMediaConstraints(
-    options: ScreenShareStartOptions,
-    preset: ScreenShareQualityPreset
-  ): DisplayMediaStreamOptions {
-    const supportedConstraints = navigator.mediaDevices?.getSupportedConstraints?.() as Record<string, boolean> | undefined;
-    const audioConstraints: Record<string, unknown> | false = options.includeSystemAudio
-      ? {
-        echoCancellation: false,
-        noiseSuppression: false,
-        autoGainControl: false
-      }
-      : false;
-
-    if (audioConstraints && supportedConstraints?.['restrictOwnAudio']) {
-      audioConstraints['restrictOwnAudio'] = true;
-    }
-
-    if (audioConstraints && supportedConstraints?.['suppressLocalAudioPlayback']) {
-      audioConstraints['suppressLocalAudioPlayback'] = true;
-    }
-
-    return {
-      video: {
-        width: { ideal: preset.width, max: preset.width },
-        height: { ideal: preset.height, max: preset.height },
-        frameRate: { ideal: preset.frameRate, max: preset.frameRate }
-      },
-      audio: audioConstraints,
-      monitorTypeSurfaces: 'include',
-      selfBrowserSurface: 'exclude',
-      surfaceSwitching: 'include',
-      systemAudio: options.includeSystemAudio ? 'include' : 'exclude'
-    } as DisplayMediaStreamOptions;
-  }
-
-  private buildElectronDesktopConstraints(
-    sourceId: string,
-    options: ScreenShareStartOptions,
-    preset: ScreenShareQualityPreset
-  ): ElectronDesktopMediaStreamConstraints {
-    const electronConstraints: ElectronDesktopMediaStreamConstraints = {
-      video: {
-        mandatory: {
-          chromeMediaSource: 'desktop',
-          chromeMediaSourceId: sourceId,
-          maxWidth: preset.width,
-          maxHeight: preset.height,
-          maxFrameRate: preset.frameRate
-        }
-      }
-    };
-
-    if (options.includeSystemAudio) {
-      electronConstraints.audio = {
-        mandatory: {
-          chromeMediaSource: 'desktop',
-          chromeMediaSourceId: sourceId
-        }
-      };
-    } else {
-      electronConstraints.audio = false;
-    }
-
-    return electronConstraints;
-  }
-
   private configureScreenStream(preset: ScreenShareQualityPreset): void {
     const screenVideoTrack = this.activeScreenStream?.getVideoTracks()[0];
 

src/app/core/services/webrtc/webrtc.types.ts

@@ -20,6 +20,10 @@ export interface PeerData {
   screenVideoSender?: RTCRtpSender;
   /** The RTP sender carrying the screen-share audio track. */
   screenAudioSender?: RTCRtpSender;
+  /** Known remote stream ids that carry the peer's voice audio. */
+  remoteVoiceStreamIds: Set<string>;
+  /** Known remote stream ids that carry the peer's screen-share audio/video. */
+  remoteScreenShareStreamIds: Set<string>;
 }
 
 /** Credentials cached for automatic re-identification after reconnect. */

src/app/features/auth/login/login.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideLogIn } from '@ng-icons/lucide';
@@ -42,6 +42,7 @@ export class LoginComponent {
 
   private auth = inject(AuthService);
   private store = inject(Store);
+  private route = inject(ActivatedRoute);
   private router = inject(Router);
 
   /** TrackBy function for server list rendering. */
@@ -72,6 +73,14 @@ export class LoginComponent {
         try { localStorage.setItem(STORAGE_KEY_CURRENT_USER_ID, resp.id); } catch {}
 
         this.store.dispatch(UsersActions.setCurrentUser({ user }));
+        const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
+
+        if (returnUrl?.startsWith('/')) {
+          this.router.navigateByUrl(returnUrl);
+
+          return;
+        }
+
         this.router.navigate(['/search']);
       },
       error: (err) => {
@@ -82,6 +91,10 @@ export class LoginComponent {
 
   /** Navigate to the registration page. */
   goRegister() {
-    this.router.navigate(['/register']);
+    const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
+
+    this.router.navigate(['/register'], {
+      queryParams: returnUrl ? { returnUrl } : undefined
+    });
   }
 }

src/app/features/auth/register/register.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideUserPlus } from '@ng-icons/lucide';
@@ -43,6 +43,7 @@ export class RegisterComponent {
 
   private auth = inject(AuthService);
   private store = inject(Store);
+  private route = inject(ActivatedRoute);
   private router = inject(Router);
 
   /** TrackBy function for server list rendering. */
@@ -74,6 +75,14 @@ export class RegisterComponent {
         try { localStorage.setItem(STORAGE_KEY_CURRENT_USER_ID, resp.id); } catch {}
 
         this.store.dispatch(UsersActions.setCurrentUser({ user }));
+        const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
+
+        if (returnUrl?.startsWith('/')) {
+          this.router.navigateByUrl(returnUrl);
+
+          return;
+        }
+
         this.router.navigate(['/search']);
       },
       error: (err) => {
@@ -84,6 +93,10 @@ export class RegisterComponent {
 
   /** Navigate to the login page. */
   goLogin() {
-    this.router.navigate(['/login']);
+    const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl')?.trim();
+
+    this.router.navigate(['/login'], {
+      queryParams: returnUrl ? { returnUrl } : undefined
+    });
   }
 }

src/app/features/chat/chat-messages/chat-messages.component.ts

@@ -107,7 +107,7 @@ export class ChatMessagesComponent {
 
   handleTypingStarted(): void {
     try {
-      this.webrtc.sendRawMessage({ type: 'typing' });
+      this.webrtc.sendRawMessage({ type: 'typing', serverId: this.webrtc.currentServerId });
     } catch {
       /* ignore */
     }

src/app/features/chat/typing-indicator/typing-indicator.component.ts

@@ -3,10 +3,13 @@ import {
   Component,
   inject,
   signal,
-  DestroyRef
+  DestroyRef,
+  effect
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Store } from '@ngrx/store';
 import { WebRTCService } from '../../../core/services/webrtc.service';
+import { selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import {
   merge,
   interval,
@@ -23,6 +26,7 @@ interface TypingSignalingMessage {
   type: string;
   displayName: string;
   oderId: string;
+  serverId: string;
 }
 
 @Component({
@@ -36,6 +40,9 @@ interface TypingSignalingMessage {
 })
 export class TypingIndicatorComponent {
   private readonly typingMap = new Map<string, { name: string; expiresAt: number }>();
+  private readonly store = inject(Store);
+  private readonly currentRoom = this.store.selectSignal(selectCurrentRoom);
+  private lastRoomId: string | null = null;
 
   typingDisplay = signal<string[]>([]);
   typingOthersCount = signal<number>(0);
@@ -47,8 +54,10 @@ export class TypingIndicatorComponent {
       filter((msg): msg is TypingSignalingMessage =>
         msg?.type === 'user_typing' &&
         typeof msg.displayName === 'string' &&
-        typeof msg.oderId === 'string'
+        typeof msg.oderId === 'string' &&
+        typeof msg.serverId === 'string'
       ),
+      filter((msg) => msg.serverId === this.currentRoom()?.id),
       tap((msg) => {
         const now = Date.now();
 
@@ -77,6 +86,17 @@ export class TypingIndicatorComponent {
     merge(typing$, purge$)
       .pipe(takeUntilDestroyed(destroyRef))
       .subscribe(() => this.recomputeDisplay());
+
+    effect(() => {
+      const roomId = this.currentRoom()?.id ?? null;
+
+      if (roomId === this.lastRoomId)
+        return;
+
+      this.lastRoomId = roomId;
+      this.typingMap.clear();
+      this.recomputeDisplay();
+    });
   }
 
   private recomputeDisplay(): void {

src/app/features/invite/invite.component.html

@@ -0,0 +1,85 @@
+<div class="min-h-full bg-background px-4 py-8 sm:px-6 lg:px-8">
+  <div class="mx-auto flex min-h-[calc(100vh-8rem)] max-w-4xl items-center justify-center">
+    <div class="w-full overflow-hidden rounded-3xl border border-border bg-card/90 shadow-2xl backdrop-blur">
+      <div class="border-b border-border bg-gradient-to-br from-primary/20 via-transparent to-blue-500/10 px-6 py-8 sm:px-10">
+        <div
+          class="inline-flex items-center rounded-full border border-border bg-secondary/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-muted-foreground"
+        >
+          Invite link
+        </div>
+        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+          @if (invite()) {
+            Join {{ invite()!.server.name }}
+          } @else {
+            Toju server invite
+          }
+        </h1>
+        <p class="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
+          @switch (status()) {
+            @case ('redirecting') {
+              Sign in to continue with this invite.
+            }
+            @case ('joining') {
+              We are connecting you to the invited server.
+            }
+            @case ('error') {
+              This invite could not be completed automatically.
+            }
+            @default {
+              Loading invite details and preparing the correct signal server.
+            }
+          }
+        </p>
+      </div>
+
+      <div class="grid gap-6 px-6 py-8 sm:px-10 lg:grid-cols-[1.2fr,0.8fr]">
+        <section class="space-y-4">
+          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
+            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Status</h2>
+            <p class="mt-3 text-lg font-medium text-foreground">{{ message() }}</p>
+          </div>
+
+          @if (invite()) {
+            <div class="rounded-2xl border border-border bg-secondary/20 p-5">
+              <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Server</h2>
+              <p class="mt-3 text-xl font-semibold text-foreground">{{ invite()!.server.name }}</p>
+              @if (invite()!.server.description) {
+                <p class="mt-2 text-sm leading-6 text-muted-foreground">{{ invite()!.server.description }}</p>
+              }
+              <div class="mt-4 flex flex-wrap gap-2 text-xs">
+                @if (invite()!.server.isPrivate) {
+                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Private</span>
+                }
+                @if (invite()!.server.hasPassword) {
+                  <span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Password bypassed by invite</span>
+                }
+                <span class="rounded-full bg-primary/10 px-2.5 py-1 text-primary"> Expires {{ invite()!.expiresAt | date: 'medium' }} </span>
+              </div>
+            </div>
+          }
+        </section>
+
+        <aside class="space-y-4">
+          <div class="rounded-2xl border border-border bg-secondary/20 p-5">
+            <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">What happens next</h2>
+            <ul class="mt-4 space-y-3 text-sm leading-6 text-muted-foreground">
+              <li>• The linked signal server is added to your configured server list if needed.</li>
+              <li>• Invite links bypass private and password restrictions.</li>
+              <li>• Banned users still cannot join through invites.</li>
+            </ul>
+          </div>
+
+          @if (status() === 'error') {
+            <button
+              type="button"
+              (click)="goToSearch()"
+              class="inline-flex w-full items-center justify-center rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              Back to server search
+            </button>
+          }
+        </aside>
+      </div>
+    </div>
+  </div>
+</div>

src/app/features/invite/invite.component.ts

@@ -0,0 +1,192 @@
+import {
+  Component,
+  OnInit,
+  inject,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { RoomsActions } from '../../store/rooms/rooms.actions';
+import { UsersActions } from '../../store/users/users.actions';
+import { selectCurrentUser } from '../../store/users/users.selectors';
+import { ServerDirectoryService, ServerInviteInfo } from '../../core/services/server-directory.service';
+import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
+import { DatabaseService } from '../../core/services/database.service';
+import { User } from '../../core/models/index';
+
+@Component({
+  selector: 'app-invite',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './invite.component.html'
+})
+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…');
+
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly store = inject(Store);
+  private readonly serverDirectory = inject(ServerDirectoryService);
+  private readonly databaseService = inject(DatabaseService);
+
+  async ngOnInit(): Promise<void> {
+    const inviteContext = this.resolveInviteContext();
+
+    if (!inviteContext) {
+      return;
+    }
+
+    const currentUserId = localStorage.getItem(STORAGE_KEY_CURRENT_USER_ID);
+
+    if (!currentUserId) {
+      await this.redirectToLogin();
+      return;
+    }
+
+    try {
+      await this.joinInvite(inviteContext, currentUserId);
+    } catch (error: unknown) {
+      this.applyInviteError(error);
+    }
+  }
+
+  goToSearch(): void {
+    this.router.navigate(['/search']).catch(() => {});
+  }
+
+  private buildEndpointName(sourceUrl: string): string {
+    try {
+      const url = new URL(sourceUrl);
+
+      return url.hostname;
+    } catch {
+      return 'Signal Server';
+    }
+  }
+
+  private applyInviteError(error: unknown): void {
+    const inviteError = error as {
+      error?: { error?: string; errorCode?: string };
+    };
+    const errorCode = inviteError?.error?.errorCode;
+    const fallbackMessage = inviteError?.error?.error || 'Unable to accept this invite.';
+
+    this.status.set('error');
+
+    if (errorCode === 'BANNED') {
+      this.message.set('You are banned from this server and cannot accept this invite.');
+
+      return;
+    }
+
+    if (errorCode === 'INVITE_EXPIRED') {
+      this.message.set('This invite has expired. Ask for a fresh invite link.');
+
+      return;
+    }
+
+    this.message.set(fallbackMessage);
+  }
+
+  private async hydrateCurrentUser(): Promise<User | null> {
+    const currentUser = this.currentUser();
+
+    if (currentUser) {
+      return currentUser;
+    }
+
+    const storedUser = await this.databaseService.getCurrentUser();
+
+    if (storedUser) {
+      this.store.dispatch(UsersActions.setCurrentUser({ user: storedUser }));
+    }
+
+    return storedUser;
+  }
+
+  private async joinInvite(
+    context: { endpoint: { id: string; name: string }; inviteId: string; sourceUrl: string },
+    currentUserId: string
+  ): Promise<void> {
+    const invite = await firstValueFrom(this.serverDirectory.getInvite(context.inviteId, {
+      sourceId: context.endpoint.id,
+      sourceUrl: context.sourceUrl
+    }));
+
+    this.invite.set(invite);
+    this.status.set('joining');
+    this.message.set(`Joining ${invite.server.name}…`);
+
+    const currentUser = await this.hydrateCurrentUser();
+    const joinResponse = await firstValueFrom(this.serverDirectory.requestJoin({
+      roomId: invite.server.id,
+      userId: currentUserId,
+      userPublicKey: currentUser?.oderId || currentUserId,
+      displayName: currentUser?.displayName || 'Anonymous',
+      inviteId: context.inviteId
+    }, {
+      sourceId: context.endpoint.id,
+      sourceUrl: context.sourceUrl
+    }));
+
+    this.store.dispatch(
+      RoomsActions.joinRoom({
+        roomId: joinResponse.server.id,
+        serverInfo: {
+          ...joinResponse.server,
+          sourceId: context.endpoint.id,
+          sourceName: context.endpoint.name,
+          sourceUrl: context.sourceUrl
+        }
+      })
+    );
+  }
+
+  private async redirectToLogin(): Promise<void> {
+    this.status.set('redirecting');
+    this.message.set('Redirecting to login…');
+
+    await this.router.navigate(['/login'], {
+      queryParams: {
+        returnUrl: this.router.url
+      }
+    });
+  }
+
+  private resolveInviteContext(): {
+    endpoint: { id: string; name: string };
+    inviteId: string;
+    sourceUrl: string;
+  } | null {
+    const inviteId = this.route.snapshot.paramMap.get('inviteId')?.trim() || '';
+    const sourceUrl = this.route.snapshot.queryParamMap.get('server')?.trim() || '';
+
+    if (!inviteId || !sourceUrl) {
+      this.status.set('error');
+      this.message.set('This invite link is missing required server information.');
+
+      return null;
+    }
+
+    const endpoint = this.serverDirectory.ensureServerEndpoint({
+      name: this.buildEndpointName(sourceUrl),
+      url: sourceUrl
+    }, {
+      setActive: !localStorage.getItem(STORAGE_KEY_CURRENT_USER_ID)
+    });
+
+    return {
+      endpoint: {
+        id: endpoint.id,
+        name: endpoint.name
+      },
+      inviteId,
+      sourceUrl
+    };
+  }
+}

src/app/features/server-search/server-search.component.html

@@ -117,6 +117,17 @@
                       name="lucideLock"
                       class="w-4 h-4 text-muted-foreground"
                     />
+                    <span class="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
+                      >Private</span
+                    >
+                  } @else if (server.hasPassword) {
+                    <ng-icon
+                      name="lucideLock"
+                      class="w-4 h-4 text-muted-foreground"
+                    />
+                    <span class="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
+                      >Password</span
+                    >
                   } @else {
                     <ng-icon
                       name="lucideGlobe"
@@ -153,6 +164,9 @@
               <div class="text-muted-foreground">
                 Owner: <span class="text-foreground/80">{{ server.ownerName || server.ownerId || 'Unknown' }}</span>
               </div>
+              @if (server.hasPassword && !server.isPrivate && !isServerMarkedBanned(server)) {
+                <div class="text-muted-foreground">Access: <span class="text-foreground/80">Password required</span></div>
+              }
             </div>
           </button>
         }
@@ -160,9 +174,9 @@
     }
   </div>
 
-  @if (error()) {
+  @if (joinErrorMessage() || error()) {
     <div class="p-4 bg-destructive/10 border-t border-destructive">
-      <p class="text-sm text-destructive">{{ error() }}</p>
+      <p class="text-sm text-destructive">{{ joinErrorMessage() || error() }}</p>
     </div>
   }
 </div>
@@ -181,6 +195,41 @@
   </app-confirm-dialog>
 }
 
+@if (showPasswordDialog() && passwordPromptServer()) {
+  <app-confirm-dialog
+    title="Password required"
+    confirmLabel="Join server"
+    cancelLabel="Cancel"
+    [widthClass]="'w-[420px] max-w-[92vw]'"
+    (confirmed)="confirmPasswordJoin()"
+    (cancelled)="closePasswordDialog()"
+  >
+    <div class="space-y-3">
+      <p>Enter the password to join {{ passwordPromptServer()!.name }}.</p>
+
+      <div>
+        <label
+          for="join-server-password"
+          class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        >
+          Server password
+        </label>
+        <input
+          id="join-server-password"
+          type="password"
+          [(ngModel)]="joinPassword"
+          placeholder="Enter password"
+          class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+
+      @if (joinPasswordError()) {
+        <p class="text-sm text-destructive">{{ joinPasswordError() }}</p>
+      }
+    </div>
+  </app-confirm-dialog>
+}
+
 <!-- Create Server Dialog -->
 @if (showCreateDialog()) {
   <div
@@ -263,22 +312,21 @@
           >
         </div>
 
-        @if (newServerPrivate()) {
-          <div>
-            <label
-              for="create-server-password"
-              class="block text-sm font-medium text-foreground mb-1"
-              >Password</label
-            >
-            <input
-              type="password"
-              [(ngModel)]="newServerPassword"
-              placeholder="Enter password"
-              id="create-server-password"
-              class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </div>
-        }
+        <div>
+          <label
+            for="create-server-password"
+            class="block text-sm font-medium text-foreground mb-1"
+            >Password (optional)</label
+          >
+          <input
+            type="password"
+            [(ngModel)]="newServerPassword"
+            placeholder="Leave blank to allow joining without a password"
+            id="create-server-password"
+            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+          <p class="mt-1 text-xs text-muted-foreground">Users who already joined keep access even if you change the password later.</p>
+        </div>
       </div>
 
       <div class="flex gap-3 mt-6">

src/app/features/server-search/server-search.component.ts

@@ -13,6 +13,7 @@ import { Store } from '@ngrx/store';
 import {
   debounceTime,
   distinctUntilChanged,
+  firstValueFrom,
   Subject
 } from 'rxjs';
 import { NgIcon, provideIcons } from '@ng-icons/core';
@@ -39,6 +40,7 @@ import {
 } from '../../core/models/index';
 import { SettingsModalService } from '../../core/services/settings-modal.service';
 import { DatabaseService } from '../../core/services/database.service';
+import { ServerDirectoryService } from '../../core/services/server-directory.service';
 import { selectCurrentUser } from '../../store/users/users.selectors';
 import { ConfirmDialogComponent } from '../../shared';
 import { hasRoomBanForUser } from '../../core/helpers/room-ban.helpers';
@@ -73,6 +75,7 @@ export class ServerSearchComponent implements OnInit {
   private router = inject(Router);
   private settingsModal = inject(SettingsModalService);
   private db = inject(DatabaseService);
+  private serverDirectory = inject(ServerDirectoryService);
   private searchSubject = new Subject<string>();
   private banLookupRequestVersion = 0;
 
@@ -85,6 +88,11 @@ export class ServerSearchComponent implements OnInit {
   bannedServerLookup = signal<Record<string, boolean>>({});
   bannedServerName = signal('');
   showBannedDialog = signal(false);
+  showPasswordDialog = signal(false);
+  passwordPromptServer = signal<ServerInfo | null>(null);
+  joinPassword = signal('');
+  joinPasswordError = signal<string | null>(null);
+  joinErrorMessage = signal<string | null>(null);
 
   // Create dialog state
   showCreateDialog = signal(false);
@@ -135,16 +143,7 @@ export class ServerSearchComponent implements OnInit {
       return;
     }
 
-    this.store.dispatch(
-      RoomsActions.joinRoom({
-        roomId: server.id,
-        serverInfo: {
-          name: server.name,
-          description: server.description,
-          hostName: server.sourceName || server.hostName
-        }
-      })
-    );
+    await this.attemptJoinServer(server);
   }
 
   /** Open the create-server dialog. */
@@ -176,7 +175,7 @@ export class ServerSearchComponent implements OnInit {
         description: this.newServerDescription() || undefined,
         topic: this.newServerTopic() || undefined,
         isPrivate: this.newServerPrivate(),
-        password: this.newServerPrivate() ? this.newServerPassword() : undefined
+        password: this.newServerPassword().trim() || undefined
       })
     );
 
@@ -198,6 +197,22 @@ export class ServerSearchComponent implements OnInit {
     this.bannedServerName.set('');
   }
 
+  closePasswordDialog(): void {
+    this.showPasswordDialog.set(false);
+    this.passwordPromptServer.set(null);
+    this.joinPassword.set('');
+    this.joinPasswordError.set(null);
+  }
+
+  async confirmPasswordJoin(): Promise<void> {
+    const server = this.passwordPromptServer();
+
+    if (!server)
+      return;
+
+    await this.attemptJoinServer(server, this.joinPassword());
+  }
+
   isServerMarkedBanned(server: ServerInfo): boolean {
     return !!this.bannedServerLookup()[server.id];
   }
@@ -223,12 +238,72 @@ export class ServerSearchComponent implements OnInit {
       hostName: room.hostId || 'Unknown',
       userCount: room.userCount ?? 0,
       maxUsers: room.maxUsers ?? 50,
-      isPrivate: !!room.password,
+      hasPassword: typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password,
+      isPrivate: room.isPrivate,
       createdAt: room.createdAt,
-      ownerId: room.hostId
+      ownerId: room.hostId,
+      sourceId: room.sourceId,
+      sourceName: room.sourceName,
+      sourceUrl: room.sourceUrl
     };
   }
 
+  private async attemptJoinServer(server: ServerInfo, password?: string): Promise<void> {
+    const currentUserId = localStorage.getItem('metoyou_currentUserId');
+    const currentUser = this.currentUser();
+
+    if (!currentUserId) {
+      this.router.navigate(['/login']);
+      return;
+    }
+
+    this.joinErrorMessage.set(null);
+    this.joinPasswordError.set(null);
+
+    try {
+      const response = await firstValueFrom(this.serverDirectory.requestJoin({
+        roomId: server.id,
+        userId: currentUserId,
+        userPublicKey: currentUser?.oderId || currentUserId,
+        displayName: currentUser?.displayName || 'Anonymous',
+        password: password?.trim() || undefined
+      }, {
+        sourceId: server.sourceId,
+        sourceUrl: server.sourceUrl
+      }));
+      const resolvedServer = response.server ?? server;
+
+      this.closePasswordDialog();
+      this.store.dispatch(
+        RoomsActions.joinRoom({
+          roomId: resolvedServer.id,
+          serverInfo: resolvedServer
+        })
+      );
+    } catch (error: unknown) {
+      const serverError = error as {
+        error?: { error?: string; errorCode?: string };
+      };
+      const errorCode = serverError?.error?.errorCode;
+      const message = serverError?.error?.error || 'Failed to join server';
+
+      if (errorCode === 'PASSWORD_REQUIRED') {
+        this.passwordPromptServer.set(server);
+        this.showPasswordDialog.set(true);
+        this.joinPasswordError.set(message);
+        return;
+      }
+
+      if (errorCode === 'BANNED') {
+        this.bannedServerName.set(server.name);
+        this.showBannedDialog.set(true);
+        return;
+      }
+
+      this.joinErrorMessage.set(message);
+    }
+  }
+
   private async refreshBannedLookup(servers: ServerInfo[], currentUser: User | null): Promise<void> {
     const requestVersion = ++this.banLookupRequestVersion;
 

src/app/features/servers/servers-rail.component.html

@@ -70,6 +70,41 @@
   </app-confirm-dialog>
 }
 
+@if (showPasswordDialog() && passwordPromptRoom()) {
+  <app-confirm-dialog
+    title="Password required"
+    confirmLabel="Join server"
+    cancelLabel="Cancel"
+    [widthClass]="'w-[420px] max-w-[92vw]'"
+    (confirmed)="confirmPasswordJoin()"
+    (cancelled)="closePasswordDialog()"
+  >
+    <div class="space-y-3 text-left">
+      <p>Enter the password to rejoin {{ passwordPromptRoom()!.name }}.</p>
+
+      <div>
+        <label
+          for="rail-join-password"
+          class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        >
+          Server password
+        </label>
+        <input
+          id="rail-join-password"
+          type="password"
+          [(ngModel)]="joinPassword"
+          placeholder="Enter password"
+          class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+
+      @if (joinPasswordError()) {
+        <p class="text-sm text-destructive">{{ joinPasswordError() }}</p>
+      }
+    </div>
+  </app-confirm-dialog>
+}
+
 @if (showLeaveConfirm() && contextRoom()) {
   <app-leave-server-dialog
     [room]="contextRoom()!"

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

@@ -7,10 +7,12 @@ import {
   signal
 } from '@angular/core';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucidePlus } from '@ng-icons/lucide';
+import { firstValueFrom } from 'rxjs';
 
 import { Room, User } from '../../core/models/index';
 import { selectSavedRooms, selectCurrentRoom } from '../../store/rooms/rooms.selectors';
@@ -19,6 +21,7 @@ import { VoiceSessionService } from '../../core/services/voice-session.service';
 import { WebRTCService } from '../../core/services/webrtc.service';
 import { RoomsActions } from '../../store/rooms/rooms.actions';
 import { DatabaseService } from '../../core/services/database.service';
+import { ServerDirectoryService } from '../../core/services/server-directory.service';
 import { hasRoomBanForUser } from '../../core/helpers/room-ban.helpers';
 import {
   ConfirmDialogComponent,
@@ -31,6 +34,7 @@ import {
   standalone: true,
   imports: [
     CommonModule,
+    FormsModule,
     NgIcon,
     ConfirmDialogComponent,
     ContextMenuComponent,
@@ -46,6 +50,7 @@ export class ServersRailComponent {
   private voiceSession = inject(VoiceSessionService);
   private webrtc = inject(WebRTCService);
   private db = inject(DatabaseService);
+  private serverDirectory = inject(ServerDirectoryService);
   private banLookupRequestVersion = 0;
   savedRooms = this.store.selectSignal(selectSavedRooms);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
@@ -59,6 +64,10 @@ export class ServersRailComponent {
   bannedRoomLookup = signal<Record<string, boolean>>({});
   bannedServerName = signal('');
   showBannedDialog = signal(false);
+  showPasswordDialog = signal(false);
+  passwordPromptRoom = signal<Room | null>(null);
+  joinPassword = signal('');
+  joinPasswordError = signal<string | null>(null);
   visibleSavedRooms = computed(() => this.savedRooms().filter((room) => !this.isRoomMarkedBanned(room)));
 
   constructor() {
@@ -105,27 +114,19 @@ export class ServersRailComponent {
       return;
     }
 
-    const voiceServerId = this.voiceSession.getVoiceServerId();
+    const roomWsUrl = this.serverDirectory.getWebSocketUrl({
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    });
+    const currentWsUrl = this.webrtc.getCurrentSignalingUrl();
 
-    if (voiceServerId && voiceServerId !== room.id) {
-      this.voiceSession.setViewingVoiceServer(false);
-    } else if (voiceServerId === room.id) {
-      this.voiceSession.setViewingVoiceServer(true);
-    }
+    this.prepareVoiceContext(room);
 
-    if (this.webrtc.hasJoinedServer(room.id)) {
+    if (this.webrtc.hasJoinedServer(room.id) && roomWsUrl === currentWsUrl) {
+      this.store.dispatch(RoomsActions.setSignalServerReconnecting({ isReconnecting: false }));
       this.store.dispatch(RoomsActions.viewServer({ room }));
     } else {
-      this.store.dispatch(
-        RoomsActions.joinRoom({
-          roomId: room.id,
-          serverInfo: {
-            name: room.name,
-            description: room.description,
-            hostName: room.hostId || 'Unknown'
-          }
-        })
-      );
+      await this.attemptJoinRoom(room);
     }
   }
 
@@ -134,6 +135,22 @@ export class ServersRailComponent {
     this.bannedServerName.set('');
   }
 
+  closePasswordDialog(): void {
+    this.showPasswordDialog.set(false);
+    this.passwordPromptRoom.set(null);
+    this.joinPassword.set('');
+    this.joinPasswordError.set(null);
+  }
+
+  async confirmPasswordJoin(): Promise<void> {
+    const room = this.passwordPromptRoom();
+
+    if (!room)
+      return;
+
+    await this.attemptJoinRoom(room, this.joinPassword());
+  }
+
   isRoomMarkedBanned(room: Room): boolean {
     return !!this.bannedRoomLookup()[room.id];
   }
@@ -226,4 +243,105 @@ export class ServersRailComponent {
 
     return hasRoomBanForUser(bans, currentUser, persistedUserId);
   }
+
+  private prepareVoiceContext(room: Room): void {
+    const voiceServerId = this.voiceSession.getVoiceServerId();
+
+    if (voiceServerId && voiceServerId !== room.id) {
+      this.voiceSession.setViewingVoiceServer(false);
+    } else if (voiceServerId === room.id) {
+      this.voiceSession.setViewingVoiceServer(true);
+    }
+  }
+
+  private async attemptJoinRoom(room: Room, password?: string): Promise<void> {
+    const currentUserId = localStorage.getItem('metoyou_currentUserId');
+    const currentUser = this.currentUser();
+
+    if (!currentUserId)
+      return;
+
+    this.joinPasswordError.set(null);
+
+    try {
+      const response = await firstValueFrom(this.serverDirectory.requestJoin({
+        roomId: room.id,
+        userId: currentUserId,
+        userPublicKey: currentUser?.oderId || currentUserId,
+        displayName: currentUser?.displayName || 'Anonymous',
+        password: password?.trim() || undefined
+      }, {
+        sourceId: room.sourceId,
+        sourceUrl: room.sourceUrl
+      }));
+
+      this.closePasswordDialog();
+      this.store.dispatch(
+        RoomsActions.joinRoom({
+          roomId: room.id,
+          serverInfo: {
+            ...this.toServerInfo(room),
+            ...response.server
+          }
+        })
+      );
+    } catch (error: unknown) {
+      const serverError = error as {
+        error?: { error?: string; errorCode?: string };
+      };
+      const errorCode = serverError?.error?.errorCode;
+      const message = serverError?.error?.error || 'Failed to join server';
+
+      if (errorCode === 'PASSWORD_REQUIRED') {
+        this.passwordPromptRoom.set(room);
+        this.showPasswordDialog.set(true);
+        this.joinPasswordError.set(message);
+        return;
+      }
+
+      if (errorCode === 'BANNED') {
+        this.bannedServerName.set(room.name);
+        this.showBannedDialog.set(true);
+        return;
+      }
+
+      if (this.shouldFallbackToOfflineView(error)) {
+        this.closePasswordDialog();
+        this.store.dispatch(RoomsActions.setSignalServerReconnecting({ isReconnecting: true }));
+        this.store.dispatch(RoomsActions.viewServer({ room }));
+      }
+    }
+  }
+
+  private shouldFallbackToOfflineView(error: unknown): boolean {
+    const serverError = error as {
+      error?: { errorCode?: string };
+      status?: number;
+    };
+    const errorCode = serverError?.error?.errorCode;
+    const status = serverError?.status;
+
+    return errorCode === 'SERVER_NOT_FOUND'
+      || status === 0
+      || status === 404
+      || (typeof status === 'number' && status >= 500);
+  }
+
+  private toServerInfo(room: Room) {
+    return {
+      id: room.id,
+      name: room.name,
+      description: room.description,
+      hostName: room.hostId || 'Unknown',
+      userCount: room.userCount ?? 0,
+      maxUsers: room.maxUsers ?? 50,
+      hasPassword: typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password,
+      isPrivate: room.isPrivate,
+      createdAt: room.createdAt,
+      ownerId: room.hostId,
+      sourceId: room.sourceId,
+      sourceName: room.sourceName,
+      sourceUrl: room.sourceUrl
+    };
+  }
 }

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

@@ -95,6 +95,84 @@
             [class.cursor-not-allowed]="!isAdmin()"
           />
         </div>
+
+        @if (isAdmin()) {
+          <div class="rounded-lg border border-border bg-secondary/40 p-4 space-y-3">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <p class="text-sm font-medium text-foreground">Server Password</p>
+                <p class="text-xs text-muted-foreground">
+                  @if (hasPassword() && passwordAction() !== 'remove') {
+                    Joined members stay whitelisted until they are kicked or banned.
+                  } @else {
+                    Add an optional password so new members need it to join.
+                  }
+                </p>
+              </div>
+
+              @if (hasPassword() && passwordAction() !== 'remove') {
+                <button
+                  type="button"
+                  (click)="markPasswordForRemoval()"
+                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
+                >
+                  Remove Password
+                </button>
+              } @else if (hasPassword() && passwordAction() === 'remove') {
+                <button
+                  type="button"
+                  (click)="keepCurrentPassword()"
+                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
+                >
+                  Keep Password
+                </button>
+              }
+            </div>
+
+            <div class="text-xs text-muted-foreground">
+              @if (hasPassword() && passwordAction() !== 'remove') {
+                Password protection is currently enabled.
+              } @else if (hasPassword() && passwordAction() === 'remove') {
+                Password protection will be removed when you save.
+              } @else {
+                Password protection is currently disabled.
+              }
+            </div>
+
+            <div>
+              <label
+                for="room-password"
+                class="block text-xs font-medium text-muted-foreground mb-1"
+              >
+                {{ hasPassword() ? 'Set New Password' : 'Set Password' }}
+              </label>
+              <input
+                type="password"
+                id="room-password"
+                [ngModel]="roomPassword"
+                (ngModelChange)="onPasswordInput($event)"
+                class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                [placeholder]="hasPassword() ? 'Leave blank to keep the current password' : 'Optional password required for new joins'"
+              />
+
+              @if (passwordAction() === 'update') {
+                <p class="mt-2 text-xs text-muted-foreground">The new password will replace the current one when you save.</p>
+              }
+
+              @if (passwordError()) {
+                <p class="mt-2 text-xs text-destructive">{{ passwordError() }}</p>
+              }
+            </div>
+          </div>
+        } @else {
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-foreground">Server Password</p>
+              <p class="text-xs text-muted-foreground">Invite links bypass the password, but bans still apply.</p>
+            </div>
+            <span class="text-sm text-muted-foreground">{{ hasPassword() ? 'Enabled' : 'Disabled' }}</span>
+          </div>
+        }
       </div>
     </section>
 

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

@@ -53,6 +53,10 @@ export class ServerSettingsComponent {
   roomName = '';
   roomDescription = '';
   isPrivate = signal(false);
+  hasPassword = signal(false);
+  passwordAction = signal<'keep' | 'update' | 'remove'>('keep');
+  passwordError = signal<string | null>(null);
+  roomPassword = '';
   maxUsers = 0;
   showDeleteConfirm = signal(false);
 
@@ -72,6 +76,10 @@ export class ServerSettingsComponent {
       this.roomName = room.name;
       this.roomDescription = room.description || '';
       this.isPrivate.set(room.isPrivate);
+      this.hasPassword.set(typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password);
+      this.passwordAction.set('keep');
+      this.passwordError.set(null);
+      this.roomPassword = '';
       this.maxUsers = room.maxUsers || 0;
     });
   }
@@ -86,21 +94,67 @@ export class ServerSettingsComponent {
     if (!room)
       return;
 
+    const normalizedPassword = this.roomPassword.trim();
+    const settings: {
+      description: string;
+      hasPassword?: boolean;
+      isPrivate: boolean;
+      maxUsers: number;
+      name: string;
+      password?: string;
+    } = {
+      name: this.roomName,
+      description: this.roomDescription,
+      isPrivate: this.isPrivate(),
+      maxUsers: this.maxUsers
+    };
+
+    if (this.passwordAction() === 'remove') {
+      settings.password = '';
+      settings.hasPassword = false;
+    } else if (normalizedPassword) {
+      settings.password = normalizedPassword;
+      settings.hasPassword = true;
+    }
+
     this.store.dispatch(
       RoomsActions.updateRoomSettings({
         roomId: room.id,
-        settings: {
-          name: this.roomName,
-          description: this.roomDescription,
-          isPrivate: this.isPrivate(),
-          maxUsers: this.maxUsers
-        }
+        settings
       })
     );
 
+    this.hasPassword.set(settings.hasPassword ?? this.hasPassword());
+    this.passwordAction.set('keep');
+    this.passwordError.set(null);
+    this.roomPassword = '';
     this.showSaveSuccess('server');
   }
 
+  markPasswordForRemoval(): void {
+    this.passwordAction.set('remove');
+    this.passwordError.set(null);
+    this.roomPassword = '';
+  }
+
+  keepCurrentPassword(): void {
+    this.passwordAction.set('keep');
+    this.passwordError.set(null);
+    this.roomPassword = '';
+  }
+
+  onPasswordInput(value: string): void {
+    this.roomPassword = value;
+    this.passwordError.set(null);
+
+    if (value.trim().length > 0) {
+      this.passwordAction.set('update');
+      return;
+    }
+
+    this.passwordAction.set('keep');
+  }
+
   confirmDeleteRoom(): void {
     this.showDeleteConfirm.set(true);
   }

src/app/features/shell/title-bar.component.html

@@ -13,6 +13,16 @@
       />
       <span class="text-sm font-semibold text-foreground truncate">{{ roomName() }}</span>
 
+      @if (showRoomReconnectNotice()) {
+        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
+          <ng-icon
+            name="lucideRefreshCw"
+            class="h-3.5 w-3.5 animate-spin"
+          />
+          Reconnecting to signal server…
+        </span>
+      }
+
       @if (roomDescription()) {
         <span class="hidden md:inline text-sm text-muted-foreground border-l border-border pl-2 truncate">
           {{ roomDescription() }}
@@ -55,8 +65,20 @@
     </button>
     <!-- Anchored dropdown under the menu button -->
     @if (showMenu()) {
-      <div class="absolute right-0 top-full mt-1 z-50 bg-card border border-border rounded-lg shadow-lg w-48">
+      <div class="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border border-border bg-card shadow-lg">
         @if (inRoom()) {
+          <button
+            type="button"
+            (click)="createInviteLink()"
+            [disabled]="creatingInvite()"
+            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            @if (creatingInvite()) {
+              Creating Invite Link…
+            } @else {
+              Create Invite Link
+            }
+          </button>
           <button
             type="button"
             (click)="leaveServer()"
@@ -65,6 +87,11 @@
             Leave Server
           </button>
         }
+        @if (inviteStatus()) {
+          <div class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground">
+            {{ inviteStatus() }}
+          </div>
+        }
         <div class="border-t border-border"></div>
         <button
           type="button"

src/app/features/shell/title-bar.component.ts

@@ -6,6 +6,7 @@ import {
   signal
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { firstValueFrom } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
@@ -14,10 +15,14 @@ import {
   lucideX,
   lucideChevronLeft,
   lucideHash,
-  lucideMenu
+  lucideMenu,
+  lucideRefreshCw
 } from '@ng-icons/lucide';
 import { Router } from '@angular/router';
-import { selectCurrentRoom } from '../../store/rooms/rooms.selectors';
+import {
+  selectCurrentRoom,
+  selectIsSignalServerReconnecting
+} from '../../store/rooms/rooms.selectors';
 import { RoomsActions } from '../../store/rooms/rooms.actions';
 import { selectCurrentUser } from '../../store/users/users.selectors';
 import { ServerDirectoryService } from '../../core/services/server-directory.service';
@@ -25,6 +30,7 @@ import { WebRTCService } from '../../core/services/webrtc.service';
 import { PlatformService } from '../../core/services/platform.service';
 import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
 import { LeaveServerDialogComponent } from '../../shared';
+import { Room } from '../../core/models/index';
 
 interface WindowControlsAPI {
   minimizeWindow?: () => void;
@@ -50,7 +56,8 @@ type ElectronWindow = Window & {
       lucideX,
       lucideChevronLeft,
       lucideHash,
-      lucideMenu })
+        lucideMenu,
+        lucideRefreshCw })
   ],
   templateUrl: './title-bar.component.html'
 })
@@ -78,12 +85,22 @@ export class TitleBarComponent {
   isReconnecting = computed(() => !this.webrtc.isConnected() && this.webrtc.hasEverConnected());
   isAuthed = computed(() => !!this.currentUser());
   currentRoom = this.store.selectSignal(selectCurrentRoom);
+  isSignalServerReconnecting = this.store.selectSignal(selectIsSignalServerReconnecting);
   inRoom = computed(() => !!this.currentRoom());
   roomName = computed(() => this.currentRoom()?.name || '');
   roomDescription = computed(() => this.currentRoom()?.description || '');
+  showRoomReconnectNotice = computed(() =>
+    this.inRoom() && (
+      this.isSignalServerReconnecting()
+      || this.webrtc.shouldShowConnectionError()
+      || this.isReconnecting()
+    )
+  );
   private _showMenu = signal(false);
   showMenu = computed(() => this._showMenu());
   showLeaveConfirm = signal(false);
+  inviteStatus = signal<string | null>(null);
+  creatingInvite = signal(false);
 
   /** Minimize the Electron window. */
   minimize() {
@@ -122,9 +139,44 @@ export class TitleBarComponent {
 
   /** Toggle the server dropdown menu. */
   toggleMenu() {
+    this.inviteStatus.set(null);
     this._showMenu.set(!this._showMenu());
   }
 
+  /** Create a new invite link for the active room and copy it to the clipboard. */
+  async createInviteLink(): Promise<void> {
+    const room = this.currentRoom();
+    const user = this.currentUser();
+
+    if (!room || !user || this.creatingInvite()) {
+      return;
+    }
+
+    this.creatingInvite.set(true);
+    this.inviteStatus.set('Creating invite link…');
+
+    try {
+      const invite = await firstValueFrom(this.serverDirectory.createInvite(
+        room.id,
+        {
+          requesterUserId: user.id,
+          requesterDisplayName: user.displayName,
+          requesterRole: user.role
+        },
+        this.toSourceSelector(room)
+      ));
+
+      await this.copyInviteLink(invite.inviteUrl);
+      this.inviteStatus.set('Invite link copied to clipboard.');
+    } catch (error: unknown) {
+      const inviteError = error as { error?: { error?: string } };
+
+      this.inviteStatus.set(inviteError?.error?.error || 'Unable to create invite link.');
+    } finally {
+      this.creatingInvite.set(false);
+    }
+  }
+
   /** Leave the current server and navigate to the servers list. */
   leaveServer() {
     this.openLeaveConfirm();
@@ -170,4 +222,44 @@ export class TitleBarComponent {
 
     this.router.navigate(['/login']);
   }
+
+  private async copyInviteLink(inviteUrl: string): Promise<void> {
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(inviteUrl);
+        return;
+      } catch {}
+    }
+
+    const textarea = document.createElement('textarea');
+
+    textarea.value = inviteUrl;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    textarea.style.pointerEvents = 'none';
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    try {
+      const copied = document.execCommand('copy');
+
+      if (copied) {
+        return;
+      }
+    } catch {
+      /* fall through to prompt fallback */
+    } finally {
+      document.body.removeChild(textarea);
+    }
+
+    window.prompt('Copy this invite link', inviteUrl);
+  }
+
+  private toSourceSelector(room: Room): { sourceId?: string; sourceUrl?: string } {
+    return {
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    };
+  }
 }

src/app/features/voice/floating-voice-controls/floating-voice-controls.component.ts

@@ -4,13 +4,11 @@ import {
   inject,
   signal,
   computed,
-  OnInit,
-  OnDestroy
+  OnInit
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { Subscription } from 'rxjs';
 import {
   lucideMic,
   lucideMicOff,
@@ -28,6 +26,7 @@ import { ScreenShareQuality } from '../../../core/services/webrtc';
 import { UsersActions } from '../../../store/users/users.actions';
 import { selectCurrentUser } from '../../../store/users/users.selectors';
 import { DebugConsoleComponent, ScreenShareQualityDialogComponent } from '../../../shared';
+import { VoicePlaybackService } from '../voice-controls/services/voice-playback.service';
 
 @Component({
   selector: 'app-floating-voice-controls',
@@ -55,9 +54,10 @@ import { DebugConsoleComponent, ScreenShareQualityDialogComponent } from '../../
  * Floating voice controls displayed when the user navigates away from the voice-connected server.
  * Provides mute, deafen, screen-share, and disconnect actions in a compact overlay.
  */
-export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
+export class FloatingVoiceControlsComponent implements OnInit {
   private webrtcService = inject(WebRTCService);
   private voiceSessionService = inject(VoiceSessionService);
+  private voicePlayback = inject(VoicePlaybackService);
   private store = inject(Store);
 
   currentUser = this.store.selectSignal(selectCurrentUser);
@@ -75,8 +75,6 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
   askScreenShareQuality = signal(true);
   showScreenShareQualityDialog = signal(false);
 
-  private stateSubscription: Subscription | null = null;
-
   /** Sync local mute/deafen/screen-share state from the WebRTC service on init. */
   ngOnInit(): void {
     // Sync mute/deafen state from webrtc service
@@ -84,10 +82,15 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
     this.isDeafened.set(this.webrtcService.isDeafened());
     this.isScreenSharing.set(this.webrtcService.isScreenSharing());
     this.syncScreenShareSettings();
-  }
 
-  ngOnDestroy(): void {
-    this.stateSubscription?.unsubscribe();
+    const settings = loadVoiceSettingsFromStorage();
+
+    this.voicePlayback.updateOutputVolume(settings.outputVolume / 100);
+    this.voicePlayback.updateDeafened(this.isDeafened());
+
+    if (settings.outputDevice) {
+      this.voicePlayback.applyOutputDevice(settings.outputDevice);
+    }
   }
 
   /** Navigate back to the voice-connected server. */
@@ -117,6 +120,7 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
   toggleDeafen(): void {
     this.isDeafened.update((current) => !current);
     this.webrtcService.toggleDeafen(this.isDeafened());
+    this.voicePlayback.updateDeafened(this.isDeafened());
 
     // When deafening, also mute
     if (this.isDeafened() && !this.isMuted()) {
@@ -189,6 +193,8 @@ export class FloatingVoiceControlsComponent implements OnInit, OnDestroy {
 
     // Disable voice
     this.webrtcService.disableVoice();
+    this.voicePlayback.teardownAll();
+    this.voicePlayback.updateDeafened(false);
 
     // Update user voice state in store
     const user = this.currentUser();

src/app/features/voice/voice-controls/services/voice-playback.service.ts

@@ -18,11 +18,14 @@ export interface PlaybackOptions {
  *
  * Chrome/Electron workaround: a muted HTMLAudioElement is attached to
  * the stream first so that `createMediaStreamSource` actually outputs
- * audio. The element itself is silent - all audible output comes from
- * the GainNode -> AudioContext.destination path.
+ * audio. The priming element itself is silent; audible output is routed
+ * through a separate output element fed by
+ * `GainNode -> MediaStreamDestination` so output-device switching stays
+ * reliable during Linux screen sharing.
  */
 interface PeerAudioPipeline {
   audioElement: HTMLAudioElement;
+  outputElement: HTMLAudioElement;
   context: AudioContext;
   sourceNodes: MediaStreamAudioSourceNode[];
   gainNode: GainNode;
@@ -38,6 +41,7 @@ export class VoicePlaybackService {
   private userVolumes = new Map<string, number>();
   private userMuted = new Map<string, boolean>();
   private preferredOutputDeviceId = 'default';
+  private temporaryOutputDeviceId: string | null = null;
   private masterVolume = 1;
   private deafened = false;
   private captureEchoSuppressed = false;
@@ -49,6 +53,35 @@ export class VoicePlaybackService {
       this.captureEchoSuppressed = this.webrtc.isScreenShareRemotePlaybackSuppressed();
       this.recalcAllGains();
     });
+
+    effect(() => {
+      this.temporaryOutputDeviceId = this.webrtc.forceDefaultRemotePlaybackOutput()
+        ? 'default'
+        : null;
+      void this.applyEffectiveOutputDeviceToAllPipelines();
+    });
+
+    this.webrtc.onRemoteStream.subscribe(({ peerId }) => {
+      const voiceStream = this.webrtc.getRemoteVoiceStream(peerId);
+
+      if (!voiceStream) {
+        this.removeRemoteAudio(peerId);
+        return;
+      }
+
+      this.handleRemoteStream(peerId, voiceStream, this.buildPlaybackOptions());
+    });
+
+    this.webrtc.onVoiceConnected.subscribe(() => {
+      const options = this.buildPlaybackOptions(true);
+
+      this.playPendingStreams(options);
+      this.ensureAllRemoteStreamsPlaying(options);
+    });
+
+    this.webrtc.onPeerDisconnected.subscribe((peerId) => {
+      this.removeRemoteAudio(peerId);
+    });
   }
 
   handleRemoteStream(peerId: string, stream: MediaStream, options: PlaybackOptions): void {
@@ -147,6 +180,14 @@ export class VoicePlaybackService {
     this.pendingRemoteStreams.clear();
   }
 
+  private buildPlaybackOptions(forceConnected = this.webrtc.isVoiceConnected()): PlaybackOptions {
+    return {
+      isConnected: forceConnected,
+      outputVolume: this.masterVolume,
+      isDeafened: this.deafened
+    };
+  }
+
   /**
    * Build the Web Audio graph for a remote peer:
    *
@@ -154,11 +195,12 @@ export class VoicePlaybackService {
    *       ↓
    *   muted <audio> element  (Chrome workaround - primes the stream)
    *       ↓
-   *   MediaStreamSource → GainNode → AudioContext.destination
+   *   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.
     const audioEl = new Audio();
+    const outputEl = new Audio();
     const audioTracks = stream.getAudioTracks().filter((track) => track.readyState === 'live');
 
     audioEl.srcObject = stream;
@@ -167,12 +209,24 @@ export class VoicePlaybackService {
 
     const ctx = new AudioContext();
     const gainNode = ctx.createGain();
+    const mediaDestination = ctx.createMediaStreamDestination();
     const sourceNodes = audioTracks.map((track) => ctx.createMediaStreamSource(new MediaStream([track])));
 
     sourceNodes.forEach((sourceNode) => sourceNode.connect(gainNode));
-    gainNode.connect(ctx.destination);
+    gainNode.connect(mediaDestination);
 
-    const pipeline: PeerAudioPipeline = { audioElement: audioEl, context: ctx, sourceNodes, gainNode };
+    outputEl.srcObject = mediaDestination.stream;
+    outputEl.muted = false;
+    outputEl.volume = 1;
+    outputEl.play().catch(() => {});
+
+    const pipeline: PeerAudioPipeline = {
+      audioElement: audioEl,
+      outputElement: outputEl,
+      context: ctx,
+      sourceNodes,
+      gainNode
+    };
 
     this.peerPipelines.set(peerId, pipeline);
 
@@ -194,26 +248,20 @@ export class VoicePlaybackService {
     }
 
     // eslint-disable-next-line
-    const anyAudio = pipeline.audioElement as any;
-    // eslint-disable-next-line
-    const anyCtx = pipeline.context as any;
+    const anyAudio = pipeline.outputElement as any;
     const tasks: Promise<unknown>[] = [];
 
     if (typeof anyAudio.setSinkId === 'function') {
       tasks.push(anyAudio.setSinkId(deviceId).catch(() => undefined));
     }
 
-    if (typeof anyCtx.setSinkId === 'function') {
-      tasks.push(anyCtx.setSinkId(deviceId).catch(() => undefined));
-    }
-
     if (tasks.length > 0) {
       await Promise.all(tasks);
     }
   }
 
   private getEffectiveOutputDeviceId(): string {
-    return this.preferredOutputDeviceId;
+    return this.temporaryOutputDeviceId ?? this.preferredOutputDeviceId;
   }
 
   private removePipeline(peerId: string): void {
@@ -238,6 +286,8 @@ export class VoicePlaybackService {
 
     pipeline.audioElement.srcObject = null;
     pipeline.audioElement.remove();
+    pipeline.outputElement.srcObject = null;
+    pipeline.outputElement.remove();
 
     if (pipeline.context.state !== 'closed') {
       pipeline.context.close().catch(() => {});

src/app/features/voice/voice-controls/voice-controls.component.ts

@@ -10,7 +10,6 @@ import {
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { Subscription } from 'rxjs';
 import {
   lucideMic,
   lucideMicOff,
@@ -76,7 +75,6 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
   private voicePlayback = inject(VoicePlaybackService);
   private store = inject(Store);
   private settingsModal = inject(SettingsModalService);
-  private remoteStreamSubscription: Subscription | null = null;
 
   currentUser = this.store.selectSignal(selectCurrentUser);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
@@ -110,56 +108,18 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
       isDeafened: this.isDeafened()
     };
   }
-
-  private voiceConnectedSubscription: Subscription | null = null;
-
   async ngOnInit(): Promise<void> {
     await this.loadAudioDevices();
 
     // Load persisted voice settings and apply
     this.loadSettings();
     this.applySettingsToWebRTC();
-
-    // Subscribe to remote streams to play audio from peers
-    this.remoteStreamSubscription = this.webrtcService.onRemoteStream.subscribe(
-      ({ peerId }) => {
-        const voiceStream = this.webrtcService.getRemoteVoiceStream(peerId);
-
-        if (!voiceStream) {
-          this.voicePlayback.removeRemoteAudio(peerId);
-          return;
-        }
-
-        this.voicePlayback.handleRemoteStream(peerId, voiceStream, this.playbackOptions());
-      }
-    );
-
-    // Subscribe to voice connected event to play pending streams and ensure all remote audio is set up
-    this.voiceConnectedSubscription = this.webrtcService.onVoiceConnected.subscribe(() => {
-      const options = this.playbackOptions();
-
-      this.voicePlayback.playPendingStreams(options);
-      // Also ensure all remote streams from connected peers are playing
-      // This handles the case where streams were received while voice was "connected"
-      // from a previous session but audio elements weren't set up
-      this.voicePlayback.ensureAllRemoteStreamsPlaying(options);
-    });
-
-    // Clean up audio when peer disconnects
-    this.webrtcService.onPeerDisconnected.subscribe((peerId) => {
-      this.voicePlayback.removeRemoteAudio(peerId);
-    });
   }
 
   ngOnDestroy(): void {
-    if (this.isConnected()) {
-      this.disconnect();
+    if (!this.webrtcService.isVoiceConnected()) {
+      this.voicePlayback.teardownAll();
     }
-
-    this.voicePlayback.teardownAll();
-
-    this.remoteStreamSubscription?.unsubscribe();
-    this.voiceConnectedSubscription?.unsubscribe();
   }
 
   async loadAudioDevices(): Promise<void> {
@@ -304,6 +264,7 @@ export class VoiceControlsComponent implements OnInit, OnDestroy {
     // Disable voice (stops audio tracks but keeps peer connections open for chat)
     this.webrtcService.disableVoice();
     this.voicePlayback.teardownAll();
+    this.voicePlayback.updateDeafened(false);
 
     const user = this.currentUser();
 

src/app/shared/components/debug-console/debug-console-toolbar/debug-console-toolbar.component.html

@@ -42,6 +42,65 @@
         {{ autoScroll() ? 'Pause auto-scroll' : 'Resume auto-scroll' }}
       </button>
 
+      <!-- Export dropdown -->
+      <div
+        class="relative"
+        data-export-menu
+      >
+        <button
+          type="button"
+          (click)="toggleExportMenu()"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-secondary px-2.5 py-2 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
+          [attr.aria-expanded]="exportMenuOpen()"
+          aria-haspopup="true"
+          title="Export logs"
+        >
+          <ng-icon
+            name="lucideDownload"
+            class="h-3.5 w-3.5"
+          />
+          Export
+        </button>
+
+        @if (exportMenuOpen()) {
+          <div class="absolute right-0 top-full z-10 mt-1 min-w-[11rem] rounded-lg border border-border bg-card p-1 shadow-xl">
+            @if (activeTab() === 'logs') {
+              <p class="px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Logs</p>
+              <button
+                type="button"
+                (click)="exportLogs('csv')"
+                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
+              >
+                Export as CSV
+              </button>
+              <button
+                type="button"
+                (click)="exportLogs('txt')"
+                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
+              >
+                Export as TXT
+              </button>
+            } @else {
+              <p class="px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Network</p>
+              <button
+                type="button"
+                (click)="exportNetwork('csv')"
+                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
+              >
+                Export as CSV
+              </button>
+              <button
+                type="button"
+                (click)="exportNetwork('txt')"
+                class="flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs text-foreground transition-colors hover:bg-secondary"
+              >
+                Export as TXT
+              </button>
+            }
+          </div>
+        }
+      </div>
+
       <button
         type="button"
         (click)="clear()"

src/app/shared/components/debug-console/debug-console-toolbar/debug-console-toolbar.component.ts

@@ -1,11 +1,14 @@
 import {
   Component,
+  HostListener,
   input,
-  output
+  output,
+  signal
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
+  lucideDownload,
   lucideFilter,
   lucidePause,
   lucidePlay,
@@ -15,6 +18,7 @@ import {
 } from '@ng-icons/lucide';
 
 type DebugLogLevel = 'event' | 'info' | 'warn' | 'error' | 'debug';
+type DebugExportFormat = 'csv' | 'txt';
 
 interface DebugNetworkSummary {
   clientCount: number;
@@ -34,6 +38,7 @@ interface DebugNetworkSummary {
   imports: [CommonModule, NgIcon],
   viewProviders: [
     provideIcons({
+      lucideDownload,
       lucideFilter,
       lucidePause,
       lucidePlay,
@@ -64,6 +69,10 @@ export class DebugConsoleToolbarComponent {
   readonly autoScrollToggled = output<undefined>();
   readonly clearRequested = output<undefined>();
   readonly closeRequested = output<undefined>();
+  readonly exportLogsRequested = output<DebugExportFormat>();
+  readonly exportNetworkRequested = output<DebugExportFormat>();
+
+  readonly exportMenuOpen = signal(false);
 
   readonly levels: DebugLogLevel[] = [
     'event',
@@ -111,6 +120,35 @@ export class DebugConsoleToolbarComponent {
     this.closeRequested.emit(undefined);
   }
 
+  toggleExportMenu(): void {
+    this.exportMenuOpen.update((open) => !open);
+  }
+
+  closeExportMenu(): void {
+    this.exportMenuOpen.set(false);
+  }
+
+  exportLogs(format: DebugExportFormat): void {
+    this.exportLogsRequested.emit(format);
+    this.closeExportMenu();
+  }
+
+  exportNetwork(format: DebugExportFormat): void {
+    this.exportNetworkRequested.emit(format);
+    this.closeExportMenu();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.exportMenuOpen())
+      return;
+
+    const target = event.target as HTMLElement;
+
+    if (!target.closest('[data-export-menu]'))
+      this.closeExportMenu();
+  }
+
   getDetachLabel(): string {
     return this.detached() ? 'Dock' : 'Detach';
   }

src/app/shared/components/debug-console/debug-console.component.html

@@ -102,10 +102,11 @@
         [style.left.px]="detached() ? panelLeft() : null"
         [style.top.px]="detached() ? panelTop() : null"
       >
+        <!-- Left resize bar -->
         <button
           type="button"
           class="group absolute inset-y-0 left-0 z-[1] w-3 cursor-col-resize bg-transparent"
-          (mousedown)="startWidthResize($event)"
+          (mousedown)="startLeftResize($event)"
           aria-label="Resize debug console width"
         >
           <span
@@ -113,10 +114,23 @@
           ></span>
         </button>
 
+        <!-- Right resize bar -->
+        <button
+          type="button"
+          class="group absolute inset-y-0 right-0 z-[1] w-3 cursor-col-resize bg-transparent"
+          (mousedown)="startRightResize($event)"
+          aria-label="Resize debug console width from right"
+        >
+          <span
+            class="absolute left-1/2 top-1/2 h-20 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border/60 transition-colors group-hover:bg-primary/60"
+          ></span>
+        </button>
+
+        <!-- Top resize bar -->
         <button
           type="button"
           class="group relative h-3 w-full cursor-row-resize bg-transparent"
-          (mousedown)="startResize($event)"
+          (mousedown)="startTopResize($event)"
           aria-label="Resize debug console"
         >
           <span
@@ -154,6 +168,8 @@
           (autoScrollToggled)="toggleAutoScroll()"
           (clearRequested)="clearLogs()"
           (closeRequested)="closeConsole()"
+          (exportLogsRequested)="exportLogs($event)"
+          (exportNetworkRequested)="exportNetwork($event)"
         />
 
         @if (activeTab() === 'logs') {
@@ -168,6 +184,48 @@
             [snapshot]="networkSnapshot()"
           />
         }
+
+        <!-- Bottom resize bar -->
+        <button
+          type="button"
+          class="group relative h-3 w-full cursor-row-resize bg-transparent"
+          (mousedown)="startBottomResize($event)"
+          aria-label="Resize debug console height from bottom"
+        >
+          <span
+            class="absolute left-1/2 top-1/2 h-1 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border transition-colors group-hover:bg-primary/50"
+          ></span>
+        </button>
+
+        <!-- Bottom-right corner drag handle -->
+        <button
+          type="button"
+          class="group absolute bottom-0 right-0 z-[2] flex h-5 w-5 cursor-nwse-resize items-center justify-center bg-transparent"
+          (mousedown)="startCornerResize($event)"
+          aria-label="Resize debug console from corner"
+        >
+          <svg
+            class="h-3 w-3 text-border/80 transition-colors group-hover:text-primary/70"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+          >
+            <circle
+              cx="8"
+              cy="8"
+              r="1.2"
+            />
+            <circle
+              cx="4"
+              cy="8"
+              r="1.2"
+            />
+            <circle
+              cx="8"
+              cy="4"
+              r="1.2"
+            />
+          </svg>
+        </button>
       </section>
     </div>
   }

src/app/shared/components/debug-console/debug-console.component.ts

@@ -15,6 +15,9 @@ import { DebuggingService, type DebugLogLevel } from '../../../core/services/deb
 import { DebugConsoleEntryListComponent } from './debug-console-entry-list/debug-console-entry-list.component';
 import { DebugConsoleNetworkMapComponent } from './debug-console-network-map/debug-console-network-map.component';
 import { DebugConsoleToolbarComponent } from './debug-console-toolbar/debug-console-toolbar.component';
+import { DebugConsoleResizeService } from './services/debug-console-resize.service';
+import { DebugConsoleExportService, type DebugExportFormat } from './services/debug-console-export.service';
+import { DebugConsoleEnvironmentService } from './services/debug-console-environment.service';
 
 type DebugLevelState = Record<DebugLogLevel, boolean>;
 
@@ -44,6 +47,9 @@ type DebugConsoleLauncherVariant = 'floating' | 'inline' | 'compact';
 })
 export class DebugConsoleComponent {
   readonly debugging = inject(DebuggingService);
+  readonly resizeService = inject(DebugConsoleResizeService);
+  readonly exportService = inject(DebugConsoleExportService);
+  readonly envService = inject(DebugConsoleEnvironmentService);
   readonly entries = this.debugging.entries;
   readonly isOpen = this.debugging.isConsoleOpen;
   readonly networkSnapshot = this.debugging.networkSnapshot;
@@ -56,10 +62,10 @@ export class DebugConsoleComponent {
   readonly searchTerm = signal('');
   readonly selectedSource = signal('all');
   readonly autoScroll = signal(true);
-  readonly panelHeight = signal(360);
-  readonly panelWidth = signal(832);
-  readonly panelLeft = signal(0);
-  readonly panelTop = signal(0);
+  readonly panelHeight = this.resizeService.panelHeight;
+  readonly panelWidth = this.resizeService.panelWidth;
+  readonly panelLeft = this.resizeService.panelLeft;
+  readonly panelTop = this.resizeService.panelTop;
   readonly levelState = signal<DebugLevelState>({
     event: true,
     info: true,
@@ -123,18 +129,8 @@ export class DebugConsoleComponent {
   readonly hasErrors = computed(() => this.levelCounts().error > 0);
   readonly networkSummary = computed(() => this.networkSnapshot().summary);
 
-  private dragging = false;
-  private resizingHeight = false;
-  private resizingWidth = false;
-  private resizeOriginY = 0;
-  private resizeOriginX = 0;
-  private resizeOriginHeight = 360;
-  private resizeOriginWidth = 832;
-  private panelOriginLeft = 0;
-  private panelOriginTop = 0;
-
   constructor() {
-    this.syncPanelBounds();
+    this.resizeService.syncBounds(this.detached());
 
     effect(() => {
       const selectedSource = this.selectedSource();
@@ -147,32 +143,17 @@ export class DebugConsoleComponent {
 
   @HostListener('window:mousemove', ['$event'])
   onResizeMove(event: MouseEvent): void {
-    if (this.dragging) {
-      this.updateDetachedPosition(event);
-      return;
-    }
-
-    if (this.resizingWidth) {
-      this.updatePanelWidth(event);
-      return;
-    }
-
-    if (!this.resizingHeight)
-      return;
-
-    this.updatePanelHeight(event);
+    this.resizeService.onMouseMove(event, this.detached());
   }
 
   @HostListener('window:mouseup')
   onResizeEnd(): void {
-    this.dragging = false;
-    this.resizingHeight = false;
-    this.resizingWidth = false;
+    this.resizeService.onMouseUp();
   }
 
   @HostListener('window:resize')
   onWindowResize(): void {
-    this.syncPanelBounds();
+    this.resizeService.syncBounds(this.detached());
   }
 
   toggleConsole(): void {
@@ -195,14 +176,38 @@ export class DebugConsoleComponent {
     this.activeTab.set(tab);
   }
 
+  exportLogs(format: DebugExportFormat): void {
+    const env = this.envService.getEnvironment();
+    const name = this.envService.getFilenameSafeDisplayName();
+
+    this.exportService.exportLogs(
+      this.filteredEntries(),
+      format,
+      env,
+      name
+    );
+  }
+
+  exportNetwork(format: DebugExportFormat): void {
+    const env = this.envService.getEnvironment();
+    const name = this.envService.getFilenameSafeDisplayName();
+
+    this.exportService.exportNetwork(
+      this.networkSnapshot(),
+      format,
+      env,
+      name
+    );
+  }
+
   toggleDetached(): void {
     const nextDetached = !this.detached();
 
     this.detached.set(nextDetached);
-    this.syncPanelBounds();
+    this.resizeService.syncBounds(nextDetached);
 
     if (nextDetached)
-      this.initializeDetachedPosition();
+      this.resizeService.initializeDetachedPosition();
   }
 
   toggleLevel(level: DebugLogLevel): void {
@@ -220,35 +225,31 @@ export class DebugConsoleComponent {
     this.debugging.clear();
   }
 
-  startResize(event: MouseEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.resizingHeight = true;
-    this.resizeOriginY = event.clientY;
-    this.resizeOriginHeight = this.panelHeight();
-    this.panelOriginTop = this.panelTop();
+  startTopResize(event: MouseEvent): void {
+    this.resizeService.startTopResize(event);
   }
 
-  startWidthResize(event: MouseEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.resizingWidth = true;
-    this.resizeOriginX = event.clientX;
-    this.resizeOriginWidth = this.panelWidth();
-    this.panelOriginLeft = this.panelLeft();
+  startBottomResize(event: MouseEvent): void {
+    this.resizeService.startBottomResize(event);
+  }
+
+  startLeftResize(event: MouseEvent): void {
+    this.resizeService.startLeftResize(event);
+  }
+
+  startRightResize(event: MouseEvent): void {
+    this.resizeService.startRightResize(event);
+  }
+
+  startCornerResize(event: MouseEvent): void {
+    this.resizeService.startCornerResize(event);
   }
 
   startDrag(event: MouseEvent): void {
     if (!this.detached())
       return;
 
-    event.preventDefault();
-    event.stopPropagation();
-    this.dragging = true;
-    this.resizeOriginX = event.clientX;
-    this.resizeOriginY = event.clientY;
-    this.panelOriginLeft = this.panelLeft();
-    this.panelOriginTop = this.panelTop();
+    this.resizeService.startDrag(event);
   }
 
   formatBadgeCount(count: number): string {
@@ -257,92 +258,4 @@ export class DebugConsoleComponent {
 
     return count.toString();
   }
-
-  private updatePanelHeight(event: MouseEvent): void {
-    const delta = this.resizeOriginY - event.clientY;
-    const nextHeight = this.clampPanelHeight(this.resizeOriginHeight + delta);
-
-    this.panelHeight.set(nextHeight);
-
-    if (!this.detached())
-      return;
-
-    const originBottom = this.panelOriginTop + this.resizeOriginHeight;
-    const maxTop = this.getMaxPanelTop(nextHeight);
-
-    this.panelTop.set(this.clampValue(originBottom - nextHeight, 16, maxTop));
-  }
-
-  private updatePanelWidth(event: MouseEvent): void {
-    const delta = this.resizeOriginX - event.clientX;
-    const nextWidth = this.clampPanelWidth(this.resizeOriginWidth + delta);
-
-    this.panelWidth.set(nextWidth);
-
-    if (!this.detached())
-      return;
-
-    const originRight = this.panelOriginLeft + this.resizeOriginWidth;
-    const maxLeft = this.getMaxPanelLeft(nextWidth);
-
-    this.panelLeft.set(this.clampValue(originRight - nextWidth, 16, maxLeft));
-  }
-
-  private updateDetachedPosition(event: MouseEvent): void {
-    const nextLeft = this.panelOriginLeft + (event.clientX - this.resizeOriginX);
-    const nextTop = this.panelOriginTop + (event.clientY - this.resizeOriginY);
-
-    this.panelLeft.set(this.clampValue(nextLeft, 16, this.getMaxPanelLeft(this.panelWidth())));
-    this.panelTop.set(this.clampValue(nextTop, 16, this.getMaxPanelTop(this.panelHeight())));
-  }
-
-  private initializeDetachedPosition(): void {
-    if (this.panelLeft() > 0 || this.panelTop() > 0) {
-      this.clampDetachedPosition();
-      return;
-    }
-
-    this.panelLeft.set(this.getMaxPanelLeft(this.panelWidth()));
-    this.panelTop.set(this.clampValue(window.innerHeight - this.panelHeight() - 96, 16, this.getMaxPanelTop(this.panelHeight())));
-  }
-
-  private clampPanelHeight(height: number): number {
-    const maxHeight = this.detached()
-      ? Math.max(260, window.innerHeight - 32)
-      : Math.floor(window.innerHeight * 0.75);
-
-    return Math.min(Math.max(height, 260), maxHeight);
-  }
-
-  private clampPanelWidth(width: number): number {
-    const maxWidth = Math.max(360, window.innerWidth - 32);
-    const minWidth = Math.min(460, maxWidth);
-
-    return Math.min(Math.max(width, minWidth), maxWidth);
-  }
-
-  private clampDetachedPosition(): void {
-    this.panelLeft.set(this.clampValue(this.panelLeft(), 16, this.getMaxPanelLeft(this.panelWidth())));
-    this.panelTop.set(this.clampValue(this.panelTop(), 16, this.getMaxPanelTop(this.panelHeight())));
-  }
-
-  private getMaxPanelLeft(width: number): number {
-    return Math.max(16, window.innerWidth - width - 16);
-  }
-
-  private getMaxPanelTop(height: number): number {
-    return Math.max(16, window.innerHeight - height - 16);
-  }
-
-  private syncPanelBounds(): void {
-    this.panelWidth.update((width) => this.clampPanelWidth(width));
-    this.panelHeight.update((height) => this.clampPanelHeight(height));
-
-    if (this.detached())
-      this.clampDetachedPosition();
-  }
-
-  private clampValue(value: number, min: number, max: number): number {
-    return Math.min(Math.max(value, min), max);
-  }
 }

src/app/shared/components/debug-console/services/debug-console-environment.service.ts

@@ -0,0 +1,234 @@
+import { Injectable, inject } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+import { selectCurrentUser } from '../../../../store/users/users.selectors';
+import { PlatformService } from '../../../../core/services/platform.service';
+
+export interface DebugExportEnvironment {
+  appVersion: string;
+  displayName: string;
+  displayServer: string;
+  gpu: string;
+  operatingSystem: string;
+  platform: string;
+  userAgent: string;
+  userId: string;
+}
+
+interface DebugConsoleElectronApi {
+  linuxDisplayServer?: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class DebugConsoleEnvironmentService {
+  private readonly store = inject(Store);
+  private readonly platformService = inject(PlatformService);
+  private readonly currentUser = this.store.selectSignal(selectCurrentUser);
+
+  getEnvironment(): DebugExportEnvironment {
+    return {
+      appVersion: this.resolveAppVersion(),
+      displayName: this.resolveDisplayName(),
+      displayServer: this.resolveDisplayServer(),
+      gpu: this.resolveGpu(),
+      operatingSystem: this.resolveOperatingSystem(),
+      platform: this.resolvePlatform(),
+      userAgent: navigator.userAgent,
+      userId: this.currentUser()?.id ?? 'Unknown'
+    };
+  }
+
+  getFilenameSafeDisplayName(): string {
+    const name = this.resolveDisplayName();
+    const sanitized = name
+      .replace(/[^a-zA-Z0-9._-]/g, '_')
+      .replace(/_+/g, '_')
+      .replace(/^_|_$/g, '');
+
+    return sanitized || 'unknown';
+  }
+
+  private resolveDisplayName(): string {
+    return this.currentUser()?.displayName ?? 'Unknown';
+  }
+
+  private resolveAppVersion(): string {
+    if (!this.platformService.isElectron)
+      return 'web';
+
+    const electronVersion = this.readElectronVersion();
+
+    return electronVersion
+      ? `${electronVersion} (Electron)`
+      : 'Electron (unknown version)';
+  }
+
+  private resolvePlatform(): string {
+    if (!this.platformService.isElectron)
+      return 'Browser';
+
+    const os = this.resolveOperatingSystem().toLowerCase();
+
+    if (os.includes('windows'))
+      return 'Windows Electron';
+
+    if (os.includes('linux'))
+      return 'Linux Electron';
+
+    if (os.includes('mac'))
+      return 'macOS Electron';
+
+    return 'Electron';
+  }
+
+  private resolveOperatingSystem(): string {
+    const ua = navigator.userAgent;
+
+    if (ua.includes('Windows NT 10.0'))
+      return 'Windows 10/11';
+
+    if (ua.includes('Windows NT'))
+      return 'Windows';
+
+    if (ua.includes('Mac OS X')) {
+      const match = ua.match(/Mac OS X ([\d._]+)/);
+      const version = match?.[1]?.replace(/_/g, '.') ?? '';
+
+      return version ? `macOS ${version}` : 'macOS';
+    }
+
+    if (ua.includes('Linux')) {
+      const parts: string[] = ['Linux'];
+
+      if (ua.includes('Ubuntu'))
+        parts.push('(Ubuntu)');
+      else if (ua.includes('Fedora'))
+        parts.push('(Fedora)');
+      else if (ua.includes('Debian'))
+        parts.push('(Debian)');
+
+      return parts.join(' ');
+    }
+
+    return navigator.platform || 'Unknown';
+  }
+
+  private resolveDisplayServer(): string {
+    if (!navigator.userAgent.includes('Linux'))
+      return 'N/A';
+
+    const electronDisplayServer = this.readElectronDisplayServer();
+
+    if (electronDisplayServer)
+      return electronDisplayServer;
+
+    try {
+      const ua = navigator.userAgent.toLowerCase();
+
+      if (ua.includes('wayland'))
+        return 'Wayland';
+
+      const isOzone = ua.includes('ozone');
+
+      if (isOzone)
+        return 'Ozone (Wayland likely)';
+
+      if (ua.includes('x11'))
+        return 'X11';
+    } catch {
+      // Ignore
+    }
+
+    return this.detectDisplayServerFromEnv();
+  }
+
+  private readElectronDisplayServer(): string | null {
+    try {
+      const displayServer = this.getElectronApi()?.linuxDisplayServer;
+
+      return typeof displayServer === 'string' && displayServer.trim().length > 0
+        ? displayServer
+        : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private detectDisplayServerFromEnv(): string {
+    try {
+      // Electron may expose env vars
+      const api = this.getElectronApi();
+
+      if (!api)
+        return 'Unknown (Linux)';
+    } catch {
+      // Not available
+    }
+
+    // Best-effort heuristic: check if WebGL context
+    // mentions wayland in renderer string
+    const gpu = this.resolveGpu().toLowerCase();
+
+    if (gpu.includes('wayland'))
+      return 'Wayland';
+
+    return 'Unknown (Linux)';
+  }
+
+  private resolveGpu(): string {
+    try {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl')
+        ?? canvas.getContext('experimental-webgl');
+
+      if (!gl || !(gl instanceof WebGLRenderingContext))
+        return 'Unavailable';
+
+      const ext = gl.getExtension('WEBGL_debug_renderer_info');
+
+      if (!ext)
+        return 'Unavailable (no debug info)';
+
+      const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
+      const renderer = gl.getParameter(
+        ext.UNMASKED_RENDERER_WEBGL
+      );
+      const parts: string[] = [];
+
+      if (typeof renderer === 'string' && renderer.length > 0)
+        parts.push(renderer);
+
+      if (typeof vendor === 'string' && vendor.length > 0)
+        parts.push(`(${vendor})`);
+
+      return parts.length > 0
+        ? parts.join(' ')
+        : 'Unknown';
+    } catch {
+      return 'Unavailable';
+    }
+  }
+
+  private readElectronVersion(): string | null {
+    try {
+      const ua = navigator.userAgent;
+      const match = ua.match(/metoyou\/([\d.]+)/i)
+        ?? ua.match(/Electron\/([\d.]+)/);
+
+      return match?.[1] ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  private getElectronApi(): DebugConsoleElectronApi | null {
+    try {
+      const win = window as Window &
+        { electronAPI?: DebugConsoleElectronApi };
+
+      return win.electronAPI ?? null;
+    } catch {
+      return null;
+    }
+  }
+}

src/app/shared/components/debug-console/services/debug-console-export.service.ts

@@ -0,0 +1,517 @@
+import { Injectable } from '@angular/core';
+
+import type {
+  DebugLogEntry,
+  DebugLogLevel,
+  DebugNetworkEdge,
+  DebugNetworkNode,
+  DebugNetworkSnapshot
+} from '../../../../core/services/debugging.service';
+import type { DebugExportEnvironment } from './debug-console-environment.service';
+
+export type DebugExportFormat = 'csv' | 'txt';
+
+@Injectable({ providedIn: 'root' })
+export class DebugConsoleExportService {
+  exportLogs(
+    entries: readonly DebugLogEntry[],
+    format: DebugExportFormat,
+    env: DebugExportEnvironment,
+    filenameName: string
+  ): void {
+    const content = format === 'csv'
+      ? this.buildLogsCsv(entries, env)
+      : this.buildLogsTxt(entries, env);
+    const extension = format === 'csv' ? 'csv' : 'txt';
+    const mime = format === 'csv'
+      ? 'text/csv;charset=utf-8;'
+      : 'text/plain;charset=utf-8;';
+    const filename = this.buildFilename(
+      'debug-logs',
+      filenameName,
+      extension
+    );
+
+    this.downloadFile(filename, content, mime);
+  }
+
+  exportNetwork(
+    snapshot: DebugNetworkSnapshot,
+    format: DebugExportFormat,
+    env: DebugExportEnvironment,
+    filenameName: string
+  ): void {
+    const content = format === 'csv'
+      ? this.buildNetworkCsv(snapshot, env)
+      : this.buildNetworkTxt(snapshot, env);
+    const extension = format === 'csv' ? 'csv' : 'txt';
+    const mime = format === 'csv'
+      ? 'text/csv;charset=utf-8;'
+      : 'text/plain;charset=utf-8;';
+    const filename = this.buildFilename(
+      'debug-network',
+      filenameName,
+      extension
+    );
+
+    this.downloadFile(filename, content, mime);
+  }
+
+  private buildLogsCsv(
+    entries: readonly DebugLogEntry[],
+    env: DebugExportEnvironment
+  ): string {
+    const meta = this.buildCsvMetaSection(env);
+    const header = 'Timestamp,DateTime,Level,Source,Message,Payload,Count';
+    const rows = entries.map((entry) =>
+      [
+        entry.timeLabel,
+        entry.dateTimeLabel,
+        entry.level,
+        this.escapeCsvField(entry.source),
+        this.escapeCsvField(entry.message),
+        this.escapeCsvField(entry.payloadText ?? ''),
+        entry.count
+      ].join(',')
+    );
+
+    return [
+      meta,
+      '',
+      header,
+      ...rows
+    ].join('\n');
+  }
+
+  private buildLogsTxt(
+    entries: readonly DebugLogEntry[],
+    env: DebugExportEnvironment
+  ): string {
+    const lines: string[] = [
+      `Debug Logs Export - ${new Date().toISOString()}`,
+      this.buildSeparator(),
+      ...this.buildTxtEnvLines(env),
+      this.buildSeparator(),
+      `Total entries: ${entries.length}`,
+      this.buildSeparator()
+    ];
+
+    for (const entry of entries) {
+      const prefix = this.buildLevelPrefix(entry.level);
+      const countSuffix = entry.count > 1 ? ` (×${entry.count})` : '';
+
+      lines.push(`[${entry.dateTimeLabel}] ${prefix} [${entry.source}] ${entry.message}${countSuffix}`);
+
+      if (entry.payloadText)
+        lines.push(`  Payload: ${entry.payloadText}`);
+    }
+
+    return lines.join('\n');
+  }
+
+  private buildNetworkCsv(
+    snapshot: DebugNetworkSnapshot,
+    env: DebugExportEnvironment
+  ): string {
+    const sections: string[] = [];
+
+    sections.push(this.buildCsvMetaSection(env));
+    sections.push('');
+    sections.push(this.buildNetworkNodesCsv(snapshot.nodes));
+    sections.push('');
+    sections.push(this.buildNetworkEdgesCsv(snapshot.edges));
+    sections.push('');
+    sections.push(this.buildNetworkConnectionsCsv(snapshot));
+
+    return sections.join('\n');
+  }
+
+  private buildNetworkNodesCsv(nodes: readonly DebugNetworkNode[]): string {
+    const headerParts = [
+      'NodeId',
+      'Kind',
+      'Label',
+      'UserId',
+      'Identity',
+      'Active',
+      'VoiceConnected',
+      'Typing',
+      'Speaking',
+      'Muted',
+      'Deafened',
+      'Streaming',
+      'ConnectionDrops',
+      'PingMs',
+      'TextSent',
+      'TextReceived',
+      'AudioStreams',
+      'VideoStreams',
+      'OffersSent',
+      'OffersReceived',
+      'AnswersSent',
+      'AnswersReceived',
+      'IceSent',
+      'IceReceived',
+      'DownloadFileMbps',
+      'DownloadAudioMbps',
+      'DownloadVideoMbps'
+    ];
+    const header = headerParts.join(',');
+    const rows = nodes.map((node) =>
+      [
+        this.escapeCsvField(node.id),
+        node.kind,
+        this.escapeCsvField(node.label),
+        this.escapeCsvField(node.userId ?? ''),
+        this.escapeCsvField(node.identity ?? ''),
+        node.isActive,
+        node.isVoiceConnected,
+        node.isTyping,
+        node.isSpeaking,
+        node.isMuted,
+        node.isDeafened,
+        node.isStreaming,
+        node.connectionDrops,
+        node.pingMs ?? '',
+        node.textMessages.sent,
+        node.textMessages.received,
+        node.streams.audio,
+        node.streams.video,
+        node.handshake.offersSent,
+        node.handshake.offersReceived,
+        node.handshake.answersSent,
+        node.handshake.answersReceived,
+        node.handshake.iceSent,
+        node.handshake.iceReceived,
+        node.downloads.fileMbps ?? '',
+        node.downloads.audioMbps ?? '',
+        node.downloads.videoMbps ?? ''
+      ].join(',')
+    );
+
+    return [
+      '# Nodes',
+      header,
+      ...rows
+    ].join('\n');
+  }
+
+  private buildNetworkEdgesCsv(edges: readonly DebugNetworkEdge[]): string {
+    const header = 'EdgeId,Kind,SourceId,TargetId,SourceLabel,TargetLabel,Active,PingMs,State,MessageTotal';
+    const rows = edges.map((edge) =>
+      [
+        this.escapeCsvField(edge.id),
+        edge.kind,
+        this.escapeCsvField(edge.sourceId),
+        this.escapeCsvField(edge.targetId),
+        this.escapeCsvField(edge.sourceLabel),
+        this.escapeCsvField(edge.targetLabel),
+        edge.isActive,
+        edge.pingMs ?? '',
+        this.escapeCsvField(edge.stateLabel),
+        edge.messageTotal
+      ].join(',')
+    );
+
+    return [
+      '# Edges',
+      header,
+      ...rows
+    ].join('\n');
+  }
+
+  private buildNetworkConnectionsCsv(snapshot: DebugNetworkSnapshot): string {
+    const header = 'SourceNode,TargetNode,EdgeKind,Direction,Active';
+    const rows: string[] = [];
+
+    for (const edge of snapshot.edges) {
+      rows.push(
+        [
+          this.escapeCsvField(edge.sourceLabel),
+          this.escapeCsvField(edge.targetLabel),
+          edge.kind,
+          `${edge.sourceLabel} → ${edge.targetLabel}`,
+          edge.isActive
+        ].join(',')
+      );
+    }
+
+    return [
+      '# Connections',
+      header,
+      ...rows
+    ].join('\n');
+  }
+
+  private buildNetworkTxt(
+    snapshot: DebugNetworkSnapshot,
+    env: DebugExportEnvironment
+  ): string {
+    const lines: string[] = [];
+
+    lines.push(`Network Export - ${new Date().toISOString()}`);
+    lines.push(this.buildSeparator());
+    lines.push(...this.buildTxtEnvLines(env));
+    lines.push(this.buildSeparator());
+
+    lines.push('SUMMARY');
+    lines.push(`  Clients: ${snapshot.summary.clientCount}`);
+    lines.push(`  Servers: ${snapshot.summary.serverCount}`);
+    lines.push(`  Signaling servers: ${snapshot.summary.signalingServerCount}`);
+    lines.push(`  Peer connections: ${snapshot.summary.peerConnectionCount}`);
+    lines.push(`  Memberships: ${snapshot.summary.membershipCount}`);
+    lines.push(`  Messages: ${snapshot.summary.messageCount}`);
+    lines.push(`  Typing: ${snapshot.summary.typingCount}`);
+    lines.push(`  Speaking: ${snapshot.summary.speakingCount}`);
+    lines.push(`  Streaming: ${snapshot.summary.streamingCount}`);
+    lines.push('');
+
+    lines.push(this.buildSeparator());
+    lines.push('NODES');
+    lines.push(this.buildSeparator());
+
+    for (const node of snapshot.nodes)
+      this.appendNodeTxt(lines, node);
+
+    lines.push(this.buildSeparator());
+    lines.push('EDGES / CONNECTIONS');
+    lines.push(this.buildSeparator());
+
+    for (const edge of snapshot.edges)
+      this.appendEdgeTxt(lines, edge);
+
+    lines.push(this.buildSeparator());
+    lines.push('CONNECTION MAP');
+    lines.push(this.buildSeparator());
+    this.appendConnectionMap(lines, snapshot);
+
+    return lines.join('\n');
+  }
+
+  private appendNodeTxt(lines: string[], node: DebugNetworkNode): void {
+    lines.push(`  [${node.kind}] ${node.label} (${node.id})`);
+
+    if (node.userId)
+      lines.push(`    User ID: ${node.userId}`);
+
+    if (node.identity)
+      lines.push(`    Identity: ${node.identity}`);
+
+    const statuses: string[] = [];
+
+    if (node.isActive)
+      statuses.push('Active');
+
+    if (node.isVoiceConnected)
+      statuses.push('Voice');
+
+    if (node.isTyping)
+      statuses.push('Typing');
+
+    if (node.isSpeaking)
+      statuses.push('Speaking');
+
+    if (node.isMuted)
+      statuses.push('Muted');
+
+    if (node.isDeafened)
+      statuses.push('Deafened');
+
+    if (node.isStreaming)
+      statuses.push('Streaming');
+
+    if (statuses.length > 0)
+      lines.push(`    Status: ${statuses.join(', ')}`);
+
+    if (node.pingMs !== null)
+      lines.push(`    Ping: ${node.pingMs} ms`);
+
+    lines.push(`    Connection drops: ${node.connectionDrops}`);
+    lines.push(`    Text messages: ↑${node.textMessages.sent} ↓${node.textMessages.received}`);
+    lines.push(`    Streams: Audio ${node.streams.audio}, Video ${node.streams.video}`);
+    const handshakeLine = [
+      `Offers ${node.handshake.offersSent}/${node.handshake.offersReceived}`,
+      `Answers ${node.handshake.answersSent}/${node.handshake.answersReceived}`,
+      `ICE ${node.handshake.iceSent}/${node.handshake.iceReceived}`
+    ].join(', ');
+
+    lines.push(`    Handshake: ${handshakeLine}`);
+
+    if (node.downloads.fileMbps !== null || node.downloads.audioMbps !== null || node.downloads.videoMbps !== null) {
+      const parts = [
+        `File ${this.formatMbps(node.downloads.fileMbps)}`,
+        `Audio ${this.formatMbps(node.downloads.audioMbps)}`,
+        `Video ${this.formatMbps(node.downloads.videoMbps)}`
+      ];
+
+      lines.push(`    Downloads: ${parts.join(', ')}`);
+    }
+
+    lines.push('');
+  }
+
+  private appendEdgeTxt(lines: string[], edge: DebugNetworkEdge): void {
+    const activeLabel = edge.isActive ? 'active' : 'inactive';
+
+    lines.push(`  [${edge.kind}] ${edge.sourceLabel} → ${edge.targetLabel} (${activeLabel})`);
+
+    if (edge.pingMs !== null)
+      lines.push(`    Ping: ${edge.pingMs} ms`);
+
+    if (edge.stateLabel)
+      lines.push(`    State: ${edge.stateLabel}`);
+
+    lines.push(`    Total messages: ${edge.messageTotal}`);
+
+    if (edge.messageGroups.length > 0) {
+      lines.push('    Message groups:');
+
+      for (const group of edge.messageGroups) {
+        const dir = group.direction === 'outbound' ? '↑' : '↓';
+
+        lines.push(`      ${dir} [${group.scope}] ${group.type} ×${group.count}`);
+      }
+    }
+
+    lines.push('');
+  }
+
+  private appendConnectionMap(lines: string[], snapshot: DebugNetworkSnapshot): void {
+    const nodeMap = new Map(snapshot.nodes.map((node) => [node.id, node]));
+
+    for (const node of snapshot.nodes) {
+      const outgoing = snapshot.edges.filter((edge) => edge.sourceId === node.id);
+      const incoming = snapshot.edges.filter((edge) => edge.targetId === node.id);
+
+      lines.push(`  ${node.label} (${node.kind})`);
+
+      if (outgoing.length > 0) {
+        lines.push('    Outgoing:');
+
+        for (const edge of outgoing) {
+          const target = nodeMap.get(edge.targetId);
+
+          lines.push(`      → ${target?.label ?? edge.targetId} [${edge.kind}] ${edge.isActive ? '●' : '○'}`);
+        }
+      }
+
+      if (incoming.length > 0) {
+        lines.push('    Incoming:');
+
+        for (const edge of incoming) {
+          const source = nodeMap.get(edge.sourceId);
+
+          lines.push(`      ← ${source?.label ?? edge.sourceId} [${edge.kind}] ${edge.isActive ? '●' : '○'}`);
+        }
+      }
+
+      if (outgoing.length === 0 && incoming.length === 0)
+        lines.push('    (no connections)');
+
+      lines.push('');
+    }
+  }
+
+  private buildCsvMetaSection(env: DebugExportEnvironment): string {
+    return [
+      '# Export Metadata',
+      'Property,Value',
+      `Exported By,${this.escapeCsvField(env.displayName)}`,
+      `User ID,${this.escapeCsvField(env.userId)}`,
+      `Export Date,${new Date().toISOString()}`,
+      `App Version,${this.escapeCsvField(env.appVersion)}`,
+      `Platform,${this.escapeCsvField(env.platform)}`,
+      `Operating System,${this.escapeCsvField(env.operatingSystem)}`,
+      `Display Server,${this.escapeCsvField(env.displayServer)}`,
+      `GPU,${this.escapeCsvField(env.gpu)}`,
+      `User Agent,${this.escapeCsvField(env.userAgent)}`
+    ].join('\n');
+  }
+
+  private buildTxtEnvLines(
+    env: DebugExportEnvironment
+  ): string[] {
+    return [
+      `Exported by: ${env.displayName}`,
+      `User ID: ${env.userId}`,
+      `App version: ${env.appVersion}`,
+      `Platform: ${env.platform}`,
+      `OS: ${env.operatingSystem}`,
+      `Display server: ${env.displayServer}`,
+      `GPU: ${env.gpu}`,
+      `User agent: ${env.userAgent}`
+    ];
+  }
+
+  private buildFilename(
+    prefix: string,
+    userLabel: string,
+    extension: string
+  ): string {
+    const stamp = this.buildTimestamp();
+
+    return `${prefix}_${userLabel}_${stamp}.${extension}`;
+  }
+
+  private escapeCsvField(value: string): string {
+    if (value.includes(',') || value.includes('"') || value.includes('\n'))
+      return `"${value.replace(/"/g, '""')}"`;
+
+    return value;
+  }
+
+  private buildLevelPrefix(level: DebugLogLevel): string {
+    switch (level) {
+      case 'event':
+        return 'EVT';
+      case 'info':
+        return 'INF';
+      case 'warn':
+        return 'WRN';
+      case 'error':
+        return 'ERR';
+      case 'debug':
+        return 'DBG';
+    }
+  }
+
+  private formatMbps(value: number | null): string {
+    if (value === null)
+      return '-';
+
+    return `${value >= 10 ? value.toFixed(1) : value.toFixed(2)} Mbps`;
+  }
+
+  private buildTimestamp(): string {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+
+    return `${year}${month}${day}-${hours}${minutes}${seconds}`;
+  }
+
+  private buildSeparator(): string {
+    return '─'.repeat(60);
+  }
+
+  private downloadFile(filename: string, content: string, mimeType: string): void {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.style.display = 'none';
+    document.body.appendChild(anchor);
+    anchor.click();
+
+    requestAnimationFrame(() => {
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(url);
+    });
+  }
+}

src/app/shared/components/debug-console/services/debug-console-resize.service.ts

@@ -0,0 +1,284 @@
+import { Injectable, signal } from '@angular/core';
+
+const STORAGE_KEY = 'metoyou_debug_console_layout';
+const DEFAULT_HEIGHT = 520;
+const DEFAULT_WIDTH = 832;
+const MIN_HEIGHT = 260;
+const MIN_WIDTH = 460;
+
+interface PersistedLayout {
+  height: number;
+  width: number;
+}
+
+@Injectable({ providedIn: 'root' })
+export class DebugConsoleResizeService {
+  readonly panelHeight = signal(DEFAULT_HEIGHT);
+  readonly panelWidth = signal(DEFAULT_WIDTH);
+  readonly panelLeft = signal(0);
+  readonly panelTop = signal(0);
+
+  private dragging = false;
+  private resizingTop = false;
+  private resizingBottom = false;
+  private resizingLeft = false;
+  private resizingRight = false;
+  private resizingCorner = false;
+  private resizeOriginX = 0;
+  private resizeOriginY = 0;
+  private resizeOriginHeight = DEFAULT_HEIGHT;
+  private resizeOriginWidth = DEFAULT_WIDTH;
+  private panelOriginLeft = 0;
+  private panelOriginTop = 0;
+
+  constructor() {
+    this.loadLayout();
+  }
+
+  get isResizing(): boolean {
+    return this.resizingTop || this.resizingBottom || this.resizingLeft || this.resizingRight || this.resizingCorner;
+  }
+
+  get isDragging(): boolean {
+    return this.dragging;
+  }
+
+  startTopResize(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizingTop = true;
+    this.resizeOriginY = event.clientY;
+    this.resizeOriginHeight = this.panelHeight();
+    this.panelOriginTop = this.panelTop();
+  }
+
+  startBottomResize(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizingBottom = true;
+    this.resizeOriginY = event.clientY;
+    this.resizeOriginHeight = this.panelHeight();
+  }
+
+  startLeftResize(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizingLeft = true;
+    this.resizeOriginX = event.clientX;
+    this.resizeOriginWidth = this.panelWidth();
+    this.panelOriginLeft = this.panelLeft();
+  }
+
+  startRightResize(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizingRight = true;
+    this.resizeOriginX = event.clientX;
+    this.resizeOriginWidth = this.panelWidth();
+  }
+
+  startCornerResize(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizingCorner = true;
+    this.resizeOriginX = event.clientX;
+    this.resizeOriginY = event.clientY;
+    this.resizeOriginWidth = this.panelWidth();
+    this.resizeOriginHeight = this.panelHeight();
+  }
+
+  startDrag(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragging = true;
+    this.resizeOriginX = event.clientX;
+    this.resizeOriginY = event.clientY;
+    this.panelOriginLeft = this.panelLeft();
+    this.panelOriginTop = this.panelTop();
+  }
+
+  onMouseMove(event: MouseEvent, detached: boolean): void {
+    if (this.dragging) {
+      this.updateDetachedPosition(event);
+      return;
+    }
+
+    if (this.resizingCorner) {
+      this.updateCornerResize(event, detached);
+      return;
+    }
+
+    if (this.resizingLeft) {
+      this.updateLeftResize(event, detached);
+      return;
+    }
+
+    if (this.resizingRight) {
+      this.updateRightResize(event, detached);
+      return;
+    }
+
+    if (this.resizingTop) {
+      this.updateTopResize(event, detached);
+      return;
+    }
+
+    if (this.resizingBottom) {
+      this.updateBottomResize(event, detached);
+    }
+  }
+
+  onMouseUp(): void {
+    const wasActive = this.isResizing || this.dragging;
+
+    this.dragging = false;
+    this.resizingTop = false;
+    this.resizingBottom = false;
+    this.resizingLeft = false;
+    this.resizingRight = false;
+    this.resizingCorner = false;
+
+    if (wasActive)
+      this.persistLayout();
+  }
+
+  syncBounds(detached: boolean): void {
+    this.panelWidth.update((width) => this.clampWidth(width, detached));
+    this.panelHeight.update((height) => this.clampHeight(height, detached));
+
+    if (detached)
+      this.clampDetachedPosition();
+  }
+
+  initializeDetachedPosition(): void {
+    if (this.panelLeft() > 0 || this.panelTop() > 0) {
+      this.clampDetachedPosition();
+      return;
+    }
+
+    this.panelLeft.set(this.getMaxLeft(this.panelWidth()));
+    this.panelTop.set(
+      this.clamp(window.innerHeight - this.panelHeight() - 96, 16, this.getMaxTop(this.panelHeight()))
+    );
+  }
+
+  private updateTopResize(event: MouseEvent, detached: boolean): void {
+    const delta = this.resizeOriginY - event.clientY;
+    const nextHeight = this.clampHeight(this.resizeOriginHeight + delta, detached);
+
+    this.panelHeight.set(nextHeight);
+
+    if (!detached)
+      return;
+
+    const originBottom = this.panelOriginTop + this.resizeOriginHeight;
+
+    this.panelTop.set(this.clamp(originBottom - nextHeight, 16, this.getMaxTop(nextHeight)));
+  }
+
+  private updateBottomResize(event: MouseEvent, detached: boolean): void {
+    const delta = event.clientY - this.resizeOriginY;
+
+    this.panelHeight.set(this.clampHeight(this.resizeOriginHeight + delta, detached));
+  }
+
+  private updateLeftResize(event: MouseEvent, detached: boolean): void {
+    const delta = this.resizeOriginX - event.clientX;
+    const nextWidth = this.clampWidth(this.resizeOriginWidth + delta, detached);
+
+    this.panelWidth.set(nextWidth);
+
+    if (!detached)
+      return;
+
+    const originRight = this.panelOriginLeft + this.resizeOriginWidth;
+
+    this.panelLeft.set(this.clamp(originRight - nextWidth, 16, this.getMaxLeft(nextWidth)));
+  }
+
+  private updateRightResize(event: MouseEvent, detached: boolean): void {
+    const delta = event.clientX - this.resizeOriginX;
+
+    this.panelWidth.set(this.clampWidth(this.resizeOriginWidth + delta, detached));
+  }
+
+  private updateCornerResize(event: MouseEvent, detached: boolean): void {
+    const deltaX = event.clientX - this.resizeOriginX;
+    const deltaY = event.clientY - this.resizeOriginY;
+
+    this.panelWidth.set(this.clampWidth(this.resizeOriginWidth + deltaX, detached));
+    this.panelHeight.set(this.clampHeight(this.resizeOriginHeight + deltaY, detached));
+  }
+
+  private updateDetachedPosition(event: MouseEvent): void {
+    const nextLeft = this.panelOriginLeft + (event.clientX - this.resizeOriginX);
+    const nextTop = this.panelOriginTop + (event.clientY - this.resizeOriginY);
+
+    this.panelLeft.set(this.clamp(nextLeft, 16, this.getMaxLeft(this.panelWidth())));
+    this.panelTop.set(this.clamp(nextTop, 16, this.getMaxTop(this.panelHeight())));
+  }
+
+  private clampHeight(height: number, detached?: boolean): number {
+    const maxHeight = detached
+      ? Math.max(MIN_HEIGHT, window.innerHeight - 32)
+      : Math.floor(window.innerHeight * 0.75);
+
+    return Math.min(Math.max(height, MIN_HEIGHT), maxHeight);
+  }
+
+  private clampWidth(width: number, _detached?: boolean): number {
+    const maxWidth = Math.max(MIN_WIDTH, window.innerWidth - 32);
+    const minWidth = Math.min(MIN_WIDTH, maxWidth);
+
+    return Math.min(Math.max(width, minWidth), maxWidth);
+  }
+
+  private clampDetachedPosition(): void {
+    this.panelLeft.set(this.clamp(this.panelLeft(), 16, this.getMaxLeft(this.panelWidth())));
+    this.panelTop.set(this.clamp(this.panelTop(), 16, this.getMaxTop(this.panelHeight())));
+  }
+
+  private getMaxLeft(width: number): number {
+    return Math.max(16, window.innerWidth - width - 16);
+  }
+
+  private getMaxTop(height: number): number {
+    return Math.max(16, window.innerHeight - height - 16);
+  }
+
+  private clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+  }
+
+  private loadLayout(): void {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+
+      if (!raw)
+        return;
+
+      const parsed = JSON.parse(raw) as PersistedLayout;
+
+      if (typeof parsed.height === 'number' && parsed.height >= MIN_HEIGHT)
+        this.panelHeight.set(parsed.height);
+
+      if (typeof parsed.width === 'number' && parsed.width >= MIN_WIDTH)
+        this.panelWidth.set(parsed.width);
+    } catch {
+      // Ignore corrupted storage
+    }
+  }
+
+  private persistLayout(): void {
+    try {
+      const layout: PersistedLayout = {
+        height: this.panelHeight(),
+        width: this.panelWidth()
+      };
+
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+    } catch {
+      // Ignore storage failures
+    }
+  }
+}

src/app/store/messages/messages-incoming.handlers.ts

@@ -256,7 +256,10 @@ function handleSyncBatch(
     return EMPTY;
 
   if (hasAttachmentMetaMap(event.attachments)) {
-    attachments.registerSyncedAttachments(event.attachments);
+    attachments.registerSyncedAttachments(
+      event.attachments,
+      Object.fromEntries(event.messages.map((message) => [message.id, message.roomId]))
+    );
   }
 
   return from(processSyncBatch(event, db, attachments)).pipe(
@@ -277,6 +280,8 @@ async function processSyncBatch(
   const toUpsert: Message[] = [];
 
   for (const incoming of event.messages) {
+    attachments.rememberMessageRoom(incoming.id, incoming.roomId);
+
     const { message, changed } = await mergeIncomingMessage(incoming, db);
 
     if (incoming.isDeleted) {
@@ -292,40 +297,31 @@ async function processSyncBatch(
   }
 
   if (hasAttachmentMetaMap(event.attachments)) {
-    requestMissingImages(event.attachments, attachments);
+    queueWatchedAttachmentDownloads(event.attachments, attachments);
   }
 
   return toUpsert;
 }
 
-/** Auto-requests any unavailable image attachments from any connected peer. */
-function requestMissingImages(
+/** Queue best-effort auto-downloads for watched-room attachments. */
+function queueWatchedAttachmentDownloads(
   attachmentMap: AttachmentMetaMap,
   attachments: AttachmentService
 ): void {
-  for (const [msgId, metas] of Object.entries(attachmentMap)) {
-    for (const meta of metas) {
-      if (!meta.isImage)
-        continue;
-
-      const atts = attachments.getForMessage(msgId);
-      const matchingAttachment = atts.find((attachment) => attachment.id === meta.id);
-
-      if (
-        matchingAttachment &&
-        !matchingAttachment.available &&
-        !(matchingAttachment.receivedBytes && matchingAttachment.receivedBytes > 0)
-      ) {
-        attachments.requestImageFromAnyPeer(msgId, matchingAttachment);
-      }
-    }
+  for (const msgId of Object.keys(attachmentMap)) {
+    attachments.queueAutoDownloadsForMessage(msgId);
   }
 }
 
 /** Saves an incoming chat message to DB and dispatches receiveMessage. */
 function handleChatMessage(
   event: IncomingMessageEvent,
-  { db, debugging, currentUser }: IncomingMessageContext
+  {
+    db,
+    debugging,
+    attachments,
+    currentUser
+  }: IncomingMessageContext
 ): Observable<Action> {
   const msg = event.message;
 
@@ -340,6 +336,8 @@ function handleChatMessage(
   if (isOwnMessage)
     return EMPTY;
 
+  attachments.rememberMessageRoom(msg.id, msg.roomId);
+
   trackBackgroundOperation(
     db.saveMessage(msg),
     debugging,
@@ -492,6 +490,11 @@ function handleFileAnnounce(
   { attachments }: IncomingMessageContext
 ): Observable<Action> {
   attachments.handleFileAnnounce(event);
+
+  if (event.messageId) {
+    attachments.queueAutoDownloadsForMessage(event.messageId, event.file?.id);
+  }
+
   return EMPTY;
 }
 

src/app/store/messages/messages.effects.ts

@@ -64,6 +64,12 @@ export class MessagesEffects {
           mergeMap(async (messages) => {
             const hydrated = await hydrateMessages(messages, this.db);
 
+            for (const message of hydrated) {
+              this.attachments.rememberMessageRoom(message.id, message.roomId);
+            }
+
+            void this.attachments.requestAutoDownloadsForRoom(roomId);
+
             return MessagesActions.loadMessagesSuccess({ messages: hydrated });
           }),
           catchError((error) =>
@@ -104,6 +110,8 @@ export class MessagesEffects {
           replyToId
         };
 
+        this.attachments.rememberMessageRoom(message.id, message.roomId);
+
         this.trackBackgroundOperation(
           this.db.saveMessage(message),
           'Failed to persist outgoing chat message',

src/app/store/rooms/rooms.actions.ts

@@ -29,7 +29,7 @@ export const RoomsActions = createActionGroup({
     'Create Room Success': props<{ room: Room }>(),
     'Create Room Failure': props<{ error: string }>(),
 
-    'Join Room': props<{ roomId: string; password?: string; serverInfo?: { name: string; description?: string; hostName?: string } }>(),
+    'Join Room': props<{ roomId: string; password?: string; serverInfo?: Partial<ServerInfo> & { name: string } }>(),
     'Join Room Success': props<{ room: Room }>(),
     'Join Room Failure': props<{ error: string }>(),
 
@@ -67,6 +67,7 @@ export const RoomsActions = createActionGroup({
     'Rename Channel': props<{ channelId: string; name: string }>(),
 
     'Clear Search Results': emptyProps(),
-    'Set Connecting': props<{ isConnecting: boolean }>()
+    'Set Connecting': props<{ isConnecting: boolean }>(),
+    'Set Signal Server Reconnecting': props<{ isReconnecting: boolean }>()
   }
 });

src/app/store/rooms/rooms.effects.ts

@@ -44,6 +44,7 @@ import {
 } from '../../core/models/index';
 import { NotificationAudioService, AppSound } from '../../core/services/notification-audio.service';
 import { hasRoomBanForUser } from '../../core/helpers/room-ban.helpers';
+import { ROOM_URL_PATTERN } from '../../core/constants';
 import {
   findRoomMember,
   removeRoomMember,
@@ -95,6 +96,7 @@ function isWrongServer(
 
 interface RoomPresenceSignalingMessage {
   type: string;
+  reason?: string;
   serverId?: string;
   users?: { oderId: string; displayName: string }[];
   oderId?: string;
@@ -139,7 +141,6 @@ export class RoomsEffects {
   searchServers$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RoomsActions.searchServers),
-      debounceTime(300),
       switchMap(({ query }) =>
         this.serverDirectory.searchServers(query).pipe(
           map((servers) => RoomsActions.searchServersSuccess({ servers })),
@@ -149,6 +150,33 @@ export class RoomsEffects {
     )
   );
 
+  /** Reconnects saved rooms so joined servers stay online while the app is running. */
+  keepSavedRoomsConnected$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(
+          RoomsActions.loadRoomsSuccess,
+          RoomsActions.forgetRoomSuccess,
+          RoomsActions.deleteRoomSuccess,
+          UsersActions.loadCurrentUserSuccess,
+          UsersActions.setCurrentUser
+        ),
+        withLatestFrom(
+          this.store.select(selectCurrentUser),
+          this.store.select(selectCurrentRoom),
+          this.store.select(selectSavedRooms)
+        ),
+        tap(([
+          , user,
+          currentRoom,
+          savedRooms
+        ]) => {
+          this.syncSavedRoomConnections(user ?? null, currentRoom, savedRooms);
+        })
+      ),
+    { dispatch: false }
+  );
+
   /** Creates a new room, saves it locally, and registers it with the server directory. */
   createRoom$ = createEffect(() =>
     this.actions$.pipe(
@@ -159,17 +187,23 @@ export class RoomsEffects {
           return of(RoomsActions.createRoomFailure({ error: 'Not logged in' }));
         }
 
+        const activeEndpoint = this.serverDirectory.activeServer();
+        const normalizedPassword = typeof password === 'string' ? password.trim() : '';
         const room: Room = {
           id: uuidv4(),
           name,
           description,
           topic,
           hostId: currentUser.id,
+          password: normalizedPassword || undefined,
+          hasPassword: normalizedPassword.length > 0,
           isPrivate: isPrivate ?? false,
-          password,
           createdAt: Date.now(),
           userCount: 1,
-          maxUsers: 50
+          maxUsers: 50,
+          sourceId: activeEndpoint?.id,
+          sourceName: activeEndpoint?.name,
+          sourceUrl: activeEndpoint?.url
         };
 
         // Save to local DB
@@ -184,6 +218,8 @@ export class RoomsEffects {
             ownerId: currentUser.id,
             ownerPublicKey: currentUser.oderId,
             hostName: currentUser.displayName,
+            password: normalizedPassword || null,
+            hasPassword: normalizedPassword.length > 0,
             isPrivate: room.isPrivate,
             userCount: 1,
             maxUsers: room.maxUsers || 50,
@@ -216,8 +252,35 @@ export class RoomsEffects {
             // First check local DB
             return from(this.db.getRoom(roomId)).pipe(
               switchMap((room) => {
+                const sourceSelector = serverInfo
+                  ? {
+                    sourceId: serverInfo.sourceId,
+                    sourceUrl: serverInfo.sourceUrl
+                  }
+                  : undefined;
+
                 if (room) {
-                  return of(RoomsActions.joinRoomSuccess({ room }));
+                  const resolvedRoom: Room = {
+                    ...room,
+                    isPrivate: typeof serverInfo?.isPrivate === 'boolean' ? serverInfo.isPrivate : room.isPrivate,
+                    sourceId: serverInfo?.sourceId ?? room.sourceId,
+                    sourceName: serverInfo?.sourceName ?? room.sourceName,
+                    sourceUrl: serverInfo?.sourceUrl ?? room.sourceUrl,
+                    hasPassword:
+                      typeof serverInfo?.hasPassword === 'boolean'
+                        ? serverInfo.hasPassword
+                        : (typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password)
+                  };
+
+                  this.db.updateRoom(room.id, {
+                    sourceId: resolvedRoom.sourceId,
+                    sourceName: resolvedRoom.sourceName,
+                    sourceUrl: resolvedRoom.sourceUrl,
+                    hasPassword: resolvedRoom.hasPassword,
+                    isPrivate: resolvedRoom.isPrivate
+                  });
+
+                  return of(RoomsActions.joinRoomSuccess({ room: resolvedRoom }));
                 }
 
                 // If not in local DB but we have server info from search, create a room entry
@@ -227,11 +290,14 @@ export class RoomsEffects {
                     name: serverInfo.name,
                     description: serverInfo.description,
                     hostId: '', // Unknown, will be determined via signaling
-                    isPrivate: !!password,
-                    password,
+                    hasPassword: !!serverInfo.hasPassword,
+                    isPrivate: !!serverInfo.isPrivate,
                     createdAt: Date.now(),
                     userCount: 1,
-                    maxUsers: 50
+                    maxUsers: 50,
+                    sourceId: serverInfo.sourceId,
+                    sourceName: serverInfo.sourceName,
+                    sourceUrl: serverInfo.sourceUrl
                   };
 
                   // Save to local DB for future reference
@@ -240,7 +306,7 @@ export class RoomsEffects {
                 }
 
                 // Try to get room info from server
-                return this.serverDirectory.getServer(roomId).pipe(
+                return this.serverDirectory.getServer(roomId, sourceSelector).pipe(
                   switchMap((serverData) => {
                     if (serverData) {
                       const newRoom: Room = {
@@ -248,11 +314,14 @@ export class RoomsEffects {
                         name: serverData.name,
                         description: serverData.description,
                         hostId: serverData.ownerId || '',
+                        hasPassword: !!serverData.hasPassword,
                         isPrivate: serverData.isPrivate,
-                        password,
                         createdAt: serverData.createdAt || Date.now(),
                         userCount: serverData.userCount,
-                        maxUsers: serverData.maxUsers
+                        maxUsers: serverData.maxUsers,
+                        sourceId: serverData.sourceId,
+                        sourceName: serverData.sourceName,
+                        sourceUrl: serverData.sourceUrl
                       };
 
                       this.db.saveRoom(newRoom);
@@ -278,28 +347,9 @@ export class RoomsEffects {
     () =>
       this.actions$.pipe(
         ofType(RoomsActions.createRoomSuccess, RoomsActions.joinRoomSuccess),
-        withLatestFrom(this.store.select(selectCurrentUser)),
-        tap(([{ room }, user]) => {
-          const wsUrl = this.serverDirectory.getWebSocketUrl();
-          const oderId = user?.oderId || this.webrtc.peerId();
-          const displayName = user?.displayName || 'Anonymous';
-
-          // Check if already connected to signaling server
-          if (this.webrtc.isConnected()) {
-            this.webrtc.setCurrentServer(room.id);
-            this.webrtc.switchServer(room.id, oderId);
-          } else {
-            this.webrtc.connectToSignalingServer(wsUrl).subscribe({
-              next: (connected) => {
-                if (connected) {
-                  this.webrtc.setCurrentServer(room.id);
-                  this.webrtc.identify(oderId, displayName);
-                  this.webrtc.joinRoom(room.id, oderId);
-                }
-              },
-              error: () => {}
-            });
-          }
+        withLatestFrom(this.store.select(selectCurrentUser), this.store.select(selectSavedRooms)),
+        tap(([{ room }, user, savedRooms]) => {
+          this.connectToRoomSignaling(room, user ?? null, undefined, savedRooms);
 
           this.router.navigate(['/room', room.id]);
         })
@@ -311,8 +361,8 @@ export class RoomsEffects {
   viewServer$ = createEffect(() =>
     this.actions$.pipe(
       ofType(RoomsActions.viewServer),
-      withLatestFrom(this.store.select(selectCurrentUser)),
-      switchMap(([{ room }, user]) => {
+      withLatestFrom(this.store.select(selectCurrentUser), this.store.select(selectSavedRooms)),
+      switchMap(([{ room }, user, savedRooms]) => {
         if (!user) {
           return of(RoomsActions.joinRoomFailure({ error: 'Not logged in' }));
         }
@@ -325,10 +375,7 @@ export class RoomsEffects {
 
             const oderId = user.oderId || this.webrtc.peerId();
 
-            if (this.webrtc.isConnected()) {
-              this.webrtc.setCurrentServer(room.id);
-              this.webrtc.switchServer(room.id, oderId);
-            }
+            this.connectToRoomSignaling(room, user, oderId, savedRooms);
 
             this.router.navigate(['/room', room.id]);
             return of(RoomsActions.viewServerSuccess({ room }));
@@ -432,8 +479,12 @@ export class RoomsEffects {
 
           this.serverDirectory.updateServer(roomId, {
             currentOwnerId: currentUser.id,
+            actingRole: 'host',
             ownerId: nextHostId,
             ownerPublicKey: nextHostOderId
+          }, {
+            sourceId: room.sourceId,
+            sourceUrl: room.sourceUrl
           }).subscribe({
             error: () => {}
           });
@@ -449,6 +500,15 @@ export class RoomsEffects {
           });
         }
 
+        if (currentUser && room) {
+          this.serverDirectory.notifyLeave(roomId, currentUser.id, {
+            sourceId: room.sourceId,
+            sourceUrl: room.sourceUrl
+          }).subscribe({
+            error: () => {}
+          });
+        }
+
         // Delete from local DB
         this.db.deleteRoom(roomId);
 
@@ -485,10 +545,11 @@ export class RoomsEffects {
         if (!room)
           return of(RoomsActions.updateRoomSettingsFailure({ error: 'Room not found' }));
 
-        const isOwner = room.hostId === currentUser.id || room.hostId === currentUser.oderId;
-        const canManageCurrentRoom = currentRoom?.id === room.id && (currentUser.role === 'host' || currentUser.role === 'admin');
+        const currentUserRole = this.getUserRoleForRoom(room, currentUser, currentRoom);
+        const isOwner = currentUserRole === 'host';
+        const canManageRoom = currentUserRole === 'host' || currentUserRole === 'admin';
 
-        if (!isOwner && !canManageCurrentRoom) {
+        if (!canManageRoom) {
           return of(
             RoomsActions.updateRoomSettingsFailure({
               error: 'Permission denied'
@@ -496,30 +557,58 @@ export class RoomsEffects {
           );
         }
 
+        const hasPasswordUpdate = Object.prototype.hasOwnProperty.call(settings, 'password');
+        const normalizedPassword = typeof settings.password === 'string' ? settings.password.trim() : undefined;
+        const nextHasPassword = typeof settings.hasPassword === 'boolean'
+          ? settings.hasPassword
+          : (hasPasswordUpdate
+            ? !!normalizedPassword
+            : (typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password));
         const updatedSettings: RoomSettings = {
           name: settings.name ?? room.name,
           description: settings.description ?? room.description,
           topic: settings.topic ?? room.topic,
           isPrivate: settings.isPrivate ?? room.isPrivate,
-          password: settings.password ?? room.password,
+          password: hasPasswordUpdate ? (normalizedPassword || '') : room.password,
+          hasPassword: nextHasPassword,
           maxUsers: settings.maxUsers ?? room.maxUsers
         };
 
-        this.db.updateRoom(room.id, updatedSettings);
+        const localRoomUpdates: Partial<Room> = {
+          ...updatedSettings,
+          password: hasPasswordUpdate ? (normalizedPassword || undefined) : room.password,
+          hasPassword: nextHasPassword
+        };
+        const sharedSettings: RoomSettings = {
+          name: updatedSettings.name,
+          description: updatedSettings.description,
+          topic: updatedSettings.topic,
+          isPrivate: updatedSettings.isPrivate,
+          hasPassword: nextHasPassword,
+          maxUsers: updatedSettings.maxUsers,
+          password: hasPasswordUpdate ? (normalizedPassword || '') : undefined
+        };
+
+        this.db.updateRoom(room.id, localRoomUpdates);
 
         this.webrtc.broadcastMessage({
           type: 'room-settings-update',
           roomId: room.id,
-          settings: updatedSettings
+          settings: sharedSettings
         });
 
-        if (isOwner) {
+        if (canManageRoom) {
           this.serverDirectory.updateServer(room.id, {
             currentOwnerId: currentUser.id,
+            actingRole: currentUserRole ?? undefined,
             name: updatedSettings.name,
             description: updatedSettings.description,
             isPrivate: updatedSettings.isPrivate,
-            maxUsers: updatedSettings.maxUsers
+            maxUsers: updatedSettings.maxUsers,
+            password: hasPasswordUpdate ? (normalizedPassword || null) : undefined
+          }, {
+            sourceId: room.sourceId,
+            sourceUrl: room.sourceUrl
           }).subscribe({
             error: () => {}
           });
@@ -713,7 +802,11 @@ export class RoomsEffects {
                 })
               );
 
-            return [UsersActions.clearUsers(), ...joinActions];
+            return [
+              RoomsActions.setSignalServerReconnecting({ isReconnecting: false }),
+              UsersActions.clearUsers(),
+              ...joinActions
+            ];
           }
 
           case 'user_joined': {
@@ -729,6 +822,7 @@ export class RoomsEffects {
             };
 
             return [
+              RoomsActions.setSignalServerReconnecting({ isReconnecting: false }),
               UsersActions.userJoined({
                 user: buildSignalingUser(joinedUser, buildKnownUserExtras(currentRoom, joinedUser.oderId))
               })
@@ -743,7 +837,20 @@ export class RoomsEffects {
               return EMPTY;
 
             this.knownVoiceUsers.delete(signalingMessage.oderId);
-            return [UsersActions.userLeft({ userId: signalingMessage.oderId })];
+            return [
+              RoomsActions.setSignalServerReconnecting({ isReconnecting: false }),
+              UsersActions.userLeft({ userId: signalingMessage.oderId })
+            ];
+          }
+
+          case 'access_denied': {
+            if (isWrongServer(signalingMessage.serverId, viewedServerId))
+              return EMPTY;
+
+            if (signalingMessage.reason !== 'SERVER_NOT_FOUND')
+              return EMPTY;
+
+            return [RoomsActions.setSignalServerReconnecting({ isReconnecting: true })];
           }
 
           default:
@@ -945,14 +1052,20 @@ export class RoomsEffects {
       description: typeof room.description === 'string' ? room.description : undefined,
       topic: typeof room.topic === 'string' ? room.topic : undefined,
       hostId: typeof room.hostId === 'string' ? room.hostId : undefined,
-      password: typeof room.password === 'string' ? room.password : undefined,
+      hasPassword:
+        typeof room.hasPassword === 'boolean'
+          ? room.hasPassword
+          : (typeof room.password === 'string' ? room.password.trim().length > 0 : undefined),
       isPrivate: typeof room.isPrivate === 'boolean' ? room.isPrivate : undefined,
       maxUsers: typeof room.maxUsers === 'number' ? room.maxUsers : undefined,
       icon: typeof room.icon === 'string' ? room.icon : undefined,
       iconUpdatedAt: typeof room.iconUpdatedAt === 'number' ? room.iconUpdatedAt : undefined,
       permissions: room.permissions ? { ...room.permissions } : undefined,
       channels: Array.isArray(room.channels) ? room.channels : undefined,
-      members: Array.isArray(room.members) ? room.members : undefined
+      members: Array.isArray(room.members) ? room.members : undefined,
+      sourceId: typeof room.sourceId === 'string' ? room.sourceId : undefined,
+      sourceName: typeof room.sourceName === 'string' ? room.sourceName : undefined,
+      sourceUrl: typeof room.sourceUrl === 'string' ? room.sourceUrl : undefined
     };
   }
 
@@ -1005,7 +1118,7 @@ export class RoomsEffects {
         this.webrtc.sendToPeer(fromPeerId, {
           type: 'server-state-full',
           roomId: room.id,
-          room,
+          room: this.sanitizeRoomSnapshot(room),
           bans
         });
       }),
@@ -1075,7 +1188,11 @@ export class RoomsEffects {
           description: settings.description ?? room.description,
           topic: settings.topic ?? room.topic,
           isPrivate: settings.isPrivate ?? room.isPrivate,
-          password: settings.password ?? room.password,
+          password: settings.password === '' ? undefined : room.password,
+          hasPassword:
+            typeof settings.hasPassword === 'boolean'
+              ? settings.hasPassword
+              : (typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password),
           maxUsers: settings.maxUsers ?? room.maxUsers
         }
       })
@@ -1196,6 +1313,132 @@ export class RoomsEffects {
     { dispatch: false }
   );
 
+  private connectToRoomSignaling(
+    room: Room,
+    user: User | null,
+    resolvedOderId?: string,
+    savedRooms: Room[] = []
+  ): void {
+    const wsUrl = this.serverDirectory.getWebSocketUrl({
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    });
+    const currentWsUrl = this.webrtc.getCurrentSignalingUrl();
+    const oderId = resolvedOderId || user?.oderId || this.webrtc.peerId();
+    const displayName = user?.displayName || 'Anonymous';
+    const sameSignalServer = currentWsUrl === wsUrl;
+    const sameSignalRooms = this.getRoomsForSignalingUrl(this.includeRoom(savedRooms, room), wsUrl);
+    const backgroundRooms = sameSignalRooms.filter((candidate) => candidate.id !== room.id);
+    const joinCurrentEndpointRooms = () => {
+      this.webrtc.setCurrentServer(room.id);
+      this.webrtc.identify(oderId, displayName);
+
+      for (const backgroundRoom of backgroundRooms) {
+        if (!this.webrtc.hasJoinedServer(backgroundRoom.id)) {
+          this.webrtc.joinRoom(backgroundRoom.id, oderId);
+        }
+      }
+
+      if (this.webrtc.hasJoinedServer(room.id)) {
+        this.webrtc.switchServer(room.id, oderId);
+      } else {
+        this.webrtc.joinRoom(room.id, oderId);
+      }
+    };
+
+    if (this.webrtc.isConnected() && sameSignalServer) {
+      joinCurrentEndpointRooms();
+      return;
+    }
+
+    if (currentWsUrl && currentWsUrl !== wsUrl) {
+      this.webrtc.disconnectAll();
+    }
+
+    this.webrtc.connectToSignalingServer(wsUrl).subscribe({
+      next: (connected) => {
+        if (!connected)
+          return;
+
+        joinCurrentEndpointRooms();
+      },
+      error: () => {}
+    });
+  }
+
+  private syncSavedRoomConnections(user: User | null, currentRoom: Room | null, savedRooms: Room[]): void {
+    if (!user || savedRooms.length === 0) {
+      return;
+    }
+
+    const watchedRoomId = this.extractRoomIdFromUrl(this.router.url);
+    const currentWsUrl = this.webrtc.getCurrentSignalingUrl();
+    const targetRoom = (watchedRoomId
+      ? savedRooms.find((room) => room.id === watchedRoomId) ?? null
+      : null)
+      ?? (currentWsUrl ? this.findRoomBySignalingUrl(savedRooms, currentWsUrl) : null)
+      ?? currentRoom
+      ?? savedRooms[0]
+      ?? null;
+
+    if (!targetRoom) {
+      return;
+    }
+
+    this.connectToRoomSignaling(targetRoom, user, user.oderId || this.webrtc.peerId(), savedRooms);
+  }
+
+  private includeRoom(rooms: Room[], room: Room): Room[] {
+    return rooms.some((candidate) => candidate.id === room.id)
+      ? rooms
+      : [...rooms, room];
+  }
+
+  private getRoomsForSignalingUrl(rooms: Room[], wsUrl: string): Room[] {
+    const seenRoomIds = new Set<string>();
+    const matchingRooms: Room[] = [];
+
+    for (const room of rooms) {
+      if (seenRoomIds.has(room.id)) {
+        continue;
+      }
+
+      if (this.serverDirectory.getWebSocketUrl({
+        sourceId: room.sourceId,
+        sourceUrl: room.sourceUrl
+      }) !== wsUrl) {
+        continue;
+      }
+
+      seenRoomIds.add(room.id);
+      matchingRooms.push(room);
+    }
+
+    return matchingRooms;
+  }
+
+  private findRoomBySignalingUrl(rooms: Room[], wsUrl: string): Room | null {
+    return this.getRoomsForSignalingUrl(rooms, wsUrl)[0] ?? null;
+  }
+
+  private extractRoomIdFromUrl(url: string): string | null {
+    const roomMatch = url.match(ROOM_URL_PATTERN);
+
+    return roomMatch ? roomMatch[1] : null;
+  }
+
+  private getUserRoleForRoom(room: Room, currentUser: User, currentRoom: Room | null): User['role'] | null {
+    if (room.hostId === currentUser.id || room.hostId === currentUser.oderId)
+      return 'host';
+
+    if (currentRoom?.id === room.id && currentUser.role)
+      return currentUser.role;
+
+    return findRoomMember(room.members ?? [], currentUser.id)?.role
+      || findRoomMember(room.members ?? [], currentUser.oderId)?.role
+      || null;
+  }
+
   private getPersistedCurrentUserId(): string | null {
     return localStorage.getItem('metoyou_currentUserId');
   }

src/app/store/rooms/rooms.reducer.ts

@@ -45,6 +45,7 @@ function deduplicateRooms(rooms: Room[]): Room[] {
 function enrichRoom(room: Room): Room {
   return {
     ...room,
+    hasPassword: typeof room.hasPassword === 'boolean' ? room.hasPassword : !!room.password,
     channels: room.channels || defaultChannels(),
     members: pruneRoomMembers(room.members || [])
   };
@@ -81,6 +82,8 @@ export interface RoomsState {
   isConnecting: boolean;
   /** Whether the user is connected to a room. */
   isConnected: boolean;
+  /** Whether the current room is using locally cached data while reconnecting. */
+  isSignalServerReconnecting: boolean;
   /** Whether rooms are being loaded from local storage. */
   loading: boolean;
   /** Most recent error message, if any. */
@@ -97,6 +100,7 @@ export const initialState: RoomsState = {
   isSearching: false,
   isConnecting: false,
   isConnected: false,
+  isSignalServerReconnecting: false,
   loading: false,
   error: null,
   activeChannelId: 'general'
@@ -158,6 +162,7 @@ export const roomsReducer = createReducer(
       currentRoom: enriched,
       savedRooms: upsertRoom(state.savedRooms, enriched),
       isConnecting: false,
+      isSignalServerReconnecting: false,
       isConnected: true,
       activeChannelId: 'general'
     };
@@ -184,6 +189,7 @@ export const roomsReducer = createReducer(
       currentRoom: enriched,
       savedRooms: upsertRoom(state.savedRooms, enriched),
       isConnecting: false,
+      isSignalServerReconnecting: false,
       isConnected: true,
       activeChannelId: 'general'
     };
@@ -205,6 +211,7 @@ export const roomsReducer = createReducer(
     ...state,
     currentRoom: null,
     roomSettings: null,
+    isSignalServerReconnecting: false,
     isConnecting: false,
     isConnected: false
   })),
@@ -252,7 +259,13 @@ export const roomsReducer = createReducer(
       description: settings.description,
       topic: settings.topic,
       isPrivate: settings.isPrivate,
-      password: settings.password,
+      password: settings.password === '' ? undefined : (settings.password ?? baseRoom.password),
+      hasPassword:
+        typeof settings.hasPassword === 'boolean'
+          ? settings.hasPassword
+          : (typeof settings.password === 'string'
+            ? settings.password.trim().length > 0
+            : baseRoom.hasPassword),
       maxUsers: settings.maxUsers
     });
 
@@ -272,6 +285,7 @@ export const roomsReducer = createReducer(
   // Delete room
   on(RoomsActions.deleteRoomSuccess, (state, { roomId }) => ({
     ...state,
+    isSignalServerReconnecting: state.currentRoom?.id === roomId ? false : state.isSignalServerReconnecting,
     savedRooms: state.savedRooms.filter((room) => room.id !== roomId),
     currentRoom: state.currentRoom?.id === roomId ? null : state.currentRoom
   })),
@@ -279,6 +293,7 @@ export const roomsReducer = createReducer(
   // Forget room (local only)
   on(RoomsActions.forgetRoomSuccess, (state, { roomId }) => ({
     ...state,
+    isSignalServerReconnecting: state.currentRoom?.id === roomId ? false : state.isSignalServerReconnecting,
     savedRooms: state.savedRooms.filter((room) => room.id !== roomId),
     currentRoom: state.currentRoom?.id === roomId ? null : state.currentRoom
   })),
@@ -288,6 +303,7 @@ export const roomsReducer = createReducer(
     ...state,
     currentRoom: enrichRoom(room),
     savedRooms: upsertRoom(state.savedRooms, room),
+    isSignalServerReconnecting: false,
     isConnected: true
   })),
 
@@ -296,6 +312,7 @@ export const roomsReducer = createReducer(
     ...state,
     currentRoom: null,
     roomSettings: null,
+    isSignalServerReconnecting: false,
     isConnected: false
   })),
 
@@ -360,6 +377,11 @@ export const roomsReducer = createReducer(
     isConnecting
   })),
 
+  on(RoomsActions.setSignalServerReconnecting, (state, { isReconnecting }) => ({
+    ...state,
+    isSignalServerReconnecting: isReconnecting
+  })),
+
   // Channel management
   on(RoomsActions.selectChannel, (state, { channelId }) => ({
     ...state,

src/app/store/rooms/rooms.selectors.ts

@@ -26,6 +26,10 @@ export const selectIsConnected = createSelector(
   selectRoomsState,
   (state) => state.isConnected
 );
+export const selectIsSignalServerReconnecting = createSelector(
+  selectRoomsState,
+  (state) => state.isSignalServerReconnecting
+);
 export const selectRoomsError = createSelector(
   selectRoomsState,
   (state) => state.error

src/app/store/users/users.effects.ts

@@ -33,6 +33,7 @@ import {
 } from './users.selectors';
 import { selectCurrentRoom, selectSavedRooms } from '../rooms/rooms.selectors';
 import { DatabaseService } from '../../core/services/database.service';
+import { ServerDirectoryService } from '../../core/services/server-directory.service';
 import { WebRTCService } from '../../core/services/webrtc.service';
 import {
   BanEntry,
@@ -56,6 +57,7 @@ export class UsersEffects {
   private actions$ = inject(Actions);
   private store = inject(Store);
   private db = inject(DatabaseService);
+  private serverDirectory = inject(ServerDirectoryService);
   private webrtc = inject(WebRTCService);
 
   // Load current user from storage
@@ -162,24 +164,40 @@ export class UsersEffects {
 
         const nextMembers = removeRoomMember(room.members ?? [], userId, userId);
 
-        this.webrtc.broadcastMessage({
-          type: 'kick',
-          targetUserId: userId,
-          roomId: room.id,
-          kickedBy: currentUser.id
-        });
+        return this.serverDirectory.kickServerMember(
+          room.id,
+          {
+            actorUserId: currentUser.id,
+            actorRole: currentUser.role,
+            targetUserId: userId
+          },
+          this.toSourceSelector(room)
+        ).pipe(
+          catchError((error) => {
+            console.error('Failed to revoke server membership on kick:', error);
+            return of(void 0);
+          }),
+          mergeMap(() => {
+            this.webrtc.broadcastMessage({
+              type: 'kick',
+              targetUserId: userId,
+              roomId: room.id,
+              kickedBy: currentUser.id
+            });
 
-        return currentRoom?.id === room.id
-          ? [
-            RoomsActions.updateRoom({ roomId: room.id,
-              changes: { members: nextMembers } }),
-            UsersActions.kickUserSuccess({ userId,
-              roomId: room.id })
-          ]
-          : of(
-            RoomsActions.updateRoom({ roomId: room.id,
-              changes: { members: nextMembers } })
-          );
+            return currentRoom?.id === room.id
+              ? [
+                RoomsActions.updateRoom({ roomId: room.id,
+                  changes: { members: nextMembers } }),
+                UsersActions.kickUserSuccess({ userId,
+                  roomId: room.id })
+              ]
+              : of(
+                RoomsActions.updateRoom({ roomId: room.id,
+                  changes: { members: nextMembers } })
+              );
+          })
+        );
       })
     )
   );
@@ -228,32 +246,52 @@ export class UsersEffects {
           timestamp: Date.now()
         };
 
-        return from(this.db.saveBan(ban)).pipe(
-          tap(() => {
-            this.webrtc.broadcastMessage({
-              type: 'ban',
-              targetUserId: userId,
-              roomId: room.id,
-              bannedBy: currentUser.id,
-              ban
-            });
+        return this.serverDirectory.banServerMember(
+          room.id,
+          {
+            actorUserId: currentUser.id,
+            actorRole: currentUser.role,
+            targetUserId: userId,
+            banId: ban.oderId,
+            displayName: ban.displayName,
+            reason,
+            expiresAt
+          },
+          this.toSourceSelector(room)
+        ).pipe(
+          catchError((error) => {
+            console.error('Failed to persist server ban:', error);
+            return of(void 0);
           }),
-          mergeMap(() => {
-            const actions: (ReturnType<typeof RoomsActions.updateRoom>
-              | ReturnType<typeof UsersActions.banUserSuccess>)[] = [
-              RoomsActions.updateRoom({ roomId: room.id,
-                changes: { members: nextMembers } })
-            ];
+          switchMap(() =>
+            from(this.db.saveBan(ban)).pipe(
+              tap(() => {
+                this.webrtc.broadcastMessage({
+                  type: 'ban',
+                  targetUserId: userId,
+                  roomId: room.id,
+                  bannedBy: currentUser.id,
+                  ban
+                });
+              }),
+              mergeMap(() => {
+                const actions: (ReturnType<typeof RoomsActions.updateRoom>
+                  | ReturnType<typeof UsersActions.banUserSuccess>)[] = [
+                  RoomsActions.updateRoom({ roomId: room.id,
+                    changes: { members: nextMembers } })
+                ];
 
-            if (currentRoom?.id === room.id) {
-              actions.push(UsersActions.banUserSuccess({ userId,
-                roomId: room.id,
-                ban }));
-            }
+                if (currentRoom?.id === room.id) {
+                  actions.push(UsersActions.banUserSuccess({ userId,
+                    roomId: room.id,
+                    ban }));
+                }
 
-            return actions;
-          }),
-          catchError(() => EMPTY)
+                return actions;
+              }),
+              catchError(() => EMPTY)
+            )
+          )
         );
       })
     )
@@ -279,16 +317,32 @@ export class UsersEffects {
         if (!currentUser || !room || !this.canModerateRoom(room, currentUser, currentRoom))
           return EMPTY;
 
-        return from(this.db.removeBan(oderId)).pipe(
-          tap(() => {
-            this.webrtc.broadcastMessage({
-              type: 'unban',
-              roomId: room.id,
-              banOderId: oderId
-            });
+        return this.serverDirectory.unbanServerMember(
+          room.id,
+          {
+            actorUserId: currentUser.id,
+            actorRole: currentUser.role,
+            banId: oderId
+          },
+          this.toSourceSelector(room)
+        ).pipe(
+          catchError((error) => {
+            console.error('Failed to remove server ban:', error);
+            return of(void 0);
           }),
-          map(() => UsersActions.unbanUserSuccess({ oderId })),
-          catchError(() => EMPTY)
+          switchMap(() =>
+            from(this.db.removeBan(oderId)).pipe(
+              tap(() => {
+                this.webrtc.broadcastMessage({
+                  type: 'unban',
+                  roomId: room.id,
+                  banOderId: oderId
+                });
+              }),
+              map(() => UsersActions.unbanUserSuccess({ oderId })),
+              catchError(() => EMPTY)
+            )
+          )
         );
       })
     )
@@ -394,6 +448,13 @@ export class UsersEffects {
     return savedRooms.find((room) => room.id === roomId) ?? null;
   }
 
+  private toSourceSelector(room: Room): { sourceId?: string; sourceUrl?: string } {
+    return {
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    };
+  }
+
   private canModerateRoom(room: Room, currentUser: User, currentRoom: Room | null): boolean {
     const role = this.getCurrentUserRoleForRoom(room, currentUser, currentRoom);
 

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  defaultServerUrl: 'https://tojusignal.azaaxin.com'
+  defaultServerUrl: 'https://signal.toju.app'
 };

tools/deploy-web-apps.ps1

@@ -0,0 +1,105 @@
+[CmdletBinding()]
+param(
+  [string]$RepoRoot = (Split-Path -Parent $PSScriptRoot),
+  [string]$IisRoot = 'C:\inetpub\wwwroot',
+  [int]$WebsitePort = 4341,
+  [int]$AppPort = 4492
+)
+
+Set-StrictMode -Version Latest
+$ErrorActionPreference = 'Stop'
+
+try {
+  Import-Module WebAdministration -ErrorAction Stop
+} catch {
+  throw 'The IIS WebAdministration module is required on the Windows runner.'
+}
+
+function Invoke-RoboCopyMirror {
+  param(
+    [Parameter(Mandatory = $true)]
+    [string]$Source,
+
+    [Parameter(Mandatory = $true)]
+    [string]$Destination
+  )
+
+  if (-not (Test-Path -LiteralPath $Source)) {
+    throw "Build output not found: $Source"
+  }
+
+  New-Item -ItemType Directory -Path $Destination -Force | Out-Null
+  robocopy $Source $Destination /MIR /NFL /NDL /NJH /NJS /NP | Out-Null
+
+  if ($LASTEXITCODE -gt 7) {
+    throw "robocopy failed from $Source to $Destination with exit code $LASTEXITCODE"
+  }
+
+  $global:LASTEXITCODE = 0
+}
+
+function Ensure-AppPool {
+  param(
+    [Parameter(Mandatory = $true)]
+    [string]$Name
+  )
+
+  $appPoolPath = "IIS:\AppPools\$Name"
+
+  if (-not (Test-Path -LiteralPath $appPoolPath)) {
+    New-WebAppPool -Name $Name | Out-Null
+  }
+
+  Set-ItemProperty $appPoolPath -Name managedRuntimeVersion -Value ''
+}
+
+function Publish-IisSite {
+  param(
+    [Parameter(Mandatory = $true)]
+    [string]$SiteName,
+
+    [Parameter(Mandatory = $true)]
+    [string]$SourcePath,
+
+    [Parameter(Mandatory = $true)]
+    [string]$DestinationPath,
+
+    [Parameter(Mandatory = $true)]
+    [int]$Port
+  )
+
+  Ensure-AppPool -Name $SiteName
+  Invoke-RoboCopyMirror -Source $SourcePath -Destination $DestinationPath
+
+  $existingSite = Get-Website -Name $SiteName -ErrorAction SilentlyContinue
+  if ($null -ne $existingSite) {
+    Stop-Website -Name $SiteName -ErrorAction SilentlyContinue
+    Remove-Website -Name $SiteName
+  }
+
+  New-Website -Name $SiteName -PhysicalPath $DestinationPath -Port $Port -ApplicationPool $SiteName | Out-Null
+  Start-Website -Name $SiteName
+
+  Write-Host "Deployed $SiteName to $DestinationPath on port $Port."
+}
+
+$deployments = @(
+  @{
+    SiteName = 'toju-website'
+    SourcePath = (Join-Path $RepoRoot 'website\dist\toju-website\browser')
+    DestinationPath = (Join-Path $IisRoot 'toju-website')
+    Port = $WebsitePort
+  },
+  @{
+    SiteName = 'toju-app'
+    SourcePath = (Join-Path $RepoRoot 'dist\client\browser')
+    DestinationPath = (Join-Path $IisRoot 'toju-app')
+    Port = $AppPort
+  }
+)
+
+foreach ($deployment in $deployments) {
+  Publish-IisSite @deployment
+}
+
+$global:LASTEXITCODE = 0

tools/launch-electron.js

@@ -0,0 +1,107 @@
+const { spawn } = require('child_process');
+
+const DEV_SINGLE_INSTANCE_EXIT_CODE = 23;
+const DEV_SINGLE_INSTANCE_EXIT_CODE_ENV = 'METOYOU_SINGLE_INSTANCE_EXIT_CODE';
+
+function isWaylandSession(env) {
+  const sessionType = String(env.XDG_SESSION_TYPE || '').trim().toLowerCase();
+
+  if (sessionType === 'wayland') {
+    return true;
+  }
+
+  return String(env.WAYLAND_DISPLAY || '').trim().length > 0;
+}
+
+function hasSwitch(args, switchName) {
+  const normalizedSwitch = `--${switchName}`;
+
+  return args.some((arg) => arg === normalizedSwitch || arg.startsWith(`${normalizedSwitch}=`));
+}
+
+function resolveElectronBinary() {
+  const electronModule = require('electron');
+
+  if (typeof electronModule === 'string') {
+    return electronModule;
+  }
+
+  if (electronModule && typeof electronModule.default === 'string') {
+    return electronModule.default;
+  }
+
+  throw new Error('Could not resolve the Electron executable.');
+}
+
+function buildElectronArgs(argv) {
+  const args = [...argv];
+
+  if (
+    process.platform === 'linux'
+    && isWaylandSession(process.env)
+    && !hasSwitch(args, 'ozone-platform')
+  ) {
+    args.push('--ozone-platform=wayland');
+  }
+
+  return args;
+}
+
+function isDevelopmentLaunch(env) {
+  return String(env.NODE_ENV || '').trim().toLowerCase() === 'development';
+}
+
+function buildChildEnv(env) {
+  const nextEnv = { ...env };
+
+  if (isDevelopmentLaunch(env)) {
+    nextEnv[DEV_SINGLE_INSTANCE_EXIT_CODE_ENV] = String(DEV_SINGLE_INSTANCE_EXIT_CODE);
+  }
+
+  return nextEnv;
+}
+
+function keepProcessAliveForExistingInstance() {
+  console.log(
+    'Electron is already running; keeping the dev services alive and routing links to the open window.'
+  );
+
+  const intervalId = setInterval(() => {}, 60_000);
+  const shutdown = () => {
+    clearInterval(intervalId);
+    process.exit(0);
+  };
+
+  process.once('SIGINT', shutdown);
+  process.once('SIGTERM', shutdown);
+}
+
+function main() {
+  const electronBinary = resolveElectronBinary();
+  const args = buildElectronArgs(process.argv.slice(2));
+  const child = spawn(electronBinary, args, {
+    env: buildChildEnv(process.env),
+    stdio: 'inherit'
+  });
+
+  child.on('error', (error) => {
+    console.error(error instanceof Error ? error.message : String(error));
+    process.exit(1);
+  });
+
+  child.on('exit', (code, signal) => {
+    if (code === DEV_SINGLE_INSTANCE_EXIT_CODE) {
+      keepProcessAliveForExistingInstance();
+      return;
+    }
+
+    if (signal) {
+      process.kill(process.pid, signal);
+      return;
+    }
+
+    process.exit(code ?? 0);
+  });
+}
+
+main();

website/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

website/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

website/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

website/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

website/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

website/README.md

@@ -0,0 +1,59 @@
+# TojuWebsite
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.21.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

website/angular.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "toju-website": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:class": {
+          "skipTests": true
+        },
+        "@schematics/angular:directive": {
+          "skipTests": true
+        },
+        "@schematics/angular:guard": {
+          "skipTests": true
+        },
+        "@schematics/angular:interceptor": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
+        },
+        "@schematics/angular:resolver": {
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/toju-website",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/images",
+                "output": "/images"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "security": {
+              "allowedHosts": [
+                "toju.app",
+                "www.toju.app",
+                "localhost",
+                "127.0.0.1"
+              ]
+            },
+            "prerender": true,
+            "ssr": {
+              "entry": "src/server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1MB",
+                  "maximumError": "2MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "proxyConfig": "proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "toju-website:build:production"
+            },
+            "development": {
+              "buildTarget": "toju-website:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/images",
+                "output": "/images/"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}