test: Add playwright main usage test

Youtube and Website metadata embeds

.agents/skills/caveman/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: caveman
+description: >
+  Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman
+  while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra,
+  wenyan-lite, wenyan-full, wenyan-ultra.
+  Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens",
+  "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
+---
+
+Respond terse like smart caveman. All technical substance stay. Only fluff die.
+
+Default: **full**. Switch: `/caveman lite|full|ultra`.
+
+## Rules
+
+Drop: articles (a/an/the), filler (just/really/basically/actually/simply), pleasantries (sure/certainly/of course/happy to), hedging. Fragments OK. Short synonyms (big not extensive, fix not "implement a solution for"). Technical terms exact. Code blocks unchanged. Errors quoted exact.
+
+Pattern: `[thing] [action] [reason]. [next step].`
+
+Not: "Sure! I'd be happy to help you with that. The issue you're experiencing is likely caused by..."
+Yes: "Bug in auth middleware. Token expiry check use `<` not `<=`. Fix:"
+
+## Intensity
+
+| Level | What change |
+|-------|------------|
+| **lite** | No filler/hedging. Keep articles + full sentences. Professional but tight |
+| **full** | Drop articles, fragments OK, short synonyms. Classic caveman |
+| **ultra** | Abbreviate (DB/auth/config/req/res/fn/impl), strip conjunctions, arrows for causality (X → Y), one word when one word enough |
+| **wenyan-lite** | Semi-classical. Drop filler/hedging but keep grammar structure, classical register |
+| **wenyan-full** | Maximum classical terseness. Fully 文言文. 80-90% character reduction. Classical sentence patterns, verbs precede objects, subjects often omitted, classical particles (之/乃/為/其) |
+| **wenyan-ultra** | Extreme abbreviation while keeping classical Chinese feel. Maximum compression, ultra terse |
+
+Example — "Why React component re-render?"
+- lite: "Your component re-renders because you create a new object reference each render. Wrap it in `useMemo`."
+- full: "New object ref each render. Inline object prop = new ref = re-render. Wrap in `useMemo`."
+- ultra: "Inline obj prop → new ref → re-render. `useMemo`."
+- wenyan-lite: "組件頻重繪，以每繪新生對象參照故。以 useMemo 包之。"
+- wenyan-full: "物出新參照，致重繪。useMemo .Wrap之。"
+- wenyan-ultra: "新參照→重繪。useMemo Wrap。"
+
+Example — "Explain database connection pooling."
+- lite: "Connection pooling reuses open connections instead of creating new ones per request. Avoids repeated handshake overhead."
+- full: "Pool reuse open DB connections. No new connection per request. Skip handshake overhead."
+- ultra: "Pool = reuse DB conn. Skip handshake → fast under load."
+- wenyan-full: "池reuse open connection。不每req新開。skip handshake overhead。"
+- wenyan-ultra: "池reuse conn。skip handshake → fast。"
+
+## Auto-Clarity
+
+Drop caveman for: security warnings, irreversible action confirmations, multi-step sequences where fragment order risks misread, user confused. Resume caveman after clear part done.
+
+Example — destructive op:
+> **Warning:** This will permanently delete all rows in the `users` table and cannot be undone.
+> ```sql
+> DROP TABLE users;
+> ```
+> Caveman resume. Verify backup exist first.
+
+## Boundaries
+
+Code/commits/PRs: write normal. "stop caveman" or "normal mode": revert. Level persist until changed or session end.

.agents/skills/playwright-e2e/SKILL.md

@@ -0,0 +1,283 @@
+---
+name: playwright-e2e
+description: >
+  Write and run Playwright E2E tests for MetoYou (Angular chat + WebRTC voice/video app).
+  Handles multi-browser-context WebRTC voice testing, fake media devices, signaling validation,
+  audio channel verification, and UI state assertions. Use when: "E2E test", "Playwright",
+  "end-to-end", "browser test", "test voice", "test call", "test WebRTC", "test chat",
+  "test login", "test video", "test screen share", "integration test", "multi-client test".
+---
+
+# Playwright E2E Testing — MetoYou
+
+## Step 1 — Check Project Setup
+
+Before writing any test, verify the Playwright infrastructure exists:
+
+```
+e2e/                          # Test root (lives at repo root)
+├── playwright.config.ts      # Config
+├── fixtures/                 # Custom fixtures (multi-client, auth, etc.)
+├── pages/                    # Page Object Models
+├── tests/                    # Test specs
+│   ├── auth/
+│   ├── chat/
+│   ├── voice/
+│   └── settings/
+└── helpers/                  # Shared utilities (WebRTC introspection, etc.)
+```
+
+If missing, scaffold it. See [reference/project-setup.md](./reference/project-setup.md).
+
+## Step 2 — Identify Test Category
+
+| Request                         | Category         | Key Patterns                                   |
+| ------------------------------- | ---------------- | ---------------------------------------------- |
+| Login, register, invite         | **Auth**         | Single browser context, form interaction       |
+| Send message, rooms, chat UI    | **Chat**         | May need 2 clients for real-time sync          |
+| Voice call, mute, deafen, audio | **Voice/WebRTC** | Multi-client, fake media, WebRTC introspection |
+| Camera, video tiles             | **Video**        | Multi-client, fake video, stream validation    |
+| Screen share                    | **Screen Share** | Multi-client, display media mocking            |
+| Settings, themes                | **Settings**     | Single client, preference persistence          |
+
+For **Voice/WebRTC** and **Multi-client** tests, read [reference/multi-client-webrtc.md](./reference/multi-client-webrtc.md) immediately.
+
+## Step 3 — Core Conventions
+
+### Config Essentials
+
+```typescript
+// e2e/playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60_000, // WebRTC needs longer timeouts
+  expect: { timeout: 10_000 },
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Sequential — shared server state
+  reporter: [['html'], ['list']],
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+    permissions: ['microphone', 'camera']
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            '--use-fake-device-for-media-stream',
+            '--use-fake-ui-for-media-stream'
+            // Feed a specific audio file as fake mic input:
+            // '--use-file-for-fake-audio-capture=/path/to/audio.wav',
+          ]
+        }
+      }
+    }
+  ],
+  webServer: [
+    {
+      command: 'cd server && npm run dev',
+      port: 3001,
+      reuseExistingServer: !process.env.CI,
+      timeout: 30_000
+    },
+    {
+      command: 'cd toju-app && npx ng serve',
+      port: 4200,
+      reuseExistingServer: !process.env.CI,
+      timeout: 60_000
+    }
+  ]
+});
+```
+
+### Selector Strategy
+
+Use in this order — stop at the first that works:
+
+1. `getByRole('button', { name: 'Mute' })` — accessible, resilient
+2. `getByLabel('Email')` — form fields
+3. `getByPlaceholder('Enter email')` — when label missing
+4. `getByText('Welcome')` — visible text
+5. `getByTestId('voice-controls')` — last resort, needs `data-testid`
+6. `locator('app-voice-controls')` — Angular component selectors (acceptable in this project)
+
+Angular component selectors (`app-*`) are stable in this project and acceptable as locators when semantic selectors are not feasible.
+
+### Assertions — Always Web-First
+
+```typescript
+// ✅ Auto-retries until timeout
+await expect(page.getByRole('heading')).toBeVisible();
+await expect(page.getByRole('alert')).toHaveText('Saved');
+await expect(page).toHaveURL(/\/room\//);
+
+// ❌ No auto-retry — races with DOM
+const text = await page.textContent('.msg');
+expect(text).toBe('Saved');
+```
+
+### Anti-Patterns
+
+| ❌ Don't                       | ✅ Do                                               | Why                       |
+| ------------------------------ | --------------------------------------------------- | ------------------------- |
+| `page.waitForTimeout(3000)`    | `await expect(locator).toBeVisible()`               | Hard waits are flaky      |
+| `expect(await el.isVisible())` | `await expect(el).toBeVisible()`                    | No auto-retry             |
+| `page.$('.btn')`               | `page.getByRole('button')`                          | Fragile selector          |
+| `page.click('.submit')`        | `page.getByRole('button', {name:'Submit'}).click()` | Not accessible            |
+| Shared state between tests     | `test.beforeEach` for setup                         | Tests must be independent |
+| `try/catch` around assertions  | Let Playwright handle retries                       | Swallows real failures    |
+
+### Test Structure
+
+```typescript
+import { test, expect } from '../fixtures/base';
+
+test.describe('Feature Name', () => {
+  test('should do specific thing', async ({ page }) => {
+    await test.step('Navigate to page', async () => {
+      await page.goto('/login');
+    });
+
+    await test.step('Fill form', async () => {
+      await page.getByLabel('Email').fill('test@example.com');
+    });
+
+    await test.step('Verify result', async () => {
+      await expect(page).toHaveURL(/\/search/);
+    });
+  });
+});
+```
+
+Use `test.step()` for readability in complex flows.
+
+## Step 4 — Page Object Models
+
+Use POM for any test file with more than 2 tests. Match the app's route structure:
+
+```typescript
+// e2e/pages/login.page.ts
+import { type Page, type Locator } from '@playwright/test';
+
+export class LoginPage {
+  readonly emailInput: Locator;
+  readonly passwordInput: Locator;
+  readonly submitButton: Locator;
+
+  constructor(private page: Page) {
+    this.emailInput = page.getByLabel('Email');
+    this.passwordInput = page.getByLabel('Password');
+    this.submitButton = page.getByRole('button', { name: /sign in|log in/i });
+  }
+
+  async goto() {
+    await this.page.goto('/login');
+  }
+
+  async login(email: string, password: string) {
+    await this.emailInput.fill(email);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}
+```
+
+**Key pages to model (match `app.routes.ts`):**
+
+| Route               | Page Object        | Component               |
+| ------------------- | ------------------ | ----------------------- |
+| `/login`            | `LoginPage`        | `LoginComponent`        |
+| `/register`         | `RegisterPage`     | `RegisterComponent`     |
+| `/search`           | `ServerSearchPage` | `ServerSearchComponent` |
+| `/room/:roomId`     | `ChatRoomPage`     | `ChatRoomComponent`     |
+| `/settings`         | `SettingsPage`     | `SettingsComponent`     |
+| `/invite/:inviteId` | `InvitePage`       | `InviteComponent`       |
+
+## Step 5 — MetoYou App Architecture Context
+
+The agent writing tests MUST understand these domain boundaries:
+
+### Voice/WebRTC Stack
+
+| Layer                   | What It Does                                          | Test Relevance                   |
+| ----------------------- | ----------------------------------------------------- | -------------------------------- |
+| `VoiceConnectionFacade` | High-level voice API (connect/disconnect/mute/deafen) | State signals to assert against  |
+| `VoiceSessionFacade`    | Session lifecycle, workspace layout                   | UI mode changes                  |
+| `VoiceActivityService`  | Speaking detection (RMS threshold 0.015)              | `isSpeaking()` signal validation |
+| `VoicePlaybackService`  | Per-peer GainNode (0–200% volume)                     | Volume level assertions          |
+| `PeerConnectionManager` | RTCPeerConnection lifecycle                           | Connection state introspection   |
+| `MediaManager`          | getUserMedia, mute, gain chain                        | Track state validation           |
+| `SignalingManager`      | WebSocket per signal URL                              | Connection establishment         |
+
+### Voice UI Components
+
+| Component                           | Selector                          | Contains                                    |
+| ----------------------------------- | --------------------------------- | ------------------------------------------- |
+| `VoiceWorkspaceComponent`           | `app-voice-workspace`             | Stream tiles, layout                        |
+| `VoiceControlsComponent`            | `app-voice-controls`              | Mute, camera, screen share, hang-up buttons |
+| `FloatingVoiceControlsComponent`    | `app-floating-voice-controls`     | Floating variant of controls                |
+| `VoiceWorkspaceStreamTileComponent` | `app-voice-workspace-stream-tile` | Per-peer audio/video tile                   |
+
+### Voice UI Icons (Lucide)
+
+| Icon                                 | Meaning              |
+| ------------------------------------ | -------------------- |
+| `lucideMic` / `lucideMicOff`         | Mute toggle          |
+| `lucideVideo` / `lucideVideoOff`     | Camera toggle        |
+| `lucideMonitor` / `lucideMonitorOff` | Screen share toggle  |
+| `lucidePhoneOff`                     | Hang up / disconnect |
+| `lucideHeadphones`                   | Deafen state         |
+| `lucideVolume2` / `lucideVolumeX`    | Volume indicator     |
+
+### Server & Signaling
+
+- **Signaling server**: Port `3001` (HTTP by default, HTTPS if `SSL=true`)
+- **Angular dev server**: Port `4200`
+- **WebSocket signaling**: Upgrades on same port as server
+- **Protocol**: `identify` → `server_users` → SDP offer/answer → ICE candidates
+- **PING/PONG**: Every 30s, 45s timeout
+
+## Step 6 — Validation Workflow
+
+After generating any test:
+
+```
+1. npx playwright install --with-deps chromium    # First time only
+2. npx playwright test --project=chromium          # Run tests
+3. npx playwright test --ui                        # Interactive debug
+4. npx playwright show-report                      # HTML report
+```
+
+If the test involves WebRTC, always verify:
+
+- Fake media flags are set in config
+- Timeouts are sufficient (60s+ for connection establishment)
+- `workers: 1` if tests share server state
+- Browser permissions granted for microphone/camera
+
+## Quick Reference — Commands
+
+```bash
+npx playwright test                             # Run all
+npx playwright test --ui                        # Interactive UI
+npx playwright test --debug                     # Step-through debugger
+npx playwright test tests/voice/               # Voice tests only
+npx playwright test --project=chromium          # Single browser
+npx playwright test -g "voice connects"         # By test name
+npx playwright show-report                      # HTML report
+npx playwright codegen http://localhost:4200    # Record test
+```
+
+## Reference Files
+
+| File                                                                   | When to Read                                                       |
+| ---------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| [reference/multi-client-webrtc.md](./reference/multi-client-webrtc.md) | Voice/video/WebRTC tests, multi-browser contexts, audio validation |
+| [reference/project-setup.md](./reference/project-setup.md)             | First-time scaffold, dependency installation, config creation      |

.agents/skills/playwright-e2e/reference/multi-client-webrtc.md

@@ -0,0 +1,536 @@
+# Multi-Client WebRTC Testing
+
+This reference covers the hardest E2E testing scenario in MetoYou: verifying that voice/video connections actually work between multiple clients.
+
+## Core Concept: Multiple Browser Contexts
+
+Playwright can create multiple **independent** browser contexts within a single test. Each context is an isolated session (separate cookies, storage, WebRTC state). This is how we simulate multiple users.
+
+```typescript
+import { test, expect, chromium } from '@playwright/test';
+
+test('two users can voice chat', async () => {
+  const browser = await chromium.launch({
+    args: [
+      '--use-fake-device-for-media-stream',
+      '--use-fake-ui-for-media-stream',
+      '--use-file-for-fake-audio-capture=e2e/fixtures/test-tone-440hz.wav',
+    ],
+  });
+
+  const contextA = await browser.newContext({
+    permissions: ['microphone', 'camera'],
+  });
+  const contextB = await browser.newContext({
+    permissions: ['microphone', 'camera'],
+  });
+
+  const alice = await contextA.newPage();
+  const bob = await contextB.newPage();
+
+  // ... test logic with alice and bob ...
+
+  await contextA.close();
+  await contextB.close();
+  await browser.close();
+});
+```
+
+## Custom Fixture: Multi-Client
+
+Create a reusable fixture for multi-client tests:
+
+```typescript
+// e2e/fixtures/multi-client.ts
+import { test as base, chromium, type Page, type BrowserContext, type Browser } from '@playwright/test';
+
+type Client = {
+  page: Page;
+  context: BrowserContext;
+};
+
+type MultiClientFixture = {
+  createClient: () => Promise<Client>;
+  browser: Browser;
+};
+
+export const test = base.extend<MultiClientFixture>({
+  browser: async ({}, use) => {
+    const browser = await chromium.launch({
+      args: [
+        '--use-fake-device-for-media-stream',
+        '--use-fake-ui-for-media-stream',
+      ],
+    });
+    await use(browser);
+    await browser.close();
+  },
+
+  createClient: async ({ browser }, use) => {
+    const clients: Client[] = [];
+
+    const factory = async (): Promise<Client> => {
+      const context = await browser.newContext({
+        permissions: ['microphone', 'camera'],
+        baseURL: 'http://localhost:4200',
+      });
+      const page = await context.newPage();
+      clients.push({ page, context });
+      return { page, context };
+    };
+
+    await use(factory);
+
+    // Cleanup
+    for (const client of clients) {
+      await client.context.close();
+    }
+  },
+});
+
+export { expect } from '@playwright/test';
+```
+
+**Usage:**
+
+```typescript
+import { test, expect } from '../fixtures/multi-client';
+
+test('voice call connects between two users', async ({ createClient }) => {
+  const alice = await createClient();
+  const bob = await createClient();
+
+  // Login both users
+  await alice.page.goto('/login');
+  await bob.page.goto('/login');
+  // ... login flows ...
+});
+```
+
+## Fake Media Devices
+
+Chromium's fake device flags are essential for headless WebRTC testing:
+
+| Flag | Purpose |
+|------|---------|
+| `--use-fake-device-for-media-stream` | Provides fake mic/camera devices (no real hardware needed) |
+| `--use-fake-ui-for-media-stream` | Auto-grants device permission prompts |
+| `--use-file-for-fake-audio-capture=<path>` | Feeds a WAV/WebM file as fake mic input |
+| `--use-file-for-fake-video-capture=<path>` | Feeds a Y4M/MJPEG file as fake video input |
+
+### Test Audio File
+
+Create a 440Hz sine wave test tone for audio verification:
+
+```bash
+# Generate a 5-second 440Hz mono WAV test tone
+ffmpeg -f lavfi -i "sine=frequency=440:duration=5" -ar 48000 -ac 1 e2e/fixtures/test-tone-440hz.wav
+```
+
+Or use Playwright's built-in fake device which generates a test pattern (beep) automatically when `--use-fake-device-for-media-stream` is set without specifying a file.
+
+## WebRTC Connection Introspection
+
+### Checking RTCPeerConnection State
+
+Inject JavaScript to inspect WebRTC internals via `page.evaluate()`:
+
+```typescript
+// e2e/helpers/webrtc-helpers.ts
+
+/**
+ * Get all RTCPeerConnection instances and their states.
+ * Requires the app to expose connections (or use a monkey-patch approach).
+ */
+export async function getPeerConnectionStates(page: Page): Promise<Array<{
+  connectionState: string;
+  iceConnectionState: string;
+  signalingState: string;
+}>> {
+  return page.evaluate(() => {
+    // Approach 1: Use chrome://webrtc-internals equivalent
+    // Approach 2: Monkey-patch RTCPeerConnection (install before app loads)
+    // Approach 3: Expose from app (preferred for this project)
+
+    // MetoYou exposes via Angular — access the injector
+    const appRef = (window as any).ng?.getComponent(document.querySelector('app-root'));
+    // This needs adaptation based on actual exposure method
+
+    // Fallback: Use performance.getEntriesByType or WebRTC stats
+    return [];
+  });
+}
+
+/**
+ * Wait for at least one peer connection to reach 'connected' state.
+ */
+export async function waitForPeerConnected(page: Page, timeout = 30_000): Promise<void> {
+  await page.waitForFunction(() => {
+    // Check if any RTCPeerConnection reached 'connected'
+    return (window as any).__rtcConnections?.some(
+      (pc: RTCPeerConnection) => pc.connectionState === 'connected'
+    ) ?? false;
+  }, { timeout });
+}
+
+/**
+ * Get WebRTC stats for audio tracks (inbound/outbound).
+ */
+export async function getAudioStats(page: Page): Promise<{
+  outbound: { bytesSent: number; packetsSent: number } | null;
+  inbound: { bytesReceived: number; packetsReceived: number } | null;
+}> {
+  return page.evaluate(async () => {
+    const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+    if (!connections?.length) return { outbound: null, inbound: null };
+
+    const pc = connections[0];
+    const stats = await pc.getStats();
+
+    let outbound: any = null;
+    let inbound: any = null;
+
+    stats.forEach((report) => {
+      if (report.type === 'outbound-rtp' && report.kind === 'audio') {
+        outbound = { bytesSent: report.bytesSent, packetsSent: report.packetsSent };
+      }
+      if (report.type === 'inbound-rtp' && report.kind === 'audio') {
+        inbound = { bytesReceived: report.bytesReceived, packetsReceived: report.packetsReceived };
+      }
+    });
+
+    return { outbound, inbound };
+  });
+}
+```
+
+### RTCPeerConnection Monkey-Patch
+
+To track all peer connections created by the app, inject a monkey-patch **before** navigation:
+
+```typescript
+/**
+ * Install RTCPeerConnection tracking on a page BEFORE navigating.
+ * Call this immediately after page creation, before any goto().
+ */
+export async function installWebRTCTracking(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const connections: RTCPeerConnection[] = [];
+    (window as any).__rtcConnections = connections;
+
+    const OriginalRTCPeerConnection = window.RTCPeerConnection;
+    (window as any).RTCPeerConnection = function (...args: any[]) {
+      const pc = new OriginalRTCPeerConnection(...args);
+      connections.push(pc);
+
+      pc.addEventListener('connectionstatechange', () => {
+        (window as any).__lastRtcState = pc.connectionState;
+      });
+
+      // Track remote streams
+      pc.addEventListener('track', (event) => {
+        if (!((window as any).__rtcRemoteTracks)) {
+          (window as any).__rtcRemoteTracks = [];
+        }
+        (window as any).__rtcRemoteTracks.push({
+          kind: event.track.kind,
+          id: event.track.id,
+          readyState: event.track.readyState,
+        });
+      });
+
+      return pc;
+    } as any;
+
+    // Preserve prototype chain
+    (window as any).RTCPeerConnection.prototype = OriginalRTCPeerConnection.prototype;
+  });
+}
+```
+
+## Voice Call Test Pattern — Full Example
+
+This is the canonical pattern for testing that voice actually connects between two clients:
+
+```typescript
+import { test, expect } from '../fixtures/multi-client';
+import { installWebRTCTracking, getAudioStats } from '../helpers/webrtc-helpers';
+
+test.describe('Voice Call', () => {
+  test('two users connect voice and exchange audio', async ({ createClient }) => {
+    const alice = await createClient();
+    const bob = await createClient();
+
+    // Install WebRTC tracking BEFORE navigation
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    await test.step('Both users log in', async () => {
+      // Login Alice
+      await alice.page.goto('/login');
+      await alice.page.getByLabel('Email').fill('alice@test.com');
+      await alice.page.getByLabel('Password').fill('password123');
+      await alice.page.getByRole('button', { name: /sign in/i }).click();
+      await expect(alice.page).toHaveURL(/\/search/);
+
+      // Login Bob
+      await bob.page.goto('/login');
+      await bob.page.getByLabel('Email').fill('bob@test.com');
+      await bob.page.getByLabel('Password').fill('password123');
+      await bob.page.getByRole('button', { name: /sign in/i }).click();
+      await expect(bob.page).toHaveURL(/\/search/);
+    });
+
+    await test.step('Both users join the same room', async () => {
+      // Navigate to a shared room (adapt URL to actual room ID)
+      const roomUrl = '/room/test-room-id';
+      await alice.page.goto(roomUrl);
+      await bob.page.goto(roomUrl);
+
+      // Verify both are in the room
+      await expect(alice.page.locator('app-chat-room')).toBeVisible();
+      await expect(bob.page.locator('app-chat-room')).toBeVisible();
+    });
+
+    await test.step('Alice starts voice', async () => {
+      // Click the voice/call join button (adapt selector to actual UI)
+      await alice.page.getByRole('button', { name: /join voice|connect/i }).click();
+
+      // Voice workspace should appear
+      await expect(alice.page.locator('app-voice-workspace')).toBeVisible();
+
+      // Voice controls should be visible
+      await expect(alice.page.locator('app-voice-controls')).toBeVisible();
+    });
+
+    await test.step('Bob joins voice', async () => {
+      await bob.page.getByRole('button', { name: /join voice|connect/i }).click();
+      await expect(bob.page.locator('app-voice-workspace')).toBeVisible();
+    });
+
+    await test.step('WebRTC connection establishes', async () => {
+      // Wait for peer connection to reach 'connected' on both sides
+      await alice.page.waitForFunction(
+        () => (window as any).__rtcConnections?.some(
+          (pc: any) => pc.connectionState === 'connected'
+        ),
+        { timeout: 30_000 }
+      );
+      await bob.page.waitForFunction(
+        () => (window as any).__rtcConnections?.some(
+          (pc: any) => pc.connectionState === 'connected'
+        ),
+        { timeout: 30_000 }
+      );
+    });
+
+    await test.step('Audio is flowing in both directions', async () => {
+      // Wait a moment for audio stats to accumulate
+      await alice.page.waitForTimeout(3_000); // Acceptable here: waiting for stats accumulation
+
+      // Check Alice is sending audio
+      const aliceStats = await getAudioStats(alice.page);
+      expect(aliceStats.outbound).not.toBeNull();
+      expect(aliceStats.outbound!.bytesSent).toBeGreaterThan(0);
+      expect(aliceStats.outbound!.packetsSent).toBeGreaterThan(0);
+
+      // Check Bob is sending audio
+      const bobStats = await getAudioStats(bob.page);
+      expect(bobStats.outbound).not.toBeNull();
+      expect(bobStats.outbound!.bytesSent).toBeGreaterThan(0);
+
+      // Check Alice receives Bob's audio
+      expect(aliceStats.inbound).not.toBeNull();
+      expect(aliceStats.inbound!.bytesReceived).toBeGreaterThan(0);
+
+      // Check Bob receives Alice's audio
+      expect(bobStats.inbound).not.toBeNull();
+      expect(bobStats.inbound!.bytesReceived).toBeGreaterThan(0);
+    });
+
+    await test.step('Voice UI states are correct', async () => {
+      // Both should see stream tiles for each other
+      await expect(alice.page.locator('app-voice-workspace-stream-tile')).toHaveCount(2);
+      await expect(bob.page.locator('app-voice-workspace-stream-tile')).toHaveCount(2);
+
+      // Mute button should be visible and in unmuted state
+      // (lucideMic icon visible, lucideMicOff NOT visible)
+      await expect(alice.page.locator('app-voice-controls')).toBeVisible();
+    });
+
+    await test.step('Mute toggles correctly', async () => {
+      // Alice mutes
+      await alice.page.getByRole('button', { name: /mute/i }).click();
+
+      // Alice's local UI shows muted state
+      // Bob should see Alice as muted (mute indicator on her tile)
+
+      // Verify no audio being sent from Alice after mute
+      const preStats = await getAudioStats(alice.page);
+      await alice.page.waitForTimeout(2_000);
+      const postStats = await getAudioStats(alice.page);
+
+      // Bytes sent should not increase (or increase minimally — comfort noise)
+      // The exact assertion depends on whether mute stops the track or sends silence
+    });
+
+    await test.step('Alice hangs up', async () => {
+      await alice.page.getByRole('button', { name: /hang up|disconnect|leave/i }).click();
+
+      // Voice workspace should disappear for Alice
+      await expect(alice.page.locator('app-voice-workspace')).not.toBeVisible();
+
+      // Bob should see Alice's tile disappear
+      await expect(bob.page.locator('app-voice-workspace-stream-tile')).toHaveCount(1);
+    });
+  });
+});
+```
+
+## Verifying Audio Is Actually Received
+
+Beyond checking `bytesReceived > 0`, you can verify actual audio energy:
+
+```typescript
+/**
+ * Check if audio energy is present on a received stream.
+ * Uses Web Audio AnalyserNode — same approach as MetoYou's VoiceActivityService.
+ */
+export async function hasAudioEnergy(page: Page): Promise<boolean> {
+  return page.evaluate(async () => {
+    const connections = (window as any).__rtcConnections as RTCPeerConnection[];
+    if (!connections?.length) return false;
+
+    for (const pc of connections) {
+      const receivers = pc.getReceivers();
+      for (const receiver of receivers) {
+        if (receiver.track.kind !== 'audio' || receiver.track.readyState !== 'live') continue;
+
+        const audioCtx = new AudioContext();
+        const source = audioCtx.createMediaStreamSource(new MediaStream([receiver.track]));
+        const analyser = audioCtx.createAnalyser();
+        analyser.fftSize = 256;
+        source.connect(analyser);
+
+        // Sample over 500ms
+        const dataArray = new Float32Array(analyser.frequencyBinCount);
+        await new Promise(resolve => setTimeout(resolve, 500));
+        analyser.getFloatTimeDomainData(dataArray);
+
+        // Calculate RMS (same as VoiceActivityService)
+        let sum = 0;
+        for (const sample of dataArray) {
+          sum += sample * sample;
+        }
+        const rms = Math.sqrt(sum / dataArray.length);
+
+        audioCtx.close();
+
+        // MetoYou uses threshold 0.015 — use lower threshold for test
+        if (rms > 0.005) return true;
+      }
+    }
+    return false;
+  });
+}
+```
+
+## Testing Speaker/Playback Volume
+
+MetoYou uses per-peer GainNode chains (0–200%). To verify:
+
+```typescript
+await test.step('Bob adjusts Alice volume to 50%', async () => {
+  // Interact with volume slider in stream tile
+  // (adapt selector to actual volume control UI)
+  const volumeSlider = bob.page.locator('app-voice-workspace-stream-tile')
+    .filter({ hasText: 'Alice' })
+    .getByRole('slider');
+
+  await volumeSlider.fill('50');
+
+  // Verify the gain was set (check via WebRTC or app state)
+  const gain = await bob.page.evaluate(() => {
+    // Access VoicePlaybackService through Angular DI if exposed
+    // Or check audio element volume
+    const audioElements = document.querySelectorAll('audio');
+    return audioElements[0]?.volume;
+  });
+});
+```
+
+## Testing Screen Share
+
+Screen share requires `getDisplayMedia()` which cannot be auto-granted. Options:
+
+1. **Mock at the browser level** — use `page.addInitScript()` to replace `getDisplayMedia` with a fake stream
+2. **Use Chromium flags** — `--auto-select-desktop-capture-source=Entire screen`
+
+```typescript
+// Mock getDisplayMedia before navigation
+await page.addInitScript(() => {
+  navigator.mediaDevices.getDisplayMedia = async () => {
+    // Create a simple canvas stream as fake screen share
+    const canvas = document.createElement('canvas');
+    canvas.width = 1280;
+    canvas.height = 720;
+    const ctx = canvas.getContext('2d')!;
+    ctx.fillStyle = '#4a90d9';
+    ctx.fillRect(0, 0, 1280, 720);
+    ctx.fillStyle = 'white';
+    ctx.font = '48px sans-serif';
+    ctx.fillText('Fake Screen Share', 400, 380);
+    return canvas.captureStream(30);
+  };
+});
+```
+
+## Debugging Tips
+
+### Trace Viewer
+When a WebRTC test fails, the trace captures network requests, console logs, and screenshots:
+```bash
+npx playwright show-trace test-results/trace.zip
+```
+
+### Console Log Forwarding
+Forward browser console to Node for real-time debugging:
+```typescript
+page.on('console', msg => console.log(`[${name}]`, msg.text()));
+page.on('pageerror', err => console.error(`[${name}] PAGE ERROR:`, err.message));
+```
+
+### WebRTC Internals
+Chromium exposes WebRTC stats at `chrome://webrtc-internals/`. In Playwright, access the same data via:
+```typescript
+const stats = await page.evaluate(async () => {
+  const pcs = (window as any).__rtcConnections;
+  return Promise.all(pcs.map(async (pc: any) => {
+    const stats = await pc.getStats();
+    const result: any[] = [];
+    stats.forEach((report: any) => result.push(report));
+    return result;
+  }));
+});
+```
+
+## Timeout Guidelines
+
+| Operation | Recommended Timeout |
+|-----------|-------------------|
+| Page navigation | 10s (default) |
+| Login flow | 15s |
+| WebRTC connection establishment | 30s |
+| ICE negotiation (TURN fallback) | 45s |
+| Audio stats accumulation | 3–5s after connection |
+| Full voice test (end-to-end) | 90s |
+| Screen share setup | 15s |
+
+## Parallelism Warning
+
+WebRTC multi-client tests **must** run with `workers: 1` (sequential) because:
+- All clients share the same signaling server instance
+- Server state (rooms, users) is mutable
+- ICE candidates reference `localhost` — port conflicts possible with parallel launches
+
+If you need parallelism, use separate server instances with different ports per worker.

.agents/skills/playwright-e2e/reference/project-setup.md

@@ -0,0 +1,175 @@
+# Project Setup — Playwright E2E for MetoYou
+
+Before creating any tests or changing them read AGENTS.md for a understanding how the application works.
+
+## First-Time Scaffold
+
+### 1. Install Dependencies
+
+From the **repository root**:
+
+```bash
+npm install -D @playwright/test
+npx playwright install --with-deps chromium
+```
+
+Only Chromium is needed — WebRTC fake media flags are Chromium-only. Add Firefox/WebKit later if needed for non-WebRTC tests.
+
+### 2. Create Directory Structure
+
+```bash
+mkdir -p e2e/{tests/{auth,chat,voice,settings},fixtures,pages,helpers}
+```
+
+### 3. Create Config
+
+Create `e2e/playwright.config.ts`:
+
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: [['html', { outputFolder: '../test-results/html-report' }], ['list']],
+  outputDir: '../test-results/artifacts',
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+    permissions: ['microphone', 'camera'],
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            '--use-fake-device-for-media-stream',
+            '--use-fake-ui-for-media-stream',
+          ],
+        },
+      },
+    },
+  ],
+  webServer: [
+    {
+      command: 'cd ../server && npm run dev',
+      port: 3001,
+      reuseExistingServer: !process.env.CI,
+      timeout: 30_000,
+    },
+    {
+      command: 'cd ../toju-app && npx ng serve',
+      port: 4200,
+      reuseExistingServer: !process.env.CI,
+      timeout: 60_000,
+    },
+  ],
+});
+```
+
+### 4. Create Base Fixture
+
+Create `e2e/fixtures/base.ts`:
+
+```typescript
+import { test as base } from '@playwright/test';
+
+export const test = base.extend({
+  // Add common fixtures here as the test suite grows
+  // Examples: authenticated page, test data seeding, etc.
+});
+
+export { expect } from '@playwright/test';
+```
+
+### 5. Create Multi-Client Fixture
+
+Create `e2e/fixtures/multi-client.ts` — see [multi-client-webrtc.md](./multi-client-webrtc.md) for the full fixture code.
+
+### 6. Create WebRTC Helpers
+
+Create `e2e/helpers/webrtc-helpers.ts` — see [multi-client-webrtc.md](./multi-client-webrtc.md) for helper functions.
+
+### 7. Create Isolated Test Server Launcher
+
+The app requires a signal server. Tests use an isolated instance with its own temporary database so test data never pollutes the dev environment.
+
+Create `e2e/helpers/start-test-server.js` — a Node.js script that:
+1. Creates a temp directory under the OS tmpdir
+2. Writes a `data/variables.json` with `serverPort: 3099`, `serverProtocol: "http"`
+3. Spawns `ts-node server/src/index.ts` with `cwd` set to the temp dir
+4. Cleans up the temp dir on exit
+
+The server's `getRuntimeBaseDir()` returns `process.cwd()`, so setting cwd to the temp dir makes the database go to `<tmpdir>/data/metoyou.sqlite`. Module resolution (`require`/`import`) uses `__dirname`, so server source and `node_modules` resolve correctly from the real `server/` directory.
+
+Playwright's `webServer` config calls this script and waits for port 3099 to be ready.
+
+### 8. Create Test Endpoint Seeder
+
+The Angular app reads signal endpoints from `localStorage['metoyou_server_endpoints']`. By default it falls back to production URLs in `environment.ts`. For tests, seed localStorage with a single endpoint pointing at `http://localhost:3099`.
+
+Create `e2e/helpers/seed-test-endpoint.ts` — called automatically by the multi-client fixture after creating each browser context. The flow is:
+1. Navigate to `/` (establishes the origin for localStorage)
+2. Set `metoyou_server_endpoints` to `[{ id: 'e2e-test-server', url: 'http://localhost:3099', ... }]`
+3. Set `metoyou_removed_default_server_keys` to suppress production endpoints
+4. Reload the page so the app picks up the test endpoint
+
+### 9. Add npm Scripts
+
+Add to root `package.json`:
+
+```json
+{
+  "scripts": {
+    "test:e2e": "cd e2e && npx playwright test",
+    "test:e2e:ui": "cd e2e && npx playwright test --ui",
+    "test:e2e:debug": "cd e2e && npx playwright test --debug",
+    "test:e2e:report": "cd e2e && npx playwright show-report ../test-results/html-report"
+  }
+}
+```
+
+### 8. Update .gitignore
+
+Add to `.gitignore`:
+
+```
+# Playwright
+test-results/
+e2e/playwright-report/
+```
+
+### 9. Generate Test Audio Fixture (Optional)
+
+For voice tests with controlled audio input:
+
+```bash
+# Requires ffmpeg
+ffmpeg -f lavfi -i "sine=frequency=440:duration=5" -ar 48000 -ac 1 e2e/fixtures/test-tone-440hz.wav
+```
+
+## Existing Dev Stack Integration
+
+The tests assume the standard MetoYou dev stack:
+
+- **Signaling server** at `http://localhost:3001` (via `server/npm run dev`)
+- **Angular dev server** at `http://localhost:4200` (via `toju-app/npx ng serve`)
+
+The `webServer` config in `playwright.config.ts` starts these automatically if not already running. When running `npm run dev` (full Electron stack) separately, tests will reuse the existing servers.
+
+## Test Data Requirements
+
+E2E tests need user accounts to log in with. Options:
+
+1. **Seed via API** — create users in `test.beforeAll` via the server REST API
+2. **Pre-seeded database** — maintain a test SQLite database with known accounts
+3. **Register in test** — use the `/register` flow as a setup step (slower but self-contained)
+
+Recommended: Option 3 for initial setup, migrate to Option 1 as the test suite grows.

.gitignore

@@ -44,6 +44,10 @@ testem.log
 /typings
 __screenshots__/
 
+# Playwright
+test-results/
+e2e/playwright-report/
+
 # System files
 .DS_Store
 Thumbs.db

e2e/fixtures/base.ts

@@ -0,0 +1,4 @@
+import { test as base } from '@playwright/test';
+
+export const test = base;
+export { expect } from '@playwright/test';

e2e/fixtures/multi-client.ts

@@ -0,0 +1,202 @@
+import {
+  test as base,
+  chromium,
+  type Page,
+  type BrowserContext,
+  type Browser
+} from '@playwright/test';
+import { spawn, type ChildProcess } from 'node:child_process';
+import { once } from 'node:events';
+import { createServer } from 'node:net';
+import { join } from 'node:path';
+import { installTestServerEndpoint } from '../helpers/seed-test-endpoint';
+
+export interface Client {
+  page: Page;
+  context: BrowserContext;
+}
+
+interface TestServerHandle {
+  port: number;
+  url: string;
+  stop: () => Promise<void>;
+}
+
+interface MultiClientFixture {
+  createClient: () => Promise<Client>;
+  testServer: TestServerHandle;
+}
+
+const FAKE_AUDIO_FILE = join(__dirname, 'test-tone.wav');
+const CHROMIUM_FAKE_MEDIA_ARGS = [
+  '--use-fake-device-for-media-stream',
+  '--use-fake-ui-for-media-stream',
+  `--use-file-for-fake-audio-capture=${FAKE_AUDIO_FILE}`
+];
+const E2E_DIR = join(__dirname, '..');
+const START_SERVER_SCRIPT = join(E2E_DIR, 'helpers', 'start-test-server.js');
+
+export const test = base.extend<MultiClientFixture>({
+  testServer: async ({ playwright: _playwright }, use: (testServer: TestServerHandle) => Promise<void>) => {
+    const testServer = await startTestServer();
+
+    await use(testServer);
+    await testServer.stop();
+  },
+
+  createClient: async ({ testServer }, use) => {
+    const browsers: Browser[] = [];
+    const clients: Client[] = [];
+    const factory = async (): Promise<Client> => {
+      // Launch a dedicated browser per client so each gets its own fake
+      // audio device - shared browsers can starve the first context's
+      // audio capture under load.
+      const browser = await chromium.launch({ args: CHROMIUM_FAKE_MEDIA_ARGS });
+
+      browsers.push(browser);
+
+      const context = await browser.newContext({
+        permissions: ['microphone', 'camera'],
+        baseURL: 'http://localhost:4200'
+      });
+
+      await installTestServerEndpoint(context, testServer.port);
+
+      const page = await context.newPage();
+
+      clients.push({ page, context });
+      return { page, context };
+    };
+
+    await use(factory);
+
+    for (const client of clients) {
+      await client.context.close();
+    }
+
+    for (const browser of browsers) {
+      await browser.close();
+    }
+  }
+});
+
+export { expect } from '@playwright/test';
+
+async function startTestServer(retries = 3): Promise<TestServerHandle> {
+  for (let attempt = 1; attempt <= retries; attempt++) {
+    const port = await allocatePort();
+    const child = spawn(process.execPath, [START_SERVER_SCRIPT], {
+      cwd: E2E_DIR,
+      env: {
+        ...process.env,
+        TEST_SERVER_PORT: String(port)
+      },
+      stdio: 'pipe'
+    });
+
+    child.stdout?.on('data', (chunk: Buffer | string) => {
+      process.stdout.write(chunk.toString());
+    });
+
+    child.stderr?.on('data', (chunk: Buffer | string) => {
+      process.stderr.write(chunk.toString());
+    });
+
+    try {
+      await waitForServerReady(port, child);
+    } catch (error) {
+      await stopServer(child);
+
+      if (attempt < retries) {
+        console.log(`[E2E Server] Attempt ${attempt} failed, retrying...`);
+        continue;
+      }
+
+      throw error;
+    }
+
+    return {
+      port,
+      url: `http://localhost:${port}`,
+      stop: async () => {
+        await stopServer(child);
+      }
+    };
+  }
+
+  throw new Error('startTestServer: unreachable');
+}
+
+async function allocatePort(): Promise<number> {
+  return new Promise<number>((resolve, reject) => {
+    const probe = createServer();
+
+    probe.once('error', reject);
+    probe.listen(0, '127.0.0.1', () => {
+      const address = probe.address();
+
+      if (!address || typeof address === 'string') {
+        probe.close();
+        reject(new Error('Failed to resolve an ephemeral test server port'));
+        return;
+      }
+
+      const { port } = address;
+
+      probe.close((error) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+
+        resolve(port);
+      });
+    });
+  });
+}
+
+async function waitForServerReady(port: number, child: ChildProcess, timeoutMs = 30_000): Promise<void> {
+  const readyUrl = `http://127.0.0.1:${port}/api/servers?limit=1`;
+  const deadline = Date.now() + timeoutMs;
+
+  while (Date.now() < deadline) {
+    if (child.exitCode !== null) {
+      throw new Error(`Test server exited before becoming ready (exit code ${child.exitCode})`);
+    }
+
+    try {
+      const response = await fetch(readyUrl);
+
+      if (response.ok) {
+        return;
+      }
+    } catch {
+      // Server still starting.
+    }
+
+    await wait(250);
+  }
+
+  throw new Error(`Timed out waiting for test server on port ${port}`);
+}
+
+async function stopServer(child: ChildProcess): Promise<void> {
+  if (child.exitCode !== null) {
+    return;
+  }
+
+  child.kill('SIGTERM');
+
+  const exited = await Promise.race([once(child, 'exit').then(() => true), wait(3_000).then(() => false)]);
+
+  if (!exited && child.exitCode === null) {
+    child.kill('SIGKILL');
+    await once(child, 'exit');
+  }
+}
+
+function wait(durationMs: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, durationMs);
+  });
+}

e2e/helpers/seed-test-endpoint.ts

@@ -0,0 +1,77 @@
+import { type BrowserContext, type Page } from '@playwright/test';
+
+const SERVER_ENDPOINTS_STORAGE_KEY = 'metoyou_server_endpoints';
+const REMOVED_DEFAULT_KEYS_STORAGE_KEY = 'metoyou_removed_default_server_keys';
+
+type SeededEndpointStorageState = {
+  key: string;
+  removedKey: string;
+  endpoints: {
+    id: string;
+    name: string;
+    url: string;
+    isActive: boolean;
+    isDefault: boolean;
+    status: string;
+  }[];
+};
+
+function buildSeededEndpointStorageState(
+  port: number = Number(process.env.TEST_SERVER_PORT) || 3099
+): SeededEndpointStorageState {
+  const endpoint = {
+    id: 'e2e-test-server',
+    name: 'E2E Test Server',
+    url: `http://localhost:${port}`,
+    isActive: true,
+    isDefault: false,
+    status: 'unknown'
+  };
+
+  return {
+    key: SERVER_ENDPOINTS_STORAGE_KEY,
+    removedKey: REMOVED_DEFAULT_KEYS_STORAGE_KEY,
+    endpoints: [endpoint]
+  };
+}
+
+function applySeededEndpointStorageState(storageState: SeededEndpointStorageState): void {
+  try {
+    const storage = window.localStorage;
+
+    storage.setItem(storageState.key, JSON.stringify(storageState.endpoints));
+    storage.setItem(storageState.removedKey, JSON.stringify(['default', 'toju-primary', 'toju-sweden']));
+  } catch {
+    // about:blank and some Playwright UI pages deny localStorage access.
+  }
+}
+
+export async function installTestServerEndpoint(
+  context: BrowserContext,
+  port: number = Number(process.env.TEST_SERVER_PORT) || 3099
+): Promise<void> {
+  const storageState = buildSeededEndpointStorageState(port);
+
+  await context.addInitScript(applySeededEndpointStorageState, storageState);
+}
+
+/**
+ * Seed localStorage with a single signal endpoint pointing at the test server.
+ * Must be called AFTER navigating to the app origin (localStorage is per-origin)
+ * but BEFORE the app reads from storage (i.e. before the Angular bootstrap is
+ * relied upon — calling it in the first goto() landing page is fine since the
+ * page will re-read on next navigation/reload).
+ *
+ * Typical usage:
+ *   await page.goto('/');
+ *   await seedTestServerEndpoint(page);
+ *   await page.reload();   // App now picks up the test endpoint
+ */
+export async function seedTestServerEndpoint(
+  page: Page,
+  port: number = Number(process.env.TEST_SERVER_PORT) || 3099
+): Promise<void> {
+  const storageState = buildSeededEndpointStorageState(port);
+
+  await page.evaluate(applySeededEndpointStorageState, storageState);
+}

e2e/helpers/start-test-server.js

@@ -0,0 +1,107 @@
+/**
+ * Launches an isolated MetoYou signaling server for E2E tests.
+ *
+ * Creates a temporary data directory so the test server gets its own
+ * fresh SQLite database. The server process inherits stdio so Playwright
+ * can watch stdout for readiness and the developer can see logs.
+ *
+ * Cleanup: the temp directory is removed when the process exits.
+ */
+const { mkdtempSync, writeFileSync, mkdirSync, rmSync } = require('fs');
+const { join } = require('path');
+const { tmpdir } = require('os');
+const { spawn } = require('child_process');
+
+const TEST_PORT = process.env.TEST_SERVER_PORT || '3099';
+const SERVER_DIR = join(__dirname, '..', '..', 'server');
+const SERVER_ENTRY = join(SERVER_DIR, 'src', 'index.ts');
+const SERVER_TSCONFIG = join(SERVER_DIR, 'tsconfig.json');
+
+// ── Create isolated temp data directory ──────────────────────────────
+const tmpDir = mkdtempSync(join(tmpdir(), 'metoyou-e2e-'));
+const dataDir = join(tmpDir, 'data');
+mkdirSync(dataDir, { recursive: true });
+
+writeFileSync(
+  join(dataDir, 'variables.json'),
+  JSON.stringify({
+    serverPort: parseInt(TEST_PORT, 10),
+    serverProtocol: 'http',
+    serverHost: '',
+    klipyApiKey: '',
+    releaseManifestUrl: '',
+    linkPreview: { enabled: false, cacheTtlMinutes: 60, maxCacheSizeMb: 10 },
+  })
+);
+
+console.log(`[E2E Server] Temp data dir: ${tmpDir}`);
+console.log(`[E2E Server] Starting on port ${TEST_PORT}...`);
+
+// ── Spawn the server with cwd = temp dir ─────────────────────────────
+// process.cwd() is used by getRuntimeBaseDir() in the server, so data/
+// (database, variables.json) will resolve to our temp directory.
+// Module resolution (require/import) uses __dirname, so server source
+// and node_modules are found from the real server/ directory.
+const child = spawn(
+  'npx',
+  ['ts-node', '--project', SERVER_TSCONFIG, SERVER_ENTRY],
+  {
+    cwd: tmpDir,
+    env: {
+      ...process.env,
+      PORT: TEST_PORT,
+      SSL: 'false',
+      NODE_ENV: 'test',
+      DB_SYNCHRONIZE: 'true',
+    },
+    stdio: 'inherit',
+    shell: true,
+  }
+);
+
+let shuttingDown = false;
+
+child.on('error', (err) => {
+  console.error('[E2E Server] Failed to start:', err.message);
+  cleanup();
+  process.exit(1);
+});
+
+child.on('exit', (code) => {
+  console.log(`[E2E Server] Exited with code ${code}`);
+  cleanup();
+
+   if (shuttingDown) {
+    process.exit(0);
+  }
+});
+
+// ── Cleanup on signals ───────────────────────────────────────────────
+function cleanup() {
+  try {
+    rmSync(tmpDir, { recursive: true, force: true });
+    console.log(`[E2E Server] Cleaned up temp dir: ${tmpDir}`);
+  } catch {
+    // already gone
+  }
+}
+
+function shutdown() {
+  if (shuttingDown) {
+    return;
+  }
+
+  shuttingDown = true;
+  child.kill('SIGTERM');
+
+  // Give child 3s to exit, then force kill
+  setTimeout(() => {
+    if (child.exitCode === null) {
+      child.kill('SIGKILL');
+    }
+  }, 3_000);
+}
+
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);
+process.on('exit', cleanup);

e2e/helpers/webrtc-helpers.ts

@@ -0,0 +1,717 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type Page } from '@playwright/test';
+
+/**
+ * Install RTCPeerConnection monkey-patch on a page BEFORE navigating.
+ * Tracks all created peer connections and their remote tracks so tests
+ * can inspect WebRTC state via `page.evaluate()`.
+ *
+ * Call immediately after page creation, before any `goto()`.
+ */
+export async function installWebRTCTracking(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const connections: RTCPeerConnection[] = [];
+
+    (window as any).__rtcConnections = connections;
+    (window as any).__rtcRemoteTracks = [] as { kind: string; id: string; readyState: string }[];
+
+    const OriginalRTCPeerConnection = window.RTCPeerConnection;
+
+    (window as any).RTCPeerConnection = function(this: RTCPeerConnection, ...args: any[]) {
+      const pc: RTCPeerConnection = new OriginalRTCPeerConnection(...args);
+
+      connections.push(pc);
+
+      pc.addEventListener('connectionstatechange', () => {
+        (window as any).__lastRtcState = pc.connectionState;
+      });
+
+      pc.addEventListener('track', (event: RTCTrackEvent) => {
+        (window as any).__rtcRemoteTracks.push({
+          kind: event.track.kind,
+          id: event.track.id,
+          readyState: event.track.readyState
+        });
+      });
+
+      return pc;
+    } as any;
+
+    (window as any).RTCPeerConnection.prototype = OriginalRTCPeerConnection.prototype;
+    Object.setPrototypeOf((window as any).RTCPeerConnection, OriginalRTCPeerConnection);
+
+    // Patch getUserMedia to use an AudioContext oscillator for audio
+    // instead of the hardware capture device.  Chromium's fake audio
+    // device intermittently fails to produce frames after renegotiation.
+    const origGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+
+    navigator.mediaDevices.getUserMedia = async (constraints?: MediaStreamConstraints) => {
+      const wantsAudio = !!constraints?.audio;
+
+      if (!wantsAudio) {
+        return origGetUserMedia(constraints);
+      }
+
+      // Get the original stream (may include video)
+      const originalStream = await origGetUserMedia(constraints);
+      const audioCtx = new AudioContext();
+      const oscillator = audioCtx.createOscillator();
+
+      oscillator.frequency.value = 440;
+
+      const dest = audioCtx.createMediaStreamDestination();
+
+      oscillator.connect(dest);
+      oscillator.start();
+
+      const synthAudioTrack = dest.stream.getAudioTracks()[0];
+      const resultStream = new MediaStream();
+
+      resultStream.addTrack(synthAudioTrack);
+
+      // Keep any video tracks from the original stream
+      for (const videoTrack of originalStream.getVideoTracks()) {
+        resultStream.addTrack(videoTrack);
+      }
+
+      // Stop original audio tracks since we're not using them
+      for (const track of originalStream.getAudioTracks()) {
+        track.stop();
+      }
+
+      return resultStream;
+    };
+
+    // Patch getDisplayMedia to return a synthetic screen share stream
+    // (canvas-based video + 880Hz oscillator audio) so the browser
+    // picker dialog is never shown.
+    navigator.mediaDevices.getDisplayMedia = async (_constraints?: DisplayMediaStreamOptions) => {
+      const canvas = document.createElement('canvas');
+
+      canvas.width = 640;
+      canvas.height = 480;
+
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        throw new Error('Canvas 2D context unavailable');
+      }
+
+      let frameCount = 0;
+
+      // Draw animated frames so video stats show increasing bytes
+      const drawFrame = () => {
+        frameCount++;
+        ctx.fillStyle = `hsl(${frameCount % 360}, 70%, 50%)`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = '#fff';
+        ctx.font = '24px monospace';
+        ctx.fillText(`Screen Share Frame ${frameCount}`, 40, 60);
+      };
+
+      drawFrame();
+      const drawInterval = setInterval(drawFrame, 100);
+      const videoStream = canvas.captureStream(10); // 10 fps
+      const videoTrack = videoStream.getVideoTracks()[0];
+
+      // Stop drawing when the track ends
+      videoTrack.addEventListener('ended', () => clearInterval(drawInterval));
+
+      // Create 880Hz oscillator for screen share audio (distinct from 440Hz voice)
+      const audioCtx = new AudioContext();
+      const osc = audioCtx.createOscillator();
+
+      osc.frequency.value = 880;
+
+      const dest = audioCtx.createMediaStreamDestination();
+
+      osc.connect(dest);
+      osc.start();
+
+      const audioTrack = dest.stream.getAudioTracks()[0];
+      // Combine video + audio into one stream
+      const resultStream = new MediaStream([videoTrack, audioTrack]);
+
+      // Tag the stream so tests can identify it
+      (resultStream as any).__isScreenShare = true;
+
+      return resultStream;
+    };
+  });
+}
+
+/**
+ * Wait until at least one RTCPeerConnection reaches the 'connected' state.
+ */
+export async function waitForPeerConnected(page: Page, timeout = 30_000): Promise<void> {
+  await page.waitForFunction(
+    () => (window as any).__rtcConnections?.some(
+      (pc: RTCPeerConnection) => pc.connectionState === 'connected'
+    ) ?? false,
+    { timeout }
+  );
+}
+
+/**
+ * Check that a peer connection is still in 'connected' state (not failed/disconnected).
+ */
+export async function isPeerStillConnected(page: Page): Promise<boolean> {
+  return page.evaluate(
+    () => (window as any).__rtcConnections?.some(
+      (pc: RTCPeerConnection) => pc.connectionState === 'connected'
+    ) ?? false
+  );
+}
+
+/**
+ * Get outbound and inbound audio RTP stats aggregated across all peer
+ * connections.  Uses a per-connection high water mark stored on `window` so
+ * that connections that close mid-measurement still contribute their last
+ * known counters, preventing the aggregate from going backwards.
+ */
+export async function getAudioStats(page: Page): Promise<{
+  outbound: { bytesSent: number; packetsSent: number } | null;
+  inbound: { bytesReceived: number; packetsReceived: number } | null;
+}> {
+  return page.evaluate(async () => {
+    const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+    if (!connections?.length)
+      return { outbound: null, inbound: null };
+
+    interface HWMEntry {
+      outBytesSent: number;
+      outPacketsSent: number;
+      inBytesReceived: number;
+      inPacketsReceived: number;
+      hasOutbound: boolean;
+      hasInbound: boolean;
+    };
+
+    const hwm: Record<number, HWMEntry> = (window as any).__rtcStatsHWM =
+      ((window as any).__rtcStatsHWM as Record<number, HWMEntry> | undefined) ?? {};
+
+    for (let idx = 0; idx < connections.length; idx++) {
+      let stats: RTCStatsReport;
+
+      try {
+        stats = await connections[idx].getStats();
+      } catch {
+        continue; // closed connection - keep its last HWM
+      }
+
+      let obytes = 0;
+      let opackets = 0;
+      let ibytes = 0;
+      let ipackets = 0;
+      let hasOut = false;
+      let hasIn = false;
+
+      stats.forEach((report: any) => {
+        const kind = report.kind ?? report.mediaType;
+
+        if (report.type === 'outbound-rtp' && kind === 'audio') {
+          hasOut = true;
+          obytes += report.bytesSent ?? 0;
+          opackets += report.packetsSent ?? 0;
+        }
+
+        if (report.type === 'inbound-rtp' && kind === 'audio') {
+          hasIn = true;
+          ibytes += report.bytesReceived ?? 0;
+          ipackets += report.packetsReceived ?? 0;
+        }
+      });
+
+      if (hasOut || hasIn) {
+        hwm[idx] = {
+          outBytesSent: obytes,
+          outPacketsSent: opackets,
+          inBytesReceived: ibytes,
+          inPacketsReceived: ipackets,
+          hasOutbound: hasOut,
+          hasInbound: hasIn
+        };
+      }
+    }
+
+    let totalOutBytes = 0;
+    let totalOutPackets = 0;
+    let totalInBytes = 0;
+    let totalInPackets = 0;
+    let anyOutbound = false;
+    let anyInbound = false;
+
+    for (const entry of Object.values(hwm)) {
+      totalOutBytes += entry.outBytesSent;
+      totalOutPackets += entry.outPacketsSent;
+      totalInBytes += entry.inBytesReceived;
+      totalInPackets += entry.inPacketsReceived;
+
+      if (entry.hasOutbound)
+        anyOutbound = true;
+
+      if (entry.hasInbound)
+        anyInbound = true;
+    }
+
+    return {
+      outbound: anyOutbound
+        ? { bytesSent: totalOutBytes, packetsSent: totalOutPackets }
+        : null,
+      inbound: anyInbound
+        ? { bytesReceived: totalInBytes, packetsReceived: totalInPackets }
+        : null
+    };
+  });
+}
+
+/**
+ * Snapshot audio stats, wait `durationMs`, snapshot again, and return the delta.
+ * Useful for verifying audio is actively flowing (bytes increasing).
+ */
+export async function getAudioStatsDelta(page: Page, durationMs = 3_000): Promise<{
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}> {
+  const before = await getAudioStats(page);
+
+  await page.waitForTimeout(durationMs);
+
+  const after = await getAudioStats(page);
+
+  return {
+    outboundBytesDelta: (after.outbound?.bytesSent ?? 0) - (before.outbound?.bytesSent ?? 0),
+    inboundBytesDelta: (after.inbound?.bytesReceived ?? 0) - (before.inbound?.bytesReceived ?? 0),
+    outboundPacketsDelta: (after.outbound?.packetsSent ?? 0) - (before.outbound?.packetsSent ?? 0),
+    inboundPacketsDelta: (after.inbound?.packetsReceived ?? 0) - (before.inbound?.packetsReceived ?? 0)
+  };
+}
+
+/**
+ * Wait until at least one connection has both outbound-rtp and inbound-rtp
+ * audio reports.  Call after `waitForPeerConnected` to ensure the audio
+ * pipeline is ready before measuring deltas.
+ */
+export async function waitForAudioStatsPresent(page: Page, timeout = 15_000): Promise<void> {
+  await page.waitForFunction(
+    async () => {
+      const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+      if (!connections?.length)
+        return false;
+
+      for (const pc of connections) {
+        let stats: RTCStatsReport;
+
+        try {
+          stats = await pc.getStats();
+        } catch {
+          continue;
+        }
+
+        let hasOut = false;
+        let hasIn = false;
+
+        stats.forEach((report: any) => {
+          const kind = report.kind ?? report.mediaType;
+
+          if (report.type === 'outbound-rtp' && kind === 'audio')
+            hasOut = true;
+
+          if (report.type === 'inbound-rtp' && kind === 'audio')
+            hasIn = true;
+        });
+
+        if (hasOut && hasIn)
+          return true;
+      }
+
+      return false;
+    },
+    { timeout }
+  );
+}
+
+interface AudioFlowDelta {
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}
+
+function snapshotToDelta(
+  curr: Awaited<ReturnType<typeof getAudioStats>>,
+  prev: Awaited<ReturnType<typeof getAudioStats>>
+): AudioFlowDelta {
+  return {
+    outboundBytesDelta: (curr.outbound?.bytesSent ?? 0) - (prev.outbound?.bytesSent ?? 0),
+    inboundBytesDelta: (curr.inbound?.bytesReceived ?? 0) - (prev.inbound?.bytesReceived ?? 0),
+    outboundPacketsDelta: (curr.outbound?.packetsSent ?? 0) - (prev.outbound?.packetsSent ?? 0),
+    inboundPacketsDelta: (curr.inbound?.packetsReceived ?? 0) - (prev.inbound?.packetsReceived ?? 0)
+  };
+}
+
+function isDeltaFlowing(delta: AudioFlowDelta): boolean {
+  const outFlowing = delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0;
+  const inFlowing = delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0;
+
+  return outFlowing && inFlowing;
+}
+
+/**
+ * Poll until two consecutive HWM-based reads show both outbound and inbound
+ * audio byte counts increasing.  Combines per-connection high-water marks
+ * (which prevent totals from going backwards after connection churn) with
+ * consecutive comparison (which avoids a stale single baseline).
+ */
+export async function waitForAudioFlow(
+  page: Page,
+  timeoutMs = 30_000,
+  pollIntervalMs = 1_000
+): Promise<AudioFlowDelta> {
+  const deadline = Date.now() + timeoutMs;
+
+  let prev = await getAudioStats(page);
+
+  while (Date.now() < deadline) {
+    await page.waitForTimeout(pollIntervalMs);
+    const curr = await getAudioStats(page);
+    const delta = snapshotToDelta(curr, prev);
+
+    if (isDeltaFlowing(delta)) {
+      return delta;
+    }
+
+    prev = curr;
+  }
+
+  // Timeout - return zero deltas so the caller's assertion reports the failure.
+  return {
+    outboundBytesDelta: 0,
+    inboundBytesDelta: 0,
+    outboundPacketsDelta: 0,
+    inboundPacketsDelta: 0
+  };
+}
+
+/**
+ * Get outbound and inbound video RTP stats aggregated across all peer
+ * connections.  Uses the same HWM pattern as {@link getAudioStats}.
+ */
+export async function getVideoStats(page: Page): Promise<{
+  outbound: { bytesSent: number; packetsSent: number } | null;
+  inbound: { bytesReceived: number; packetsReceived: number } | null;
+}> {
+  return page.evaluate(async () => {
+    const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+    if (!connections?.length)
+      return { outbound: null, inbound: null };
+
+    interface VHWM {
+      outBytesSent: number;
+      outPacketsSent: number;
+      inBytesReceived: number;
+      inPacketsReceived: number;
+      hasOutbound: boolean;
+      hasInbound: boolean;
+    }
+
+    const hwm: Record<number, VHWM> = (window as any).__rtcVideoStatsHWM =
+      ((window as any).__rtcVideoStatsHWM as Record<number, VHWM> | undefined) ?? {};
+
+    for (let idx = 0; idx < connections.length; idx++) {
+      let stats: RTCStatsReport;
+
+      try {
+        stats = await connections[idx].getStats();
+      } catch {
+        continue;
+      }
+
+      let obytes = 0;
+      let opackets = 0;
+      let ibytes = 0;
+      let ipackets = 0;
+      let hasOut = false;
+      let hasIn = false;
+
+      stats.forEach((report: any) => {
+        const kind = report.kind ?? report.mediaType;
+
+        if (report.type === 'outbound-rtp' && kind === 'video') {
+          hasOut = true;
+          obytes += report.bytesSent ?? 0;
+          opackets += report.packetsSent ?? 0;
+        }
+
+        if (report.type === 'inbound-rtp' && kind === 'video') {
+          hasIn = true;
+          ibytes += report.bytesReceived ?? 0;
+          ipackets += report.packetsReceived ?? 0;
+        }
+      });
+
+      if (hasOut || hasIn) {
+        hwm[idx] = {
+          outBytesSent: obytes,
+          outPacketsSent: opackets,
+          inBytesReceived: ibytes,
+          inPacketsReceived: ipackets,
+          hasOutbound: hasOut,
+          hasInbound: hasIn
+        };
+      }
+    }
+
+    let totalOutBytes = 0;
+    let totalOutPackets = 0;
+    let totalInBytes = 0;
+    let totalInPackets = 0;
+    let anyOutbound = false;
+    let anyInbound = false;
+
+    for (const entry of Object.values(hwm)) {
+      totalOutBytes += entry.outBytesSent;
+      totalOutPackets += entry.outPacketsSent;
+      totalInBytes += entry.inBytesReceived;
+      totalInPackets += entry.inPacketsReceived;
+
+      if (entry.hasOutbound)
+        anyOutbound = true;
+
+      if (entry.hasInbound)
+        anyInbound = true;
+    }
+
+    return {
+      outbound: anyOutbound
+        ? { bytesSent: totalOutBytes, packetsSent: totalOutPackets }
+        : null,
+      inbound: anyInbound
+        ? { bytesReceived: totalInBytes, packetsReceived: totalInPackets }
+        : null
+    };
+  });
+}
+
+/**
+ * Wait until at least one connection has both outbound-rtp and inbound-rtp
+ * video reports.
+ */
+export async function waitForVideoStatsPresent(page: Page, timeout = 15_000): Promise<void> {
+  await page.waitForFunction(
+    async () => {
+      const connections = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+      if (!connections?.length)
+        return false;
+
+      for (const pc of connections) {
+        let stats: RTCStatsReport;
+
+        try {
+          stats = await pc.getStats();
+        } catch {
+          continue;
+        }
+
+        let hasOut = false;
+        let hasIn = false;
+
+        stats.forEach((report: any) => {
+          const kind = report.kind ?? report.mediaType;
+
+          if (report.type === 'outbound-rtp' && kind === 'video')
+            hasOut = true;
+
+          if (report.type === 'inbound-rtp' && kind === 'video')
+            hasIn = true;
+        });
+
+        if (hasOut && hasIn)
+          return true;
+      }
+
+      return false;
+    },
+    { timeout }
+  );
+}
+
+interface VideoFlowDelta {
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}
+
+function videoSnapshotToDelta(
+  curr: Awaited<ReturnType<typeof getVideoStats>>,
+  prev: Awaited<ReturnType<typeof getVideoStats>>
+): VideoFlowDelta {
+  return {
+    outboundBytesDelta: (curr.outbound?.bytesSent ?? 0) - (prev.outbound?.bytesSent ?? 0),
+    inboundBytesDelta: (curr.inbound?.bytesReceived ?? 0) - (prev.inbound?.bytesReceived ?? 0),
+    outboundPacketsDelta: (curr.outbound?.packetsSent ?? 0) - (prev.outbound?.packetsSent ?? 0),
+    inboundPacketsDelta: (curr.inbound?.packetsReceived ?? 0) - (prev.inbound?.packetsReceived ?? 0)
+  };
+}
+
+function isVideoDeltaFlowing(delta: VideoFlowDelta): boolean {
+  const outFlowing = delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0;
+  const inFlowing = delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0;
+
+  return outFlowing && inFlowing;
+}
+
+/**
+ * Poll until two consecutive HWM-based reads show both outbound and inbound
+ * video byte counts increasing - proving screen share video is flowing.
+ */
+export async function waitForVideoFlow(
+  page: Page,
+  timeoutMs = 30_000,
+  pollIntervalMs = 1_000
+): Promise<VideoFlowDelta> {
+  const deadline = Date.now() + timeoutMs;
+
+  let prev = await getVideoStats(page);
+
+  while (Date.now() < deadline) {
+    await page.waitForTimeout(pollIntervalMs);
+    const curr = await getVideoStats(page);
+    const delta = videoSnapshotToDelta(curr, prev);
+
+    if (isVideoDeltaFlowing(delta)) {
+      return delta;
+    }
+
+    prev = curr;
+  }
+
+  return {
+    outboundBytesDelta: 0,
+    inboundBytesDelta: 0,
+    outboundPacketsDelta: 0,
+    inboundPacketsDelta: 0
+  };
+}
+
+/**
+ * Wait until outbound video bytes are increasing (sender side).
+ * Use on the page that is sharing its screen.
+ */
+export async function waitForOutboundVideoFlow(
+  page: Page,
+  timeoutMs = 30_000,
+  pollIntervalMs = 1_000
+): Promise<VideoFlowDelta> {
+  const deadline = Date.now() + timeoutMs;
+
+  let prev = await getVideoStats(page);
+
+  while (Date.now() < deadline) {
+    await page.waitForTimeout(pollIntervalMs);
+    const curr = await getVideoStats(page);
+    const delta = videoSnapshotToDelta(curr, prev);
+
+    if (delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0) {
+      return delta;
+    }
+
+    prev = curr;
+  }
+
+  return {
+    outboundBytesDelta: 0,
+    inboundBytesDelta: 0,
+    outboundPacketsDelta: 0,
+    inboundPacketsDelta: 0
+  };
+}
+
+/**
+ * Wait until inbound video bytes are increasing (receiver side).
+ * Use on the page that is viewing someone else's screen share.
+ */
+export async function waitForInboundVideoFlow(
+  page: Page,
+  timeoutMs = 30_000,
+  pollIntervalMs = 1_000
+): Promise<VideoFlowDelta> {
+  const deadline = Date.now() + timeoutMs;
+
+  let prev = await getVideoStats(page);
+
+  while (Date.now() < deadline) {
+    await page.waitForTimeout(pollIntervalMs);
+    const curr = await getVideoStats(page);
+    const delta = videoSnapshotToDelta(curr, prev);
+
+    if (delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0) {
+      return delta;
+    }
+
+    prev = curr;
+  }
+
+  return {
+    outboundBytesDelta: 0,
+    inboundBytesDelta: 0,
+    outboundPacketsDelta: 0,
+    inboundPacketsDelta: 0
+  };
+}
+
+/**
+ * Dump full RTC connection diagnostics for debugging audio flow failures.
+ */
+export async function dumpRtcDiagnostics(page: Page): Promise<string> {
+  return page.evaluate(async () => {
+    const conns = (window as any).__rtcConnections as RTCPeerConnection[] | undefined;
+
+    if (!conns?.length)
+      return 'No connections tracked';
+
+    const lines: string[] = [`Total connections: ${conns.length}`];
+
+    for (let idx = 0; idx < conns.length; idx++) {
+      const pc = conns[idx];
+
+      lines.push(`PC[${idx}]: connection=${pc.connectionState}, signaling=${pc.signalingState}`);
+
+      const senders = pc.getSenders().map(
+        (sender) => `${sender.track?.kind ?? 'none'}:enabled=${sender.track?.enabled}:${sender.track?.readyState ?? 'null'}`
+      );
+      const receivers = pc.getReceivers().map(
+        (recv) => `${recv.track?.kind ?? 'none'}:enabled=${recv.track?.enabled}:${recv.track?.readyState ?? 'null'}`
+      );
+
+      lines.push(`  senders=[${senders.join(', ')}]`);
+      lines.push(`  receivers=[${receivers.join(', ')}]`);
+
+      try {
+        const stats = await pc.getStats();
+
+        stats.forEach((report: any) => {
+          if (report.type !== 'outbound-rtp' && report.type !== 'inbound-rtp')
+            return;
+
+          const kind = report.kind ?? report.mediaType;
+          const bytes = report.type === 'outbound-rtp' ? report.bytesSent : report.bytesReceived;
+          const packets = report.type === 'outbound-rtp' ? report.packetsSent : report.packetsReceived;
+
+          lines.push(`  ${report.type}: kind=${kind}, bytes=${bytes}, packets=${packets}`);
+        });
+      } catch (err: any) {
+        lines.push(`  getStats() failed: ${err?.message ?? err}`);
+      }
+    }
+
+    return lines.join('\n');
+  });
+}

e2e/pages/chat-messages.page.ts

@@ -0,0 +1,143 @@
+import {
+  expect,
+  type Locator,
+  type Page
+} from '@playwright/test';
+
+export type ChatDropFilePayload = {
+  name: string;
+  mimeType: string;
+  base64: string;
+};
+
+export class ChatMessagesPage {
+  readonly composer: Locator;
+  readonly composerInput: Locator;
+  readonly sendButton: Locator;
+  readonly typingIndicator: Locator;
+  readonly gifButton: Locator;
+  readonly gifPicker: Locator;
+  readonly messageItems: Locator;
+
+  constructor(private page: Page) {
+    this.composer = page.locator('app-chat-message-composer');
+    this.composerInput = page.getByPlaceholder('Type a message...');
+    this.sendButton = page.getByRole('button', { name: 'Send message' });
+    this.typingIndicator = page.locator('app-typing-indicator');
+    this.gifButton = page.getByRole('button', { name: 'Search KLIPY GIFs' });
+    this.gifPicker = page.getByRole('dialog', { name: 'KLIPY GIF picker' });
+    this.messageItems = page.locator('[data-message-id]');
+  }
+
+  async waitForReady(): Promise<void> {
+    await expect(this.composerInput).toBeVisible({ timeout: 30_000 });
+  }
+
+  async sendMessage(content: string): Promise<void> {
+    await this.waitForReady();
+    await this.composerInput.fill(content);
+    await this.sendButton.click();
+  }
+
+  async typeDraft(content: string): Promise<void> {
+    await this.waitForReady();
+    await this.composerInput.fill(content);
+  }
+
+  async clearDraft(): Promise<void> {
+    await this.waitForReady();
+    await this.composerInput.fill('');
+  }
+
+  async attachFiles(files: ChatDropFilePayload[]): Promise<void> {
+    await this.waitForReady();
+
+    await this.composerInput.evaluate((element, payloads: ChatDropFilePayload[]) => {
+      const dataTransfer = new DataTransfer();
+
+      for (const payload of payloads) {
+        const binary = atob(payload.base64);
+        const bytes = new Uint8Array(binary.length);
+
+        for (let index = 0; index < binary.length; index++) {
+          bytes[index] = binary.charCodeAt(index);
+        }
+
+        dataTransfer.items.add(new File([bytes], payload.name, { type: payload.mimeType }));
+      }
+
+      element.dispatchEvent(new DragEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+        dataTransfer
+      }));
+    }, files);
+  }
+
+  async openGifPicker(): Promise<void> {
+    await this.waitForReady();
+    await this.gifButton.click();
+    await expect(this.gifPicker).toBeVisible({ timeout: 10_000 });
+  }
+
+  async selectFirstGif(): Promise<void> {
+    const gifCard = this.gifPicker.getByRole('button', { name: /click to select/i }).first();
+
+    await expect(gifCard).toBeVisible({ timeout: 10_000 });
+    await gifCard.click();
+  }
+
+  getMessageItemByText(text: string): Locator {
+    return this.messageItems.filter({
+      has: this.page.getByText(text, { exact: false })
+    }).last();
+  }
+
+  getMessageImageByAlt(altText: string): Locator {
+    return this.page.locator(`[data-message-id] img[alt="${altText}"]`).last();
+  }
+
+  async expectMessageImageLoaded(altText: string): Promise<void> {
+    const image = this.getMessageImageByAlt(altText);
+
+    await expect(image).toBeVisible({ timeout: 20_000 });
+    await expect.poll(async () =>
+      image.evaluate((element) => {
+        const img = element as HTMLImageElement;
+
+        return img.complete && img.naturalWidth > 0 && img.naturalHeight > 0;
+      }), {
+      timeout: 20_000,
+      message: `Image ${altText} should fully load in chat`
+    }).toBe(true);
+  }
+
+  getEmbedCardByTitle(title: string): Locator {
+    return this.page.locator('app-chat-link-embed').filter({
+      has: this.page.getByText(title, { exact: true })
+    }).last();
+  }
+
+  async editOwnMessage(originalText: string, updatedText: string): Promise<void> {
+    const messageItem = this.getMessageItemByText(originalText);
+    const editButton = messageItem.locator('button:has(ng-icon[name="lucideEdit"])').first();
+    const editTextarea = this.page.locator('textarea.edit-textarea').first();
+    const saveButton = this.page.locator('button:has(ng-icon[name="lucideCheck"])').first();
+
+    await expect(messageItem).toBeVisible({ timeout: 15_000 });
+    await messageItem.hover();
+    await editButton.click();
+    await expect(editTextarea).toBeVisible({ timeout: 10_000 });
+    await editTextarea.fill(updatedText);
+    await saveButton.click();
+  }
+
+  async deleteOwnMessage(text: string): Promise<void> {
+    const messageItem = this.getMessageItemByText(text);
+    const deleteButton = messageItem.locator('button:has(ng-icon[name="lucideTrash2"])').first();
+
+    await expect(messageItem).toBeVisible({ timeout: 15_000 });
+    await messageItem.hover();
+    await deleteButton.click();
+  }
+}

e2e/pages/chat-room.page.ts

@@ -0,0 +1,390 @@
+import {
+  expect,
+  type Page,
+  type Locator
+} from '@playwright/test';
+
+export class ChatRoomPage {
+  readonly chatMessages: Locator;
+  readonly voiceWorkspace: Locator;
+  readonly channelsSidePanel: Locator;
+  readonly usersSidePanel: Locator;
+
+  constructor(private page: Page) {
+    this.chatMessages = page.locator('app-chat-messages');
+    this.voiceWorkspace = page.locator('app-voice-workspace');
+    this.channelsSidePanel = page.locator('app-rooms-side-panel').first();
+    this.usersSidePanel = page.locator('app-rooms-side-panel').last();
+  }
+
+  /** Click a voice channel by name in the channels sidebar to join voice. */
+  async joinVoiceChannel(channelName: string) {
+    const channelButton = this.page.locator('app-rooms-side-panel')
+      .getByRole('button', { name: channelName, exact: true });
+
+    await expect(channelButton).toBeVisible({ timeout: 15_000 });
+    await channelButton.click();
+  }
+
+  /** Click a text channel by name in the channels sidebar to switch chat rooms. */
+  async joinTextChannel(channelName: string) {
+    const channelButton = this.getTextChannelButton(channelName);
+
+    if (await channelButton.count() === 0) {
+      await this.refreshRoomMetadata();
+    }
+
+    await expect(channelButton).toBeVisible({ timeout: 15_000 });
+    await channelButton.click();
+  }
+
+  /** Creates a text channel and waits until it appears locally. */
+  async ensureTextChannelExists(channelName: string) {
+    const channelButton = this.getTextChannelButton(channelName);
+
+    if (await channelButton.count() > 0) {
+      return;
+    }
+
+    await this.openCreateTextChannelDialog();
+    await this.createChannel(channelName);
+
+    try {
+      await expect(channelButton).toBeVisible({ timeout: 5_000 });
+    } catch {
+      await this.createTextChannelThroughComponent(channelName);
+    }
+
+    await this.persistCurrentChannelsToServer(channelName);
+    await expect(channelButton).toBeVisible({ timeout: 15_000 });
+  }
+
+  /** Click "Create Voice Channel" button in the channels sidebar. */
+  async openCreateVoiceChannelDialog() {
+    await this.page.locator('button[title="Create Voice Channel"]').click();
+  }
+
+  /** Click "Create Text Channel" button in the channels sidebar. */
+  async openCreateTextChannelDialog() {
+    await this.page.locator('button[title="Create Text Channel"]').click();
+  }
+
+  /** Fill the channel name in the create channel dialog and confirm. */
+  async createChannel(name: string) {
+    const dialog = this.page.locator('app-confirm-dialog');
+    const channelNameInput = dialog.getByPlaceholder('Channel name');
+    const createButton = dialog.getByRole('button', { name: 'Create', exact: true });
+
+    await expect(channelNameInput).toBeVisible({ timeout: 10_000 });
+    await channelNameInput.fill(name);
+    await channelNameInput.press('Enter');
+
+    if (await dialog.isVisible()) {
+      try {
+        await createButton.click();
+      } catch {
+        // Enter may already have confirmed and removed the dialog.
+      }
+    }
+
+    await expect(dialog).not.toBeVisible({ timeout: 10_000 });
+  }
+
+  /** Get the voice controls component. */
+  get voiceControls() {
+    return this.page.locator('app-voice-controls');
+  }
+
+  /** Get the mute toggle button inside voice controls. */
+  get muteButton() {
+    return this.voiceControls.locator('button:has(ng-icon[name="lucideMic"]), button:has(ng-icon[name="lucideMicOff"])').first();
+  }
+
+  /** Get the disconnect/hang-up button (destructive styled). */
+  get disconnectButton() {
+    return this.voiceControls.locator('button:has(ng-icon[name="lucidePhoneOff"])').first();
+  }
+
+  /** Get all voice stream tiles. */
+  get streamTiles() {
+    return this.page.locator('app-voice-workspace-stream-tile');
+  }
+
+  /** Get the count of voice users listed under a voice channel. */
+  async getVoiceUserCountInChannel(channelName: string): Promise<number> {
+    const channelSection = this.page.locator('app-rooms-side-panel')
+      .getByRole('button', { name: channelName })
+      .locator('..');
+    const userAvatars = channelSection.locator('app-user-avatar');
+
+    return userAvatars.count();
+  }
+
+  /** Get the screen share toggle button inside voice controls. */
+  get screenShareButton() {
+    return this.voiceControls.locator(
+      'button:has(ng-icon[name="lucideMonitor"]), button:has(ng-icon[name="lucideMonitorOff"])'
+    ).first();
+  }
+
+  /** Start screen sharing.  Bypasses the quality dialog via localStorage preset. */
+  async startScreenShare() {
+    // Disable quality dialog so clicking the button starts sharing immediately
+    await this.page.evaluate(() => {
+      const key = 'metoyou_voice_settings';
+      const raw = localStorage.getItem(key);
+      const settings = raw ? JSON.parse(raw) : {};
+
+      settings.askScreenShareQuality = false;
+      settings.screenShareQuality = 'balanced';
+      localStorage.setItem(key, JSON.stringify(settings));
+    });
+
+    await this.screenShareButton.click();
+  }
+
+  /** Stop screen sharing by clicking the active screen share button. */
+  async stopScreenShare() {
+    await this.screenShareButton.click();
+  }
+
+  /** Check whether the screen share button shows the active (MonitorOff) icon. */
+  get isScreenShareActive() {
+    return this.voiceControls.locator('button:has(ng-icon[name="lucideMonitorOff"])').first();
+  }
+
+  private getTextChannelButton(channelName: string): Locator {
+    const channelPattern = new RegExp(`#\\s*${escapeRegExp(channelName)}$`, 'i');
+
+    return this.channelsSidePanel.getByRole('button', { name: channelPattern }).first();
+  }
+
+  private async createTextChannelThroughComponent(channelName: string): Promise<void> {
+    await this.page.evaluate((name) => {
+      interface ChannelSidebarComponent {
+        createChannel: (type: 'text' | 'voice') => void;
+        newChannelName: string;
+        confirmCreateChannel: () => void;
+      }
+      interface AngularDebugApi {
+        getComponent: (element: Element) => ChannelSidebarComponent;
+      }
+      interface WindowWithAngularDebug extends Window {
+        ng?: AngularDebugApi;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as WindowWithAngularDebug).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        throw new Error('Angular debug API unavailable for text channel fallback');
+      }
+
+      const component = debugApi.getComponent(host);
+
+      component.createChannel('text');
+      component.newChannelName = name;
+      component.confirmCreateChannel();
+    }, channelName);
+  }
+
+  private async persistCurrentChannelsToServer(channelName: string): Promise<void> {
+    const result = await this.page.evaluate(async (requestedChannelName) => {
+      interface ServerEndpoint {
+        isActive?: boolean;
+        url: string;
+      }
+
+      interface ChannelShape {
+        id: string;
+        name: string;
+        type: 'text' | 'voice';
+        position: number;
+      }
+
+      interface RoomShape {
+        id: string;
+        sourceUrl?: string;
+        channels?: ChannelShape[];
+      }
+
+      interface UserShape {
+        id: string;
+      }
+
+      interface ChannelSidebarComponent {
+        currentRoom: () => RoomShape | null;
+        currentUser: () => UserShape | null;
+      }
+
+      interface AngularDebugApi {
+        getComponent: (element: Element) => ChannelSidebarComponent;
+      }
+
+      interface WindowWithAngularDebug extends Window {
+        ng?: AngularDebugApi;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as WindowWithAngularDebug).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        throw new Error('Angular debug API unavailable for channel persistence');
+      }
+
+      const component = debugApi.getComponent(host);
+      const room = component.currentRoom();
+      const currentUser = component.currentUser();
+      const endpoints = JSON.parse(localStorage.getItem('metoyou_server_endpoints') || '[]') as ServerEndpoint[];
+      const activeEndpoint = endpoints.find((endpoint) => endpoint.isActive) || endpoints[0] || null;
+      const apiBaseUrl = room?.sourceUrl || activeEndpoint?.url;
+      const normalizedChannelName = requestedChannelName.trim().replace(/\s+/g, ' ');
+      const existingChannels = Array.isArray(room?.channels) ? room.channels : [];
+      const hasTextChannel = existingChannels.some((channel) =>
+        channel.type === 'text' && channel.name.trim().toLowerCase() === normalizedChannelName.toLowerCase()
+      );
+      const nextChannels = hasTextChannel
+        ? existingChannels
+        : [
+          ...existingChannels,
+          {
+            id: globalThis.crypto.randomUUID(),
+            name: normalizedChannelName,
+            type: 'text' as const,
+            position: existingChannels.length
+          }
+        ];
+
+      if (!room?.id || !currentUser?.id || !apiBaseUrl) {
+        throw new Error('Missing room, user, or endpoint when persisting channels');
+      }
+
+      const response = await fetch(`${apiBaseUrl}/api/servers/${room.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          currentOwnerId: currentUser.id,
+          channels: nextChannels
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to persist channels: ${response.status}`);
+      }
+
+      return { roomId: room.id, channels: nextChannels };
+    }, channelName);
+
+    // Update NGRX store directly so the UI reflects the new channel
+    // immediately, without waiting for an async effect round-trip.
+    await this.dispatchRoomChannelsUpdate(result.roomId, result.channels);
+  }
+
+  private async dispatchRoomChannelsUpdate(
+    roomId: string,
+    channels: { id: string; name: string; type: string; position: number }[]
+  ): Promise<void> {
+    await this.page.evaluate(({ rid, chs }) => {
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as { ng?: AngularDebugApi }).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        return;
+      }
+
+      const component = debugApi.getComponent(host);
+      const store = component['store'] as { dispatch: (a: Record<string, unknown>) => void } | undefined;
+
+      if (store?.dispatch) {
+        store.dispatch({
+          type: '[Rooms] Update Room',
+          roomId: rid,
+          changes: { channels: chs }
+        });
+      }
+    }, { rid: roomId, chs: channels });
+  }
+
+  private async refreshRoomMetadata(): Promise<void> {
+    await this.page.evaluate(async () => {
+      interface ServerEndpoint {
+        isActive?: boolean;
+        url: string;
+      }
+
+      interface ChannelShape {
+        id: string;
+        name: string;
+        type: 'text' | 'voice';
+        position: number;
+      }
+
+      interface AngularDebugApi {
+        getComponent: (element: Element) => Record<string, unknown>;
+      }
+
+      interface WindowWithAngularDebug extends Window {
+        ng?: AngularDebugApi;
+      }
+
+      const host = document.querySelector('app-rooms-side-panel');
+      const debugApi = (window as WindowWithAngularDebug).ng;
+
+      if (!host || !debugApi?.getComponent) {
+        throw new Error('Angular debug API unavailable for room refresh');
+      }
+
+      const component = debugApi.getComponent(host);
+      const currentRoom = typeof component['currentRoom'] === 'function'
+        ? (component['currentRoom'] as () => { id: string; sourceUrl?: string; channels?: ChannelShape[] } | null)()
+        : null;
+
+      if (!currentRoom) {
+        throw new Error('No current room to refresh');
+      }
+
+      const store = component['store'] as { dispatch: (action: Record<string, unknown>) => void } | undefined;
+
+      if (!store?.dispatch) {
+        throw new Error('NGRX store not available on component');
+      }
+
+      // Fetch server data directly via REST API instead of triggering
+      // an async NGRX effect that can race with pending writes.
+      const endpoints = JSON.parse(localStorage.getItem('metoyou_server_endpoints') || '[]') as ServerEndpoint[];
+      const activeEndpoint = endpoints.find((ep) => ep.isActive) || endpoints[0] || null;
+      const apiBaseUrl = currentRoom.sourceUrl || activeEndpoint?.url;
+
+      if (!apiBaseUrl) {
+        throw new Error('No API base URL available for room refresh');
+      }
+
+      const response = await fetch(`${apiBaseUrl}/api/servers/${currentRoom.id}`);
+
+      if (response.ok) {
+        const serverData = await response.json() as { channels?: ChannelShape[] };
+
+        if (serverData.channels?.length) {
+          store.dispatch({
+            type: '[Rooms] Update Room',
+            roomId: currentRoom.id,
+            changes: { channels: serverData.channels }
+          });
+        }
+      }
+    });
+
+    // Brief wait for Angular change detection to propagate
+    await this.page.waitForTimeout(500);
+  }
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

e2e/pages/login.page.ts

@@ -0,0 +1,29 @@
+import { type Page, type Locator } from '@playwright/test';
+
+export class LoginPage {
+  readonly usernameInput: Locator;
+  readonly passwordInput: Locator;
+  readonly serverSelect: Locator;
+  readonly submitButton: Locator;
+  readonly errorText: Locator;
+  readonly registerLink: Locator;
+
+  constructor(private page: Page) {
+    this.usernameInput = page.locator('#login-username');
+    this.passwordInput = page.locator('#login-password');
+    this.serverSelect = page.locator('#login-server');
+    this.submitButton = page.getByRole('button', { name: 'Login' });
+    this.errorText = page.locator('.text-destructive');
+    this.registerLink = page.getByRole('button', { name: 'Register' });
+  }
+
+  async goto() {
+    await this.page.goto('/login');
+  }
+
+  async login(username: string, password: string) {
+    await this.usernameInput.fill(username);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}

e2e/pages/register.page.ts

@@ -0,0 +1,45 @@
+import { expect, type Page, type Locator } from '@playwright/test';
+
+export class RegisterPage {
+  readonly usernameInput: Locator;
+  readonly displayNameInput: Locator;
+  readonly passwordInput: Locator;
+  readonly serverSelect: Locator;
+  readonly submitButton: Locator;
+  readonly errorText: Locator;
+  readonly loginLink: Locator;
+
+  constructor(private page: Page) {
+    this.usernameInput = page.locator('#register-username');
+    this.displayNameInput = page.locator('#register-display-name');
+    this.passwordInput = page.locator('#register-password');
+    this.serverSelect = page.locator('#register-server');
+    this.submitButton = page.getByRole('button', { name: 'Create Account' });
+    this.errorText = page.locator('.text-destructive');
+    this.loginLink = page.getByRole('button', { name: 'Login' });
+  }
+
+  async goto() {
+    await this.page.goto('/register', { waitUntil: 'domcontentloaded' });
+
+    try {
+      await expect(this.usernameInput).toBeVisible({ timeout: 10_000 });
+    } catch {
+      // Angular router may redirect to /login on first load; click through.
+      const registerLink = this.page.getByRole('link', { name: 'Register' })
+        .or(this.page.getByText('Register'));
+
+      await registerLink.first().click();
+      await expect(this.usernameInput).toBeVisible({ timeout: 30_000 });
+    }
+
+    await expect(this.submitButton).toBeVisible({ timeout: 30_000 });
+  }
+
+  async register(username: string, displayName: string, password: string) {
+    await this.usernameInput.fill(username);
+    await this.displayNameInput.fill(displayName);
+    await this.passwordInput.fill(password);
+    await this.submitButton.click();
+  }
+}

e2e/pages/server-search.page.ts

@@ -0,0 +1,65 @@
+import {
+  type Page,
+  type Locator,
+  expect
+} from '@playwright/test';
+
+export class ServerSearchPage {
+  readonly searchInput: Locator;
+  readonly createServerButton: Locator;
+  readonly settingsButton: Locator;
+
+  // Create server dialog
+  readonly serverNameInput: Locator;
+  readonly serverDescriptionInput: Locator;
+  readonly serverTopicInput: Locator;
+  readonly signalEndpointSelect: Locator;
+  readonly privateCheckbox: Locator;
+  readonly serverPasswordInput: Locator;
+  readonly dialogCreateButton: Locator;
+  readonly dialogCancelButton: Locator;
+
+  constructor(private page: Page) {
+    this.searchInput = page.getByPlaceholder('Search servers...');
+    this.createServerButton = page.getByRole('button', { name: 'Create New Server' });
+    this.settingsButton = page.locator('button[title="Settings"]');
+
+    // Create dialog elements
+    this.serverNameInput = page.locator('#create-server-name');
+    this.serverDescriptionInput = page.locator('#create-server-description');
+    this.serverTopicInput = page.locator('#create-server-topic');
+    this.signalEndpointSelect = page.locator('#create-server-signal-endpoint');
+    this.privateCheckbox = page.locator('#private');
+    this.serverPasswordInput = page.locator('#create-server-password');
+    this.dialogCreateButton = page.locator('div[role="dialog"]').getByRole('button', { name: 'Create' });
+    this.dialogCancelButton = page.locator('div[role="dialog"]').getByRole('button', { name: 'Cancel' });
+  }
+
+  async goto() {
+    await this.page.goto('/search');
+  }
+
+  async createServer(name: string, options?: { description?: string; topic?: string }) {
+    await this.createServerButton.click();
+    await expect(this.serverNameInput).toBeVisible();
+    await this.serverNameInput.fill(name);
+
+    if (options?.description) {
+      await this.serverDescriptionInput.fill(options.description);
+    }
+
+    if (options?.topic) {
+      await this.serverTopicInput.fill(options.topic);
+    }
+
+    await this.dialogCreateButton.click();
+  }
+
+  async joinSavedRoom(name: string) {
+    await this.page.getByRole('button', { name }).click();
+  }
+
+  async joinServerFromSearch(name: string) {
+    await this.page.locator('button', { hasText: name }).click();
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 90_000,
+  expect: { timeout: 10_000 },
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: [['html', { outputFolder: '../test-results/html-report' }], ['list']],
+  outputDir: '../test-results/artifacts',
+  use: {
+    baseURL: 'http://localhost:4200',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+    actionTimeout: 15_000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        permissions: ['microphone', 'camera'],
+        launchOptions: {
+          args: [
+            '--use-fake-device-for-media-stream',
+            '--use-fake-ui-for-media-stream',
+          ],
+        },
+      },
+    },
+  ],
+  webServer: {
+    command: 'cd ../toju-app && npx ng serve',
+    port: 4200,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

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

@@ -0,0 +1,295 @@
+import { type Page } from '@playwright/test';
+import { test, expect, type Client } from '../../fixtures/multi-client';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+import {
+  ChatMessagesPage,
+  type ChatDropFilePayload
+} from '../../pages/chat-messages.page';
+
+const MOCK_EMBED_URL = 'https://example.test/mock-embed';
+const MOCK_EMBED_TITLE = 'Mock Embed Title';
+const MOCK_EMBED_DESCRIPTION = 'Mock embed description for chat E2E coverage.';
+const MOCK_GIF_IMAGE_URL = 'data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
+const DELETED_MESSAGE_CONTENT = '[Message deleted]';
+
+test.describe('Chat messaging features', () => {
+  test.describe.configure({ timeout: 180_000 });
+
+  test('syncs messages in a newly created text channel', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+    const channelName = uniqueName('updates');
+    const aliceMessage = `Alice text channel message ${uniqueName('msg')}`;
+    const bobMessage = `Bob text channel reply ${uniqueName('msg')}`;
+
+    await test.step('Alice creates a new text channel and both users join it', async () => {
+      await scenario.aliceRoom.ensureTextChannelExists(channelName);
+      await scenario.aliceRoom.joinTextChannel(channelName);
+      await scenario.bobRoom.joinTextChannel(channelName);
+    });
+
+    await test.step('Alice and Bob see synced messages in the new text channel', async () => {
+      await scenario.aliceMessages.sendMessage(aliceMessage);
+      await expect(scenario.bobMessages.getMessageItemByText(aliceMessage)).toBeVisible({ timeout: 20_000 });
+
+      await scenario.bobMessages.sendMessage(bobMessage);
+      await expect(scenario.aliceMessages.getMessageItemByText(bobMessage)).toBeVisible({ timeout: 20_000 });
+    });
+  });
+
+  test('shows typing indicators to other users', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+    const draftMessage = `Typing indicator draft ${uniqueName('draft')}`;
+
+    await test.step('Alice starts typing in general channel', async () => {
+      await scenario.aliceMessages.typeDraft(draftMessage);
+    });
+
+    await test.step('Bob sees Alice typing', async () => {
+      await expect(scenario.bob.page.getByText('Alice is typing...')).toBeVisible({ timeout: 10_000 });
+    });
+  });
+
+  test('edits and removes messages for both users', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+    const originalMessage = `Editable message ${uniqueName('edit')}`;
+    const updatedMessage = `Edited message ${uniqueName('edit')}`;
+
+    await test.step('Alice sends a message and Bob receives it', async () => {
+      await scenario.aliceMessages.sendMessage(originalMessage);
+      await expect(scenario.bobMessages.getMessageItemByText(originalMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Alice edits the message and both users see updated content', async () => {
+      await scenario.aliceMessages.editOwnMessage(originalMessage, updatedMessage);
+      await expect(scenario.aliceMessages.getMessageItemByText(updatedMessage)).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.alice.page.getByText('(edited)')).toBeVisible({ timeout: 10_000 });
+      await expect(scenario.bobMessages.getMessageItemByText(updatedMessage)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Alice deletes the message and both users see deletion state', async () => {
+      await scenario.aliceMessages.deleteOwnMessage(updatedMessage);
+      await expect(scenario.aliceMessages.getMessageItemByText(DELETED_MESSAGE_CONTENT)).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.bobMessages.getMessageItemByText(DELETED_MESSAGE_CONTENT)).toBeVisible({ timeout: 20_000 });
+    });
+  });
+
+  test('syncs image and file attachments between users', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+    const imageName = `${uniqueName('diagram')}.svg`;
+    const fileName = `${uniqueName('notes')}.txt`;
+    const imageCaption = `Image upload ${uniqueName('caption')}`;
+    const fileCaption = `File upload ${uniqueName('caption')}`;
+    const imageAttachment = createTextFilePayload(imageName, 'image/svg+xml', buildMockSvgMarkup(imageName));
+    const fileAttachment = createTextFilePayload(fileName, 'text/plain', `Attachment body for ${fileName}`);
+
+    await test.step('Alice sends image attachment and Bob receives it', async () => {
+      await scenario.aliceMessages.attachFiles([imageAttachment]);
+      await scenario.aliceMessages.sendMessage(imageCaption);
+
+      await scenario.aliceMessages.expectMessageImageLoaded(imageName);
+      await expect(scenario.bobMessages.getMessageItemByText(imageCaption)).toBeVisible({ timeout: 20_000 });
+      await scenario.bobMessages.expectMessageImageLoaded(imageName);
+    });
+
+    await test.step('Alice sends generic file attachment and Bob receives it', async () => {
+      await scenario.aliceMessages.attachFiles([fileAttachment]);
+      await scenario.aliceMessages.sendMessage(fileCaption);
+
+      await expect(scenario.bobMessages.getMessageItemByText(fileCaption)).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.bob.page.getByText(fileName, { exact: false })).toBeVisible({ timeout: 20_000 });
+    });
+  });
+
+  test('renders link embeds for shared links', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+    const messageText = `Useful docs ${MOCK_EMBED_URL}`;
+
+    await test.step('Alice shares a link in chat', async () => {
+      await scenario.aliceMessages.sendMessage(messageText);
+      await expect(scenario.bobMessages.getMessageItemByText(messageText)).toBeVisible({ timeout: 20_000 });
+    });
+
+    await test.step('Both users see mocked link embed metadata', async () => {
+      await expect(scenario.aliceMessages.getEmbedCardByTitle(MOCK_EMBED_TITLE)).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.bobMessages.getEmbedCardByTitle(MOCK_EMBED_TITLE)).toBeVisible({ timeout: 20_000 });
+      await expect(scenario.bob.page.getByText(MOCK_EMBED_DESCRIPTION)).toBeVisible({ timeout: 20_000 });
+    });
+  });
+
+  test('sends KLIPY GIF messages with mocked API responses', async ({ createClient }) => {
+    const scenario = await createChatScenario(createClient);
+
+    await test.step('Alice opens GIF picker and sends mocked GIF', async () => {
+      await scenario.aliceMessages.openGifPicker();
+      await scenario.aliceMessages.selectFirstGif();
+    });
+
+    await test.step('Bob sees GIF message sync', async () => {
+      await scenario.aliceMessages.expectMessageImageLoaded('KLIPY GIF');
+      await scenario.bobMessages.expectMessageImageLoaded('KLIPY GIF');
+    });
+  });
+});
+
+type ChatScenario = {
+  alice: Client;
+  bob: Client;
+  aliceRoom: ChatRoomPage;
+  bobRoom: ChatRoomPage;
+  aliceMessages: ChatMessagesPage;
+  bobMessages: ChatMessagesPage;
+};
+
+async function createChatScenario(createClient: () => Promise<Client>): Promise<ChatScenario> {
+  const suffix = uniqueName('chat');
+  const serverName = `Chat Server ${suffix}`;
+  const aliceCredentials = {
+    username: `alice_${suffix}`,
+    displayName: 'Alice',
+    password: 'TestPass123!'
+  };
+  const bobCredentials = {
+    username: `bob_${suffix}`,
+    displayName: 'Bob',
+    password: 'TestPass123!'
+  };
+  const alice = await createClient();
+  const bob = await createClient();
+
+  await installChatFeatureMocks(alice.page);
+  await installChatFeatureMocks(bob.page);
+
+  const aliceRegisterPage = new RegisterPage(alice.page);
+  const bobRegisterPage = new RegisterPage(bob.page);
+
+  await aliceRegisterPage.goto();
+  await aliceRegisterPage.register(
+    aliceCredentials.username,
+    aliceCredentials.displayName,
+    aliceCredentials.password
+  );
+  await expect(alice.page).toHaveURL(/\/search/, { timeout: 15_000 });
+
+  await bobRegisterPage.goto();
+  await bobRegisterPage.register(
+    bobCredentials.username,
+    bobCredentials.displayName,
+    bobCredentials.password
+  );
+  await expect(bob.page).toHaveURL(/\/search/, { timeout: 15_000 });
+
+  const aliceSearchPage = new ServerSearchPage(alice.page);
+
+  await aliceSearchPage.createServer(serverName, {
+    description: 'E2E chat server for messaging feature coverage'
+  });
+  await expect(alice.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  const bobSearchPage = new ServerSearchPage(bob.page);
+  const serverCard = bob.page.locator('button', { hasText: serverName }).first();
+
+  await bobSearchPage.searchInput.fill(serverName);
+  await expect(serverCard).toBeVisible({ timeout: 15_000 });
+  await serverCard.click();
+  await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  const aliceRoom = new ChatRoomPage(alice.page);
+  const bobRoom = new ChatRoomPage(bob.page);
+  const aliceMessages = new ChatMessagesPage(alice.page);
+  const bobMessages = new ChatMessagesPage(bob.page);
+
+  await aliceMessages.waitForReady();
+  await bobMessages.waitForReady();
+
+  return {
+    alice,
+    bob,
+    aliceRoom,
+    bobRoom,
+    aliceMessages,
+    bobMessages
+  };
+}
+
+async function installChatFeatureMocks(page: Page): Promise<void> {
+  await page.route('**/api/klipy/config', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ enabled: true })
+    });
+  });
+
+  await page.route('**/api/klipy/gifs**', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        enabled: true,
+        hasNext: false,
+        results: [
+          {
+            id: 'mock-gif-1',
+            slug: 'mock-gif-1',
+            title: 'Mock Celebration GIF',
+            url: MOCK_GIF_IMAGE_URL,
+            previewUrl: MOCK_GIF_IMAGE_URL,
+            width: 64,
+            height: 64
+          }
+        ]
+      })
+    });
+  });
+
+  await page.route('**/api/link-metadata**', async (route) => {
+    const requestUrl = new URL(route.request().url());
+    const requestedTargetUrl = requestUrl.searchParams.get('url') ?? '';
+
+    if (requestedTargetUrl === MOCK_EMBED_URL) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          title: MOCK_EMBED_TITLE,
+          description: MOCK_EMBED_DESCRIPTION,
+          imageUrl: MOCK_GIF_IMAGE_URL,
+          siteName: 'Mock Docs'
+        })
+      });
+      return;
+    }
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ failed: true })
+    });
+  });
+}
+
+function createTextFilePayload(name: string, mimeType: string, content: string): ChatDropFilePayload {
+  return {
+    name,
+    mimeType,
+    base64: Buffer.from(content, 'utf8').toString('base64')
+  };
+}
+
+function buildMockSvgMarkup(label: string): string {
+  return [
+    '<svg xmlns="http://www.w3.org/2000/svg" width="160" height="120" viewBox="0 0 160 120">',
+    '<rect width="160" height="120" rx="18" fill="#0f172a" />',
+    '<circle cx="38" cy="36" r="18" fill="#38bdf8" />',
+    '<rect x="66" y="28" width="64" height="16" rx="8" fill="#f8fafc" />',
+    '<rect x="24" y="74" width="112" height="12" rx="6" fill="#22c55e" />',
+    `<text x="24" y="104" fill="#e2e8f0" font-size="12" font-family="Arial, sans-serif">${label}</text>`,
+    '</svg>'
+  ].join('');
+}
+
+function uniqueName(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}

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

@@ -0,0 +1,396 @@
+import { test, expect } from '../../fixtures/multi-client';
+import {
+  installWebRTCTracking,
+  waitForPeerConnected,
+  isPeerStillConnected,
+  waitForAudioFlow,
+  waitForAudioStatsPresent,
+  waitForVideoFlow,
+  waitForOutboundVideoFlow,
+  waitForInboundVideoFlow,
+  dumpRtcDiagnostics
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+
+/**
+ * Screen sharing E2E tests: verify video, screen-share audio, and voice audio
+ * flow correctly between users during screen sharing.
+ *
+ * Uses the same dedicated-browser-per-client infrastructure as voice tests.
+ * getDisplayMedia is monkey-patched to return a synthetic canvas video stream
+ * + 880 Hz oscillator audio, bypassing the browser picker dialog.
+ */
+
+const ALICE = { username: `alice_ss_${Date.now()}`, displayName: 'Alice', password: 'TestPass123!' };
+const BOB = { username: `bob_ss_${Date.now()}`, displayName: 'Bob', password: 'TestPass123!' };
+const SERVER_NAME = `SS Test ${Date.now()}`;
+const VOICE_CHANNEL = 'General';
+
+/** Register a user and navigate to /search. */
+async function registerUser(page: import('@playwright/test').Page, user: typeof ALICE) {
+  const registerPage = new RegisterPage(page);
+
+  await registerPage.goto();
+  await expect(registerPage.submitButton).toBeVisible();
+  await registerPage.register(user.username, user.displayName, user.password);
+  await expect(page).toHaveURL(/\/search/, { timeout: 15_000 });
+}
+
+/** Both users register → Alice creates server → Bob joins. */
+async function setupServerWithBothUsers(
+  alice: { page: import('@playwright/test').Page },
+  bob: { page: import('@playwright/test').Page }
+) {
+  await registerUser(alice.page, ALICE);
+  await registerUser(bob.page, BOB);
+
+  // Alice creates server
+  const aliceSearch = new ServerSearchPage(alice.page);
+
+  await aliceSearch.createServer(SERVER_NAME, { description: 'Screen share E2E' });
+  await expect(alice.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+
+  // Bob joins server
+  const bobSearch = new ServerSearchPage(bob.page);
+
+  await bobSearch.searchInput.fill(SERVER_NAME);
+
+  const serverCard = bob.page.locator('button', { hasText: SERVER_NAME }).first();
+
+  await expect(serverCard).toBeVisible({ timeout: 10_000 });
+  await serverCard.click();
+  await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+}
+
+/** Ensure voice channel exists and both users join it. */
+async function joinVoiceTogether(
+  alice: { page: import('@playwright/test').Page },
+  bob: { page: import('@playwright/test').Page }
+) {
+  const aliceRoom = new ChatRoomPage(alice.page);
+  const existingChannel = alice.page
+    .locator('app-rooms-side-panel')
+    .getByRole('button', { name: VOICE_CHANNEL, exact: true });
+
+  if (await existingChannel.count() === 0) {
+    await aliceRoom.openCreateVoiceChannelDialog();
+    await aliceRoom.createChannel(VOICE_CHANNEL);
+    await expect(existingChannel).toBeVisible({ timeout: 10_000 });
+  }
+
+  await aliceRoom.joinVoiceChannel(VOICE_CHANNEL);
+  await expect(alice.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+
+  const bobRoom = new ChatRoomPage(bob.page);
+
+  await bobRoom.joinVoiceChannel(VOICE_CHANNEL);
+  await expect(bob.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+
+  // Wait for WebRTC + audio pipeline
+  await waitForPeerConnected(alice.page, 30_000);
+  await waitForPeerConnected(bob.page, 30_000);
+  await waitForAudioStatsPresent(alice.page, 20_000);
+  await waitForAudioStatsPresent(bob.page, 20_000);
+
+  // Expand voice workspace on both clients so the demand-driven screen
+  // share request flow can fire (requires connectRemoteShares = true).
+  // Click the "VIEW" badge that appears next to the active voice channel.
+  const aliceView = alice.page.locator('app-rooms-side-panel')
+    .getByRole('button', { name: /view/i })
+    .first();
+  const bobView = bob.page.locator('app-rooms-side-panel')
+    .getByRole('button', { name: /view/i })
+    .first();
+
+  await expect(aliceView).toBeVisible({ timeout: 10_000 });
+  await aliceView.click();
+  await expect(alice.page.locator('app-voice-workspace')).toBeVisible({ timeout: 10_000 });
+
+  await expect(bobView).toBeVisible({ timeout: 10_000 });
+  await bobView.click();
+  await expect(bob.page.locator('app-voice-workspace')).toBeVisible({ timeout: 10_000 });
+
+  // Re-verify audio stats are present after workspace expansion (the VIEW
+  // click can trigger renegotiation which briefly disrupts audio).
+  await waitForAudioStatsPresent(alice.page, 20_000);
+  await waitForAudioStatsPresent(bob.page, 20_000);
+}
+
+function expectFlowing(
+  delta: { outboundBytesDelta: number; inboundBytesDelta: number; outboundPacketsDelta: number; inboundPacketsDelta: number },
+  label: string
+) {
+  expect(
+    delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0,
+    `${label} should be sending`
+  ).toBe(true);
+
+  expect(
+    delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0,
+    `${label} should be receiving`
+  ).toBe(true);
+}
+
+test.describe('Screen sharing', () => {
+  test('single user screen share: video and audio flow to receiver, voice audio continues', async ({ createClient }) => {
+    test.setTimeout(180_000);
+
+    const alice = await createClient();
+    const bob = await createClient();
+
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    alice.page.on('console', msg => console.log('[Alice]', msg.text()));
+    bob.page.on('console', msg => console.log('[Bob]', msg.text()));
+
+    // ── Setup: register, server, voice ────────────────────────────
+
+    await test.step('Setup server and voice channel', async () => {
+      await setupServerWithBothUsers(alice, bob);
+      await joinVoiceTogether(alice, bob);
+    });
+
+    // ── Verify voice audio before screen share ────────────────────
+
+    await test.step('Voice audio flows before screen share', async () => {
+      const aliceDelta = await waitForAudioFlow(alice.page, 30_000);
+      const bobDelta = await waitForAudioFlow(bob.page, 30_000);
+
+      expectFlowing(aliceDelta, 'Alice voice');
+      expectFlowing(bobDelta, 'Bob voice');
+    });
+
+    // ── Alice starts screen sharing ───────────────────────────────
+
+    await test.step('Alice starts screen sharing', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      await aliceRoom.startScreenShare();
+
+      // Screen share button should show active state (MonitorOff icon)
+      await expect(aliceRoom.isScreenShareActive).toBeVisible({ timeout: 10_000 });
+    });
+
+    // ── Verify screen share video flows ───────────────────────────
+
+    await test.step('Screen share video flows from Alice to Bob', async () => {
+      // Screen share is unidirectional: Alice sends video, Bob receives it.
+      const aliceVideo = await waitForOutboundVideoFlow(alice.page, 30_000);
+      const bobVideo = await waitForInboundVideoFlow(bob.page, 30_000);
+
+      if (aliceVideo.outboundBytesDelta === 0 || bobVideo.inboundBytesDelta === 0) {
+        console.log('[Alice RTC]\n' + await dumpRtcDiagnostics(alice.page));
+        console.log('[Bob RTC]\n' + await dumpRtcDiagnostics(bob.page));
+      }
+
+      expect(
+        aliceVideo.outboundBytesDelta > 0 || aliceVideo.outboundPacketsDelta > 0,
+        'Alice should be sending screen share video'
+      ).toBe(true);
+
+      expect(
+        bobVideo.inboundBytesDelta > 0 || bobVideo.inboundPacketsDelta > 0,
+        'Bob should be receiving screen share video'
+      ).toBe(true);
+    });
+
+    // ── Verify voice audio continues during screen share ──────────
+
+    await test.step('Voice audio continues during screen share', async () => {
+      const aliceAudio = await waitForAudioFlow(alice.page, 20_000);
+      const bobAudio = await waitForAudioFlow(bob.page, 20_000);
+
+      expectFlowing(aliceAudio, 'Alice voice during screen share');
+      expectFlowing(bobAudio, 'Bob voice during screen share');
+    });
+
+    // ── Bob can hear Alice talk while she screen shares ───────────
+
+    await test.step('Bob receives audio from Alice during screen share', async () => {
+      // Specifically check Bob is receiving audio (from Alice's voice)
+      const bobAudio = await waitForAudioFlow(bob.page, 15_000);
+
+      expect(
+        bobAudio.inboundBytesDelta > 0,
+        'Bob should receive voice audio while Alice screen shares'
+      ).toBe(true);
+    });
+
+    // ── Alice stops screen sharing ────────────────────────────────
+
+    await test.step('Alice stops screen sharing', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      await aliceRoom.stopScreenShare();
+
+      // Active icon should disappear - regular Monitor icon shown instead
+      await expect(
+        aliceRoom.voiceControls.locator('button:has(ng-icon[name="lucideMonitor"])').first()
+      ).toBeVisible({ timeout: 10_000 });
+    });
+
+    // ── Voice audio still works after screen share ends ───────────
+
+    await test.step('Voice audio resumes normally after screen share stops', async () => {
+      const aliceAudio = await waitForAudioFlow(alice.page, 20_000);
+      const bobAudio = await waitForAudioFlow(bob.page, 20_000);
+
+      expectFlowing(aliceAudio, 'Alice voice after screen share');
+      expectFlowing(bobAudio, 'Bob voice after screen share');
+    });
+  });
+
+  test('multiple users screen share simultaneously', async ({ createClient }) => {
+    test.setTimeout(180_000);
+
+    const alice = await createClient();
+    const bob = await createClient();
+
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    alice.page.on('console', msg => console.log('[Alice]', msg.text()));
+    bob.page.on('console', msg => console.log('[Bob]', msg.text()));
+
+    await test.step('Setup server and voice channel', async () => {
+      await setupServerWithBothUsers(alice, bob);
+      await joinVoiceTogether(alice, bob);
+    });
+
+    // ── Both users start screen sharing ───────────────────────────
+
+    await test.step('Alice starts screen sharing', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      await aliceRoom.startScreenShare();
+      await expect(aliceRoom.isScreenShareActive).toBeVisible({ timeout: 10_000 });
+    });
+
+    await test.step('Bob starts screen sharing', async () => {
+      const bobRoom = new ChatRoomPage(bob.page);
+
+      await bobRoom.startScreenShare();
+      await expect(bobRoom.isScreenShareActive).toBeVisible({ timeout: 10_000 });
+    });
+
+    // ── Verify video flows in both directions ─────────────────────
+
+    await test.step('Video flows bidirectionally with both screen shares active', async () => {
+      // Both sharing: each page sends and receives video
+      const aliceVideo = await waitForVideoFlow(alice.page, 30_000);
+      const bobVideo = await waitForVideoFlow(bob.page, 30_000);
+
+      expectFlowing(aliceVideo, 'Alice screen share video');
+      expectFlowing(bobVideo, 'Bob screen share video');
+    });
+
+    // ── Voice audio continues with dual screen shares ─────────────
+
+    await test.step('Voice audio continues with both users screen sharing', async () => {
+      const aliceAudio = await waitForAudioFlow(alice.page, 20_000);
+      const bobAudio = await waitForAudioFlow(bob.page, 20_000);
+
+      expectFlowing(aliceAudio, 'Alice voice during dual screen share');
+      expectFlowing(bobAudio, 'Bob voice during dual screen share');
+    });
+
+    // ── Both stop screen sharing ──────────────────────────────────
+
+    await test.step('Both users stop screen sharing', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+      const bobRoom = new ChatRoomPage(bob.page);
+
+      await aliceRoom.stopScreenShare();
+      await expect(
+        aliceRoom.voiceControls.locator('button:has(ng-icon[name="lucideMonitor"])').first()
+      ).toBeVisible({ timeout: 10_000 });
+
+      await bobRoom.stopScreenShare();
+      await expect(
+        bobRoom.voiceControls.locator('button:has(ng-icon[name="lucideMonitor"])').first()
+      ).toBeVisible({ timeout: 10_000 });
+    });
+  });
+
+  test('screen share connection stays stable for 10+ seconds', async ({ createClient }) => {
+    test.setTimeout(180_000);
+
+    const alice = await createClient();
+    const bob = await createClient();
+
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    alice.page.on('console', msg => console.log('[Alice]', msg.text()));
+    bob.page.on('console', msg => console.log('[Bob]', msg.text()));
+
+    await test.step('Setup server and voice channel', async () => {
+      await setupServerWithBothUsers(alice, bob);
+      await joinVoiceTogether(alice, bob);
+    });
+
+    await test.step('Alice starts screen sharing', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      await aliceRoom.startScreenShare();
+      await expect(aliceRoom.isScreenShareActive).toBeVisible({ timeout: 10_000 });
+
+      // Wait for video pipeline to fully establish
+      await waitForOutboundVideoFlow(alice.page, 30_000);
+      await waitForInboundVideoFlow(bob.page, 30_000);
+    });
+
+    // ── Stability checkpoints at 0s, 5s, 10s ─────────────────────
+
+    await test.step('Connection stays stable for 10+ seconds during screen share', async () => {
+      for (const checkpoint of [
+        0,
+        5_000,
+        5_000
+      ]) {
+        if (checkpoint > 0) {
+          await alice.page.waitForTimeout(checkpoint);
+        }
+
+        const aliceConnected = await isPeerStillConnected(alice.page);
+        const bobConnected = await isPeerStillConnected(bob.page);
+
+        expect(aliceConnected, 'Alice should still be connected').toBe(true);
+        expect(bobConnected, 'Bob should still be connected').toBe(true);
+      }
+
+      // After 10s - verify both video and audio still flowing
+      const aliceVideo = await waitForOutboundVideoFlow(alice.page, 15_000);
+      const bobVideo = await waitForInboundVideoFlow(bob.page, 15_000);
+
+      expect(
+        aliceVideo.outboundBytesDelta > 0,
+        'Alice still sending screen share video after 10s'
+      ).toBe(true);
+
+      expect(
+        bobVideo.inboundBytesDelta > 0,
+        'Bob still receiving screen share video after 10s'
+      ).toBe(true);
+
+      const aliceAudio = await waitForAudioFlow(alice.page, 15_000);
+      const bobAudio = await waitForAudioFlow(bob.page, 15_000);
+
+      expectFlowing(aliceAudio, 'Alice voice after 10s screen share');
+      expectFlowing(bobAudio, 'Bob voice after 10s screen share');
+    });
+
+    // ── Clean disconnect ──────────────────────────────────────────
+
+    await test.step('Alice stops screen share and disconnects', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      await aliceRoom.stopScreenShare();
+      await aliceRoom.disconnectButton.click();
+      await expect(aliceRoom.disconnectButton).not.toBeVisible({ timeout: 10_000 });
+    });
+  });
+});

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

@@ -0,0 +1,260 @@
+import { test, expect } from '../../fixtures/multi-client';
+import {
+  installWebRTCTracking,
+  waitForPeerConnected,
+  isPeerStillConnected,
+  getAudioStatsDelta,
+  waitForAudioFlow,
+  waitForAudioStatsPresent,
+  dumpRtcDiagnostics
+} from '../../helpers/webrtc-helpers';
+import { RegisterPage } from '../../pages/register.page';
+import { ServerSearchPage } from '../../pages/server-search.page';
+import { ChatRoomPage } from '../../pages/chat-room.page';
+
+/**
+ * Full user journey: register → create server → join → voice → verify audio
+ * for 10+ seconds of stable connectivity.
+ *
+ * Uses two independent browser contexts (Alice & Bob) to simulate real
+ * multi-user WebRTC voice chat.
+ */
+
+const ALICE = { username: `alice_${Date.now()}`, displayName: 'Alice', password: 'TestPass123!' };
+const BOB = { username: `bob_${Date.now()}`, displayName: 'Bob', password: 'TestPass123!' };
+const SERVER_NAME = `E2E Test Server ${Date.now()}`;
+const VOICE_CHANNEL = 'General';
+
+test.describe('Full user journey: register → server → voice chat', () => {
+  test('two users register, create server, join voice, and stay connected 10+ seconds with audio', async ({ createClient }) => {
+    test.setTimeout(180_000); // 3 min - covers registration, server creation, voice establishment, and 10s stability check
+
+    const alice = await createClient();
+    const bob = await createClient();
+
+    // Install WebRTC tracking before any navigation
+    await installWebRTCTracking(alice.page);
+    await installWebRTCTracking(bob.page);
+
+    // Forward browser console for debugging
+    alice.page.on('console', msg => console.log('[Alice]', msg.text()));
+    bob.page.on('console', msg => console.log('[Bob]', msg.text()));
+
+    // ── Step 1: Register both users ──────────────────────────────────
+
+    await test.step('Alice registers an account', async () => {
+      const registerPage = new RegisterPage(alice.page);
+
+      await registerPage.goto();
+      await expect(registerPage.submitButton).toBeVisible();
+      await registerPage.register(ALICE.username, ALICE.displayName, ALICE.password);
+
+      // After registration, app should navigate to /search
+      await expect(alice.page).toHaveURL(/\/search/, { timeout: 15_000 });
+    });
+
+    await test.step('Bob registers an account', async () => {
+      const registerPage = new RegisterPage(bob.page);
+
+      await registerPage.goto();
+      await expect(registerPage.submitButton).toBeVisible();
+      await registerPage.register(BOB.username, BOB.displayName, BOB.password);
+
+      await expect(bob.page).toHaveURL(/\/search/, { timeout: 15_000 });
+    });
+
+    // ── Step 2: Alice creates a server ───────────────────────────────
+
+    await test.step('Alice creates a new server', async () => {
+      const searchPage = new ServerSearchPage(alice.page);
+
+      await searchPage.createServer(SERVER_NAME, {
+        description: 'E2E test server for voice testing'
+      });
+
+      // After server creation, app navigates to the room
+      await expect(alice.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+    });
+
+    // ── Step 3: Bob joins the server ─────────────────────────────────
+
+    await test.step('Bob finds and joins the server', async () => {
+      const searchPage = new ServerSearchPage(bob.page);
+
+      // Search for the server
+      await searchPage.searchInput.fill(SERVER_NAME);
+
+      // Wait for search results and click the server
+      const serverCard = bob.page.locator('button', { hasText: SERVER_NAME }).first();
+
+      await expect(serverCard).toBeVisible({ timeout: 10_000 });
+      await serverCard.click();
+
+      // Bob should be in the room now
+      await expect(bob.page).toHaveURL(/\/room\//, { timeout: 15_000 });
+    });
+
+    // ── Step 4: Create a voice channel (if one doesn't exist) ────────
+
+    await test.step('Alice ensures a voice channel is available', async () => {
+      const chatRoom = new ChatRoomPage(alice.page);
+      const existingVoiceChannel = alice.page.locator('app-rooms-side-panel')
+        .getByRole('button', { name: VOICE_CHANNEL, exact: true });
+      const voiceChannelExists = await existingVoiceChannel.count() > 0;
+
+      if (!voiceChannelExists) {
+        // Click "Create Voice Channel" plus button
+        await chatRoom.openCreateVoiceChannelDialog();
+        await chatRoom.createChannel(VOICE_CHANNEL);
+
+        // Wait for the channel to appear
+        await expect(existingVoiceChannel).toBeVisible({ timeout: 10_000 });
+      }
+    });
+
+    // ── Step 5: Both users join the voice channel ────────────────────
+
+    await test.step('Alice joins the voice channel', async () => {
+      const chatRoom = new ChatRoomPage(alice.page);
+
+      await chatRoom.joinVoiceChannel(VOICE_CHANNEL);
+
+      // Voice controls should appear (indicates voice is connected)
+      await expect(alice.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+    });
+
+    await test.step('Bob joins the voice channel', async () => {
+      const chatRoom = new ChatRoomPage(bob.page);
+
+      await chatRoom.joinVoiceChannel(VOICE_CHANNEL);
+
+      await expect(bob.page.locator('app-voice-controls')).toBeVisible({ timeout: 15_000 });
+    });
+
+    // ── Step 6: Verify WebRTC connection establishes ─────────────────
+
+    await test.step('WebRTC peer connection reaches "connected" state', async () => {
+      await waitForPeerConnected(alice.page, 30_000);
+      await waitForPeerConnected(bob.page, 30_000);
+
+      // Wait for audio RTP pipeline to appear before measuring deltas -
+      // renegotiation after initial connect can temporarily remove stats.
+      await waitForAudioStatsPresent(alice.page, 20_000);
+      await waitForAudioStatsPresent(bob.page, 20_000);
+    });
+
+    // ── Step 7: Verify audio is flowing in both directions ───────────
+
+    await test.step('Audio packets are flowing between Alice and Bob', async () => {
+      const aliceDelta = await waitForAudioFlow(alice.page, 30_000);
+      const bobDelta = await waitForAudioFlow(bob.page, 30_000);
+
+      if (aliceDelta.outboundBytesDelta === 0 || aliceDelta.inboundBytesDelta === 0
+        || bobDelta.outboundBytesDelta === 0 || bobDelta.inboundBytesDelta === 0) {
+        console.log('[Alice RTC Diagnostics]\n' + await dumpRtcDiagnostics(alice.page));
+        console.log('[Bob RTC Diagnostics]\n' + await dumpRtcDiagnostics(bob.page));
+      }
+
+      expectAudioFlow(aliceDelta, 'Alice');
+      expectAudioFlow(bobDelta, 'Bob');
+    });
+
+    // ── Step 8: Verify UI states are correct ─────────────────────────
+
+    await test.step('Voice UI shows correct state for both users', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+      const bobRoom = new ChatRoomPage(bob.page);
+
+      // Both should see voice controls with "Connected" status
+      await expect(alice.page.locator('app-voice-controls')).toBeVisible();
+      await expect(bob.page.locator('app-voice-controls')).toBeVisible();
+
+      // Both should see the voice workspace or at least voice users listed
+      // Check that both users appear in the voice channel user list
+      const aliceSeesBob = aliceRoom.channelsSidePanel.getByText(BOB.displayName).first();
+      const bobSeesAlice = bobRoom.channelsSidePanel.getByText(ALICE.displayName).first();
+
+      await expect(aliceSeesBob).toBeVisible({ timeout: 10_000 });
+      await expect(bobSeesAlice).toBeVisible({ timeout: 10_000 });
+    });
+
+    // ── Step 9: Stay connected for 10+ seconds, verify stability ─────
+
+    await test.step('Connection remains stable for 10+ seconds', async () => {
+      // Check connectivity at 0s, 5s, and 10s intervals
+      for (const checkpoint of [
+        0,
+        5_000,
+        5_000
+      ]) {
+        if (checkpoint > 0) {
+          await alice.page.waitForTimeout(checkpoint);
+        }
+
+        const aliceConnected = await isPeerStillConnected(alice.page);
+        const bobConnected = await isPeerStillConnected(bob.page);
+
+        expect(aliceConnected, 'Alice should still be connected').toBe(true);
+        expect(bobConnected, 'Bob should still be connected').toBe(true);
+      }
+
+      // After 10s total, verify audio is still flowing
+      const aliceDelta = await waitForAudioFlow(alice.page, 15_000);
+      const bobDelta = await waitForAudioFlow(bob.page, 15_000);
+
+      expectAudioFlow(aliceDelta, 'Alice after 10s');
+      expectAudioFlow(bobDelta, 'Bob after 10s');
+    });
+
+    // ── Step 10: Verify mute/unmute works correctly ──────────────────
+
+    await test.step('Mute toggle works correctly', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      // Alice mutes - click the first button in voice controls (mute button)
+      await aliceRoom.muteButton.click();
+
+      // After muting, Alice's outbound audio should stop increasing
+      // When muted, bytesSent may still show small comfort noise or zero growth
+      // The key assertion is that Bob's inbound for Alice's stream stops or reduces
+      await getAudioStatsDelta(alice.page, 2_000);
+
+      // Alice unmutes
+      await aliceRoom.muteButton.click();
+
+      // After unmuting, outbound should resume
+      const unmutedDelta = await waitForAudioFlow(alice.page, 15_000);
+
+      expectAudioFlow(unmutedDelta, 'Alice after unmuting');
+    });
+
+    // ── Step 11: Clean disconnect ────────────────────────────────────
+
+    await test.step('Alice disconnects from voice', async () => {
+      const aliceRoom = new ChatRoomPage(alice.page);
+
+      // Click the disconnect/hang-up button
+      await aliceRoom.disconnectButton.click();
+
+      // Connected controls should collapse for Alice after disconnect
+      await expect(aliceRoom.disconnectButton).not.toBeVisible({ timeout: 10_000 });
+    });
+  });
+});
+
+function expectAudioFlow(delta: {
+  outboundBytesDelta: number;
+  inboundBytesDelta: number;
+  outboundPacketsDelta: number;
+  inboundPacketsDelta: number;
+}, label: string): void {
+  expect(
+    delta.outboundBytesDelta > 0 || delta.outboundPacketsDelta > 0,
+    `${label} should be sending audio`
+  ).toBe(true);
+
+  expect(
+    delta.inboundBytesDelta > 0 || delta.inboundPacketsDelta > 0,
+    `${label} should be receiving audio`
+  ).toBe(true);
+}

electron/cqrs/commands/handlers/clearAllData.ts

@@ -3,6 +3,11 @@ import {
   MessageEntity,
   UserEntity,
   RoomEntity,
+  RoomChannelEntity,
+  RoomMemberEntity,
+  RoomRoleEntity,
+  RoomUserRoleEntity,
+  RoomChannelPermissionEntity,
   ReactionEntity,
   BanEntity,
   AttachmentEntity,
@@ -13,6 +18,11 @@ export async function handleClearAllData(dataSource: DataSource): Promise<void>
   await dataSource.getRepository(MessageEntity).clear();
   await dataSource.getRepository(UserEntity).clear();
   await dataSource.getRepository(RoomEntity).clear();
+  await dataSource.getRepository(RoomChannelEntity).clear();
+  await dataSource.getRepository(RoomMemberEntity).clear();
+  await dataSource.getRepository(RoomRoleEntity).clear();
+  await dataSource.getRepository(RoomUserRoleEntity).clear();
+  await dataSource.getRepository(RoomChannelPermissionEntity).clear();
   await dataSource.getRepository(ReactionEntity).clear();
   await dataSource.getRepository(BanEntity).clear();
   await dataSource.getRepository(AttachmentEntity).clear();

electron/cqrs/commands/handlers/deleteRoom.ts

@@ -1,10 +1,25 @@
 import { DataSource } from 'typeorm';
-import { RoomEntity, MessageEntity } from '../../../entities';
+import {
+  RoomChannelPermissionEntity,
+  RoomChannelEntity,
+  RoomEntity,
+  RoomMemberEntity,
+  RoomRoleEntity,
+  RoomUserRoleEntity,
+  MessageEntity
+} from '../../../entities';
 import { DeleteRoomCommand } from '../../types';
 
 export async function handleDeleteRoom(command: DeleteRoomCommand, dataSource: DataSource): Promise<void> {
   const { roomId } = command.payload;
 
-  await dataSource.getRepository(RoomEntity).delete({ id: roomId });
+  await dataSource.transaction(async (manager) => {
-  await dataSource.getRepository(MessageEntity).delete({ roomId });
+    await manager.getRepository(RoomChannelPermissionEntity).delete({ roomId });
+    await manager.getRepository(RoomChannelEntity).delete({ roomId });
+    await manager.getRepository(RoomMemberEntity).delete({ roomId });
+    await manager.getRepository(RoomRoleEntity).delete({ roomId });
+    await manager.getRepository(RoomUserRoleEntity).delete({ roomId });
+    await manager.getRepository(RoomEntity).delete({ id: roomId });
+    await manager.getRepository(MessageEntity).delete({ roomId });
+  });
 }

electron/cqrs/commands/handlers/saveMessage.ts

@@ -1,10 +1,13 @@
 import { DataSource } from 'typeorm';
 import { MessageEntity } from '../../../entities';
+import { replaceMessageReactions } from '../../relations';
 import { SaveMessageCommand } from '../../types';
 
 export async function handleSaveMessage(command: SaveMessageCommand, dataSource: DataSource): Promise<void> {
-  const repo = dataSource.getRepository(MessageEntity);
   const { message } = command.payload;
+
+  await dataSource.transaction(async (manager) => {
+    const repo = manager.getRepository(MessageEntity);
     const entity = repo.create({
       id: message.id,
       roomId: message.roomId,
@@ -14,10 +17,12 @@ export async function handleSaveMessage(command: SaveMessageCommand, dataSource:
       content: message.content,
       timestamp: message.timestamp,
       editedAt: message.editedAt ?? null,
-    reactions: JSON.stringify(message.reactions ?? []),
       isDeleted: message.isDeleted ? 1 : 0,
-    replyToId: message.replyToId ?? null
+      replyToId: message.replyToId ?? null,
+      linkMetadata: message.linkMetadata ? JSON.stringify(message.linkMetadata) : null
     });
 
     await repo.save(entity);
+    await replaceMessageReactions(manager, message.id, message.reactions ?? []);
+  });
 }

electron/cqrs/commands/handlers/saveRoom.ts

@@ -1,10 +1,27 @@
 import { DataSource } from 'typeorm';
 import { RoomEntity } from '../../../entities';
+import { replaceRoomRelations } from '../../relations';
 import { SaveRoomCommand } from '../../types';
 
+function extractSlowModeInterval(room: SaveRoomCommand['payload']['room']): number {
+  if (typeof room.slowModeInterval === 'number' && Number.isFinite(room.slowModeInterval)) {
+    return room.slowModeInterval;
+  }
+
+  const permissions = room.permissions && typeof room.permissions === 'object'
+    ? room.permissions as { slowModeInterval?: unknown }
+    : null;
+
+  return typeof permissions?.slowModeInterval === 'number' && Number.isFinite(permissions.slowModeInterval)
+    ? permissions.slowModeInterval
+    : 0;
+}
+
 export async function handleSaveRoom(command: SaveRoomCommand, dataSource: DataSource): Promise<void> {
-  const repo = dataSource.getRepository(RoomEntity);
   const { room } = command.payload;
+
+  await dataSource.transaction(async (manager) => {
+    const repo = manager.getRepository(RoomEntity);
     const entity = repo.create({
       id: room.id,
       name: room.name,
@@ -19,13 +36,20 @@ export async function handleSaveRoom(command: SaveRoomCommand, dataSource: DataS
       maxUsers: room.maxUsers ?? null,
       icon: room.icon ?? null,
       iconUpdatedAt: room.iconUpdatedAt ?? null,
-    permissions: room.permissions != null ? JSON.stringify(room.permissions) : null,
+      slowModeInterval: extractSlowModeInterval(room),
-    channels: room.channels != null ? JSON.stringify(room.channels) : 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);
+    await replaceRoomRelations(manager, room.id, {
+      channels: room.channels ?? [],
+      members: room.members ?? [],
+      roles: room.roles ?? [],
+      roleAssignments: room.roleAssignments ?? [],
+      channelPermissions: room.channelPermissions ?? [],
+      permissions: room.permissions
+    });
+  });
 }

electron/cqrs/commands/handlers/updateMessage.ts

@@ -1,41 +1,52 @@
 import { DataSource } from 'typeorm';
 import { MessageEntity } from '../../../entities';
+import { replaceMessageReactions } from '../../relations';
 import { UpdateMessageCommand } from '../../types';
 
 export async function handleUpdateMessage(command: UpdateMessageCommand, dataSource: DataSource): Promise<void> {
-  const repo = dataSource.getRepository(MessageEntity);
   const { messageId, updates } = command.payload;
+
+  await dataSource.transaction(async (manager) => {
+    const repo = manager.getRepository(MessageEntity);
     const existing = await repo.findOne({ where: { id: messageId } });
 
     if (!existing)
       return;
 
-  if (updates.channelId !== undefined)
+    const directFields = [
-    existing.channelId = updates.channelId ?? null;
+      'senderId',
+      'senderName',
+      'content',
+      'timestamp'
+    ] as const;
+    const entity = existing as unknown as Record<string, unknown>;
 
-  if (updates.senderId !== undefined)
+    for (const field of directFields) {
-    existing.senderId = updates.senderId;
+      if (updates[field] !== undefined)
+        entity[field] = updates[field];
+    }
 
-  if (updates.senderName !== undefined)
+    const nullableFields = [
-    existing.senderName = updates.senderName;
+      'channelId',
+      'editedAt',
+      'replyToId'
+    ] as const;
 
-  if (updates.content !== undefined)
+    for (const field of nullableFields) {
-    existing.content = updates.content;
+      if (updates[field] !== undefined)
-
+        entity[field] = updates[field] ?? null;
-  if (updates.timestamp !== undefined)
+    }
-    existing.timestamp = updates.timestamp;
-
-  if (updates.editedAt !== undefined)
-    existing.editedAt = updates.editedAt ?? null;
-
-  if (updates.reactions !== undefined)
-    existing.reactions = JSON.stringify(updates.reactions ?? []);
 
     if (updates.isDeleted !== undefined)
       existing.isDeleted = updates.isDeleted ? 1 : 0;
 
-  if (updates.replyToId !== undefined)
+    if (updates.linkMetadata !== undefined)
-    existing.replyToId = updates.replyToId ?? null;
+      existing.linkMetadata = updates.linkMetadata ? JSON.stringify(updates.linkMetadata) : null;
 
     await repo.save(existing);
+
+    if (updates.reactions !== undefined) {
+      await replaceMessageReactions(manager, messageId, updates.reactions ?? []);
+    }
+  });
 }

electron/cqrs/commands/handlers/updateRoom.ts

@@ -1,31 +1,68 @@
 import { DataSource } from 'typeorm';
 import { RoomEntity } from '../../../entities';
+import { replaceRoomRelations } from '../../relations';
 import { UpdateRoomCommand } from '../../types';
 import {
   applyUpdates,
   boolToInt,
-  jsonOrNull,
   TransformMap
 } from './utils/applyUpdates';
 
 const ROOM_TRANSFORMS: TransformMap = {
   hasPassword: boolToInt,
   isPrivate: boolToInt,
-  userCount: (val) => (val ?? 0),
+  userCount: (val) => (val ?? 0)
-  permissions: jsonOrNull,
-  channels: jsonOrNull,
-  members: jsonOrNull
 };
 
+function extractSlowModeInterval(updates: UpdateRoomCommand['payload']['updates']): number | undefined {
+  if (typeof updates.slowModeInterval === 'number' && Number.isFinite(updates.slowModeInterval)) {
+    return updates.slowModeInterval;
+  }
+
+  const permissions = updates.permissions && typeof updates.permissions === 'object'
+    ? updates.permissions as { slowModeInterval?: unknown }
+    : null;
+
+  return typeof permissions?.slowModeInterval === 'number' && Number.isFinite(permissions.slowModeInterval)
+    ? permissions.slowModeInterval
+    : undefined;
+}
+
 export async function handleUpdateRoom(command: UpdateRoomCommand, dataSource: DataSource): Promise<void> {
-  const repo = dataSource.getRepository(RoomEntity);
   const { roomId, updates } = command.payload;
+
+  await dataSource.transaction(async (manager) => {
+    const repo = manager.getRepository(RoomEntity);
     const existing = await repo.findOne({ where: { id: roomId } });
 
     if (!existing)
       return;
 
-  applyUpdates(existing, updates, ROOM_TRANSFORMS);
+    const {
-  await repo.save(existing);
+      channels,
+      members,
+      roles,
+      roleAssignments,
+      channelPermissions,
+      permissions: rawPermissions,
+      ...entityUpdates
+    } = updates;
+    const slowModeInterval = extractSlowModeInterval(updates);
+
+    if (slowModeInterval !== undefined) {
+      entityUpdates.slowModeInterval = slowModeInterval;
+    }
+
+    applyUpdates(existing, entityUpdates, ROOM_TRANSFORMS);
+    await repo.save(existing);
+    await replaceRoomRelations(manager, roomId, {
+      channels,
+      members,
+      roles,
+      roleAssignments,
+      channelPermissions,
+      permissions: rawPermissions
+    });
+  });
 }
 

electron/cqrs/mappers.ts

@@ -9,10 +9,19 @@ import { RoomEntity } from '../entities/RoomEntity';
 import { ReactionEntity } from '../entities/ReactionEntity';
 import { BanEntity } from '../entities/BanEntity';
 import { AttachmentEntity } from '../entities/AttachmentEntity';
+import { ReactionPayload } from './types';
+import {
+  relationRecordToRoomPayload,
+  RoomChannelPermissionRecord,
+  RoomChannelRecord,
+  RoomMemberRecord,
+  RoomRoleAssignmentRecord,
+  RoomRoleRecord
+} from './relations';
 
 const DELETED_MESSAGE_CONTENT = '[Message deleted]';
 
-export function rowToMessage(row: MessageEntity) {
+export function rowToMessage(row: MessageEntity, reactions: ReactionPayload[] = []) {
   const isDeleted = !!row.isDeleted;
 
   return {
@@ -24,9 +33,10 @@ export function rowToMessage(row: MessageEntity) {
     content: isDeleted ? DELETED_MESSAGE_CONTENT : row.content,
     timestamp: row.timestamp,
     editedAt: row.editedAt ?? undefined,
-    reactions: isDeleted ? [] : JSON.parse(row.reactions || '[]') as unknown[],
+    reactions: isDeleted ? [] : reactions,
     isDeleted,
-    replyToId: row.replyToId ?? undefined
+    replyToId: row.replyToId ?? undefined,
+    linkMetadata: row.linkMetadata ? JSON.parse(row.linkMetadata) : undefined
   };
 }
 
@@ -49,7 +59,30 @@ export function rowToUser(row: UserEntity) {
   };
 }
 
-export function rowToRoom(row: RoomEntity) {
+export function rowToRoom(
+  row: RoomEntity,
+  relations: {
+    channels?: RoomChannelRecord[];
+    members?: RoomMemberRecord[];
+    roles?: RoomRoleRecord[];
+    roleAssignments?: RoomRoleAssignmentRecord[];
+    channelPermissions?: RoomChannelPermissionRecord[];
+  } = {
+    channels: [],
+    members: [],
+    roles: [],
+    roleAssignments: [],
+    channelPermissions: []
+  }
+) {
+  const relationPayload = relationRecordToRoomPayload({ slowModeInterval: row.slowModeInterval }, {
+    channels: relations.channels ?? [],
+    members: relations.members ?? [],
+    roles: relations.roles ?? [],
+    roleAssignments: relations.roleAssignments ?? [],
+    channelPermissions: relations.channelPermissions ?? []
+  });
+
   return {
     id: row.id,
     name: row.name,
@@ -64,9 +97,13 @@ export function rowToRoom(row: RoomEntity) {
     maxUsers: row.maxUsers ?? undefined,
     icon: row.icon ?? undefined,
     iconUpdatedAt: row.iconUpdatedAt ?? undefined,
-    permissions: row.permissions ? JSON.parse(row.permissions) : undefined,
+    slowModeInterval: row.slowModeInterval,
-    channels: row.channels ? JSON.parse(row.channels) : undefined,
+    permissions: relationPayload.permissions,
-    members: row.members ? JSON.parse(row.members) : undefined,
+    channels: relationPayload.channels,
+    members: relationPayload.members,
+    roles: relationPayload.roles,
+    roleAssignments: relationPayload.roleAssignments,
+    channelPermissions: relationPayload.channelPermissions,
     sourceId: row.sourceId ?? undefined,
     sourceName: row.sourceName ?? undefined,
     sourceUrl: row.sourceUrl ?? undefined

electron/cqrs/queries/handlers/getAllRooms.ts

@@ -1,10 +1,12 @@
 import { DataSource } from 'typeorm';
 import { RoomEntity } from '../../../entities';
 import { rowToRoom } from '../../mappers';
+import { loadRoomRelationsMap } from '../../relations';
 
 export async function handleGetAllRooms(dataSource: DataSource) {
   const repo = dataSource.getRepository(RoomEntity);
   const rows = await repo.find();
+  const relationsByRoomId = await loadRoomRelationsMap(dataSource, rows.map((row) => row.id));
 
-  return rows.map(rowToRoom);
+  return rows.map((row) => rowToRoom(row, relationsByRoomId.get(row.id)));
 }

electron/cqrs/queries/handlers/getMessageById.ts

@@ -2,10 +2,17 @@ import { DataSource } from 'typeorm';
 import { MessageEntity } from '../../../entities';
 import { GetMessageByIdQuery } from '../../types';
 import { rowToMessage } from '../../mappers';
+import { loadMessageReactionsMap } from '../../relations';
 
 export async function handleGetMessageById(query: GetMessageByIdQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(MessageEntity);
   const row = await repo.findOne({ where: { id: query.payload.messageId } });
 
-  return row ? rowToMessage(row) : null;
+  if (!row) {
+    return null;
+  }
+
+  const reactionsByMessageId = await loadMessageReactionsMap(dataSource, [row.id]);
+
+  return rowToMessage(row, reactionsByMessageId.get(row.id) ?? []);
 }

electron/cqrs/queries/handlers/getMessages.ts

@@ -2,6 +2,7 @@ import { DataSource } from 'typeorm';
 import { MessageEntity } from '../../../entities';
 import { GetMessagesQuery } from '../../types';
 import { rowToMessage } from '../../mappers';
+import { loadMessageReactionsMap } from '../../relations';
 
 export async function handleGetMessages(query: GetMessagesQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(MessageEntity);
@@ -12,6 +13,7 @@ export async function handleGetMessages(query: GetMessagesQuery, dataSource: Dat
     take: limit,
     skip: offset
   });
+  const reactionsByMessageId = await loadMessageReactionsMap(dataSource, rows.map((row) => row.id));
 
-  return rows.map(rowToMessage);
+  return rows.map((row) => rowToMessage(row, reactionsByMessageId.get(row.id) ?? []));
 }

electron/cqrs/queries/handlers/getMessagesSince.ts

@@ -2,6 +2,7 @@ import { DataSource, MoreThan } from 'typeorm';
 import { MessageEntity } from '../../../entities';
 import { GetMessagesSinceQuery } from '../../types';
 import { rowToMessage } from '../../mappers';
+import { loadMessageReactionsMap } from '../../relations';
 
 export async function handleGetMessagesSince(query: GetMessagesSinceQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(MessageEntity);
@@ -13,6 +14,7 @@ export async function handleGetMessagesSince(query: GetMessagesSinceQuery, dataS
     },
     order: { timestamp: 'ASC' }
   });
+  const reactionsByMessageId = await loadMessageReactionsMap(dataSource, rows.map((row) => row.id));
 
-  return rows.map(rowToMessage);
+  return rows.map((row) => rowToMessage(row, reactionsByMessageId.get(row.id) ?? []));
 }

electron/cqrs/queries/handlers/getRoom.ts

@@ -2,10 +2,17 @@ import { DataSource } from 'typeorm';
 import { RoomEntity } from '../../../entities';
 import { GetRoomQuery } from '../../types';
 import { rowToRoom } from '../../mappers';
+import { loadRoomRelationsMap } from '../../relations';
 
 export async function handleGetRoom(query: GetRoomQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(RoomEntity);
   const row = await repo.findOne({ where: { id: query.payload.roomId } });
 
-  return row ? rowToRoom(row) : null;
+  if (!row) {
+    return null;
+  }
+
+  const relationsByRoomId = await loadRoomRelationsMap(dataSource, [row.id]);
+
+  return rowToRoom(row, relationsByRoomId.get(row.id));
 }

electron/cqrs/types.ts

@@ -50,6 +50,7 @@ export interface MessagePayload {
   reactions?: ReactionPayload[];
   isDeleted?: boolean;
   replyToId?: string;
+  linkMetadata?: { url: string; title?: string; description?: string; imageUrl?: string; siteName?: string; failed?: boolean }[];
 }
 
 export interface ReactionPayload {
@@ -61,6 +62,44 @@ export interface ReactionPayload {
   timestamp: number;
 }
 
+export type PermissionStatePayload = 'allow' | 'deny' | 'inherit';
+
+export type RoomPermissionKeyPayload =
+  | 'manageServer'
+  | 'manageRoles'
+  | 'manageChannels'
+  | 'manageIcon'
+  | 'kickMembers'
+  | 'banMembers'
+  | 'manageBans'
+  | 'deleteMessages'
+  | 'joinVoice'
+  | 'shareScreen'
+  | 'uploadFiles';
+
+export interface AccessRolePayload {
+  id: string;
+  name: string;
+  color?: string;
+  position: number;
+  isSystem?: boolean;
+  permissions?: Partial<Record<RoomPermissionKeyPayload, PermissionStatePayload>>;
+}
+
+export interface RoleAssignmentPayload {
+  userId: string;
+  oderId?: string;
+  roleIds: string[];
+}
+
+export interface ChannelPermissionPayload {
+  channelId: string;
+  targetType: 'role' | 'user';
+  targetId: string;
+  permission: RoomPermissionKeyPayload;
+  value: PermissionStatePayload;
+}
+
 export interface UserPayload {
   id: string;
   oderId?: string;
@@ -92,9 +131,13 @@ export interface RoomPayload {
   maxUsers?: number;
   icon?: string;
   iconUpdatedAt?: number;
+  slowModeInterval?: number;
   permissions?: unknown;
   channels?: unknown[];
   members?: unknown[];
+  roles?: AccessRolePayload[];
+  roleAssignments?: RoleAssignmentPayload[];
+  channelPermissions?: ChannelPermissionPayload[];
   sourceId?: string;
   sourceName?: string;
   sourceUrl?: string;

electron/data-source.ts

@@ -17,6 +17,11 @@ import {
   MessageEntity,
   UserEntity,
   RoomEntity,
+  RoomChannelEntity,
+  RoomMemberEntity,
+  RoomRoleEntity,
+  RoomUserRoleEntity,
+  RoomChannelPermissionEntity,
   ReactionEntity,
   BanEntity,
   AttachmentEntity,
@@ -38,6 +43,11 @@ export const AppDataSource = new DataSource({
     MessageEntity,
     UserEntity,
     RoomEntity,
+    RoomChannelEntity,
+    RoomMemberEntity,
+    RoomRoleEntity,
+    RoomUserRoleEntity,
+    RoomChannelPermissionEntity,
     ReactionEntity,
     BanEntity,
     AttachmentEntity,

electron/db/database.ts

@@ -7,6 +7,11 @@ import {
   MessageEntity,
   UserEntity,
   RoomEntity,
+  RoomChannelEntity,
+  RoomMemberEntity,
+  RoomRoleEntity,
+  RoomUserRoleEntity,
+  RoomChannelPermissionEntity,
   ReactionEntity,
   BanEntity,
   AttachmentEntity,
@@ -40,6 +45,11 @@ export async function initializeDatabase(): Promise<void> {
       MessageEntity,
       UserEntity,
       RoomEntity,
+      RoomChannelEntity,
+      RoomMemberEntity,
+      RoomRoleEntity,
+      RoomUserRoleEntity,
+      RoomChannelPermissionEntity,
       ReactionEntity,
       BanEntity,
       AttachmentEntity,

electron/entities/MessageEntity.ts

@@ -30,12 +30,12 @@ export class MessageEntity {
   @Column('integer', { nullable: true })
   editedAt!: number | null;
 
-  @Column('text', { default: '[]' })
-  reactions!: string;
-
   @Column('integer', { default: 0 })
   isDeleted!: number;
 
   @Column('text', { nullable: true })
   replyToId!: string | null;
+
+  @Column('text', { nullable: true })
+  linkMetadata!: string | null;
 }

electron/entities/RoomChannelEntity.ts

@@ -0,0 +1,23 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column
+} from 'typeorm';
+
+@Entity('room_channels')
+export class RoomChannelEntity {
+  @PrimaryColumn('text')
+  roomId!: string;
+
+  @PrimaryColumn('text')
+  channelId!: string;
+
+  @Column('text')
+  name!: string;
+
+  @Column('text')
+  type!: 'text' | 'voice';
+
+  @Column('integer')
+  position!: number;
+}

electron/entities/RoomChannelPermissionEntity.ts

@@ -0,0 +1,26 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('room_channel_permissions')
+export class RoomChannelPermissionEntity {
+  @PrimaryColumn('text')
+  roomId!: string;
+
+  @PrimaryColumn('text')
+  channelId!: string;
+
+  @PrimaryColumn('text')
+  targetType!: 'role' | 'user';
+
+  @PrimaryColumn('text')
+  targetId!: string;
+
+  @PrimaryColumn('text')
+  permission!: string;
+
+  @Column('text')
+  value!: 'allow' | 'deny' | 'inherit';
+}

electron/entities/RoomEntity.ts

@@ -45,14 +45,8 @@ export class RoomEntity {
   @Column('integer', { nullable: true })
   iconUpdatedAt!: number | null;
 
-  @Column('text', { nullable: true })
+  @Column('integer', { default: 0 })
-  permissions!: string | null;
+  slowModeInterval!: number;
-
-  @Column('text', { nullable: true })
-  channels!: string | null;
-
-  @Column('text', { nullable: true })
-  members!: string | null;
 
   @Column('text', { nullable: true })
   sourceId!: string | null;

electron/entities/RoomMemberEntity.ts

@@ -0,0 +1,38 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column
+} from 'typeorm';
+
+@Entity('room_members')
+export class RoomMemberEntity {
+  @PrimaryColumn('text')
+  roomId!: string;
+
+  @PrimaryColumn('text')
+  memberKey!: string;
+
+  @Column('text')
+  id!: string;
+
+  @Column('text', { nullable: true })
+  oderId!: string | null;
+
+  @Column('text')
+  username!: string;
+
+  @Column('text')
+  displayName!: string;
+
+  @Column('text', { nullable: true })
+  avatarUrl!: string | null;
+
+  @Column('text')
+  role!: 'host' | 'admin' | 'moderator' | 'member';
+
+  @Column('integer')
+  joinedAt!: number;
+
+  @Column('integer')
+  lastSeenAt!: number;
+}

electron/entities/RoomRoleEntity.ts

@@ -0,0 +1,59 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('room_roles')
+export class RoomRoleEntity {
+  @PrimaryColumn('text')
+  roomId!: string;
+
+  @PrimaryColumn('text')
+  roleId!: string;
+
+  @Column('text')
+  name!: string;
+
+  @Column('text', { nullable: true })
+  color!: string | null;
+
+  @Column('integer')
+  position!: number;
+
+  @Column('integer', { default: 0 })
+  isSystem!: number;
+
+  @Column('text', { default: 'inherit' })
+  manageServer!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageRoles!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageChannels!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageIcon!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  kickMembers!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  banMembers!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageBans!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  deleteMessages!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  joinVoice!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  shareScreen!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  uploadFiles!: 'allow' | 'deny' | 'inherit';
+}

electron/entities/RoomUserRoleEntity.ts

@@ -0,0 +1,23 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('room_user_roles')
+export class RoomUserRoleEntity {
+  @PrimaryColumn('text')
+  roomId!: string;
+
+  @PrimaryColumn('text')
+  userKey!: string;
+
+  @PrimaryColumn('text')
+  roleId!: string;
+
+  @Column('text')
+  userId!: string;
+
+  @Column('text', { nullable: true })
+  oderId!: string | null;
+}

electron/entities/index.ts

@@ -1,6 +1,11 @@
 export { MessageEntity } from './MessageEntity';
 export { UserEntity } from './UserEntity';
 export { RoomEntity } from './RoomEntity';
+export { RoomChannelEntity } from './RoomChannelEntity';
+export { RoomMemberEntity } from './RoomMemberEntity';
+export { RoomRoleEntity } from './RoomRoleEntity';
+export { RoomUserRoleEntity } from './RoomUserRoleEntity';
+export { RoomChannelPermissionEntity } from './RoomChannelPermissionEntity';
 export { ReactionEntity } from './ReactionEntity';
 export { BanEntity } from './BanEntity';
 export { AttachmentEntity } from './AttachmentEntity';

electron/ipc/system.ts

@@ -4,6 +4,8 @@ import {
   desktopCapturer,
   dialog,
   ipcMain,
+  nativeImage,
+  net,
   Notification,
   shell
 } from 'electron';
@@ -39,6 +41,13 @@ import {
   getWindowIconPath,
   updateCloseToTraySetting
 } from '../window/create-window';
+import {
+  deleteSavedTheme,
+  getSavedThemesPath,
+  listSavedThemes,
+  readSavedTheme,
+  writeSavedTheme
+} from '../theme-library';
 
 const DEFAULT_MIME_TYPE = 'application/octet-stream';
 const FILE_CLIPBOARD_FORMATS = [
@@ -325,6 +334,16 @@ export function setupSystemHandlers(): void {
   });
 
   ipcMain.handle('get-app-data-path', () => app.getPath('userData'));
+  ipcMain.handle('get-saved-themes-path', async () => await getSavedThemesPath());
+  ipcMain.handle('list-saved-themes', async () => await listSavedThemes());
+  ipcMain.handle('read-saved-theme', async (_event, fileName: string) => await readSavedTheme(fileName));
+  ipcMain.handle('write-saved-theme', async (_event, fileName: string, text: string) => {
+    return await writeSavedTheme(fileName, text);
+  });
+
+  ipcMain.handle('delete-saved-theme', async (_event, fileName: string) => {
+    return await deleteSavedTheme(fileName);
+  });
 
   ipcMain.handle('get-desktop-settings', () => getDesktopSettingsSnapshot());
 
@@ -486,4 +505,56 @@ export function setupSystemHandlers(): void {
     await fsp.mkdir(dirPath, { recursive: true });
     return true;
   });
+
+  ipcMain.handle('copy-image-to-clipboard', (_event, srcURL: string) => {
+    if (typeof srcURL !== 'string' || !srcURL) {
+      return false;
+    }
+
+    return new Promise<boolean>((resolve) => {
+      const request = net.request(srcURL);
+
+      request.on('response', (response) => {
+        const chunks: Buffer[] = [];
+
+        response.on('data', (chunk) => chunks.push(chunk));
+        response.on('end', () => {
+          const image = nativeImage.createFromBuffer(Buffer.concat(chunks));
+
+          if (!image.isEmpty()) {
+            clipboard.writeImage(image);
+            resolve(true);
+          } else {
+            resolve(false);
+          }
+        });
+        response.on('error', () => resolve(false));
+      });
+
+      request.on('error', () => resolve(false));
+      request.end();
+    });
+  });
+
+  ipcMain.handle('context-menu-command', (_event, command: string) => {
+    const allowedCommands = ['cut', 'copy', 'paste', 'selectAll'] as const;
+
+    if (!allowedCommands.includes(command as typeof allowedCommands[number])) {
+      return;
+    }
+
+    const mainWindow = getMainWindow();
+    const webContents = mainWindow?.webContents;
+
+    if (!webContents) {
+      return;
+    }
+
+    switch (command) {
+      case 'cut': webContents.cut(); break;
+      case 'copy': webContents.copy(); break;
+      case 'paste': webContents.paste(); break;
+      case 'selectAll': webContents.selectAll(); break;
+    }
+  });
 }

electron/migrations/1000000000003-NormalizeArrayColumns.ts

@@ -0,0 +1,396 @@
+import { randomUUID } from 'crypto';
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+type LegacyMessageRow = {
+  id: string;
+  reactions: string | null;
+};
+
+type LegacyRoomRow = {
+  id: string;
+  channels: string | null;
+  members: string | null;
+};
+
+type ChannelType = 'text' | 'voice';
+type RoomMemberRole = 'host' | 'admin' | 'moderator' | 'member';
+
+type LegacyReaction = {
+  id?: unknown;
+  oderId?: unknown;
+  userId?: unknown;
+  emoji?: unknown;
+  timestamp?: unknown;
+};
+
+type LegacyRoomChannel = {
+  id?: unknown;
+  name?: unknown;
+  type?: unknown;
+  position?: unknown;
+};
+
+type LegacyRoomMember = {
+  id?: unknown;
+  oderId?: unknown;
+  username?: unknown;
+  displayName?: unknown;
+  avatarUrl?: unknown;
+  role?: unknown;
+  joinedAt?: unknown;
+  lastSeenAt?: unknown;
+};
+
+function parseArray<T>(raw: string | null): T[] {
+  try {
+    const parsed = JSON.parse(raw || '[]');
+
+    return Array.isArray(parsed) ? parsed as T[] : [];
+  } catch {
+    return [];
+  }
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function normalizeChannelName(name: string): string {
+  return name.trim().replace(/\s+/g, ' ');
+}
+
+function channelNameKey(type: ChannelType, name: string): string {
+  return `${type}:${normalizeChannelName(name).toLocaleLowerCase()}`;
+}
+
+function memberKey(member: { id?: string; oderId?: string }): string {
+  return member.oderId?.trim() || member.id?.trim() || '';
+}
+
+function fallbackDisplayName(member: Partial<{ displayName: string; username: string; oderId: string; id: string }>): string {
+  return member.displayName || member.username || member.oderId || member.id || 'User';
+}
+
+function fallbackUsername(member: Partial<{ displayName: string; username: string; oderId: string; id: string }>): string {
+  const base = fallbackDisplayName(member)
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '_');
+
+  return base || member.oderId || member.id || 'user';
+}
+
+function normalizeRoomMemberRole(value: unknown): RoomMemberRole {
+  return value === 'host' || value === 'admin' || value === 'moderator' || value === 'member'
+    ? value
+    : 'member';
+}
+
+function mergeRoomMemberRole(
+  existingRole: RoomMemberRole,
+  incomingRole: RoomMemberRole,
+  preferIncoming: boolean
+): RoomMemberRole {
+  if (existingRole === incomingRole) {
+    return existingRole;
+  }
+
+  if (incomingRole === 'member' && existingRole !== 'member') {
+    return existingRole;
+  }
+
+  if (existingRole === 'member' && incomingRole !== 'member') {
+    return incomingRole;
+  }
+
+  return preferIncoming ? incomingRole : existingRole;
+}
+
+function compareRoomMembers(
+  firstMember: {
+    id: string;
+    oderId?: string;
+    displayName: string;
+  },
+  secondMember: {
+    id: string;
+    oderId?: string;
+    displayName: string;
+  }
+): number {
+  const displayNameCompare = firstMember.displayName.localeCompare(secondMember.displayName, undefined, { sensitivity: 'base' });
+
+  if (displayNameCompare !== 0) {
+    return displayNameCompare;
+  }
+
+  return memberKey(firstMember).localeCompare(memberKey(secondMember));
+}
+
+function normalizeMessageReactions(messageId: string, raw: string | null) {
+  const reactions = parseArray<LegacyReaction>(raw);
+  const seen = new Set<string>();
+
+  return reactions.flatMap((reaction) => {
+    const emoji = typeof reaction.emoji === 'string' ? reaction.emoji : '';
+    const userId = typeof reaction.userId === 'string' ? reaction.userId : '';
+    const dedupeKey = `${userId}:${emoji}`;
+
+    if (!emoji || seen.has(dedupeKey)) {
+      return [];
+    }
+
+    seen.add(dedupeKey);
+
+    return [{
+      id: typeof reaction.id === 'string' && reaction.id.trim() ? reaction.id : randomUUID(),
+      messageId,
+      oderId: typeof reaction.oderId === 'string' ? reaction.oderId : null,
+      userId: userId || null,
+      emoji,
+      timestamp: isFiniteNumber(reaction.timestamp) ? reaction.timestamp : 0
+    }];
+  });
+}
+
+function normalizeRoomChannels(raw: string | null) {
+  const channels = parseArray<LegacyRoomChannel>(raw);
+  const seenIds = new Set<string>();
+  const seenNames = new Set<string>();
+
+  return channels.flatMap((channel, index) => {
+    const id = typeof channel.id === 'string' ? channel.id.trim() : '';
+    const name = typeof channel.name === 'string' ? normalizeChannelName(channel.name) : '';
+    const type = channel.type === 'text' || channel.type === 'voice' ? channel.type : null;
+    const position = isFiniteNumber(channel.position) ? channel.position : index;
+    const nameKey = type ? channelNameKey(type, name) : '';
+
+    if (!id || !name || !type || seenIds.has(id) || seenNames.has(nameKey)) {
+      return [];
+    }
+
+    seenIds.add(id);
+    seenNames.add(nameKey);
+
+    return [{
+      channelId: id,
+      name,
+      type,
+      position
+    }];
+  });
+}
+
+function normalizeRoomMembers(raw: string | null, now = Date.now()) {
+  const members = parseArray<LegacyRoomMember>(raw);
+  const membersByKey = new Map<string, {
+    id: string;
+    oderId?: string;
+    username: string;
+    displayName: string;
+    avatarUrl?: string;
+    role: RoomMemberRole;
+    joinedAt: number;
+    lastSeenAt: number;
+  }>();
+
+  for (const rawMember of members) {
+    const normalizedId = typeof rawMember.id === 'string' ? rawMember.id.trim() : '';
+    const normalizedOderId = typeof rawMember.oderId === 'string' ? rawMember.oderId.trim() : '';
+    const key = normalizedOderId || normalizedId;
+
+    if (!key) {
+      continue;
+    }
+
+    const lastSeenAt = isFiniteNumber(rawMember.lastSeenAt)
+      ? rawMember.lastSeenAt
+      : isFiniteNumber(rawMember.joinedAt)
+        ? rawMember.joinedAt
+        : now;
+    const joinedAt = isFiniteNumber(rawMember.joinedAt) ? rawMember.joinedAt : lastSeenAt;
+    const username = typeof rawMember.username === 'string' ? rawMember.username.trim() : '';
+    const displayName = typeof rawMember.displayName === 'string' ? rawMember.displayName.trim() : '';
+    const avatarUrl = typeof rawMember.avatarUrl === 'string' ? rawMember.avatarUrl.trim() : '';
+    const nextMember = {
+      id: normalizedId || key,
+      oderId: normalizedOderId || undefined,
+      username: username || fallbackUsername({ id: normalizedId || key, oderId: normalizedOderId || undefined, displayName }),
+      displayName: displayName || fallbackDisplayName({ id: normalizedId || key, oderId: normalizedOderId || undefined, username }),
+      avatarUrl: avatarUrl || undefined,
+      role: normalizeRoomMemberRole(rawMember.role),
+      joinedAt,
+      lastSeenAt
+    };
+    const existingMember = membersByKey.get(key);
+
+    if (!existingMember) {
+      membersByKey.set(key, nextMember);
+      continue;
+    }
+
+    const preferIncoming = nextMember.lastSeenAt >= existingMember.lastSeenAt;
+
+    membersByKey.set(key, {
+      id: existingMember.id || nextMember.id,
+      oderId: nextMember.oderId || existingMember.oderId,
+      username: preferIncoming
+        ? (nextMember.username || existingMember.username)
+        : (existingMember.username || nextMember.username),
+      displayName: preferIncoming
+        ? (nextMember.displayName || existingMember.displayName)
+        : (existingMember.displayName || nextMember.displayName),
+      avatarUrl: preferIncoming
+        ? (nextMember.avatarUrl || existingMember.avatarUrl)
+        : (existingMember.avatarUrl || nextMember.avatarUrl),
+      role: mergeRoomMemberRole(existingMember.role, nextMember.role, preferIncoming),
+      joinedAt: Math.min(existingMember.joinedAt, nextMember.joinedAt),
+      lastSeenAt: Math.max(existingMember.lastSeenAt, nextMember.lastSeenAt)
+    });
+  }
+
+  return Array.from(membersByKey.values()).sort(compareRoomMembers);
+}
+
+export class NormalizeArrayColumns1000000000003 implements MigrationInterface {
+  name = 'NormalizeArrayColumns1000000000003';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "room_channels" (
+        "roomId"    TEXT NOT NULL,
+        "channelId" TEXT NOT NULL,
+        "name"      TEXT NOT NULL,
+        "type"      TEXT NOT NULL,
+        "position"  INTEGER NOT NULL,
+        PRIMARY KEY ("roomId", "channelId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_room_channels_roomId" ON "room_channels" ("roomId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "room_members" (
+        "roomId"     TEXT NOT NULL,
+        "memberKey"  TEXT NOT NULL,
+        "id"         TEXT NOT NULL,
+        "oderId"     TEXT,
+        "username"   TEXT NOT NULL,
+        "displayName" TEXT NOT NULL,
+        "avatarUrl"  TEXT,
+        "role"       TEXT NOT NULL,
+        "joinedAt"   INTEGER NOT NULL,
+        "lastSeenAt" INTEGER NOT NULL,
+        PRIMARY KEY ("roomId", "memberKey")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_room_members_roomId" ON "room_members" ("roomId")`);
+
+    const messageRows = await queryRunner.query(`SELECT "id", "reactions" FROM "messages"`) as LegacyMessageRow[];
+
+    for (const row of messageRows) {
+      const reactions = normalizeMessageReactions(row.id, row.reactions);
+
+      for (const reaction of reactions) {
+        const existing = await queryRunner.query(
+          `SELECT 1 FROM "reactions" WHERE "messageId" = ? AND "userId" IS ? AND "emoji" = ? LIMIT 1`,
+          [reaction.messageId, reaction.userId, reaction.emoji]
+        ) as Array<{ 1: number }>;
+
+        if (existing.length > 0) {
+          continue;
+        }
+
+        await queryRunner.query(
+          `INSERT INTO "reactions" ("id", "messageId", "oderId", "userId", "emoji", "timestamp") VALUES (?, ?, ?, ?, ?, ?)`,
+          [reaction.id, reaction.messageId, reaction.oderId, reaction.userId, reaction.emoji, reaction.timestamp]
+        );
+      }
+    }
+
+    const roomRows = await queryRunner.query(`SELECT "id", "channels", "members" FROM "rooms"`) as LegacyRoomRow[];
+
+    for (const row of roomRows) {
+      for (const channel of normalizeRoomChannels(row.channels)) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "room_channels" ("roomId", "channelId", "name", "type", "position") VALUES (?, ?, ?, ?, ?)`,
+          [row.id, channel.channelId, channel.name, channel.type, channel.position]
+        );
+      }
+
+      for (const member of normalizeRoomMembers(row.members)) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "room_members" ("roomId", "memberKey", "id", "oderId", "username", "displayName", "avatarUrl", "role", "joinedAt", "lastSeenAt") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+          [
+            row.id,
+            memberKey(member),
+            member.id,
+            member.oderId ?? null,
+            member.username,
+            member.displayName,
+            member.avatarUrl ?? null,
+            member.role,
+            member.joinedAt,
+            member.lastSeenAt
+          ]
+        );
+      }
+    }
+
+    await queryRunner.query(`
+      CREATE TABLE "messages_next" (
+        "id"         TEXT PRIMARY KEY NOT NULL,
+        "roomId"     TEXT NOT NULL,
+        "channelId"  TEXT,
+        "senderId"   TEXT NOT NULL,
+        "senderName" TEXT NOT NULL,
+        "content"    TEXT NOT NULL,
+        "timestamp"  INTEGER NOT NULL,
+        "editedAt"   INTEGER,
+        "isDeleted"  INTEGER NOT NULL DEFAULT 0,
+        "replyToId"  TEXT
+      )
+    `);
+    await queryRunner.query(`
+      INSERT INTO "messages_next" ("id", "roomId", "channelId", "senderId", "senderName", "content", "timestamp", "editedAt", "isDeleted", "replyToId")
+      SELECT "id", "roomId", "channelId", "senderId", "senderName", "content", "timestamp", "editedAt", "isDeleted", "replyToId"
+      FROM "messages"
+    `);
+    await queryRunner.query(`DROP TABLE "messages"`);
+    await queryRunner.query(`ALTER TABLE "messages_next" RENAME TO "messages"`);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_messages_roomId" ON "messages" ("roomId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE "rooms_next" (
+        "id"            TEXT PRIMARY KEY NOT NULL,
+        "name"          TEXT NOT NULL,
+        "description"   TEXT,
+        "topic"         TEXT,
+        "hostId"        TEXT NOT NULL,
+        "password"      TEXT,
+        "isPrivate"     INTEGER NOT NULL DEFAULT 0,
+        "createdAt"     INTEGER NOT NULL,
+        "userCount"     INTEGER NOT NULL DEFAULT 0,
+        "maxUsers"      INTEGER,
+        "icon"          TEXT,
+        "iconUpdatedAt" INTEGER,
+        "permissions"   TEXT,
+        "hasPassword"   INTEGER NOT NULL DEFAULT 0,
+        "sourceId"      TEXT,
+        "sourceName"    TEXT,
+        "sourceUrl"     TEXT
+      )
+    `);
+    await queryRunner.query(`
+      INSERT INTO "rooms_next" ("id", "name", "description", "topic", "hostId", "password", "isPrivate", "createdAt", "userCount", "maxUsers", "icon", "iconUpdatedAt", "permissions", "hasPassword", "sourceId", "sourceName", "sourceUrl")
+      SELECT "id", "name", "description", "topic", "hostId", "password", "isPrivate", "createdAt", "userCount", "maxUsers", "icon", "iconUpdatedAt", "permissions", "hasPassword", "sourceId", "sourceName", "sourceUrl"
+      FROM "rooms"
+    `);
+    await queryRunner.query(`DROP TABLE "rooms"`);
+    await queryRunner.query(`ALTER TABLE "rooms_next" RENAME TO "rooms"`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS "room_members"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "room_channels"`);
+  }
+}

electron/migrations/1000000000004-NormalizeRoomAccessControl.ts

@@ -0,0 +1,310 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+type LegacyRoomRow = {
+  id: string;
+  name: string;
+  description: string | null;
+  topic: string | null;
+  hostId: string;
+  password: string | null;
+  hasPassword: number;
+  isPrivate: number;
+  createdAt: number;
+  userCount: number;
+  maxUsers: number | null;
+  icon: string | null;
+  iconUpdatedAt: number | null;
+  permissions: string | null;
+  sourceId: string | null;
+  sourceName: string | null;
+  sourceUrl: string | null;
+};
+
+type RoomMemberRow = {
+  roomId: string;
+  memberKey: string;
+  id: string;
+  oderId: string | null;
+  role: string;
+};
+
+type LegacyRoomPermissions = {
+  adminsManageRooms?: boolean;
+  moderatorsManageRooms?: boolean;
+  adminsManageIcon?: boolean;
+  moderatorsManageIcon?: boolean;
+  allowVoice?: boolean;
+  allowScreenShare?: boolean;
+  allowFileUploads?: boolean;
+  slowModeInterval?: number;
+};
+
+const SYSTEM_ROLE_IDS = {
+  everyone: 'system-everyone',
+  moderator: 'system-moderator',
+  admin: 'system-admin'
+} as const;
+
+function parseLegacyPermissions(rawPermissions: string | null): LegacyRoomPermissions {
+  try {
+    const parsed = JSON.parse(rawPermissions || '{}') as Record<string, unknown>;
+
+    return {
+      adminsManageRooms: parsed['adminsManageRooms'] === true,
+      moderatorsManageRooms: parsed['moderatorsManageRooms'] === true,
+      adminsManageIcon: parsed['adminsManageIcon'] === true,
+      moderatorsManageIcon: parsed['moderatorsManageIcon'] === true,
+      allowVoice: parsed['allowVoice'] !== false,
+      allowScreenShare: parsed['allowScreenShare'] !== false,
+      allowFileUploads: parsed['allowFileUploads'] !== false,
+      slowModeInterval: typeof parsed['slowModeInterval'] === 'number' && Number.isFinite(parsed['slowModeInterval'])
+        ? parsed['slowModeInterval']
+        : 0
+    };
+  } catch {
+    return {
+      allowVoice: true,
+      allowScreenShare: true,
+      allowFileUploads: true,
+      slowModeInterval: 0
+    };
+  }
+}
+
+function buildDefaultRoomRoles(legacyPermissions: LegacyRoomPermissions) {
+  return [
+    {
+      roleId: SYSTEM_ROLE_IDS.everyone,
+      name: '@everyone',
+      color: '#6b7280',
+      position: 0,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: 'inherit',
+      manageIcon: 'inherit',
+      kickMembers: 'inherit',
+      banMembers: 'inherit',
+      manageBans: 'inherit',
+      deleteMessages: 'inherit',
+      joinVoice: legacyPermissions.allowVoice === false ? 'deny' : 'allow',
+      shareScreen: legacyPermissions.allowScreenShare === false ? 'deny' : 'allow',
+      uploadFiles: legacyPermissions.allowFileUploads === false ? 'deny' : 'allow'
+    },
+    {
+      roleId: SYSTEM_ROLE_IDS.moderator,
+      name: 'Moderator',
+      color: '#10b981',
+      position: 200,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: legacyPermissions.moderatorsManageRooms ? 'allow' : 'inherit',
+      manageIcon: legacyPermissions.moderatorsManageIcon ? 'allow' : 'inherit',
+      kickMembers: 'allow',
+      banMembers: 'inherit',
+      manageBans: 'inherit',
+      deleteMessages: 'allow',
+      joinVoice: 'inherit',
+      shareScreen: 'inherit',
+      uploadFiles: 'inherit'
+    },
+    {
+      roleId: SYSTEM_ROLE_IDS.admin,
+      name: 'Admin',
+      color: '#60a5fa',
+      position: 300,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: legacyPermissions.adminsManageRooms ? 'allow' : 'inherit',
+      manageIcon: legacyPermissions.adminsManageIcon ? 'allow' : 'inherit',
+      kickMembers: 'allow',
+      banMembers: 'allow',
+      manageBans: 'allow',
+      deleteMessages: 'allow',
+      joinVoice: 'inherit',
+      shareScreen: 'inherit',
+      uploadFiles: 'inherit'
+    }
+  ];
+}
+
+function roleIdsForMemberRole(role: string): string[] {
+  if (role === 'admin') {
+    return [SYSTEM_ROLE_IDS.admin];
+  }
+
+  if (role === 'moderator') {
+    return [SYSTEM_ROLE_IDS.moderator];
+  }
+
+  return [];
+}
+
+export class NormalizeRoomAccessControl1000000000004 implements MigrationInterface {
+  name = 'NormalizeRoomAccessControl1000000000004';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "room_roles" (
+        "roomId" TEXT NOT NULL,
+        "roleId" TEXT NOT NULL,
+        "name" TEXT NOT NULL,
+        "color" TEXT,
+        "position" INTEGER NOT NULL,
+        "isSystem" INTEGER NOT NULL DEFAULT 0,
+        "manageServer" TEXT NOT NULL DEFAULT 'inherit',
+        "manageRoles" TEXT NOT NULL DEFAULT 'inherit',
+        "manageChannels" TEXT NOT NULL DEFAULT 'inherit',
+        "manageIcon" TEXT NOT NULL DEFAULT 'inherit',
+        "kickMembers" TEXT NOT NULL DEFAULT 'inherit',
+        "banMembers" TEXT NOT NULL DEFAULT 'inherit',
+        "manageBans" TEXT NOT NULL DEFAULT 'inherit',
+        "deleteMessages" TEXT NOT NULL DEFAULT 'inherit',
+        "joinVoice" TEXT NOT NULL DEFAULT 'inherit',
+        "shareScreen" TEXT NOT NULL DEFAULT 'inherit',
+        "uploadFiles" TEXT NOT NULL DEFAULT 'inherit',
+        PRIMARY KEY ("roomId", "roleId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_room_roles_roomId" ON "room_roles" ("roomId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "room_user_roles" (
+        "roomId" TEXT NOT NULL,
+        "userKey" TEXT NOT NULL,
+        "roleId" TEXT NOT NULL,
+        "userId" TEXT NOT NULL,
+        "oderId" TEXT,
+        PRIMARY KEY ("roomId", "userKey", "roleId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_room_user_roles_roomId" ON "room_user_roles" ("roomId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "room_channel_permissions" (
+        "roomId" TEXT NOT NULL,
+        "channelId" TEXT NOT NULL,
+        "targetType" TEXT NOT NULL,
+        "targetId" TEXT NOT NULL,
+        "permission" TEXT NOT NULL,
+        "value" TEXT NOT NULL,
+        PRIMARY KEY ("roomId", "channelId", "targetType", "targetId", "permission")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_room_channel_permissions_roomId" ON "room_channel_permissions" ("roomId")`);
+
+    const rooms = await queryRunner.query(`
+      SELECT "id", "name", "description", "topic", "hostId", "password", "hasPassword", "isPrivate", "createdAt", "userCount", "maxUsers", "icon", "iconUpdatedAt", "permissions", "sourceId", "sourceName", "sourceUrl"
+      FROM "rooms"
+    `) as LegacyRoomRow[];
+    const members = await queryRunner.query(`
+      SELECT "roomId", "memberKey", "id", "oderId", "role"
+      FROM "room_members"
+    `) as RoomMemberRow[];
+
+    for (const room of rooms) {
+      const legacyPermissions = parseLegacyPermissions(room.permissions);
+      const roles = buildDefaultRoomRoles(legacyPermissions);
+
+      for (const role of roles) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "room_roles" ("roomId", "roleId", "name", "color", "position", "isSystem", "manageServer", "manageRoles", "manageChannels", "manageIcon", "kickMembers", "banMembers", "manageBans", "deleteMessages", "joinVoice", "shareScreen", "uploadFiles") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+          [
+            room.id,
+            role.roleId,
+            role.name,
+            role.color,
+            role.position,
+            role.isSystem,
+            role.manageServer,
+            role.manageRoles,
+            role.manageChannels,
+            role.manageIcon,
+            role.kickMembers,
+            role.banMembers,
+            role.manageBans,
+            role.deleteMessages,
+            role.joinVoice,
+            role.shareScreen,
+            role.uploadFiles
+          ]
+        );
+      }
+
+      for (const member of members.filter((candidateMember) => candidateMember.roomId === room.id)) {
+        for (const roleId of roleIdsForMemberRole(member.role)) {
+          await queryRunner.query(
+            `INSERT OR REPLACE INTO "room_user_roles" ("roomId", "userKey", "roleId", "userId", "oderId") VALUES (?, ?, ?, ?, ?)`,
+            [
+              room.id,
+              member.memberKey,
+              roleId,
+              member.id,
+              member.oderId
+            ]
+          );
+        }
+      }
+    }
+
+    await queryRunner.query(`
+      CREATE TABLE "rooms_next" (
+        "id" TEXT PRIMARY KEY NOT NULL,
+        "name" TEXT NOT NULL,
+        "description" TEXT,
+        "topic" TEXT,
+        "hostId" TEXT NOT NULL,
+        "password" TEXT,
+        "hasPassword" INTEGER NOT NULL DEFAULT 0,
+        "isPrivate" INTEGER NOT NULL DEFAULT 0,
+        "createdAt" INTEGER NOT NULL,
+        "userCount" INTEGER NOT NULL DEFAULT 0,
+        "maxUsers" INTEGER,
+        "icon" TEXT,
+        "iconUpdatedAt" INTEGER,
+        "slowModeInterval" INTEGER NOT NULL DEFAULT 0,
+        "sourceId" TEXT,
+        "sourceName" TEXT,
+        "sourceUrl" TEXT
+      )
+    `);
+
+    for (const room of rooms) {
+      const legacyPermissions = parseLegacyPermissions(room.permissions);
+
+      await queryRunner.query(
+        `INSERT INTO "rooms_next" ("id", "name", "description", "topic", "hostId", "password", "hasPassword", "isPrivate", "createdAt", "userCount", "maxUsers", "icon", "iconUpdatedAt", "slowModeInterval", "sourceId", "sourceName", "sourceUrl") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+        [
+          room.id,
+          room.name,
+          room.description,
+          room.topic,
+          room.hostId,
+          room.password,
+          room.hasPassword,
+          room.isPrivate,
+          room.createdAt,
+          room.userCount,
+          room.maxUsers,
+          room.icon,
+          room.iconUpdatedAt,
+          legacyPermissions.slowModeInterval ?? 0,
+          room.sourceId,
+          room.sourceName,
+          room.sourceUrl
+        ]
+      );
+    }
+
+    await queryRunner.query(`DROP TABLE "rooms"`);
+    await queryRunner.query(`ALTER TABLE "rooms_next" RENAME TO "rooms"`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS "room_channel_permissions"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "room_user_roles"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "room_roles"`);
+  }
+}

electron/migrations/1000000000005-AddLinkMetadata.ts

@@ -0,0 +1,11 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddLinkMetadata1000000000005 implements MigrationInterface {
+  async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`ALTER TABLE "messages" ADD COLUMN "linkMetadata" text`);
+  }
+
+  async down(queryRunner: QueryRunner): Promise<void> {
+    // SQLite does not support DROP COLUMN; column is nullable and harmless.
+  }
+}

electron/preload.ts

@@ -102,6 +102,12 @@ export interface WindowStateSnapshot {
   isMinimized: boolean;
 }
 
+export interface SavedThemeFileDescriptor {
+  fileName: string;
+  modifiedAt: number;
+  path: string;
+}
+
 function readLinuxDisplayServer(): string {
   if (process.platform !== 'linux') {
     return 'N/A';
@@ -118,6 +124,22 @@ function readLinuxDisplayServer(): string {
   }
 }
 
+export interface ContextMenuParams {
+  posX: number;
+  posY: number;
+  isEditable: boolean;
+  selectionText: string;
+  linkURL: string;
+  mediaType: string;
+  srcURL: string;
+  editFlags: {
+    canCut: boolean;
+    canCopy: boolean;
+    canPaste: boolean;
+    canSelectAll: boolean;
+  };
+}
+
 export interface ElectronAPI {
   linuxDisplayServer: string;
   minimizeWindow: () => void;
@@ -134,6 +156,11 @@ export interface ElectronAPI {
   onLinuxScreenShareMonitorAudioChunk: (listener: (payload: LinuxScreenShareMonitorAudioChunkPayload) => void) => () => void;
   onLinuxScreenShareMonitorAudioEnded: (listener: (payload: LinuxScreenShareMonitorAudioEndedPayload) => void) => () => void;
   getAppDataPath: () => Promise<string>;
+  getSavedThemesPath: () => Promise<string>;
+  listSavedThemes: () => Promise<SavedThemeFileDescriptor[]>;
+  readSavedTheme: (fileName: string) => Promise<string>;
+  writeSavedTheme: (fileName: string, text: string) => Promise<boolean>;
+  deleteSavedTheme: (fileName: string) => Promise<boolean>;
   consumePendingDeepLink: () => Promise<string | null>;
   getDesktopSettings: () => Promise<{
     autoUpdateMode: 'auto' | 'off' | 'version';
@@ -183,6 +210,10 @@ export interface ElectronAPI {
   deleteFile: (filePath: string) => Promise<boolean>;
   ensureDir: (dirPath: string) => Promise<boolean>;
 
+  onContextMenu: (listener: (params: ContextMenuParams) => void) => () => void;
+  contextMenuCommand: (command: string) => Promise<void>;
+  copyImageToClipboard: (srcURL: string) => Promise<boolean>;
+
   command: <T = unknown>(command: Command) => Promise<T>;
   query: <T = unknown>(query: Query) => Promise<T>;
 }
@@ -230,6 +261,11 @@ const electronAPI: ElectronAPI = {
     };
   },
   getAppDataPath: () => ipcRenderer.invoke('get-app-data-path'),
+  getSavedThemesPath: () => ipcRenderer.invoke('get-saved-themes-path'),
+  listSavedThemes: () => ipcRenderer.invoke('list-saved-themes'),
+  readSavedTheme: (fileName) => ipcRenderer.invoke('read-saved-theme', fileName),
+  writeSavedTheme: (fileName, text) => ipcRenderer.invoke('write-saved-theme', fileName, text),
+  deleteSavedTheme: (fileName) => ipcRenderer.invoke('delete-saved-theme', fileName),
   consumePendingDeepLink: () => ipcRenderer.invoke('consume-pending-deep-link'),
   getDesktopSettings: () => ipcRenderer.invoke('get-desktop-settings'),
   showDesktopNotification: (payload) => ipcRenderer.invoke('show-desktop-notification', payload),
@@ -283,6 +319,20 @@ const electronAPI: ElectronAPI = {
   deleteFile: (filePath) => ipcRenderer.invoke('delete-file', filePath),
   ensureDir: (dirPath) => ipcRenderer.invoke('ensure-dir', dirPath),
 
+  onContextMenu: (listener) => {
+    const wrappedListener = (_event: Electron.IpcRendererEvent, params: ContextMenuParams) => {
+      listener(params);
+    };
+
+    ipcRenderer.on('show-context-menu', wrappedListener);
+
+    return () => {
+      ipcRenderer.removeListener('show-context-menu', wrappedListener);
+    };
+  },
+  contextMenuCommand: (command) => ipcRenderer.invoke('context-menu-command', command),
+  copyImageToClipboard: (srcURL) => ipcRenderer.invoke('copy-image-to-clipboard', srcURL),
+
   command: (command) => ipcRenderer.invoke('cqrs:command', command),
   query: (query) => ipcRenderer.invoke('cqrs:query', query)
 };

electron/theme-library.ts

@@ -0,0 +1,91 @@
+import { app } from 'electron';
+import * as fsp from 'fs/promises';
+import * as path from 'path';
+
+export interface SavedThemeFileDescriptor {
+  fileName: string;
+  modifiedAt: number;
+  path: string;
+}
+
+const SAVED_THEME_FILE_NAME_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]*\.json$/;
+
+function resolveSavedThemesPath(): string {
+  return path.join(app.getPath('userData'), 'themes');
+}
+
+async function ensureSavedThemesPath(): Promise<string> {
+  const themesPath = resolveSavedThemesPath();
+
+  await fsp.mkdir(themesPath, { recursive: true });
+
+  return themesPath;
+}
+
+function assertSavedThemeFileName(fileName: string): string {
+  const normalized = typeof fileName === 'string'
+    ? fileName.trim()
+    : '';
+
+  if (!SAVED_THEME_FILE_NAME_PATTERN.test(normalized) || normalized.includes('..')) {
+    throw new Error('Invalid saved theme file name.');
+  }
+
+  return normalized;
+}
+
+async function resolveSavedThemeFilePath(fileName: string): Promise<string> {
+  const themesPath = await ensureSavedThemesPath();
+
+  return path.join(themesPath, assertSavedThemeFileName(fileName));
+}
+
+export async function getSavedThemesPath(): Promise<string> {
+  return await ensureSavedThemesPath();
+}
+
+export async function listSavedThemes(): Promise<SavedThemeFileDescriptor[]> {
+  const themesPath = await ensureSavedThemesPath();
+  const entries = await fsp.readdir(themesPath, { withFileTypes: true });
+  const files = entries.filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith('.json'));
+  const descriptors = await Promise.all(files.map(async (entry) => {
+    const filePath = path.join(themesPath, entry.name);
+    const stats = await fsp.stat(filePath);
+
+    return {
+      fileName: entry.name,
+      modifiedAt: Math.round(stats.mtimeMs),
+      path: filePath
+    } satisfies SavedThemeFileDescriptor;
+  }));
+
+  return descriptors.sort((left, right) => right.modifiedAt - left.modifiedAt || left.fileName.localeCompare(right.fileName));
+}
+
+export async function readSavedTheme(fileName: string): Promise<string> {
+  const filePath = await resolveSavedThemeFilePath(fileName);
+
+  return await fsp.readFile(filePath, 'utf8');
+}
+
+export async function writeSavedTheme(fileName: string, text: string): Promise<boolean> {
+  const filePath = await resolveSavedThemeFilePath(fileName);
+
+  await fsp.writeFile(filePath, text, 'utf8');
+  return true;
+}
+
+export async function deleteSavedTheme(fileName: string): Promise<boolean> {
+  const filePath = await resolveSavedThemeFilePath(fileName);
+
+  try {
+    await fsp.unlink(filePath);
+    return true;
+  } catch (error) {
+    if ((error as { code?: string }).code === 'ENOENT') {
+      return true;
+    }
+
+    throw error;
+  }
+}

electron/window/create-window.ts

@@ -264,6 +264,24 @@ export async function createWindow(): Promise<void> {
 
   emitWindowState();
 
+  mainWindow.webContents.on('context-menu', (_event, params) => {
+    mainWindow?.webContents.send('show-context-menu', {
+      posX: params.x,
+      posY: params.y,
+      isEditable: params.isEditable,
+      selectionText: params.selectionText,
+      linkURL: params.linkURL,
+      mediaType: params.mediaType,
+      srcURL: params.srcURL,
+      editFlags: {
+        canCut: params.editFlags.canCut,
+        canCopy: params.editFlags.canCopy,
+        canPaste: params.editFlags.canPaste,
+        canSelectAll: params.editFlags.canSelectAll
+      }
+    });
+  });
+
   mainWindow.webContents.setWindowOpenHandler(({ url }) => {
     shell.openExternal(url);
     return { action: 'deny' };

package-lock.json

@@ -14,6 +14,12 @@
         "@angular/forms": "^21.0.0",
         "@angular/platform-browser": "^21.0.0",
         "@angular/router": "^21.0.0",
+        "@codemirror/commands": "^6.10.3",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/language": "^6.12.3",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.41.0",
         "@ng-icons/core": "^33.0.0",
         "@ng-icons/lucide": "^33.0.0",
         "@ngrx/effects": "^21.0.1",
@@ -27,6 +33,7 @@
         "auto-launch": "^5.0.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "codemirror": "^6.0.2",
         "cytoscape": "^3.33.1",
         "electron-updater": "^6.6.2",
         "mermaid": "^11.12.3",
@@ -49,6 +56,7 @@
         "@angular/cli": "^21.0.4",
         "@angular/compiler-cli": "^21.0.0",
         "@eslint/js": "^9.39.3",
+        "@playwright/test": "^1.59.1",
         "@stylistic/eslint-plugin-js": "^4.4.1",
         "@stylistic/eslint-plugin-ts": "^4.4.1",
         "@types/auto-launch": "^5.0.5",
@@ -2697,6 +2705,109 @@
       "integrity": "sha512-4mudFAQ6H+MqBTfqLmU7G1ZwRzCLfJEooL/fsF6rCX5eePMbGhoy5n4g+G4vlh2muDcsCTJtL+uKbOzWxs5LHA==",
       "license": "Apache-2.0"
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
+      "integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
+      "integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.6.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.3.tgz",
+      "integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+      "integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
+      "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.41.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.41.0.tgz",
+      "integrity": "sha512-6H/qadXsVuDY219Yljhohglve8xf4B8xJkVOEWfA5uiYKiTFppjqsvsfR5iPA0RbvRBoOyTZpbLIxe9+0UR8xA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.6.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -5672,6 +5783,41 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@listr2/prompt-adapter-inquirer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
@@ -5865,6 +6011,12 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
     "node_modules/@mermaid-js/parser": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.0.0.tgz",
@@ -9186,6 +9338,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-beta.47",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-beta.47.tgz",
@@ -14138,6 +14306,21 @@
       "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
       "license": "MIT"
     },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -14766,6 +14949,12 @@
         "ieee754": "^1.1.13"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cron-parser": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
@@ -24480,6 +24669,53 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -27782,6 +28018,12 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
     "node_modules/stylehacks": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.1.1.tgz",
@@ -30374,6 +30616,12 @@
       "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
       "license": "MIT"
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/wait-on": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz",

package.json

@@ -49,7 +49,11 @@
     "release:version": "node tools/resolve-release-version.js",
     "server:bundle:linux": "node tools/package-server-executable.js --target node18-linux-x64 --output metoyou-server-linux-x64",
     "server:bundle:win": "node tools/package-server-executable.js --target node18-win-x64 --output metoyou-server-win-x64.exe",
-    "sort:props": "node tools/sort-template-properties.js"
+    "sort:props": "node tools/sort-template-properties.js",
+    "test:e2e": "cd e2e && npx playwright test",
+    "test:e2e:ui": "cd e2e && npx playwright test --ui",
+    "test:e2e:debug": "cd e2e && npx playwright test --debug",
+    "test:e2e:report": "cd e2e && npx playwright show-report ../test-results/html-report"
   },
   "private": true,
   "packageManager": "npm@10.9.2",
@@ -60,6 +64,12 @@
     "@angular/forms": "^21.0.0",
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.41.0",
     "@ng-icons/core": "^33.0.0",
     "@ng-icons/lucide": "^33.0.0",
     "@ngrx/effects": "^21.0.1",
@@ -73,6 +83,7 @@
     "auto-launch": "^5.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "codemirror": "^6.0.2",
     "cytoscape": "^3.33.1",
     "electron-updater": "^6.6.2",
     "mermaid": "^11.12.3",
@@ -95,6 +106,7 @@
     "@angular/cli": "^21.0.4",
     "@angular/compiler-cli": "^21.0.0",
     "@eslint/js": "^9.39.3",
+    "@playwright/test": "^1.59.1",
     "@stylistic/eslint-plugin-js": "^4.4.1",
     "@stylistic/eslint-plugin-ts": "^4.4.1",
     "@types/auto-launch": "^5.0.5",

server/src/config/variables.ts

@@ -4,18 +4,28 @@ import { resolveRuntimePath } from '../runtime-paths';
 
 export type ServerHttpProtocol = 'http' | 'https';
 
+export interface LinkPreviewConfig {
+  enabled: boolean;
+  cacheTtlMinutes: number;
+  maxCacheSizeMb: number;
+}
+
 export interface ServerVariablesConfig {
   klipyApiKey: string;
   releaseManifestUrl: string;
   serverPort: number;
   serverProtocol: ServerHttpProtocol;
   serverHost: string;
+  linkPreview: LinkPreviewConfig;
 }
 
 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';
+const DEFAULT_LINK_PREVIEW_CACHE_TTL_MINUTES = 7200;
+const DEFAULT_LINK_PREVIEW_MAX_CACHE_SIZE_MB = 50;
+const HARD_MAX_CACHE_SIZE_MB = 50;
 
 function normalizeKlipyApiKey(value: unknown): string {
   return typeof value === 'string' ? value.trim() : '';
@@ -66,6 +76,27 @@ function normalizeServerPort(value: unknown, fallback = DEFAULT_SERVER_PORT): nu
     : fallback;
 }
 
+function normalizeLinkPreviewConfig(value: unknown): LinkPreviewConfig {
+  const raw = (value && typeof value === 'object' && !Array.isArray(value))
+    ? value as Record<string, unknown>
+    : {};
+  const enabled = typeof raw.enabled === 'boolean'
+    ? raw.enabled
+    : true;
+  const cacheTtl = typeof raw.cacheTtlMinutes === 'number'
+    && Number.isFinite(raw.cacheTtlMinutes)
+    && raw.cacheTtlMinutes >= 0
+    ? raw.cacheTtlMinutes
+    : DEFAULT_LINK_PREVIEW_CACHE_TTL_MINUTES;
+  const maxSize = typeof raw.maxCacheSizeMb === 'number'
+    && Number.isFinite(raw.maxCacheSizeMb)
+    && raw.maxCacheSizeMb >= 0
+    ? Math.min(raw.maxCacheSizeMb, HARD_MAX_CACHE_SIZE_MB)
+    : DEFAULT_LINK_PREVIEW_MAX_CACHE_SIZE_MB;
+
+  return { enabled, cacheTtlMinutes: cacheTtl, maxCacheSizeMb: maxSize };
+}
+
 function hasEnvironmentOverride(value: string | undefined): value is string {
   return typeof value === 'string' && value.trim().length > 0;
 }
@@ -111,7 +142,8 @@ export function ensureVariablesConfig(): ServerVariablesConfig {
     releaseManifestUrl: normalizeReleaseManifestUrl(remainingParsed.releaseManifestUrl),
     serverPort: normalizeServerPort(remainingParsed.serverPort),
     serverProtocol: normalizeServerProtocol(remainingParsed.serverProtocol),
-    serverHost: normalizeServerHost(remainingParsed.serverHost ?? legacyServerIpAddress)
+    serverHost: normalizeServerHost(remainingParsed.serverHost ?? legacyServerIpAddress),
+    linkPreview: normalizeLinkPreviewConfig(remainingParsed.linkPreview)
   };
   const nextContents = JSON.stringify(normalized, null, 2) + '\n';
 
@@ -124,7 +156,8 @@ export function ensureVariablesConfig(): ServerVariablesConfig {
     releaseManifestUrl: normalized.releaseManifestUrl,
     serverPort: normalized.serverPort,
     serverProtocol: normalized.serverProtocol,
-    serverHost: normalized.serverHost
+    serverHost: normalized.serverHost,
+    linkPreview: normalized.linkPreview
   };
 }
 
@@ -169,3 +202,7 @@ export function getServerHost(): string | undefined {
 export function isHttpsServerEnabled(): boolean {
   return getServerProtocol() === 'https';
 }
+
+export function getLinkPreviewConfig(): LinkPreviewConfig {
+  return getVariablesConfig().linkPreview;
+}

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

@@ -1,6 +1,11 @@
 import { DataSource } from 'typeorm';
 import {
+  ServerChannelPermissionEntity,
+  ServerChannelEntity,
   ServerEntity,
+  ServerRoleEntity,
+  ServerTagEntity,
+  ServerUserRoleEntity,
   JoinRequestEntity,
   ServerMembershipEntity,
   ServerInviteEntity,
@@ -11,9 +16,16 @@ 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.transaction(async (manager) => {
-  await dataSource.getRepository(ServerMembershipEntity).delete({ serverId });
+    await manager.getRepository(ServerTagEntity).delete({ serverId });
-  await dataSource.getRepository(ServerInviteEntity).delete({ serverId });
+    await manager.getRepository(ServerChannelEntity).delete({ serverId });
-  await dataSource.getRepository(ServerBanEntity).delete({ serverId });
+    await manager.getRepository(ServerRoleEntity).delete({ serverId });
-  await dataSource.getRepository(ServerEntity).delete(serverId);
+    await manager.getRepository(ServerUserRoleEntity).delete({ serverId });
+    await manager.getRepository(ServerChannelPermissionEntity).delete({ serverId });
+    await manager.getRepository(JoinRequestEntity).delete({ serverId });
+    await manager.getRepository(ServerMembershipEntity).delete({ serverId });
+    await manager.getRepository(ServerInviteEntity).delete({ serverId });
+    await manager.getRepository(ServerBanEntity).delete({ serverId });
+    await manager.getRepository(ServerEntity).delete(serverId);
+  });
 }

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

@@ -1,10 +1,13 @@
 import { DataSource } from 'typeorm';
 import { ServerEntity } from '../../../entities';
+import { replaceServerRelations } from '../../relations';
 import { UpsertServerCommand } from '../../types';
 
 export async function handleUpsertServer(command: UpsertServerCommand, dataSource: DataSource): Promise<void> {
-  const repo = dataSource.getRepository(ServerEntity);
   const { server } = command.payload;
+
+  await dataSource.transaction(async (manager) => {
+    const repo = manager.getRepository(ServerEntity);
     const entity = repo.create({
       id: server.id,
       name: server.name,
@@ -15,11 +18,18 @@ export async function handleUpsertServer(command: UpsertServerCommand, dataSourc
       isPrivate: server.isPrivate ? 1 : 0,
       maxUsers: server.maxUsers,
       currentUsers: server.currentUsers,
-    tags: JSON.stringify(server.tags),
+      slowModeInterval: server.slowModeInterval ?? 0,
-    channels: JSON.stringify(server.channels ?? []),
       createdAt: server.createdAt,
       lastSeen: server.lastSeen
     });
 
     await repo.save(entity);
+    await replaceServerRelations(manager, server.id, {
+      tags: server.tags,
+      channels: server.channels ?? [],
+      roles: server.roles ?? [],
+      roleAssignments: server.roleAssignments ?? [],
+      channelPermissions: server.channelPermissions ?? []
+    });
+  });
 }

server/src/cqrs/mappers.ts

@@ -3,66 +3,10 @@ import { ServerEntity } from '../entities/ServerEntity';
 import { JoinRequestEntity } from '../entities/JoinRequestEntity';
 import {
   AuthUserPayload,
-  ServerChannelPayload,
   ServerPayload,
   JoinRequestPayload
 } from './types';
-
+import { relationRecordToServerPayload } from './relations';
-function channelNameKey(type: ServerChannelPayload['type'], name: string): string {
-  return `${type}:${name.toLocaleLowerCase()}`;
-}
-
-function parseStringArray(raw: string | null | undefined): string[] {
-  try {
-    const parsed = JSON.parse(raw || '[]');
-
-    return Array.isArray(parsed)
-      ? parsed.filter((value): value is string => typeof value === 'string')
-      : [];
-  } catch {
-    return [];
-  }
-}
-
-function parseServerChannels(raw: string | null | undefined): ServerChannelPayload[] {
-  try {
-    const parsed = JSON.parse(raw || '[]');
-
-    if (!Array.isArray(parsed)) {
-      return [];
-    }
-
-    const seenIds = new Set<string>();
-    const seenNames = new Set<string>();
-
-    return parsed
-      .filter((channel): channel is Record<string, unknown> => !!channel && typeof channel === 'object')
-      .map((channel, index) => {
-        const id = typeof channel.id === 'string' ? channel.id.trim() : '';
-        const name = typeof channel.name === 'string' ? channel.name.trim().replace(/\s+/g, ' ') : '';
-        const type = channel.type === 'text' || channel.type === 'voice' ? channel.type : null;
-        const position = typeof channel.position === 'number' ? channel.position : index;
-        const nameKey = type ? channelNameKey(type, name) : '';
-
-        if (!id || !name || !type || seenIds.has(id) || seenNames.has(nameKey)) {
-          return null;
-        }
-
-        seenIds.add(id);
-        seenNames.add(nameKey);
-
-        return {
-          id,
-          name,
-          type,
-          position
-        } satisfies ServerChannelPayload;
-      })
-      .filter((channel): channel is ServerChannelPayload => !!channel);
-  } catch {
-    return [];
-  }
-}
 
 export function rowToAuthUser(row: AuthUserEntity): AuthUserPayload {
   return {
@@ -74,7 +18,24 @@ export function rowToAuthUser(row: AuthUserEntity): AuthUserPayload {
   };
 }
 
-export function rowToServer(row: ServerEntity): ServerPayload {
+export function rowToServer(
+  row: ServerEntity,
+  relations: Pick<ServerPayload, 'tags' | 'channels' | 'roles' | 'roleAssignments' | 'channelPermissions'> = {
+    tags: [],
+    channels: [],
+    roles: [],
+    roleAssignments: [],
+    channelPermissions: []
+  }
+): ServerPayload {
+  const relationPayload = relationRecordToServerPayload({ slowModeInterval: row.slowModeInterval }, {
+    tags: relations.tags ?? [],
+    channels: relations.channels ?? [],
+    roles: relations.roles ?? [],
+    roleAssignments: relations.roleAssignments ?? [],
+    channelPermissions: relations.channelPermissions ?? []
+  });
+
   return {
     id: row.id,
     name: row.name,
@@ -86,8 +47,12 @@ export function rowToServer(row: ServerEntity): ServerPayload {
     isPrivate: !!row.isPrivate,
     maxUsers: row.maxUsers,
     currentUsers: row.currentUsers,
-    tags: parseStringArray(row.tags),
+    slowModeInterval: relationPayload.slowModeInterval,
-    channels: parseServerChannels(row.channels),
+    tags: relationPayload.tags,
+    channels: relationPayload.channels,
+    roles: relationPayload.roles,
+    roleAssignments: relationPayload.roleAssignments,
+    channelPermissions: relationPayload.channelPermissions,
     createdAt: row.createdAt,
     lastSeen: row.lastSeen
   };

server/src/cqrs/queries/handlers/getAllPublicServers.ts

@@ -1,10 +1,12 @@
 import { DataSource } from 'typeorm';
 import { ServerEntity } from '../../../entities';
 import { rowToServer } from '../../mappers';
+import { loadServerRelationsMap } from '../../relations';
 
 export async function handleGetAllPublicServers(dataSource: DataSource) {
   const repo = dataSource.getRepository(ServerEntity);
   const rows = await repo.find({ where: { isPrivate: 0 } });
+  const relationsByServerId = await loadServerRelationsMap(dataSource, rows.map((row) => row.id));
 
-  return rows.map(rowToServer);
+  return rows.map((row) => rowToServer(row, relationsByServerId.get(row.id)));
 }

server/src/cqrs/queries/handlers/getServerById.ts

@@ -2,10 +2,17 @@ import { DataSource } from 'typeorm';
 import { ServerEntity } from '../../../entities';
 import { GetServerByIdQuery } from '../../types';
 import { rowToServer } from '../../mappers';
+import { loadServerRelationsMap } from '../../relations';
 
 export async function handleGetServerById(query: GetServerByIdQuery, dataSource: DataSource) {
   const repo = dataSource.getRepository(ServerEntity);
   const row = await repo.findOne({ where: { id: query.payload.serverId } });
 
-  return row ? rowToServer(row) : null;
+  if (!row) {
+    return null;
+  }
+
+  const relationsByServerId = await loadServerRelationsMap(dataSource, [row.id]);
+
+  return rowToServer(row, relationsByServerId.get(row.id));
 }

server/src/cqrs/relations.ts

@@ -0,0 +1,603 @@
+import {
+  DataSource,
+  EntityManager,
+  In
+} from 'typeorm';
+import {
+  ServerChannelEntity,
+  ServerTagEntity,
+  ServerRoleEntity,
+  ServerUserRoleEntity,
+  ServerChannelPermissionEntity
+} from '../entities';
+import {
+  AccessRolePayload,
+  ChannelPermissionPayload,
+  RoleAssignmentPayload,
+  ServerChannelPayload,
+  ServerPayload,
+  ServerPermissionKeyPayload,
+  PermissionStatePayload
+} from './types';
+
+const SERVER_PERMISSION_KEYS: ServerPermissionKeyPayload[] = [
+  'manageServer',
+  'manageRoles',
+  'manageChannels',
+  'manageIcon',
+  'kickMembers',
+  'banMembers',
+  'manageBans',
+  'deleteMessages',
+  'joinVoice',
+  'shareScreen',
+  'uploadFiles'
+];
+const SYSTEM_ROLE_IDS = {
+  everyone: 'system-everyone',
+  moderator: 'system-moderator',
+  admin: 'system-admin'
+} as const;
+
+interface ServerRelationRecord {
+  tags: string[];
+  channels: ServerChannelPayload[];
+  roles: AccessRolePayload[];
+  roleAssignments: RoleAssignmentPayload[];
+  channelPermissions: ChannelPermissionPayload[];
+}
+
+function normalizeChannelName(name: string): string {
+  return name.trim().replace(/\s+/g, ' ');
+}
+
+function channelNameKey(type: ServerChannelPayload['type'], name: string): string {
+  return `${type}:${normalizeChannelName(name).toLocaleLowerCase()}`;
+}
+
+function compareText(firstValue: string, secondValue: string): number {
+  return firstValue.localeCompare(secondValue, undefined, { sensitivity: 'base' });
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function uniqueStrings(values: readonly string[] | undefined): string[] {
+  return Array.from(new Set((values ?? [])
+    .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+    .map((value) => value.trim())));
+}
+
+function normalizePermissionState(value: unknown): PermissionStatePayload {
+  return value === 'allow' || value === 'deny' || value === 'inherit'
+    ? value
+    : 'inherit';
+}
+
+function normalizePermissionMatrix(rawMatrix: unknown): Partial<Record<ServerPermissionKeyPayload, PermissionStatePayload>> {
+  const matrix = rawMatrix && typeof rawMatrix === 'object'
+    ? rawMatrix as Record<string, unknown>
+    : {};
+  const normalized: Partial<Record<ServerPermissionKeyPayload, PermissionStatePayload>> = {};
+
+  for (const key of SERVER_PERMISSION_KEYS) {
+    const value = normalizePermissionState(matrix[key]);
+
+    if (value !== 'inherit') {
+      normalized[key] = value;
+    }
+  }
+
+  return normalized;
+}
+
+function buildDefaultServerRoles(): AccessRolePayload[] {
+  return [
+    {
+      id: SYSTEM_ROLE_IDS.everyone,
+      name: '@everyone',
+      color: '#6b7280',
+      position: 0,
+      isSystem: true,
+      permissions: {
+        joinVoice: 'allow',
+        shareScreen: 'allow',
+        uploadFiles: 'allow'
+      }
+    },
+    {
+      id: SYSTEM_ROLE_IDS.moderator,
+      name: 'Moderator',
+      color: '#10b981',
+      position: 200,
+      isSystem: true,
+      permissions: {
+        kickMembers: 'allow',
+        deleteMessages: 'allow'
+      }
+    },
+    {
+      id: SYSTEM_ROLE_IDS.admin,
+      name: 'Admin',
+      color: '#60a5fa',
+      position: 300,
+      isSystem: true,
+      permissions: {
+        kickMembers: 'allow',
+        banMembers: 'allow',
+        manageBans: 'allow',
+        deleteMessages: 'allow',
+        manageChannels: 'allow',
+        manageIcon: 'allow'
+      }
+    }
+  ];
+}
+
+function normalizeServerRole(rawRole: Partial<AccessRolePayload>, fallbackRole?: AccessRolePayload): AccessRolePayload | null {
+  const id = typeof rawRole.id === 'string' ? rawRole.id.trim() : fallbackRole?.id ?? '';
+  const name = typeof rawRole.name === 'string' ? rawRole.name.trim().replace(/\s+/g, ' ') : fallbackRole?.name ?? '';
+
+  if (!id || !name) {
+    return null;
+  }
+
+  return {
+    id,
+    name,
+    color: typeof rawRole.color === 'string' && rawRole.color.trim() ? rawRole.color.trim() : fallbackRole?.color,
+    position: isFiniteNumber(rawRole.position) ? rawRole.position : fallbackRole?.position ?? 0,
+    isSystem: typeof rawRole.isSystem === 'boolean' ? rawRole.isSystem : fallbackRole?.isSystem,
+    permissions: normalizePermissionMatrix(rawRole.permissions ?? fallbackRole?.permissions)
+  };
+}
+
+function compareRoles(firstRole: AccessRolePayload, secondRole: AccessRolePayload): number {
+  if (firstRole.position !== secondRole.position) {
+    return firstRole.position - secondRole.position;
+  }
+
+  return compareText(firstRole.name, secondRole.name);
+}
+
+function compareAssignments(firstAssignment: RoleAssignmentPayload, secondAssignment: RoleAssignmentPayload): number {
+  return compareText(firstAssignment.oderId || firstAssignment.userId, secondAssignment.oderId || secondAssignment.userId);
+}
+
+export function normalizeServerTags(rawTags: unknown): string[] {
+  if (!Array.isArray(rawTags)) {
+    return [];
+  }
+
+  return rawTags
+    .filter((tag): tag is string => typeof tag === 'string')
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+}
+
+export function normalizeServerChannels(rawChannels: unknown): ServerChannelPayload[] {
+  if (!Array.isArray(rawChannels)) {
+    return [];
+  }
+
+  const seenIds = new Set<string>();
+  const seenNames = new Set<string>();
+  const channels: ServerChannelPayload[] = [];
+
+  for (const [index, rawChannel] of rawChannels.entries()) {
+    if (!rawChannel || typeof rawChannel !== 'object') {
+      continue;
+    }
+
+    const channel = rawChannel as Record<string, unknown>;
+    const id = typeof channel['id'] === 'string' ? channel['id'].trim() : '';
+    const name = typeof channel['name'] === 'string' ? normalizeChannelName(channel['name']) : '';
+    const type = channel['type'] === 'text' || channel['type'] === 'voice' ? channel['type'] : null;
+    const position = isFiniteNumber(channel['position']) ? channel['position'] : index;
+    const nameKey = type ? channelNameKey(type, name) : '';
+
+    if (!id || !name || !type || seenIds.has(id) || seenNames.has(nameKey)) {
+      continue;
+    }
+
+    seenIds.add(id);
+    seenNames.add(nameKey);
+    channels.push({
+      id,
+      name,
+      type,
+      position
+    });
+  }
+
+  return channels;
+}
+
+export function normalizeServerRoles(rawRoles: unknown): AccessRolePayload[] {
+  const rolesById = new Map<string, AccessRolePayload>();
+
+  if (Array.isArray(rawRoles)) {
+    for (const rawRole of rawRoles) {
+      if (!rawRole || typeof rawRole !== 'object') {
+        continue;
+      }
+
+      const normalizedRole = normalizeServerRole(rawRole as Record<string, unknown>);
+
+      if (normalizedRole) {
+        rolesById.set(normalizedRole.id, normalizedRole);
+      }
+    }
+  }
+
+  for (const defaultRole of buildDefaultServerRoles()) {
+    const mergedRole = normalizeServerRole(rolesById.get(defaultRole.id) ?? defaultRole, defaultRole) ?? defaultRole;
+
+    rolesById.set(defaultRole.id, mergedRole);
+  }
+
+  return Array.from(rolesById.values()).sort(compareRoles);
+}
+
+export function normalizeServerRoleAssignments(rawAssignments: unknown, roles: readonly AccessRolePayload[]): RoleAssignmentPayload[] {
+  const validRoleIds = new Set(roles.map((role) => role.id).filter((roleId) => roleId !== SYSTEM_ROLE_IDS.everyone));
+  const assignmentsByKey = new Map<string, RoleAssignmentPayload>();
+
+  if (!Array.isArray(rawAssignments)) {
+    return [];
+  }
+
+  for (const rawAssignment of rawAssignments) {
+    if (!rawAssignment || typeof rawAssignment !== 'object') {
+      continue;
+    }
+
+    const assignment = rawAssignment as Record<string, unknown>;
+    const userId = typeof assignment['userId'] === 'string' ? assignment['userId'].trim() : '';
+    const oderId = typeof assignment['oderId'] === 'string' ? assignment['oderId'].trim() : undefined;
+    const key = oderId || userId;
+
+    if (!key) {
+      continue;
+    }
+
+    const roleIds = uniqueStrings(Array.isArray(assignment['roleIds']) ? assignment['roleIds'] as string[] : undefined)
+      .filter((roleId) => validRoleIds.has(roleId));
+
+    if (roleIds.length === 0) {
+      continue;
+    }
+
+    assignmentsByKey.set(key, {
+      userId: userId || key,
+      oderId,
+      roleIds
+    });
+  }
+
+  return Array.from(assignmentsByKey.values()).sort(compareAssignments);
+}
+
+export function normalizeServerChannelPermissions(
+  rawChannelPermissions: unknown,
+  roles: readonly AccessRolePayload[]
+): ChannelPermissionPayload[] {
+  if (!Array.isArray(rawChannelPermissions)) {
+    return [];
+  }
+
+  const validRoleIds = new Set(roles.map((role) => role.id));
+  const overridesByKey = new Map<string, ChannelPermissionPayload>();
+
+  for (const rawOverride of rawChannelPermissions) {
+    if (!rawOverride || typeof rawOverride !== 'object') {
+      continue;
+    }
+
+    const override = rawOverride as Record<string, unknown>;
+    const channelId = typeof override['channelId'] === 'string' ? override['channelId'].trim() : '';
+    const targetType = override['targetType'] === 'role' || override['targetType'] === 'user' ? override['targetType'] : null;
+    const targetId = typeof override['targetId'] === 'string' ? override['targetId'].trim() : '';
+    const permission = SERVER_PERMISSION_KEYS.find((key) => key === override['permission']);
+    const value = normalizePermissionState(override['value']);
+
+    if (!channelId || !targetType || !targetId || !permission || value === 'inherit') {
+      continue;
+    }
+
+    if (targetType === 'role' && !validRoleIds.has(targetId)) {
+      continue;
+    }
+
+    const key = `${channelId}:${targetType}:${targetId}:${permission}`;
+
+    overridesByKey.set(key, {
+      channelId,
+      targetType,
+      targetId,
+      permission,
+      value
+    });
+  }
+
+  return Array.from(overridesByKey.values()).sort((firstOverride, secondOverride) => {
+    const channelCompare = compareText(firstOverride.channelId, secondOverride.channelId);
+
+    if (channelCompare !== 0) {
+      return channelCompare;
+    }
+
+    if (firstOverride.targetType !== secondOverride.targetType) {
+      return compareText(firstOverride.targetType, secondOverride.targetType);
+    }
+
+    const targetCompare = compareText(firstOverride.targetId, secondOverride.targetId);
+
+    if (targetCompare !== 0) {
+      return targetCompare;
+    }
+
+    return compareText(firstOverride.permission, secondOverride.permission);
+  });
+}
+
+export async function replaceServerRelations(
+  manager: EntityManager,
+  serverId: string,
+  options: {
+    tags: unknown;
+    channels: unknown;
+    roles?: unknown;
+    roleAssignments?: unknown;
+    channelPermissions?: unknown;
+  }
+): Promise<void> {
+  const tagRepo = manager.getRepository(ServerTagEntity);
+  const channelRepo = manager.getRepository(ServerChannelEntity);
+  const roleRepo = manager.getRepository(ServerRoleEntity);
+  const userRoleRepo = manager.getRepository(ServerUserRoleEntity);
+  const channelPermissionRepo = manager.getRepository(ServerChannelPermissionEntity);
+  const tags = normalizeServerTags(options.tags);
+  const channels = normalizeServerChannels(options.channels);
+  const roles = options.roles !== undefined ? normalizeServerRoles(options.roles) : [];
+
+  await tagRepo.delete({ serverId });
+  await channelRepo.delete({ serverId });
+
+  if (options.roles !== undefined) {
+    await roleRepo.delete({ serverId });
+  }
+
+  if (options.roleAssignments !== undefined) {
+    await userRoleRepo.delete({ serverId });
+  }
+
+  if (options.channelPermissions !== undefined) {
+    await channelPermissionRepo.delete({ serverId });
+  }
+
+  if (tags.length > 0) {
+    await tagRepo.insert(
+      tags.map((tag, position) => ({
+        serverId,
+        position,
+        value: tag
+      }))
+    );
+  }
+
+  if (channels.length > 0) {
+    await channelRepo.insert(
+      channels.map((channel) => ({
+        serverId,
+        channelId: channel.id,
+        name: channel.name,
+        type: channel.type,
+        position: channel.position
+      }))
+    );
+  }
+
+  if (options.roles !== undefined && roles.length > 0) {
+    await roleRepo.insert(
+      roles.map((role) => ({
+        serverId,
+        roleId: role.id,
+        name: role.name,
+        color: role.color ?? null,
+        position: role.position,
+        isSystem: role.isSystem ? 1 : 0,
+        manageServer: normalizePermissionState(role.permissions?.manageServer),
+        manageRoles: normalizePermissionState(role.permissions?.manageRoles),
+        manageChannels: normalizePermissionState(role.permissions?.manageChannels),
+        manageIcon: normalizePermissionState(role.permissions?.manageIcon),
+        kickMembers: normalizePermissionState(role.permissions?.kickMembers),
+        banMembers: normalizePermissionState(role.permissions?.banMembers),
+        manageBans: normalizePermissionState(role.permissions?.manageBans),
+        deleteMessages: normalizePermissionState(role.permissions?.deleteMessages),
+        joinVoice: normalizePermissionState(role.permissions?.joinVoice),
+        shareScreen: normalizePermissionState(role.permissions?.shareScreen),
+        uploadFiles: normalizePermissionState(role.permissions?.uploadFiles)
+      }))
+    );
+  }
+
+  if (options.roleAssignments !== undefined) {
+    const roleAssignments = normalizeServerRoleAssignments(options.roleAssignments, roles.length > 0 ? roles : normalizeServerRoles([]));
+    const rows = roleAssignments.flatMap((assignment) =>
+      assignment.roleIds.map((roleId) => ({
+        serverId,
+        userId: assignment.userId,
+        roleId,
+        oderId: assignment.oderId ?? null
+      }))
+    );
+
+    if (rows.length > 0) {
+      await userRoleRepo.insert(rows);
+    }
+  }
+
+  if (options.channelPermissions !== undefined) {
+    const channelPermissions = normalizeServerChannelPermissions(
+      options.channelPermissions,
+      roles.length > 0 ? roles : normalizeServerRoles([])
+    );
+
+    if (channelPermissions.length > 0) {
+      await channelPermissionRepo.insert(
+        channelPermissions.map((channelPermission) => ({
+          serverId,
+          channelId: channelPermission.channelId,
+          targetType: channelPermission.targetType,
+          targetId: channelPermission.targetId,
+          permission: channelPermission.permission,
+          value: channelPermission.value
+        }))
+      );
+    }
+  }
+}
+
+export async function loadServerRelationsMap(
+  dataSource: DataSource,
+  serverIds: readonly string[]
+): Promise<Map<string, ServerRelationRecord>> {
+  const groupedRelations = new Map<string, ServerRelationRecord>();
+
+  if (serverIds.length === 0) {
+    return groupedRelations;
+  }
+
+  const [
+    tagRows,
+    channelRows,
+    roleRows,
+    userRoleRows,
+    channelPermissionRows
+  ] = await Promise.all([
+    dataSource.getRepository(ServerTagEntity).find({
+      where: { serverId: In([...serverIds]) }
+    }),
+    dataSource.getRepository(ServerChannelEntity).find({
+      where: { serverId: In([...serverIds]) }
+    }),
+    dataSource.getRepository(ServerRoleEntity).find({
+      where: { serverId: In([...serverIds]) }
+    }),
+    dataSource.getRepository(ServerUserRoleEntity).find({
+      where: { serverId: In([...serverIds]) }
+    }),
+    dataSource.getRepository(ServerChannelPermissionEntity).find({
+      where: { serverId: In([...serverIds]) }
+    })
+  ]);
+
+  for (const serverId of serverIds) {
+    groupedRelations.set(serverId, {
+      tags: [],
+      channels: [],
+      roles: [],
+      roleAssignments: [],
+      channelPermissions: []
+    });
+  }
+
+  for (const row of tagRows) {
+    groupedRelations.get(row.serverId)?.tags.push(row.value);
+  }
+
+  for (const row of channelRows) {
+    groupedRelations.get(row.serverId)?.channels.push({
+      id: row.channelId,
+      name: row.name,
+      type: row.type,
+      position: row.position
+    });
+  }
+
+  for (const row of roleRows) {
+    groupedRelations.get(row.serverId)?.roles.push({
+      id: row.roleId,
+      name: row.name,
+      color: row.color ?? undefined,
+      position: row.position,
+      isSystem: !!row.isSystem,
+      permissions: normalizePermissionMatrix({
+        manageServer: row.manageServer,
+        manageRoles: row.manageRoles,
+        manageChannels: row.manageChannels,
+        manageIcon: row.manageIcon,
+        kickMembers: row.kickMembers,
+        banMembers: row.banMembers,
+        manageBans: row.manageBans,
+        deleteMessages: row.deleteMessages,
+        joinVoice: row.joinVoice,
+        shareScreen: row.shareScreen,
+        uploadFiles: row.uploadFiles
+      })
+    });
+  }
+
+  for (const row of userRoleRows) {
+    const relation = groupedRelations.get(row.serverId);
+
+    if (!relation) {
+      continue;
+    }
+
+    const existing = relation.roleAssignments.find((assignment) => assignment.userId === row.userId || assignment.oderId === row.oderId);
+
+    if (existing) {
+      existing.roleIds = uniqueStrings([...existing.roleIds, row.roleId]);
+      continue;
+    }
+
+    relation.roleAssignments.push({
+      userId: row.userId,
+      oderId: row.oderId ?? undefined,
+      roleIds: [row.roleId]
+    });
+  }
+
+  for (const row of channelPermissionRows) {
+    groupedRelations.get(row.serverId)?.channelPermissions.push({
+      channelId: row.channelId,
+      targetType: row.targetType,
+      targetId: row.targetId,
+      permission: row.permission as ServerPermissionKeyPayload,
+      value: normalizePermissionState(row.value)
+    });
+  }
+
+  for (const [serverId, relation] of groupedRelations) {
+    relation.tags = tagRows
+      .filter((row) => row.serverId === serverId)
+      .sort((firstTag, secondTag) => firstTag.position - secondTag.position)
+      .map((row) => row.value);
+
+    relation.channels.sort(
+      (firstChannel, secondChannel) => firstChannel.position - secondChannel.position || compareText(firstChannel.name, secondChannel.name)
+    );
+
+    relation.roles.sort(compareRoles);
+    relation.roleAssignments.sort(compareAssignments);
+  }
+
+  return groupedRelations;
+}
+
+export function relationRecordToServerPayload(
+  row: Pick<ServerPayload, 'slowModeInterval'>,
+  relations: ServerRelationRecord
+): Pick<ServerPayload, 'tags' | 'channels' | 'roles' | 'roleAssignments' | 'channelPermissions' | 'slowModeInterval'> {
+  return {
+    tags: relations.tags,
+    channels: relations.channels,
+    roles: relations.roles,
+    roleAssignments: relations.roleAssignments,
+    channelPermissions: relations.channelPermissions,
+    slowModeInterval: row.slowModeInterval ?? 0
+  };
+}

server/src/cqrs/types.ts

@@ -37,6 +37,44 @@ export interface ServerChannelPayload {
   position: number;
 }
 
+export type PermissionStatePayload = 'allow' | 'deny' | 'inherit';
+
+export type ServerPermissionKeyPayload =
+  | 'manageServer'
+  | 'manageRoles'
+  | 'manageChannels'
+  | 'manageIcon'
+  | 'kickMembers'
+  | 'banMembers'
+  | 'manageBans'
+  | 'deleteMessages'
+  | 'joinVoice'
+  | 'shareScreen'
+  | 'uploadFiles';
+
+export interface AccessRolePayload {
+  id: string;
+  name: string;
+  color?: string;
+  position: number;
+  isSystem?: boolean;
+  permissions?: Partial<Record<ServerPermissionKeyPayload, PermissionStatePayload>>;
+}
+
+export interface RoleAssignmentPayload {
+  userId: string;
+  oderId?: string;
+  roleIds: string[];
+}
+
+export interface ChannelPermissionPayload {
+  channelId: string;
+  targetType: 'role' | 'user';
+  targetId: string;
+  permission: ServerPermissionKeyPayload;
+  value: PermissionStatePayload;
+}
+
 export interface ServerPayload {
   id: string;
   name: string;
@@ -48,8 +86,12 @@ export interface ServerPayload {
   isPrivate: boolean;
   maxUsers: number;
   currentUsers: number;
+  slowModeInterval?: number;
   tags: string[];
   channels: ServerChannelPayload[];
+  roles?: AccessRolePayload[];
+  roleAssignments?: RoleAssignmentPayload[];
+  channelPermissions?: ChannelPermissionPayload[];
   createdAt: number;
   lastSeen: number;
 }

server/src/db/database.ts

@@ -4,6 +4,11 @@ import { DataSource } from 'typeorm';
 import {
   AuthUserEntity,
   ServerEntity,
+  ServerTagEntity,
+  ServerChannelEntity,
+  ServerRoleEntity,
+  ServerUserRoleEntity,
+  ServerChannelPermissionEntity,
   JoinRequestEntity,
   ServerMembershipEntity,
   ServerInviteEntity,
@@ -54,13 +59,18 @@ export async function initDatabase(): Promise<void> {
       entities: [
         AuthUserEntity,
         ServerEntity,
+        ServerTagEntity,
+        ServerChannelEntity,
+        ServerRoleEntity,
+        ServerUserRoleEntity,
+        ServerChannelPermissionEntity,
         JoinRequestEntity,
         ServerMembershipEntity,
         ServerInviteEntity,
         ServerBanEntity
       ],
       migrations: serverMigrations,
-      synchronize: false,
+      synchronize: process.env.DB_SYNCHRONIZE === 'true',
       logging: false,
       autoSave: true,
       location: DB_FILE,
@@ -80,8 +90,12 @@ export async function initDatabase(): Promise<void> {
 
   console.log('[DB] Connection initialised at:', DB_FILE);
 
+  if (process.env.DB_SYNCHRONIZE !== 'true') {
     await applicationDataSource.runMigrations();
     console.log('[DB] Migrations executed');
+  } else {
+    console.log('[DB] Synchronize mode — migrations skipped');
+  }
 }
 
 export async function destroyDatabase(): Promise<void> {

server/src/entities/ServerChannelEntity.ts

@@ -0,0 +1,23 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column
+} from 'typeorm';
+
+@Entity('server_channels')
+export class ServerChannelEntity {
+  @PrimaryColumn('text')
+  serverId!: string;
+
+  @PrimaryColumn('text')
+  channelId!: string;
+
+  @Column('text')
+  name!: string;
+
+  @Column('text')
+  type!: 'text' | 'voice';
+
+  @Column('integer')
+  position!: number;
+}

server/src/entities/ServerChannelPermissionEntity.ts

@@ -0,0 +1,26 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('server_channel_permissions')
+export class ServerChannelPermissionEntity {
+  @PrimaryColumn('text')
+  serverId!: string;
+
+  @PrimaryColumn('text')
+  channelId!: string;
+
+  @PrimaryColumn('text')
+  targetType!: 'role' | 'user';
+
+  @PrimaryColumn('text')
+  targetId!: string;
+
+  @PrimaryColumn('text')
+  permission!: string;
+
+  @Column('text')
+  value!: 'allow' | 'deny' | 'inherit';
+}

server/src/entities/ServerEntity.ts

@@ -33,11 +33,8 @@ export class ServerEntity {
   @Column('integer', { default: 0 })
   currentUsers!: number;
 
-  @Column('text', { default: '[]' })
+  @Column('integer', { default: 0 })
-  tags!: string;
+  slowModeInterval!: number;
-
-  @Column('text', { default: '[]' })
-  channels!: string;
 
   @Column('integer')
   createdAt!: number;

server/src/entities/ServerRoleEntity.ts

@@ -0,0 +1,59 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('server_roles')
+export class ServerRoleEntity {
+  @PrimaryColumn('text')
+  serverId!: string;
+
+  @PrimaryColumn('text')
+  roleId!: string;
+
+  @Column('text')
+  name!: string;
+
+  @Column('text', { nullable: true })
+  color!: string | null;
+
+  @Column('integer')
+  position!: number;
+
+  @Column('integer', { default: 0 })
+  isSystem!: number;
+
+  @Column('text', { default: 'inherit' })
+  manageServer!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageRoles!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageChannels!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageIcon!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  kickMembers!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  banMembers!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  manageBans!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  deleteMessages!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  joinVoice!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  shareScreen!: 'allow' | 'deny' | 'inherit';
+
+  @Column('text', { default: 'inherit' })
+  uploadFiles!: 'allow' | 'deny' | 'inherit';
+}

server/src/entities/ServerTagEntity.ts

@@ -0,0 +1,17 @@
+import {
+  Entity,
+  PrimaryColumn,
+  Column
+} from 'typeorm';
+
+@Entity('server_tags')
+export class ServerTagEntity {
+  @PrimaryColumn('text')
+  serverId!: string;
+
+  @PrimaryColumn('integer')
+  position!: number;
+
+  @Column('text')
+  value!: string;
+}

server/src/entities/ServerUserRoleEntity.ts

@@ -0,0 +1,20 @@
+import {
+  Column,
+  Entity,
+  PrimaryColumn
+} from 'typeorm';
+
+@Entity('server_user_roles')
+export class ServerUserRoleEntity {
+  @PrimaryColumn('text')
+  serverId!: string;
+
+  @PrimaryColumn('text')
+  userId!: string;
+
+  @PrimaryColumn('text')
+  roleId!: string;
+
+  @Column('text', { nullable: true })
+  oderId!: string | null;
+}

server/src/entities/index.ts

@@ -1,5 +1,10 @@
 export { AuthUserEntity } from './AuthUserEntity';
 export { ServerEntity } from './ServerEntity';
+export { ServerTagEntity } from './ServerTagEntity';
+export { ServerChannelEntity } from './ServerChannelEntity';
+export { ServerRoleEntity } from './ServerRoleEntity';
+export { ServerUserRoleEntity } from './ServerUserRoleEntity';
+export { ServerChannelPermissionEntity } from './ServerChannelPermissionEntity';
 export { JoinRequestEntity } from './JoinRequestEntity';
 export { ServerMembershipEntity } from './ServerMembershipEntity';
 export { ServerInviteEntity } from './ServerInviteEntity';

server/src/migrations/1000000000004-NormalizeServerArrays.ts

@@ -0,0 +1,142 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+type LegacyServerRow = {
+  id: string;
+  tags: string | null;
+  channels: string | null;
+};
+
+type LegacyServerChannel = {
+  id?: unknown;
+  name?: unknown;
+  type?: unknown;
+  position?: unknown;
+};
+
+function parseArray<T>(raw: string | null): T[] {
+  try {
+    const parsed = JSON.parse(raw || '[]');
+
+    return Array.isArray(parsed) ? parsed as T[] : [];
+  } catch {
+    return [];
+  }
+}
+
+function normalizeChannelName(name: string): string {
+  return name.trim().replace(/\s+/g, ' ');
+}
+
+function channelNameKey(type: 'text' | 'voice', name: string): string {
+  return `${type}:${normalizeChannelName(name).toLocaleLowerCase()}`;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+function normalizeServerTags(raw: string | null): string[] {
+  return parseArray<unknown>(raw).filter((tag): tag is string => typeof tag === 'string');
+}
+
+function normalizeServerChannels(raw: string | null) {
+  const channels = parseArray<LegacyServerChannel>(raw);
+  const seenIds = new Set<string>();
+  const seenNames = new Set<string>();
+
+  return channels.flatMap((channel, index) => {
+    const id = typeof channel.id === 'string' ? channel.id.trim() : '';
+    const name = typeof channel.name === 'string' ? normalizeChannelName(channel.name) : '';
+    const type = channel.type === 'text' || channel.type === 'voice' ? channel.type : null;
+    const position = isFiniteNumber(channel.position) ? channel.position : index;
+    const nameKey = type ? channelNameKey(type, name) : '';
+
+    if (!id || !name || !type || seenIds.has(id) || seenNames.has(nameKey)) {
+      return [];
+    }
+
+    seenIds.add(id);
+    seenNames.add(nameKey);
+
+    return [{
+      channelId: id,
+      name,
+      type,
+      position
+    }];
+  });
+}
+
+export class NormalizeServerArrays1000000000004 implements MigrationInterface {
+  name = 'NormalizeServerArrays1000000000004';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_tags" (
+        "serverId"  TEXT NOT NULL,
+        "position"  INTEGER NOT NULL,
+        "value"     TEXT NOT NULL,
+        PRIMARY KEY ("serverId", "position")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_tags_serverId" ON "server_tags" ("serverId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_channels" (
+        "serverId"  TEXT NOT NULL,
+        "channelId" TEXT NOT NULL,
+        "name"      TEXT NOT NULL,
+        "type"      TEXT NOT NULL,
+        "position"  INTEGER NOT NULL,
+        PRIMARY KEY ("serverId", "channelId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_channels_serverId" ON "server_channels" ("serverId")`);
+
+    const rows = await queryRunner.query(`SELECT "id", "tags", "channels" FROM "servers"`) as LegacyServerRow[];
+
+    for (const row of rows) {
+      for (const [position, tag] of normalizeServerTags(row.tags).entries()) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "server_tags" ("serverId", "position", "value") VALUES (?, ?, ?)`,
+          [row.id, position, tag]
+        );
+      }
+
+      for (const channel of normalizeServerChannels(row.channels)) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "server_channels" ("serverId", "channelId", "name", "type", "position") VALUES (?, ?, ?, ?, ?)`,
+          [row.id, channel.channelId, channel.name, channel.type, channel.position]
+        );
+      }
+    }
+
+    await queryRunner.query(`
+      CREATE TABLE "servers_next" (
+        "id"             TEXT PRIMARY KEY NOT NULL,
+        "name"           TEXT NOT NULL,
+        "description"    TEXT,
+        "ownerId"        TEXT NOT NULL,
+        "ownerPublicKey" TEXT NOT NULL,
+        "isPrivate"      INTEGER NOT NULL DEFAULT 0,
+        "maxUsers"       INTEGER NOT NULL DEFAULT 0,
+        "currentUsers"   INTEGER NOT NULL DEFAULT 0,
+        "createdAt"      INTEGER NOT NULL,
+        "lastSeen"       INTEGER NOT NULL,
+        "passwordHash"   TEXT
+      )
+    `);
+    await queryRunner.query(`
+      INSERT INTO "servers_next" ("id", "name", "description", "ownerId", "ownerPublicKey", "isPrivate", "maxUsers", "currentUsers", "createdAt", "lastSeen", "passwordHash")
+      SELECT "id", "name", "description", "ownerId", "ownerPublicKey", "isPrivate", "maxUsers", "currentUsers", "createdAt", "lastSeen", "passwordHash"
+      FROM "servers"
+    `);
+    await queryRunner.query(`DROP TABLE "servers"`);
+    await queryRunner.query(`ALTER TABLE "servers_next" RENAME TO "servers"`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_channels"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_tags"`);
+  }
+}

server/src/migrations/1000000000005-ServerRoleAccessControl.ts

@@ -0,0 +1,196 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+type LegacyServerRow = {
+  id: string;
+  name: string;
+  description: string | null;
+  ownerId: string;
+  ownerPublicKey: string;
+  passwordHash: string | null;
+  isPrivate: number;
+  maxUsers: number;
+  currentUsers: number;
+  createdAt: number;
+  lastSeen: number;
+};
+
+const SYSTEM_ROLE_IDS = {
+  everyone: 'system-everyone',
+  moderator: 'system-moderator',
+  admin: 'system-admin'
+} as const;
+
+function buildDefaultServerRoles() {
+  return [
+    {
+      roleId: SYSTEM_ROLE_IDS.everyone,
+      name: '@everyone',
+      color: '#6b7280',
+      position: 0,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: 'inherit',
+      manageIcon: 'inherit',
+      kickMembers: 'inherit',
+      banMembers: 'inherit',
+      manageBans: 'inherit',
+      deleteMessages: 'inherit',
+      joinVoice: 'allow',
+      shareScreen: 'allow',
+      uploadFiles: 'allow'
+    },
+    {
+      roleId: SYSTEM_ROLE_IDS.moderator,
+      name: 'Moderator',
+      color: '#10b981',
+      position: 200,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: 'inherit',
+      manageIcon: 'inherit',
+      kickMembers: 'allow',
+      banMembers: 'inherit',
+      manageBans: 'inherit',
+      deleteMessages: 'allow',
+      joinVoice: 'inherit',
+      shareScreen: 'inherit',
+      uploadFiles: 'inherit'
+    },
+    {
+      roleId: SYSTEM_ROLE_IDS.admin,
+      name: 'Admin',
+      color: '#60a5fa',
+      position: 300,
+      isSystem: 1,
+      manageServer: 'inherit',
+      manageRoles: 'inherit',
+      manageChannels: 'allow',
+      manageIcon: 'allow',
+      kickMembers: 'allow',
+      banMembers: 'allow',
+      manageBans: 'allow',
+      deleteMessages: 'allow',
+      joinVoice: 'inherit',
+      shareScreen: 'inherit',
+      uploadFiles: 'inherit'
+    }
+  ];
+}
+
+export class ServerRoleAccessControl1000000000005 implements MigrationInterface {
+  name = 'ServerRoleAccessControl1000000000005';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_roles" (
+        "serverId" TEXT NOT NULL,
+        "roleId" TEXT NOT NULL,
+        "name" TEXT NOT NULL,
+        "color" TEXT,
+        "position" INTEGER NOT NULL,
+        "isSystem" INTEGER NOT NULL DEFAULT 0,
+        "manageServer" TEXT NOT NULL DEFAULT 'inherit',
+        "manageRoles" TEXT NOT NULL DEFAULT 'inherit',
+        "manageChannels" TEXT NOT NULL DEFAULT 'inherit',
+        "manageIcon" TEXT NOT NULL DEFAULT 'inherit',
+        "kickMembers" TEXT NOT NULL DEFAULT 'inherit',
+        "banMembers" TEXT NOT NULL DEFAULT 'inherit',
+        "manageBans" TEXT NOT NULL DEFAULT 'inherit',
+        "deleteMessages" TEXT NOT NULL DEFAULT 'inherit',
+        "joinVoice" TEXT NOT NULL DEFAULT 'inherit',
+        "shareScreen" TEXT NOT NULL DEFAULT 'inherit',
+        "uploadFiles" TEXT NOT NULL DEFAULT 'inherit',
+        PRIMARY KEY ("serverId", "roleId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_roles_serverId" ON "server_roles" ("serverId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_user_roles" (
+        "serverId" TEXT NOT NULL,
+        "userId" TEXT NOT NULL,
+        "roleId" TEXT NOT NULL,
+        "oderId" TEXT,
+        PRIMARY KEY ("serverId", "userId", "roleId")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_user_roles_serverId" ON "server_user_roles" ("serverId")`);
+
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS "server_channel_permissions" (
+        "serverId" TEXT NOT NULL,
+        "channelId" TEXT NOT NULL,
+        "targetType" TEXT NOT NULL,
+        "targetId" TEXT NOT NULL,
+        "permission" TEXT NOT NULL,
+        "value" TEXT NOT NULL,
+        PRIMARY KEY ("serverId", "channelId", "targetType", "targetId", "permission")
+      )
+    `);
+    await queryRunner.query(`CREATE INDEX IF NOT EXISTS "idx_server_channel_permissions_serverId" ON "server_channel_permissions" ("serverId")`);
+
+    const servers = await queryRunner.query(`
+      SELECT "id", "name", "description", "ownerId", "ownerPublicKey", "passwordHash", "isPrivate", "maxUsers", "currentUsers", "createdAt", "lastSeen"
+      FROM "servers"
+    `) as LegacyServerRow[];
+
+    for (const server of servers) {
+      for (const role of buildDefaultServerRoles()) {
+        await queryRunner.query(
+          `INSERT OR REPLACE INTO "server_roles" ("serverId", "roleId", "name", "color", "position", "isSystem", "manageServer", "manageRoles", "manageChannels", "manageIcon", "kickMembers", "banMembers", "manageBans", "deleteMessages", "joinVoice", "shareScreen", "uploadFiles") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+          [
+            server.id,
+            role.roleId,
+            role.name,
+            role.color,
+            role.position,
+            role.isSystem,
+            role.manageServer,
+            role.manageRoles,
+            role.manageChannels,
+            role.manageIcon,
+            role.kickMembers,
+            role.banMembers,
+            role.manageBans,
+            role.deleteMessages,
+            role.joinVoice,
+            role.shareScreen,
+            role.uploadFiles
+          ]
+        );
+      }
+    }
+
+    await queryRunner.query(`
+      CREATE TABLE "servers_next" (
+        "id" TEXT PRIMARY KEY NOT NULL,
+        "name" TEXT NOT NULL,
+        "description" TEXT,
+        "ownerId" TEXT NOT NULL,
+        "ownerPublicKey" TEXT NOT NULL,
+        "passwordHash" TEXT,
+        "isPrivate" INTEGER NOT NULL DEFAULT 0,
+        "maxUsers" INTEGER NOT NULL DEFAULT 0,
+        "currentUsers" INTEGER NOT NULL DEFAULT 0,
+        "slowModeInterval" INTEGER NOT NULL DEFAULT 0,
+        "createdAt" INTEGER NOT NULL,
+        "lastSeen" INTEGER NOT NULL
+      )
+    `);
+    await queryRunner.query(`
+      INSERT INTO "servers_next" ("id", "name", "description", "ownerId", "ownerPublicKey", "passwordHash", "isPrivate", "maxUsers", "currentUsers", "slowModeInterval", "createdAt", "lastSeen")
+      SELECT "id", "name", "description", "ownerId", "ownerPublicKey", "passwordHash", "isPrivate", "maxUsers", "currentUsers", 0, "createdAt", "lastSeen"
+      FROM "servers"
+    `);
+    await queryRunner.query(`DROP TABLE "servers"`);
+    await queryRunner.query(`ALTER TABLE "servers_next" RENAME TO "servers"`);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_channel_permissions"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_user_roles"`);
+    await queryRunner.query(`DROP TABLE IF EXISTS "server_roles"`);
+  }
+}

server/src/migrations/index.ts

@@ -2,10 +2,14 @@ import { InitialSchema1000000000000 } from './1000000000000-InitialSchema';
 import { ServerAccessControl1000000000001 } from './1000000000001-ServerAccessControl';
 import { ServerChannels1000000000002 } from './1000000000002-ServerChannels';
 import { RepairLegacyVoiceChannels1000000000003 } from './1000000000003-RepairLegacyVoiceChannels';
+import { NormalizeServerArrays1000000000004 } from './1000000000004-NormalizeServerArrays';
+import { ServerRoleAccessControl1000000000005 } from './1000000000005-ServerRoleAccessControl';
 
 export const serverMigrations = [
 	InitialSchema1000000000000,
 	ServerAccessControl1000000000001,
 	ServerChannels1000000000002,
-	RepairLegacyVoiceChannels1000000000003
+	RepairLegacyVoiceChannels1000000000003,
+	NormalizeServerArrays1000000000004,
+	ServerRoleAccessControl1000000000005
 ];

server/src/routes/health.ts

@@ -1,10 +1,15 @@
 import { Router } from 'express';
+import { randomUUID } from 'crypto';
 import { getAllPublicServers } from '../cqrs';
 import { getReleaseManifestUrl } from '../config/variables';
 import { SERVER_BUILD_VERSION } from '../generated/build-version';
 import { connectedUsers } from '../websocket/state';
 
 const router = Router();
+const SERVER_INSTANCE_ID = typeof process.env.METOYOU_SERVER_INSTANCE_ID === 'string'
+  && process.env.METOYOU_SERVER_INSTANCE_ID.trim().length > 0
+  ? process.env.METOYOU_SERVER_INSTANCE_ID.trim()
+  : randomUUID();
 
 function getServerProjectVersion(): string {
   return typeof process.env.METOYOU_SERVER_VERSION === 'string' && process.env.METOYOU_SERVER_VERSION.trim().length > 0
@@ -20,6 +25,7 @@ router.get('/health', async (_req, res) => {
     timestamp: Date.now(),
     serverCount: servers.length,
     connectedUsers: connectedUsers.size,
+    serverInstanceId: SERVER_INSTANCE_ID,
     serverVersion: getServerProjectVersion(),
     releaseManifestUrl: getReleaseManifestUrl()
   });

server/src/routes/index.ts

@@ -1,6 +1,7 @@
 import { Express } from 'express';
 import healthRouter from './health';
 import klipyRouter from './klipy';
+import linkMetadataRouter from './link-metadata';
 import proxyRouter from './proxy';
 import usersRouter from './users';
 import serversRouter from './servers';
@@ -10,6 +11,7 @@ import { invitesApiRouter, invitePageRouter } from './invites';
 export function registerRoutes(app: Express): void {
   app.use('/api', healthRouter);
   app.use('/api', klipyRouter);
+  app.use('/api', linkMetadataRouter);
   app.use('/api', proxyRouter);
   app.use('/api/users', usersRouter);
   app.use('/api/servers', serversRouter);

server/src/routes/invites.ts

@@ -1,6 +1,5 @@
 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 {
@@ -283,7 +282,7 @@ invitesApiRouter.get('/:id', async (req, res) => {
     return res.status(404).json({ error: 'Invite link has expired or is invalid', errorCode: 'INVITE_EXPIRED' });
   }
 
-  const server = rowToServer(bundle.server);
+  const server = bundle.server;
 
   res.json({
     id: bundle.invite.id,
@@ -315,7 +314,7 @@ invitePageRouter.get('/:id', async (req, res) => {
     return;
   }
 
-  const server = rowToServer(bundle.server);
+  const server = bundle.server;
   const owner = await getUserById(server.ownerId);
 
   res.send(renderInvitePage({

server/src/routes/join-requests.ts

@@ -6,6 +6,7 @@ import {
   updateJoinRequestStatus
 } from '../cqrs';
 import { notifyUser } from '../websocket/broadcast';
+import { resolveServerPermission } from '../services/server-permissions.service';
 
 const router = Router();
 
@@ -19,7 +20,7 @@ router.put('/:id', async (req, res) => {
 
   const server = await getServerById(request.serverId);
 
-  if (!server || server.ownerId !== ownerId)
+  if (!server || !ownerId || !resolveServerPermission(server, String(ownerId), 'manageServer'))
     return res.status(403).json({ error: 'Not authorized' });
 
   await updateJoinRequestStatus(id, status as JoinRequestPayload['status']);

server/src/routes/link-metadata.ts

@@ -0,0 +1,292 @@
+import { Router } from 'express';
+import { getLinkPreviewConfig } from '../config/variables';
+import { resolveAndValidateHost, safeFetch } from './ssrf-guard';
+
+const router = Router();
+const REQUEST_TIMEOUT_MS = 8000;
+const MAX_HTML_BYTES = 512 * 1024;
+const BYTES_PER_MB = 1024 * 1024;
+const MAX_FIELD_LENGTH = 512;
+
+interface CachedMetadata {
+  title?: string;
+  description?: string;
+  imageUrl?: string;
+  siteName?: string;
+  failed?: boolean;
+  cachedAt: number;
+}
+
+const metadataCache = new Map<string, CachedMetadata>();
+
+let cacheByteEstimate = 0;
+
+function estimateEntryBytes(key: string, entry: CachedMetadata): number {
+  let bytes = key.length * 2;
+
+  if (entry.title)
+    bytes += entry.title.length * 2;
+
+  if (entry.description)
+    bytes += entry.description.length * 2;
+
+  if (entry.imageUrl)
+    bytes += entry.imageUrl.length * 2;
+
+  if (entry.siteName)
+    bytes += entry.siteName.length * 2;
+
+  return bytes + 64;
+}
+
+function cacheSet(key: string, entry: CachedMetadata): void {
+  const config = getLinkPreviewConfig();
+  const maxBytes = config.maxCacheSizeMb * BYTES_PER_MB;
+
+  if (metadataCache.has(key)) {
+    const existing = metadataCache.get(key) as CachedMetadata;
+
+    cacheByteEstimate -= estimateEntryBytes(key, existing);
+  }
+
+  const entryBytes = estimateEntryBytes(key, entry);
+
+  while (cacheByteEstimate + entryBytes > maxBytes && metadataCache.size > 0) {
+    const oldest = metadataCache.keys().next().value as string;
+    const oldestEntry = metadataCache.get(oldest) as CachedMetadata;
+
+    cacheByteEstimate -= estimateEntryBytes(oldest, oldestEntry);
+    metadataCache.delete(oldest);
+  }
+
+  metadataCache.set(key, entry);
+  cacheByteEstimate += entryBytes;
+}
+
+function truncateField(value: string | undefined): string | undefined {
+  if (!value)
+    return value;
+
+  if (value.length <= MAX_FIELD_LENGTH)
+    return value;
+
+  return value.slice(0, MAX_FIELD_LENGTH);
+}
+
+function sanitizeImageUrl(rawUrl: string | undefined, baseUrl: string): string | undefined {
+  if (!rawUrl)
+    return undefined;
+
+  try {
+    const resolved = new URL(rawUrl, baseUrl);
+
+    if (resolved.protocol !== 'http:' && resolved.protocol !== 'https:')
+      return undefined;
+
+    return resolved.href;
+  } catch {
+    return undefined;
+  }
+}
+
+function getMetaContent(html: string, patterns: RegExp[]): string | undefined {
+  for (const pattern of patterns) {
+    const match = pattern.exec(html);
+
+    if (match?.[1])
+      return decodeHtmlEntities(match[1].trim());
+  }
+
+  return undefined;
+}
+
+function decodeHtmlEntities(text: string): string {
+  return text
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x27;/g, "'")
+    .replace(/&#x2F;/g, '/');
+}
+
+function parseMetadata(html: string, url: string): CachedMetadata {
+  const title = getMetaContent(html, [
+    /<meta[^>]+property=["']og:title["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:title["']/i,
+    /<meta[^>]+name=["']twitter:title["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']twitter:title["']/i,
+    /<title[^>]*>([^<]+)<\/title>/i
+  ]);
+  const description = getMetaContent(html, [
+    /<meta[^>]+property=["']og:description["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:description["']/i,
+    /<meta[^>]+name=["']twitter:description["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']twitter:description["']/i,
+    /<meta[^>]+name=["']description["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']description["']/i
+  ]);
+  const rawImageUrl = getMetaContent(html, [
+    /<meta[^>]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:image["']/i,
+    /<meta[^>]+name=["']twitter:image["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+name=["']twitter:image["']/i
+  ]);
+  const siteNamePatterns = [
+    // eslint-disable-next-line @stylistic/js/array-element-newline
+    /<meta[^>]+property=["']og:site_name["'][^>]+content=["']([^"']+)["']/i,
+    /<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:site_name["']/i
+  ];
+  const siteName = getMetaContent(html, siteNamePatterns);
+  const imageUrl = sanitizeImageUrl(rawImageUrl, url);
+
+  return {
+    title: truncateField(title),
+    description: truncateField(description),
+    imageUrl,
+    siteName: truncateField(siteName),
+    cachedAt: Date.now()
+  };
+}
+
+function evictExpired(): void {
+  const config = getLinkPreviewConfig();
+
+  if (config.cacheTtlMinutes === 0) {
+    cacheByteEstimate = 0;
+    metadataCache.clear();
+
+    return;
+  }
+
+  const ttlMs = config.cacheTtlMinutes * 60 * 1000;
+  const now = Date.now();
+
+  for (const [key, entry] of metadataCache) {
+    if (now - entry.cachedAt > ttlMs) {
+      cacheByteEstimate -= estimateEntryBytes(key, entry);
+      metadataCache.delete(key);
+    }
+  }
+}
+
+router.get('/link-metadata', async (req, res) => {
+  try {
+    const config = getLinkPreviewConfig();
+
+    if (!config.enabled) {
+      return res.status(403).json({ error: 'Link previews are disabled' });
+    }
+
+    const url = String(req.query.url || '');
+
+    if (!/^https?:\/\//i.test(url)) {
+      return res.status(400).json({ error: 'Invalid URL' });
+    }
+
+    const hostAllowed = await resolveAndValidateHost(url);
+
+    if (!hostAllowed) {
+      return res.status(400).json({ error: 'URL resolves to a blocked address' });
+    }
+
+    evictExpired();
+
+    const cached = metadataCache.get(url);
+
+    if (cached) {
+      const { cachedAt, ...metadata } = cached;
+
+      console.log(`[Link Metadata] Cache hit for ${url} (cached at ${new Date(cachedAt).toISOString()})`);
+      return res.json(metadata);
+    }
+
+    console.log(`[Link Metadata] Cache miss for ${url}. Fetching...`);
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    const response = await safeFetch(url, {
+      signal: controller.signal,
+      headers: {
+        'Accept': 'text/html',
+        'User-Agent': 'MetoYou-LinkPreview/1.0'
+      }
+    });
+
+    clearTimeout(timeout);
+
+    if (!response || !response.ok) {
+      const failed: CachedMetadata = { failed: true, cachedAt: Date.now() };
+
+      cacheSet(url, failed);
+
+      return res.json({ failed: true });
+    }
+
+    const contentType = response.headers.get('content-type') || '';
+
+    if (!contentType.includes('text/html')) {
+      const failed: CachedMetadata = { failed: true, cachedAt: Date.now() };
+
+      cacheSet(url, failed);
+
+      return res.json({ failed: true });
+    }
+
+    const reader = response.body?.getReader();
+
+    if (!reader) {
+      const failed: CachedMetadata = { failed: true, cachedAt: Date.now() };
+
+      cacheSet(url, failed);
+
+      return res.json({ failed: true });
+    }
+
+    const chunks: Uint8Array[] = [];
+
+    let totalBytes = 0;
+    let done = false;
+
+    while (!done) {
+      const result = await reader.read();
+
+      done = result.done;
+
+      if (result.value) {
+        chunks.push(result.value);
+        totalBytes += result.value.length;
+
+        if (totalBytes > MAX_HTML_BYTES) {
+          reader.cancel();
+          break;
+        }
+      }
+    }
+
+    const html = Buffer.concat(chunks).toString('utf-8');
+    const metadata = parseMetadata(html, url);
+
+    cacheSet(url, metadata);
+
+    const { cachedAt, ...result } = metadata;
+
+    res.json(result);
+  } catch (err) {
+    const url = String(req.query.url || '');
+
+    if (url) {
+      cacheSet(url, { failed: true, cachedAt: Date.now() });
+    }
+
+    if ((err as { name?: string })?.name === 'AbortError') {
+      return res.json({ failed: true });
+    }
+
+    console.error('Link metadata error:', err);
+    res.json({ failed: true });
+  }
+});
+
+export default router;

server/src/routes/proxy.ts

@@ -1,4 +1,5 @@
 import { Router } from 'express';
+import { resolveAndValidateHost, safeFetch } from './ssrf-guard';
 
 const router = Router();
 
@@ -10,14 +11,20 @@ router.get('/image-proxy', async (req, res) => {
       return res.status(400).json({ error: 'Invalid URL' });
     }
 
+    const hostAllowed = await resolveAndValidateHost(url);
+
+    if (!hostAllowed) {
+      return res.status(400).json({ error: 'URL resolves to a blocked address' });
+    }
+
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 8000);
-    const response = await fetch(url, { redirect: 'follow', signal: controller.signal });
+    const response = await safeFetch(url, { signal: controller.signal });
 
     clearTimeout(timeout);
 
-    if (!response.ok) {
+    if (!response || !response.ok) {
-      return res.status(response.status).end();
+      return res.status(response?.status ?? 502).end();
     }
 
     const contentType = response.headers.get('content-type') || '';

server/src/routes/servers.ts

@@ -1,9 +1,6 @@
 import { Response, Router } from 'express';
 import { v4 as uuidv4 } from 'uuid';
-import {
+import { ServerChannelPayload, ServerPayload } from '../cqrs/types';
-  ServerChannelPayload,
-  ServerPayload
-} from '../cqrs/types';
 import {
   getAllPublicServers,
   getServerById,
@@ -30,21 +27,18 @@ import {
   buildInviteUrl,
   getRequestOrigin
 } from './invite-utils';
+import {
+  canManageServerUpdate,
+  canModerateServerMember,
+  resolveServerPermission
+} from '../services/server-permissions.service';
 
 const router = Router();
 
-function normalizeRole(role: unknown): string | null {
-  return typeof role === 'string' ? role.trim().toLowerCase() : null;
-}
-
 function channelNameKey(type: ServerChannelPayload['type'], name: string): string {
   return `${type}:${name.toLocaleLowerCase()}`;
 }
 
-function isAllowedRole(role: string | null, allowedRoles: string[]): boolean {
-  return !!role && allowedRoles.includes(role);
-}
-
 function normalizeServerChannels(value: unknown): ServerChannelPayload[] {
   if (!Array.isArray(value)) {
     return [];
@@ -212,15 +206,20 @@ router.put('/:id', async (req, res) => {
   } = 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 (
+  if (!authenticatedOwnerId) {
-    existing.ownerId !== authenticatedOwnerId &&
+    return res.status(400).json({ error: 'Missing currentOwnerId' });
-    !isAllowedRole(normalizedRole, ['host', 'admin'])
+  }
-  ) {
+
+  if (!canManageServerUpdate(existing, authenticatedOwnerId, {
+    ...updates,
+    channels,
+    password,
+    actingRole
+  })) {
     return res.status(403).json({ error: 'Not authorized' });
   }
 
@@ -298,7 +297,7 @@ router.post('/:id/invites', async (req, res) => {
 
 router.post('/:id/moderation/kick', async (req, res) => {
   const { id: serverId } = req.params;
-  const { actorUserId, actorRole, targetUserId } = req.body;
+  const { actorUserId, targetUserId } = req.body;
   const server = await getServerById(serverId);
 
   if (!server) {
@@ -309,14 +308,7 @@ router.post('/:id/moderation/kick', async (req, res) => {
     return res.status(400).json({ error: 'Missing targetUserId', errorCode: 'MISSING_TARGET' });
   }
 
-  if (
+  if (!canModerateServerMember(server, String(actorUserId || ''), String(targetUserId), 'kickMembers')) {
-    server.ownerId !== actorUserId &&
-    !isAllowedRole(normalizeRole(actorRole), [
-      'host',
-      'admin',
-      'moderator'
-    ])
-  ) {
     return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
   }
 
@@ -327,7 +319,7 @@ router.post('/:id/moderation/kick', async (req, res) => {
 
 router.post('/:id/moderation/ban', async (req, res) => {
   const { id: serverId } = req.params;
-  const { actorUserId, actorRole, targetUserId, banId, displayName, reason, expiresAt } = req.body;
+  const { actorUserId, targetUserId, banId, displayName, reason, expiresAt } = req.body;
   const server = await getServerById(serverId);
 
   if (!server) {
@@ -338,14 +330,7 @@ router.post('/:id/moderation/ban', async (req, res) => {
     return res.status(400).json({ error: 'Missing targetUserId', errorCode: 'MISSING_TARGET' });
   }
 
-  if (
+  if (!canModerateServerMember(server, String(actorUserId || ''), String(targetUserId), 'banMembers')) {
-    server.ownerId !== actorUserId &&
-    !isAllowedRole(normalizeRole(actorRole), [
-      'host',
-      'admin',
-      'moderator'
-    ])
-  ) {
     return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
   }
 
@@ -364,21 +349,14 @@ router.post('/:id/moderation/ban', async (req, res) => {
 
 router.post('/:id/moderation/unban', async (req, res) => {
   const { id: serverId } = req.params;
-  const { actorUserId, actorRole, banId, targetUserId } = req.body;
+  const { actorUserId, 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 (
+  if (!resolveServerPermission(server, String(actorUserId || ''), 'manageBans')) {
-    server.ownerId !== actorUserId &&
-    !isAllowedRole(normalizeRole(actorRole), [
-      'host',
-      'admin',
-      'moderator'
-    ])
-  ) {
     return res.status(403).json({ error: 'Not authorized', errorCode: 'NOT_AUTHORIZED' });
   }
 

server/src/routes/ssrf-guard.ts

@@ -0,0 +1,119 @@
+import { lookup } from 'dns/promises';
+
+const MAX_REDIRECTS = 5;
+
+function isPrivateIp(ip: string): boolean {
+  if (
+    ip === '127.0.0.1' ||
+    ip === '::1' ||
+    ip === '0.0.0.0' ||
+    ip === '::'
+  )
+    return true;
+
+  // 10.x.x.x
+  if (ip.startsWith('10.'))
+    return true;
+
+  // 172.16.0.0 - 172.31.255.255
+  if (ip.startsWith('172.')) {
+    const second = parseInt(ip.split('.')[1], 10);
+
+    if (second >= 16 && second <= 31)
+      return true;
+  }
+
+  // 192.168.x.x
+  if (ip.startsWith('192.168.'))
+    return true;
+
+  // 169.254.x.x (link-local, AWS metadata)
+  if (ip.startsWith('169.254.'))
+    return true;
+
+  // IPv6 private ranges (fc00::/7, fe80::/10)
+  const lower = ip.toLowerCase();
+
+  if (lower.startsWith('fc') || lower.startsWith('fd') || lower.startsWith('fe80'))
+    return true;
+
+  return false;
+}
+
+export async function resolveAndValidateHost(url: string): Promise<boolean> {
+  let hostname: string;
+
+  try {
+    hostname = new URL(url).hostname;
+  } catch {
+    return false;
+  }
+
+  // Block obvious private hostnames
+  if (hostname === 'localhost' || hostname === 'metadata.google.internal')
+    return false;
+
+  // If hostname is already an IP literal, check it directly
+  if (/^[\d.]+$/.test(hostname) || hostname.startsWith('['))
+    return !isPrivateIp(hostname.replace(/[[\]]/g, ''));
+
+  try {
+    const { address } = await lookup(hostname);
+
+    return !isPrivateIp(address);
+  } catch {
+    return false;
+  }
+}
+
+export interface SafeFetchOptions {
+  signal?: AbortSignal;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Fetches a URL while following redirects safely, validating each
+ * hop against SSRF (private/reserved IPs, blocked hostnames).
+ *
+ * The caller must validate the initial URL with `resolveAndValidateHost`
+ * before calling this function.
+ */
+export async function safeFetch(url: string, options: SafeFetchOptions = {}): Promise<Response | undefined> {
+  let currentUrl = url;
+  let response: Response | undefined;
+
+  for (let redirects = 0; redirects <= MAX_REDIRECTS; redirects++) {
+    response = await fetch(currentUrl, {
+      redirect: 'manual',
+      signal: options.signal,
+      headers: options.headers
+    });
+
+    const location = response.headers.get('location');
+
+    if (response.status >= 300 && response.status < 400 && location) {
+      let nextUrl: string;
+
+      try {
+        nextUrl = new URL(location, currentUrl).href;
+      } catch {
+        break;
+      }
+
+      if (!/^https?:\/\//i.test(nextUrl))
+        break;
+
+      const redirectAllowed = await resolveAndValidateHost(nextUrl);
+
+      if (!redirectAllowed)
+        break;
+
+      currentUrl = nextUrl;
+      continue;
+    }
+
+    break;
+  }
+
+  return response;
+}

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

@@ -8,6 +8,7 @@ import {
   ServerMembershipEntity
 } from '../entities';
 import { rowToServer } from '../cqrs/mappers';
+import { loadServerRelationsMap } from '../cqrs/relations';
 import { ServerPayload } from '../cqrs/types';
 
 export const SERVER_INVITE_EXPIRY_MS = 10 * 24 * 60 * 60 * 1000;
@@ -57,6 +58,12 @@ function getBanRepository() {
   return getDataSource().getRepository(ServerBanEntity);
 }
 
+async function toServerPayload(server: ServerEntity): Promise<ServerPayload> {
+  const relationsByServerId = await loadServerRelationsMap(getDataSource(), [server.id]);
+
+  return rowToServer(server, relationsByServerId.get(server.id));
+}
+
 function normalizePassword(password?: string | null): string | null {
   const normalized = password?.trim() ?? '';
 
@@ -194,7 +201,7 @@ export async function createServerInvite(
 
 export async function getActiveServerInvite(
   inviteId: string
-): Promise<{ invite: ServerInviteEntity; server: ServerEntity } | null> {
+): Promise<{ invite: ServerInviteEntity; server: ServerPayload } | null> {
   await pruneExpiredServerAccessArtifacts();
 
   const invite = await getInviteRepository().findOne({ where: { id: inviteId } });
@@ -214,7 +221,10 @@ export async function getActiveServerInvite(
     return null;
   }
 
-  return { invite, server };
+  return {
+    invite,
+    server: await toServerPayload(server)
+  };
 }
 
 export async function joinServerWithAccess(options: {
@@ -242,7 +252,7 @@ export async function joinServerWithAccess(options: {
 
     return {
       joinedBefore: !!existingMembership,
-      server: rowToServer(server),
+      server: await toServerPayload(server),
       via: 'membership'
     };
   }
@@ -260,7 +270,7 @@ export async function joinServerWithAccess(options: {
 
     return {
       joinedBefore: !!existingMembership,
-      server: rowToServer(server),
+      server: await toServerPayload(server),
       via: 'invite'
     };
   }
@@ -272,7 +282,7 @@ export async function joinServerWithAccess(options: {
 
     return {
       joinedBefore: true,
-      server: rowToServer(server),
+      server: await toServerPayload(server),
       via: 'membership'
     };
   }
@@ -288,7 +298,7 @@ export async function joinServerWithAccess(options: {
 
     return {
       joinedBefore: false,
-      server: rowToServer(server),
+      server: await toServerPayload(server),
       via: 'password'
     };
   }
@@ -301,7 +311,7 @@ export async function joinServerWithAccess(options: {
 
   return {
     joinedBefore: false,
-    server: rowToServer(server),
+    server: await toServerPayload(server),
     via: 'public'
   };
 }

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

@@ -0,0 +1,191 @@
+import type {
+  AccessRolePayload,
+  PermissionStatePayload,
+  RoleAssignmentPayload,
+  ServerPayload,
+  ServerPermissionKeyPayload
+} from '../cqrs/types';
+import { normalizeServerRoleAssignments, normalizeServerRoles } from '../cqrs/relations';
+
+const SYSTEM_ROLE_IDS = {
+  everyone: 'system-everyone'
+} as const;
+
+interface ServerIdentity {
+  userId: string;
+  oderId?: string;
+}
+
+function getServerRoles(server: Pick<ServerPayload, 'roles'>): AccessRolePayload[] {
+  return normalizeServerRoles(server.roles);
+}
+
+function getServerAssignments(server: Pick<ServerPayload, 'roleAssignments' | 'roles'>): RoleAssignmentPayload[] {
+  return normalizeServerRoleAssignments(server.roleAssignments, getServerRoles(server));
+}
+
+function matchesIdentity(identity: ServerIdentity, assignment: RoleAssignmentPayload): boolean {
+  return assignment.userId === identity.userId
+    || assignment.oderId === identity.userId
+    || (!!identity.oderId && (assignment.userId === identity.oderId || assignment.oderId === identity.oderId));
+}
+
+function resolveAssignedRoleIds(server: Pick<ServerPayload, 'roleAssignments' | 'roles'>, identity: ServerIdentity): string[] {
+  const assignment = getServerAssignments(server).find((candidateAssignment) => matchesIdentity(identity, candidateAssignment));
+
+  return assignment?.roleIds ?? [];
+}
+
+function compareRolePosition(firstRole: AccessRolePayload, secondRole: AccessRolePayload): number {
+  if (firstRole.position !== secondRole.position) {
+    return firstRole.position - secondRole.position;
+  }
+
+  return firstRole.name.localeCompare(secondRole.name, undefined, { sensitivity: 'base' });
+}
+
+function resolveRolePermissionState(
+  roles: readonly AccessRolePayload[],
+  assignedRoleIds: readonly string[],
+  permission: ServerPermissionKeyPayload
+): PermissionStatePayload {
+  const roleLookup = new Map(roles.map((role) => [role.id, role]));
+  const effectiveRoles = [roleLookup.get(SYSTEM_ROLE_IDS.everyone), ...assignedRoleIds.map((roleId) => roleLookup.get(roleId))]
+    .filter((role): role is AccessRolePayload => !!role)
+    .sort(compareRolePosition);
+
+  let state: PermissionStatePayload = 'inherit';
+
+  for (const role of effectiveRoles) {
+    const nextState = role.permissions?.[permission] ?? 'inherit';
+
+    if (nextState !== 'inherit') {
+      state = nextState;
+    }
+  }
+
+  return state;
+}
+
+function resolveHighestRole(
+  server: Pick<ServerPayload, 'roleAssignments' | 'roles'>,
+  identity: ServerIdentity
+): AccessRolePayload | null {
+  const roles = getServerRoles(server);
+  const assignedRoleIds = resolveAssignedRoleIds(server, identity);
+  const roleLookup = new Map(roles.map((role) => [role.id, role]));
+  const assignedRoles = assignedRoleIds
+    .map((roleId) => roleLookup.get(roleId))
+    .filter((role): role is AccessRolePayload => !!role)
+    .sort((firstRole, secondRole) => compareRolePosition(secondRole, firstRole));
+
+  return assignedRoles[0] ?? roleLookup.get(SYSTEM_ROLE_IDS.everyone) ?? null;
+}
+
+export function isServerOwner(server: Pick<ServerPayload, 'ownerId'>, actorUserId: string): boolean {
+  return server.ownerId === actorUserId;
+}
+
+export function resolveServerPermission(
+  server: Pick<ServerPayload, 'ownerId' | 'roleAssignments' | 'roles'>,
+  actorUserId: string,
+  permission: ServerPermissionKeyPayload,
+  actorOderId?: string
+): boolean {
+  if (isServerOwner(server, actorUserId)) {
+    return true;
+  }
+
+  const roles = getServerRoles(server);
+  const assignedRoleIds = resolveAssignedRoleIds(server, {
+    userId: actorUserId,
+    oderId: actorOderId
+  });
+
+  return resolveRolePermissionState(roles, assignedRoleIds, permission) === 'allow';
+}
+
+export function canManageServerUpdate(
+  server: Pick<ServerPayload, 'ownerId' | 'roleAssignments' | 'roles'>,
+  actorUserId: string,
+  updates: Record<string, unknown>,
+  actorOderId?: string
+): boolean {
+  if (isServerOwner(server, actorUserId)) {
+    return true;
+  }
+
+  if (typeof updates['ownerId'] === 'string' || typeof updates['ownerPublicKey'] === 'string') {
+    return false;
+  }
+
+  const requiredPermissions = new Set<ServerPermissionKeyPayload>();
+
+  if (
+    Array.isArray(updates['roles'])
+    || Array.isArray(updates['roleAssignments'])
+    || Array.isArray(updates['channelPermissions'])
+  ) {
+    requiredPermissions.add('manageRoles');
+  }
+
+  if (Array.isArray(updates['channels'])) {
+    requiredPermissions.add('manageChannels');
+  }
+
+  if (typeof updates['icon'] === 'string') {
+    requiredPermissions.add('manageIcon');
+  }
+
+  if (
+    typeof updates['name'] === 'string'
+    || typeof updates['description'] === 'string'
+    || typeof updates['isPrivate'] === 'boolean'
+    || typeof updates['maxUsers'] === 'number'
+    || typeof updates['password'] === 'string'
+    || typeof updates['passwordHash'] === 'string'
+    || typeof updates['slowModeInterval'] === 'number'
+  ) {
+    requiredPermissions.add('manageServer');
+  }
+
+  return Array.from(requiredPermissions).every((permission) =>
+    resolveServerPermission(server, actorUserId, permission, actorOderId)
+  );
+}
+
+export function canModerateServerMember(
+  server: Pick<ServerPayload, 'ownerId' | 'roleAssignments' | 'roles'>,
+  actorUserId: string,
+  targetUserId: string,
+  permission: 'kickMembers' | 'banMembers' | 'manageBans',
+  actorOderId?: string,
+  targetOderId?: string
+): boolean {
+  if (!actorUserId || !targetUserId || actorUserId === targetUserId) {
+    return false;
+  }
+
+  if (isServerOwner(server, targetUserId) && !isServerOwner(server, actorUserId)) {
+    return false;
+  }
+
+  if (isServerOwner(server, actorUserId)) {
+    return true;
+  }
+
+  if (!resolveServerPermission(server, actorUserId, permission, actorOderId)) {
+    return false;
+  }
+
+  const actorRole = resolveHighestRole(server, {
+    userId: actorUserId,
+    oderId: actorOderId
+  });
+  const targetRole = resolveHighestRole(server, {
+    userId: targetUserId,
+    oderId: targetOderId
+  });
+
+  return (actorRole?.position ?? 0) > (targetRole?.position ?? 0);
+}

server/src/websocket/broadcast.ts

@@ -1,4 +1,6 @@
+import { WebSocket } from 'ws';
 import { connectedUsers } from './state';
+import { ConnectedUser } from './types';
 
 interface WsMessage {
   [key: string]: unknown;
@@ -8,8 +10,14 @@ interface WsMessage {
 export function broadcastToServer(serverId: string, message: WsMessage, excludeOderId?: string): void {
   console.log(`Broadcasting to server ${serverId}, excluding ${excludeOderId}:`, message.type);
 
+  // Deduplicate by oderId so users with multiple connections (e.g. from
+  // different signal URLs routing to the same server) receive the
+  // broadcast only once.
+  const sentToOderIds = new Set<string>();
+
   connectedUsers.forEach((user) => {
-    if (user.serverIds.has(serverId) && user.oderId !== excludeOderId) {
+    if (user.serverIds.has(serverId) && user.oderId !== excludeOderId && !sentToOderIds.has(user.oderId)) {
+      sentToOderIds.add(user.oderId);
       console.log(`  -> Sending to ${user.displayName} (${user.oderId})`);
       user.ws.send(JSON.stringify(message));
     }
@@ -24,6 +32,43 @@ export function notifyServerOwner(ownerId: string, message: WsMessage): void {
   }
 }
 
+export function getUniqueUsersInServer(serverId: string, excludeOderId?: string): ConnectedUser[] {
+  const usersByOderId = new Map<string, ConnectedUser>();
+
+  connectedUsers.forEach((user) => {
+    if (user.oderId === excludeOderId || !user.serverIds.has(serverId) || user.ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    usersByOderId.set(user.oderId, user);
+  });
+
+  return Array.from(usersByOderId.values());
+}
+
+export function isOderIdConnectedToServer(oderId: string, serverId: string, excludeConnectionId?: string): boolean {
+  return Array.from(connectedUsers.entries()).some(([connectionId, user]) =>
+    connectionId !== excludeConnectionId
+    && user.oderId === oderId
+    && user.serverIds.has(serverId)
+    && user.ws.readyState === WebSocket.OPEN
+  );
+}
+
+export function getServerIdsForOderId(oderId: string, excludeConnectionId?: string): string[] {
+  const serverIds = new Set<string>();
+
+  connectedUsers.forEach((user, connectionId) => {
+    if (connectionId === excludeConnectionId || user.oderId !== oderId || user.ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    user.serverIds.forEach((serverId) => serverIds.add(serverId));
+  });
+
+  return Array.from(serverIds);
+}
+
 export function notifyUser(oderId: string, message: WsMessage): void {
   const user = findUserByOderId(oderId);
 
@@ -33,5 +78,13 @@ export function notifyUser(oderId: string, message: WsMessage): void {
 }
 
 export function findUserByOderId(oderId: string) {
-  return Array.from(connectedUsers.values()).find(user => user.oderId === oderId);
+  let match: ConnectedUser | undefined;
+
+  connectedUsers.forEach((user) => {
+    if (user.oderId === oderId && user.ws.readyState === WebSocket.OPEN) {
+      match = user;
+    }
+  });
+
+  return match;
 }

server/src/websocket/handler.ts

@@ -1,6 +1,12 @@
 import { connectedUsers } from './state';
 import { ConnectedUser } from './types';
-import { broadcastToServer, findUserByOderId } from './broadcast';
+import {
+  broadcastToServer,
+  findUserByOderId,
+  getServerIdsForOderId,
+  getUniqueUsersInServer,
+  isOderIdConnectedToServer
+} from './broadcast';
 import { authorizeWebSocketJoin } from '../services/server-access.service';
 
 interface WsMessage {
@@ -14,24 +20,60 @@ function normalizeDisplayName(value: unknown, fallback = 'User'): string {
   return normalized || fallback;
 }
 
+function readMessageId(value: unknown): string | undefined {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+
+  const normalized = value.trim();
+
+  if (!normalized || normalized === 'undefined' || normalized === 'null') {
+    return undefined;
+  }
+
+  return normalized;
+}
+
 /** 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())
+  const users = getUniqueUsersInServer(serverId, user.oderId)
-    .filter(cu => cu.serverIds.has(serverId) && cu.oderId !== user.oderId)
     .map(cu => ({ oderId: cu.oderId, displayName: normalizeDisplayName(cu.displayName) }));
 
   user.ws.send(JSON.stringify({ type: 'server_users', serverId, users }));
 }
 
 function handleIdentify(user: ConnectedUser, message: WsMessage, connectionId: string): void {
-  user.oderId = String(message['oderId'] || connectionId);
+  const newOderId = readMessageId(message['oderId']) ?? connectionId;
+  const newScope = typeof message['connectionScope'] === 'string' ? message['connectionScope'] : undefined;
+
+  // Close stale connections from the same identity AND the same connection
+  // scope so offer routing always targets the freshest socket (e.g. after
+  // page refresh).  Connections with a *different* scope (= a different
+  // signal URL that happens to route to this server) are left untouched so
+  // multi-signal-URL setups don't trigger an eviction loop.
+  connectedUsers.forEach((existing, existingId) => {
+    if (existingId !== connectionId
+      && existing.oderId === newOderId
+      && existing.connectionScope === newScope) {
+      console.log(`Closing stale connection for ${newOderId} (old=${existingId}, new=${connectionId}, scope=${newScope ?? 'none'})`);
+
+      try {
+        existing.ws.close();
+      } catch { /* already closing */ }
+
+      connectedUsers.delete(existingId);
+    }
+  });
+
+  user.oderId = newOderId;
   user.displayName = normalizeDisplayName(message['displayName'], normalizeDisplayName(user.displayName));
+  user.connectionScope = newScope;
   connectedUsers.set(connectionId, user);
   console.log(`User identified: ${user.displayName} (${user.oderId})`);
 }
 
 async function handleJoinServer(user: ConnectedUser, message: WsMessage, connectionId: string): Promise<void> {
-  const sid = String(message['serverId']);
+  const sid = readMessageId(message['serverId']);
 
   if (!sid)
     return;
@@ -48,16 +90,20 @@ async function handleJoinServer(user: ConnectedUser, message: WsMessage, connect
     return;
   }
 
-  const isNew = !user.serverIds.has(sid);
+  const isNewConnectionMembership = !user.serverIds.has(sid);
+  const isNewIdentityMembership = isNewConnectionMembership && !isOderIdConnectedToServer(user.oderId, sid, connectionId);
 
   user.serverIds.add(sid);
   user.viewedServerId = sid;
   connectedUsers.set(connectionId, user);
-  console.log(`User ${normalizeDisplayName(user.displayName)} (${user.oderId}) joined server ${sid} (new=${isNew})`);
+  console.log(
+    `User ${normalizeDisplayName(user.displayName)} (${user.oderId}) joined server ${sid} `
+    + `(newConnection=${isNewConnectionMembership}, newIdentity=${isNewIdentityMembership})`
+  );
 
   sendServerUsers(user, sid);
 
-  if (isNew) {
+  if (isNewIdentityMembership) {
     broadcastToServer(sid, {
       type: 'user_joined',
       oderId: user.oderId,
@@ -68,7 +114,10 @@ async function handleJoinServer(user: ConnectedUser, message: WsMessage, connect
 }
 
 function handleViewServer(user: ConnectedUser, message: WsMessage, connectionId: string): void {
-  const viewSid = String(message['serverId']);
+  const viewSid = readMessageId(message['serverId']);
+
+  if (!viewSid)
+    return;
 
   user.viewedServerId = viewSid;
   connectedUsers.set(connectionId, user);
@@ -78,7 +127,7 @@ function handleViewServer(user: ConnectedUser, message: WsMessage, connectionId:
 }
 
 function handleLeaveServer(user: ConnectedUser, message: WsMessage, connectionId: string): void {
-  const leaveSid = (message['serverId'] as string | undefined) ?? user.viewedServerId;
+  const leaveSid = readMessageId(message['serverId']) ?? user.viewedServerId;
 
   if (!leaveSid)
     return;
@@ -90,17 +139,23 @@ function handleLeaveServer(user: ConnectedUser, message: WsMessage, connectionId
 
   connectedUsers.set(connectionId, user);
 
+  const remainingServerIds = getServerIdsForOderId(user.oderId, connectionId);
+
+  if (remainingServerIds.includes(leaveSid)) {
+    return;
+  }
+
   broadcastToServer(leaveSid, {
     type: 'user_left',
     oderId: user.oderId,
     displayName: normalizeDisplayName(user.displayName),
     serverId: leaveSid,
-    serverIds: Array.from(user.serverIds)
+    serverIds: remainingServerIds
   }, user.oderId);
 }
 
 function forwardRtcMessage(user: ConnectedUser, message: WsMessage): void {
-  const targetUserId = String(message['targetUserId'] || '');
+  const targetUserId = readMessageId(message['targetUserId']) ?? '';
 
   console.log(`Forwarding ${message.type} from ${user.oderId} to ${targetUserId}`);
 

server/src/websocket/index.ts

@@ -6,7 +6,11 @@ import {
 import { WebSocketServer, WebSocket } from 'ws';
 import { v4 as uuidv4 } from 'uuid';
 import { connectedUsers } from './state';
-import { broadcastToServer } from './broadcast';
+import {
+  broadcastToServer,
+  getServerIdsForOderId,
+  isOderIdConnectedToServer
+} from './broadcast';
 import { handleWebSocketMessage } from './handler';
 
 /** How often to ping all connected clients (ms). */
@@ -20,13 +24,19 @@ function removeDeadConnection(connectionId: string): void {
   if (user) {
     console.log(`Removing dead connection: ${user.displayName ?? 'Unknown'} (${user.oderId})`);
 
+    const remainingServerIds = getServerIdsForOderId(user.oderId, connectionId);
+
     user.serverIds.forEach((sid) => {
+      if (isOderIdConnectedToServer(user.oderId, sid, connectionId)) {
+        return;
+      }
+
       broadcastToServer(sid, {
         type: 'user_left',
         oderId: user.oderId,
         displayName: user.displayName,
         serverId: sid,
-        serverIds: []
+        serverIds: remainingServerIds
       }, user.oderId);
     });
 

server/src/websocket/types.ts

@@ -6,6 +6,13 @@ export interface ConnectedUser {
   serverIds: Set<string>;
   viewedServerId?: string;
   displayName?: string;
+  /**
+   * Opaque scope string sent by the client (typically the signal URL it
+   * connected through).  Stale-connection eviction only targets connections
+   * that share the same (oderId, connectionScope) pair, so multiple signal
+   * URLs routing to the same server coexist without an eviction loop.
+   */
+  connectionScope?: string;
   /** Timestamp of the last pong received (used to detect dead connections). */
   lastPong: number;
 }

skills-lock.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "caveman": {
+      "source": "JuliusBrussee/caveman",
+      "sourceType": "github",
+      "computedHash": "4d486dd6f9fbb27ce1c51c972c9a5eb25a53236ae05eabf4d076ac1e293f4b7a"
+    }
+  }
+}

toju-app/angular.json

@@ -96,8 +96,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1MB",
+                  "maximumWarning": "2.2MB",
-                  "maximumError": "2.1MB"
+                  "maximumError": "2.3MB"
                 },
                 {
                   "type": "anyComponentStyle",

toju-app/src/app/app.config.ts

@@ -19,6 +19,8 @@ import { MessagesSyncEffects } from './store/messages/messages-sync.effects';
 import { UsersEffects } from './store/users/users.effects';
 import { RoomsEffects } from './store/rooms/rooms.effects';
 import { RoomMembersSyncEffects } from './store/rooms/room-members-sync.effects';
+import { RoomStateSyncEffects } from './store/rooms/room-state-sync.effects';
+import { RoomSettingsEffects } from './store/rooms/room-settings.effects';
 import { STORE_DEVTOOLS_MAX_AGE } from './core/constants';
 
 /** Root application configuration providing routing, HTTP, NgRx store, and devtools. */
@@ -38,7 +40,9 @@ export const appConfig: ApplicationConfig = {
       MessagesSyncEffects,
       UsersEffects,
       RoomsEffects,
-      RoomMembersSyncEffects
+      RoomMembersSyncEffects,
+      RoomStateSyncEffects,
+      RoomSettingsEffects
     ]),
     provideStoreDevtools({
       maxAge: STORE_DEVTOOLS_MAX_AGE,

toju-app/src/app/app.html

@@ -1,28 +1,68 @@
-<div class="h-screen bg-background text-foreground flex">
+<div
-  <!-- Global left servers rail always visible -->
+  appThemeNode="appRoot"
-  <aside class="w-16 flex-shrink-0 border-r border-border bg-card">
+  class="workspace-bright-theme relative h-screen overflow-hidden bg-background text-foreground"
-    <app-servers-rail class="h-full" />
+>
+  <div
+    class="grid h-full min-h-0 min-w-0 overflow-hidden"
+    [ngStyle]="appShellLayoutStyles()"
+  >
+    <aside
+      appThemeNode="serversRail"
+      class="min-h-0 overflow-hidden bg-transparent"
+      [class.hidden]="isThemeStudioFullscreen()"
+      [ngStyle]="serversRailLayoutStyles()"
+    >
+      <app-servers-rail class="block h-full" />
     </aside>
-  <main class="flex-1 min-w-0 relative overflow-hidden">
-    <!-- Custom draggable title bar -->
-    <app-title-bar />
 
-    @if (desktopUpdateState().restartRequired) {
+    <main
-    <div class="absolute inset-x-0 top-10 z-20 px-4 pt-4 pointer-events-none">
+      appThemeNode="appWorkspace"
-      <div class="pointer-events-auto mx-auto max-w-4xl rounded-xl border border-primary/30 bg-primary/10 p-4 shadow-2xl backdrop-blur-sm">
+      class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
-        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      [ngStyle]="appWorkspaceShellStyles()"
-          <div>
+    >
-            <p class="text-sm font-semibold text-foreground">Update ready to install</p>
+      <app-title-bar class="block shrink-0" />
-            <p class="mt-1 text-sm text-muted-foreground">
+
-              MetoYou {{ desktopUpdateState().targetVersion || 'update' }} has been downloaded. Restart the app to finish applying it.
+      <div class="relative min-h-0 flex-1 overflow-hidden">
+        @if (isThemeStudioFullscreen()) {
+        <div class="theme-studio-fullscreen-shell absolute inset-0 overflow-y-auto overflow-x-hidden bg-background">
+          @if (themeStudioFullscreenComponent()) {
+          <ng-container *ngComponentOutlet="themeStudioFullscreenComponent()" />
+          } @else {
+          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio…</div>
+          }
+        </div>
+        } @else { @if (showDesktopUpdateNotice()) {
+        <div class="pointer-events-none absolute inset-x-0 top-0 z-20 px-4 pt-4">
+          <div class="pointer-events-auto mx-auto w-full max-w-xl">
+            <div class="relative rounded-xl border border-border/80 bg-card/95 px-4 py-3 shadow-lg backdrop-blur">
+              <button
+                type="button"
+                (click)="dismissDesktopUpdateNotice()"
+                class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                aria-label="Dismiss update notice"
+              >
+                <ng-icon
+                  name="lucideX"
+                  class="h-4 w-4"
+                />
+              </button>
+
+              <div class="pr-10">
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Update Ready</p>
+                <p class="mt-1 text-sm font-semibold text-foreground">
+                  Restart to install {{ desktopUpdateState().targetVersion || 'the latest update' }}
                 </p>
               </div>
 
-          <div class="flex flex-wrap gap-2">
+              <p class="mt-1 pr-10 text-xs leading-5 text-muted-foreground">
+                The update has already been downloaded. Restart the app when you're ready to finish applying it.
+              </p>
+
+              <div class="mt-3 flex flex-wrap gap-2">
                 <button
                   type="button"
                   (click)="openUpdatesSettings()"
-              class="inline-flex items-center rounded-lg border border-border bg-secondary px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+                  class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                 >
                   Update settings
                 </button>
@@ -30,7 +70,7 @@
                 <button
                   type="button"
                   (click)="restartToApplyUpdate()"
-              class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                  class="inline-flex items-center rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
                 >
                   Restart now
                 </button>
@@ -40,21 +80,77 @@
         </div>
         }
 
-    <!-- Content area fills below the title bar without global scroll -->
+        <div class="absolute inset-0 overflow-auto">
-    <div class="absolute inset-x-0 top-10 bottom-0 overflow-auto">
           <router-outlet />
         </div>
+        }
+      </div>
     </main>
-
-  <!-- Floating voice controls - shown when connected to voice and navigated away from server -->
-  <app-floating-voice-controls />
   </div>
 
-<!-- Unified Settings Modal -->
+  @if (isThemeStudioFullscreen()) {
+  <div
+    #themeStudioControlsRef
+    class="pointer-events-none absolute z-[80]"
+    [ngStyle]="themeStudioControlsPositionStyles()"
+  >
+    <div class="pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-2 py-2 shadow-lg backdrop-blur">
+      <div
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
+        [class.cursor-grabbing]="isDraggingThemeStudioControls()"
+        (pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
+      >
+        Theme Studio
+      </div>
+
+      <button
+        type="button"
+        (click)="minimizeThemeStudio()"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
+      >
+        Minimize
+      </button>
+
+      <button
+        type="button"
+        (click)="closeThemeStudio()"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+  } @if (isThemeStudioMinimized()) {
+  <div class="pointer-events-none absolute bottom-4 right-4 z-[80]">
+    <div class="pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 shadow-lg backdrop-blur">
+      <div class="min-w-0">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Theme Studio</p>
+        <p class="mt-1 text-sm font-medium text-foreground">Minimized</p>
+      </div>
+
+      <button
+        type="button"
+        (click)="reopenThemeStudio()"
+        class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Re-open
+      </button>
+
+      <button
+        type="button"
+        (click)="dismissMinimizedThemeStudio()"
+        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+  } @if (!isThemeStudioFullscreen()) {
+  <app-floating-voice-controls />
+  }
   <app-settings-modal />
-
-<!-- Shared Screen Share Source Picker -->
   <app-screen-share-source-picker />
-
+  <app-native-context-menu />
-<!-- Shared Debug Console -->
   <app-debug-console [showLauncher]="false" />
+  <app-theme-picker-overlay />
+</div>

toju-app/src/app/app.routes.ts

@@ -10,12 +10,12 @@ export const routes: Routes = [
   {
     path: 'login',
     loadComponent: () =>
-      import('./domains/auth/feature/login/login.component').then((module) => module.LoginComponent)
+      import('./domains/authentication/feature/login/login.component').then((module) => module.LoginComponent)
   },
   {
     path: 'register',
     loadComponent: () =>
-      import('./domains/auth/feature/register/register.component').then((module) => module.RegisterComponent)
+      import('./domains/authentication/feature/register/register.component').then((module) => module.RegisterComponent)
   },
   {
     path: 'invite/:inviteId',

toju-app/src/app/app.ts

@@ -3,8 +3,12 @@ import {
   Component,
   OnInit,
   OnDestroy,
+  computed,
+  effect,
   inject,
-  HostListener
+  HostListener,
+  signal,
+  Type
 } from '@angular/core';
 import {
   Router,
@@ -13,8 +17,14 @@ import {
 } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { Store } from '@ngrx/store';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
 
-import { DatabaseService } from './infrastructure/persistence';
+import {
+  DatabaseService,
+  loadGeneralSettingsFromStorage,
+  loadLastViewedChatFromStorage
+} from './infrastructure/persistence';
 import { DesktopAppUpdateService } from './core/services/desktop-app-update.service';
 import { ServerDirectoryFacade } from './domains/server-directory';
 import { NotificationsFacade } from './domains/notifications';
@@ -29,53 +39,182 @@ import { FloatingVoiceControlsComponent } from './domains/voice-session/feature/
 import { SettingsModalComponent } from './features/settings/settings-modal/settings-modal.component';
 import { DebugConsoleComponent } from './shared/components/debug-console/debug-console.component';
 import { ScreenShareSourcePickerComponent } from './shared/components/screen-share-source-picker/screen-share-source-picker.component';
+import { NativeContextMenuComponent } from './features/shell/native-context-menu.component';
 import { UsersActions } from './store/users/users.actions';
 import { RoomsActions } from './store/rooms/rooms.actions';
 import { selectCurrentRoom } from './store/rooms/rooms.selectors';
+import { ROOM_URL_PATTERN, STORAGE_KEY_CURRENT_USER_ID } from './core/constants';
 import {
-  ROOM_URL_PATTERN,
+  ThemeNodeDirective,
-  STORAGE_KEY_CURRENT_USER_ID,
+  ThemePickerOverlayComponent,
-  STORAGE_KEY_LAST_VISITED_ROUTE
+  ThemeService
-} from './core/constants';
+} from './domains/theme';
 
 @Component({
   selector: 'app-root',
   imports: [
     CommonModule,
+    NgIcon,
     RouterOutlet,
     ServersRailComponent,
     TitleBarComponent,
     FloatingVoiceControlsComponent,
     SettingsModalComponent,
     DebugConsoleComponent,
-    ScreenShareSourcePickerComponent
+    ScreenShareSourcePickerComponent,
+    NativeContextMenuComponent,
+    ThemeNodeDirective,
+    ThemePickerOverlayComponent
+  ],
+  viewProviders: [
+    provideIcons({
+      lucideX
+    })
   ],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
 export class App implements OnInit, OnDestroy {
+  private static readonly THEME_STUDIO_CONTROLS_MARGIN = 16;
+  private static readonly TITLE_BAR_HEIGHT = 40;
+
   store = inject(Store);
   currentRoom = this.store.selectSignal(selectCurrentRoom);
   desktopUpdates = inject(DesktopAppUpdateService);
   desktopUpdateState = this.desktopUpdates.state;
+  readonly databaseService = inject(DatabaseService);
+  readonly router = inject(Router);
+  readonly servers = inject(ServerDirectoryFacade);
+  readonly notifications = inject(NotificationsFacade);
+  readonly settingsModal = inject(SettingsModalService);
+  readonly timeSync = inject(TimeSyncService);
+  readonly theme = inject(ThemeService);
+  readonly voiceSession = inject(VoiceSessionFacade);
+  readonly externalLinks = inject(ExternalLinkService);
+  readonly electronBridge = inject(ElectronBridgeService);
+  readonly dismissedDesktopUpdateNoticeKey = signal<string | null>(null);
+  readonly themeStudioFullscreenComponent = signal<Type<unknown> | null>(null);
+  readonly themeStudioControlsPosition = signal<{ x: number; y: number } | null>(null);
+  readonly isDraggingThemeStudioControls = signal(false);
+
+  readonly appShellLayoutStyles = computed(() => this.theme.getLayoutContainerStyles('appShell'));
+  readonly serversRailLayoutStyles = computed(() => this.theme.getLayoutItemStyles('serversRail'));
+  readonly appWorkspaceLayoutStyles = computed(() => this.theme.getLayoutItemStyles('appWorkspace'));
+  readonly isThemeStudioFullscreen = computed(() => {
+    return this.settingsModal.isOpen()
+      && this.settingsModal.activePage() === 'theme'
+      && this.settingsModal.themeStudioFullscreen();
+  });
+  readonly isThemeStudioMinimized = computed(() => {
+    return this.settingsModal.activePage() === 'theme'
+      && this.settingsModal.themeStudioMinimized();
+  });
+  readonly desktopUpdateNoticeKey = computed(() => {
+    const updateState = this.desktopUpdateState();
+
+    return updateState.targetVersion?.trim()
+      || updateState.latestVersion?.trim()
+      || `restart:${updateState.currentVersion}`;
+  });
+  readonly showDesktopUpdateNotice = computed(() => {
+    return this.desktopUpdateState().restartRequired
+      && this.dismissedDesktopUpdateNoticeKey() !== this.desktopUpdateNoticeKey();
+  });
+  readonly appWorkspaceShellStyles = computed(() => {
+    const workspaceStyles = this.appWorkspaceLayoutStyles();
+
+    if (!this.isThemeStudioFullscreen()) {
+      return workspaceStyles;
+    }
+
+    return {
+      ...workspaceStyles,
+      gridColumn: '1 / -1',
+      gridRow: '1 / -1'
+    };
+  });
+  readonly themeStudioControlsPositionStyles = computed(() => {
+    const position = this.themeStudioControlsPosition();
+
+    if (!position) {
+      return {
+        right: `${App.THEME_STUDIO_CONTROLS_MARGIN}px`,
+        bottom: `${App.THEME_STUDIO_CONTROLS_MARGIN}px`
+      };
+    }
+
+    return {
+      left: `${position.x}px`,
+      top: `${position.y}px`
+    };
+  });
 
-  private databaseService = inject(DatabaseService);
-  private router = inject(Router);
-  private servers = inject(ServerDirectoryFacade);
-  private notifications = inject(NotificationsFacade);
-  private settingsModal = inject(SettingsModalService);
-  private timeSync = inject(TimeSyncService);
-  private voiceSession = inject(VoiceSessionFacade);
-  private externalLinks = inject(ExternalLinkService);
-  private electronBridge = inject(ElectronBridgeService);
   private deepLinkCleanup: (() => void) | null = null;
+  private themeStudioControlsDragOffset: { x: number; y: number } | null = null;
+  private themeStudioControlsBounds: { width: number; height: number } | null = null;
+
+  constructor() {
+    effect(() => {
+      if (!this.isThemeStudioFullscreen() || this.themeStudioFullscreenComponent()) {
+        return;
+      }
+
+      void import('./domains/theme/feature/settings/theme-settings.component')
+        .then((module) => {
+          this.themeStudioFullscreenComponent.set(module.ThemeSettingsComponent);
+        });
+    });
+
+    effect(() => {
+      if (this.isThemeStudioFullscreen()) {
+        return;
+      }
+
+      this.isDraggingThemeStudioControls.set(false);
+      this.themeStudioControlsDragOffset = null;
+      this.themeStudioControlsBounds = null;
+    });
+  }
 
   @HostListener('document:click', ['$event'])
   onGlobalLinkClick(evt: MouseEvent): void {
     this.externalLinks.handleClick(evt);
   }
 
+  @HostListener('document:keydown', ['$event'])
+  onGlobalKeyDown(evt: KeyboardEvent): void {
+    this.theme.handleGlobalShortcut(evt);
+  }
+
+  @HostListener('document:pointermove', ['$event'])
+  onDocumentPointerMove(event: PointerEvent): void {
+    if (!this.isDraggingThemeStudioControls() || !this.themeStudioControlsDragOffset || !this.themeStudioControlsBounds) {
+      return;
+    }
+
+    this.themeStudioControlsPosition.set(this.clampThemeStudioControlsPosition(
+      event.clientX - this.themeStudioControlsDragOffset.x,
+      event.clientY - this.themeStudioControlsDragOffset.y,
+      this.themeStudioControlsBounds.width,
+      this.themeStudioControlsBounds.height
+    ));
+  }
+
+  @HostListener('document:pointerup')
+  @HostListener('document:pointercancel')
+  onDocumentPointerEnd(): void {
+    if (!this.isDraggingThemeStudioControls()) {
+      return;
+    }
+
+    this.isDraggingThemeStudioControls.set(false);
+    this.themeStudioControlsDragOffset = null;
+    this.themeStudioControlsBounds = null;
+  }
+
   async ngOnInit(): Promise<void> {
+    this.theme.initialize();
+
     void this.desktopUpdates.initialize();
 
     await this.databaseService.initialize();
@@ -105,23 +244,22 @@ export class App implements OnInit, OnDestroy {
         }).catch(() => {});
       }
     } else {
-      const last = localStorage.getItem(STORAGE_KEY_LAST_VISITED_ROUTE);
-
-      if (last && typeof last === 'string') {
       const current = this.router.url;
+      const generalSettings = loadGeneralSettingsFromStorage();
+      const lastViewedChat = loadLastViewedChatFromStorage(currentUserId);
 
-        if (current === '/' || current === '/search') {
+      if (
-          this.router.navigate([last], { replaceUrl: true }).catch(() => {});
+        generalSettings.reopenLastViewedChat
-        }
+        && lastViewedChat
+        && (current === '/' || current === '/search')
+      ) {
+        this.router.navigate(['/room', lastViewedChat.roomId], { replaceUrl: true }).catch(() => {});
       }
     }
 
     this.router.events.subscribe((evt) => {
       if (evt instanceof NavigationEnd) {
         const url = evt.urlAfterRedirects || evt.url;
-
-        localStorage.setItem(STORAGE_KEY_LAST_VISITED_ROUTE, url);
-
         const roomMatch = url.match(ROOM_URL_PATTERN);
         const currentRoomId = roomMatch ? roomMatch[1] : null;
 
@@ -143,6 +281,56 @@ export class App implements OnInit, OnDestroy {
     this.settingsModal.open('updates');
   }
 
+  dismissDesktopUpdateNotice(): void {
+    if (!this.desktopUpdateState().restartRequired) {
+      return;
+    }
+
+    this.dismissedDesktopUpdateNoticeKey.set(this.desktopUpdateNoticeKey());
+  }
+
+  startThemeStudioControlsDrag(event: PointerEvent, controlsElement: HTMLElement): void {
+    if (event.button !== 0) {
+      return;
+    }
+
+    const rect = controlsElement.getBoundingClientRect();
+
+    this.themeStudioControlsBounds = {
+      width: rect.width,
+      height: rect.height
+    };
+
+    this.themeStudioControlsDragOffset = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+
+    this.themeStudioControlsPosition.set({
+      x: rect.left,
+      y: rect.top
+    });
+
+    this.isDraggingThemeStudioControls.set(true);
+    event.preventDefault();
+  }
+
+  reopenThemeStudio(): void {
+    this.settingsModal.restoreMinimizedThemeStudio();
+  }
+
+  minimizeThemeStudio(): void {
+    this.settingsModal.minimizeThemeStudio();
+  }
+
+  dismissMinimizedThemeStudio(): void {
+    this.settingsModal.dismissMinimizedThemeStudio();
+  }
+
+  closeThemeStudio(): void {
+    this.settingsModal.close();
+  }
+
   async refreshDesktopUpdateContext(): Promise<void> {
     await this.desktopUpdates.refreshServerContext();
   }
@@ -151,6 +339,18 @@ export class App implements OnInit, OnDestroy {
     await this.desktopUpdates.restartToApplyUpdate();
   }
 
+  private clampThemeStudioControlsPosition(left: number, top: number, width: number, height: number): { x: number; y: number } {
+    const minX = App.THEME_STUDIO_CONTROLS_MARGIN;
+    const minY = App.TITLE_BAR_HEIGHT + App.THEME_STUDIO_CONTROLS_MARGIN;
+    const maxX = Math.max(minX, window.innerWidth - width - App.THEME_STUDIO_CONTROLS_MARGIN);
+    const maxY = Math.max(minY, window.innerHeight - height - App.THEME_STUDIO_CONTROLS_MARGIN);
+
+    return {
+      x: Math.min(Math.max(minX, left), maxX),
+      y: Math.min(Math.max(minY, top), maxY)
+    };
+  }
+
   private async setupDesktopDeepLinks(): Promise<void> {
     const electronApi = this.electronBridge.getApi();
 

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

@@ -1,14 +1,18 @@
 export const STORAGE_KEY_CURRENT_USER_ID = 'metoyou_currentUserId';
-export const STORAGE_KEY_LAST_VISITED_ROUTE = 'metoyou_lastVisitedRoute';
+export const STORAGE_KEY_GENERAL_SETTINGS = 'metoyou_general_settings';
+export const STORAGE_KEY_LAST_VIEWED_CHAT = 'metoyou_lastViewedChat';
 export const STORAGE_KEY_CONNECTION_SETTINGS = 'metoyou_connection_settings';
 export const STORAGE_KEY_NOTIFICATION_SETTINGS = 'metoyou_notification_settings';
 export const STORAGE_KEY_VOICE_SETTINGS = 'metoyou_voice_settings';
 export const STORAGE_KEY_DEBUGGING_SETTINGS = 'metoyou_debugging_settings';
+export const STORAGE_KEY_THEME_ACTIVE = 'metoyou_theme_active';
+export const STORAGE_KEY_THEME_DRAFT = 'metoyou_theme_draft';
 export const STORAGE_KEY_USER_VOLUMES = 'metoyou_user_volumes';
 export const ROOM_URL_PATTERN = /\/room\/([^/]+)/;
 export const STORE_DEVTOOLS_MAX_AGE = 25;
-export const DEBUG_LOG_MAX_ENTRIES = 500;
+export const DEBUG_LOG_MAX_ENTRIES = 5000;
 export const DEFAULT_MAX_USERS = 50;
 export const DEFAULT_AUDIO_BITRATE_KBPS = 96;
 export const DEFAULT_VOLUME = 100;
 export const SEARCH_DEBOUNCE_MS = 300;
+export const RECONNECT_SOUND_GRACE_MS = 15_000;

toju-app/src/app/core/platform/electron/electron-api.models.ts

@@ -118,6 +118,12 @@ export interface WindowStateSnapshot {
   isMinimized: boolean;
 }
 
+export interface SavedThemeFileDescriptor {
+  fileName: string;
+  modifiedAt: number;
+  path: string;
+}
+
 export interface ElectronCommand {
   type: string;
   payload: unknown;
@@ -128,6 +134,22 @@ export interface ElectronQuery {
   payload: unknown;
 }
 
+export interface ContextMenuParams {
+  posX: number;
+  posY: number;
+  isEditable: boolean;
+  selectionText: string;
+  linkURL: string;
+  mediaType: string;
+  srcURL: string;
+  editFlags: {
+    canCut: boolean;
+    canCopy: boolean;
+    canPaste: boolean;
+    canSelectAll: boolean;
+  };
+}
+
 export interface ElectronApi {
   linuxDisplayServer: string;
   minimizeWindow: () => void;
@@ -143,6 +165,11 @@ export interface ElectronApi {
   onLinuxScreenShareMonitorAudioChunk: (listener: (payload: LinuxScreenShareMonitorAudioChunkPayload) => void) => () => void;
   onLinuxScreenShareMonitorAudioEnded: (listener: (payload: LinuxScreenShareMonitorAudioEndedPayload) => void) => () => void;
   getAppDataPath: () => Promise<string>;
+  getSavedThemesPath: () => Promise<string>;
+  listSavedThemes: () => Promise<SavedThemeFileDescriptor[]>;
+  readSavedTheme: (fileName: string) => Promise<string>;
+  writeSavedTheme: (fileName: string, text: string) => Promise<boolean>;
+  deleteSavedTheme: (fileName: string) => Promise<boolean>;
   consumePendingDeepLink: () => Promise<string | null>;
   getDesktopSettings: () => Promise<DesktopSettingsSnapshot>;
   showDesktopNotification: (payload: DesktopNotificationPayload) => Promise<boolean>;
@@ -165,6 +192,9 @@ export interface ElectronApi {
   fileExists: (filePath: string) => Promise<boolean>;
   deleteFile: (filePath: string) => Promise<boolean>;
   ensureDir: (dirPath: string) => Promise<boolean>;
+  onContextMenu: (listener: (params: ContextMenuParams) => void) => () => void;
+  contextMenuCommand: (command: string) => Promise<void>;
+  copyImageToClipboard: (srcURL: string) => Promise<boolean>;
   command: <T = unknown>(command: ElectronCommand) => Promise<T>;
   query: <T = unknown>(query: ElectronQuery) => Promise<T>;
 }

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

@@ -302,7 +302,9 @@ class DebugNetworkSnapshotBuilder {
       case 'offer':
       case 'answer':
       case 'ice_candidate': {
-        const peerId = this.getPayloadString(payload, 'targetPeerId') ?? this.getPayloadString(payload, 'fromUserId');
+        const peerId = direction === 'outbound'
+          ? (this.getPayloadString(payload, 'targetPeerId') ?? this.getPayloadString(payload, 'fromUserId'))
+          : (this.getPayloadString(payload, 'fromUserId') ?? this.getPayloadString(payload, 'targetPeerId'));
         const displayName = this.getPayloadString(payload, 'displayName');
 
         if (!peerId)
@@ -1295,7 +1297,7 @@ class DebugNetworkSnapshotBuilder {
   private getPayloadString(payload: Record<string, unknown> | null, key: string): string | null {
     const value = this.getPayloadField(payload, key);
 
-    return typeof value === 'string' ? value : null;
+    return this.normalizeStringValue(value);
   }
 
   private getPayloadNumber(payload: Record<string, unknown> | null, key: string): number | null {
@@ -1323,7 +1325,7 @@ class DebugNetworkSnapshotBuilder {
   private getStringProperty(record: Record<string, unknown> | null, key: string): string | null {
     const value = record?.[key];
 
-    return typeof value === 'string' ? value : null;
+    return this.normalizeStringValue(value);
   }
 
   private getBooleanProperty(record: Record<string, unknown> | null, key: string): boolean | null {
@@ -1344,4 +1346,16 @@ class DebugNetworkSnapshotBuilder {
 
     return value as Record<string, unknown>;
   }
+
+  private normalizeStringValue(value: unknown): string | null {
+    if (typeof value !== 'string')
+      return null;
+
+    const normalized = value.trim();
+
+    if (!normalized || normalized === 'undefined' || normalized === 'null')
+      return null;
+
+    return normalized;
+  }
 }

toju-app/src/app/core/services/settings-modal.service.ts

@@ -2,6 +2,7 @@ import { Injectable, signal } from '@angular/core';
 
 export type SettingsPage =
   | 'general'
+  | 'theme'
   | 'network'
   | 'notifications'
   | 'voice'
@@ -17,18 +18,59 @@ export class SettingsModalService {
   readonly isOpen = signal(false);
   readonly activePage = signal<SettingsPage>('general');
   readonly targetServerId = signal<string | null>(null);
+  readonly themeStudioFullscreen = signal(false);
+  readonly themeStudioMinimized = signal(false);
 
   open(page: SettingsPage = 'general', serverId?: string): void {
+    this.themeStudioFullscreen.set(false);
+    this.themeStudioMinimized.set(false);
     this.activePage.set(page);
     this.targetServerId.set(serverId ?? null);
     this.isOpen.set(true);
   }
 
   close(): void {
+    this.themeStudioFullscreen.set(false);
+    this.themeStudioMinimized.set(false);
     this.isOpen.set(false);
   }
 
   navigate(page: SettingsPage): void {
     this.activePage.set(page);
+
+    if (page !== 'theme') {
+      this.themeStudioFullscreen.set(false);
+      this.themeStudioMinimized.set(false);
+    }
+  }
+
+  setThemeStudioFullscreen(isFullscreen: boolean): void {
+    this.themeStudioFullscreen.set(isFullscreen);
+  }
+
+  toggleThemeStudioFullscreen(): void {
+    this.themeStudioFullscreen.update((isFullscreen) => !isFullscreen);
+  }
+
+  openThemeStudio(): void {
+    this.activePage.set('theme');
+    this.themeStudioMinimized.set(false);
+    this.isOpen.set(true);
+    this.themeStudioFullscreen.set(true);
+  }
+
+  minimizeThemeStudio(): void {
+    this.activePage.set('theme');
+    this.themeStudioFullscreen.set(false);
+    this.themeStudioMinimized.set(true);
+    this.isOpen.set(false);
+  }
+
+  restoreMinimizedThemeStudio(): void {
+    this.openThemeStudio();
+  }
+
+  dismissMinimizedThemeStudio(): void {
+    this.themeStudioMinimized.set(false);
   }
 }

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

@@ -7,13 +7,15 @@ infrastructure adapters and UI.
 ## Quick reference
 
 | Domain               | Purpose                                                                                                            | Public entry point                                          |
-|---|---|---|
+| -------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
 | **attachment**       | File upload/download, chunk transfer, persistence                                                                  | `AttachmentFacade`                                          |
-| **auth** | Login / register HTTP orchestration, user-bar UI | `AuthService` |
+| **access-control**   | Role, permission, ban matching, moderation, and room access rules                                              | `normalizeRoomAccessControl()`, `resolveRoomPermission()`, `hasRoomBanForUser()` |
+| **authentication**   | Login / register HTTP orchestration, user-bar UI                                                                   | `AuthenticationService`                                     |
 | **chat**             | Messaging rules, sync logic, GIF/Klipy integration, chat UI                                                        | `KlipyService`, `canEditMessage()`, `ChatMessagesComponent` |
 | **notifications**    | Notification preferences, unread tracking, desktop alert orchestration                                             | `NotificationsFacade`                                       |
 | **screen-share**     | Source picker, quality presets                                                                                     | `ScreenShareFacade`                                         |
 | **server-directory** | Multi-server endpoint management, health checks, invites, server search UI                                         | `ServerDirectoryFacade`                                     |
+| **theme**            | JSON-driven theming, element registry, layout syncing, picker tooling, and Electron saved-theme library management | `ThemeService`                                              |
 | **voice-connection** | Voice activity detection, bitrate profiles, in-channel camera transport                                            | `VoiceConnectionFacade`                                     |
 | **voice-session**    | Join/leave orchestration, voice settings persistence                                                               | `VoiceSessionFacade`                                        |
 
@@ -22,7 +24,8 @@ infrastructure adapters and UI.
 The larger domains also keep longer design notes in their own folders:
 
 - [attachment/README.md](attachment/README.md)
-- [auth/README.md](auth/README.md)
+- [access-control/README.md](access-control/README.md)
+- [authentication/README.md](authentication/README.md)
 - [chat/README.md](chat/README.md)
 - [notifications/README.md](notifications/README.md)
 - [screen-share/README.md](screen-share/README.md)
@@ -66,7 +69,7 @@ domains/<name>/
 ## Where do I put new code?
 
 | I want to…                              | Put it in…                                                        |
-|---|---|
+| --------------------------------------- | ----------------------------------------------------------------- |
 | Add a new business concept              | New folder under `domains/` following the convention above        |
 | Add a type used by multiple domains     | `shared-kernel/` with a descriptive file name                     |
 | Add a UI component for a domain feature | `domains/<name>/feature/` or `domains/<name>/ui/`                 |

toju-app/src/app/domains/access-control/README.md

@@ -0,0 +1,44 @@
+# Access Control Domain
+
+Role and permission rules for servers, including default system roles, role assignment normalization, permission resolution, legacy compatibility mapping, and room-level access-control hydration.
+
+## Module map
+
+```
+access-control/
+├── domain/
+│   ├── models/
+│   │   └── access-control.model.ts         MemberIdentity and RoomPermissionDefinition domain types
+│   ├── constants/
+│   │   └── access-control.constants.ts     SYSTEM_ROLE_IDS and permission metadata
+│   ├── util/
+│   │   └── access-control.util.ts          Internal helpers (normalization, identity matching, sorting)
+│   └── rules/
+│       ├── role.rules.ts                   Role defaults, normalization, ordering, create/update helpers
+│       ├── role-assignment.rules.ts        Assignment normalization and member-role lookups
+│       ├── permission.rules.ts             Permission resolution and moderation hierarchy checks
+│       ├── room.rules.ts                   Legacy compatibility, room hydration, room-level normalization
+│       └── ban.rules.ts                    Ban matching and user-ban resolution
+│
+└── index.ts                                Domain barrel used by other layers
+```
+
+## Domain rules
+
+| Function                                                        | Purpose                                                                                                       |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `normalizeRoomRoles(room.roles, room.permissions)`              | Repairs missing/default roles and keeps role ordering stable                                                  |
+| `normalizeRoomRoleAssignments(...)`                             | Deduplicates and backfills member role assignments from legacy member role fields                             |
+| `normalizeChannelPermissionOverrides(...)`                      | Deduplicates valid channel overrides and drops invalid references                                             |
+| `resolveRoomPermission(room, identity, permission, channelId?)` | Resolves effective permission state including overrides                                                       |
+| `canManageMember(...)`                                          | Applies both permission checks and role hierarchy checks                                                      |
+| `canManageRole(...)`                                            | Prevents editing roles at or above the actor's highest role                                                   |
+| `normalizeRoomAccessControl(room)`                              | Produces a fully hydrated room with normalized roles, assignments, overrides, and legacy compatibility fields |
+| `hasRoomBanForUser(bans, user, persistedUserId?)`               | Returns true when any active ban entry targets the provided user                                              |
+| `isRoomBanMatch(ban, user, persistedUserId?)`                   | Returns true when a single ban entry targets the provided user                                                |
+
+## Layering
+
+- Domain rules stay pure and only depend on `shared-kernel` contracts plus other files in this domain.
+- Renderer shells and NgRx effects should keep importing from `src/app/domains/access-control/` instead of internal files.
+- Legacy `room.permissions` booleans remain compatibility output only; normalized data lives on `roles`, `roleAssignments`, `channelPermissions`, and `slowModeInterval`.

toju-app/src/app/domains/access-control/domain/constants/access-control.constants.ts

@@ -0,0 +1,65 @@
+import type { RoomPermissionDefinition } from '../models/access-control.model';
+
+export const SYSTEM_ROLE_IDS = {
+  everyone: 'system-everyone',
+  moderator: 'system-moderator',
+  admin: 'system-admin'
+} as const;
+
+export const ROOM_PERMISSION_DEFINITIONS: RoomPermissionDefinition[] = [
+  {
+    key: 'manageServer',
+    label: 'Manage Server',
+    description: 'Edit server settings such as name, privacy, and limits.'
+  },
+  {
+    key: 'manageRoles',
+    label: 'Manage Roles',
+    description: 'Create, edit, reorder, and assign roles.'
+  },
+  {
+    key: 'manageChannels',
+    label: 'Manage Channels',
+    description: 'Create, rename, delete, and reorder channels.'
+  },
+  {
+    key: 'manageIcon',
+    label: 'Manage Icon',
+    description: 'Change the server icon for all members.'
+  },
+  {
+    key: 'kickMembers',
+    label: 'Kick Members',
+    description: 'Remove members from the server without banning them.'
+  },
+  {
+    key: 'banMembers',
+    label: 'Ban Members',
+    description: 'Ban members from the server.'
+  },
+  {
+    key: 'manageBans',
+    label: 'Manage Bans',
+    description: 'Review and revoke existing bans.'
+  },
+  {
+    key: 'deleteMessages',
+    label: 'Delete Messages',
+    description: 'Delete messages sent by other members.'
+  },
+  {
+    key: 'joinVoice',
+    label: 'Join Voice',
+    description: 'Join voice channels.'
+  },
+  {
+    key: 'shareScreen',
+    label: 'Share Screen',
+    description: 'Start screen sharing in voice channels.'
+  },
+  {
+    key: 'uploadFiles',
+    label: 'Upload Files',
+    description: 'Upload attachments in chat.'
+  }
+];