diff --git a/Client/tauri-client/tests/unit/accessibility-tab.test.ts b/Client/tauri-client/tests/unit/accessibility-tab.test.ts
new file mode 100644
index 00000000..49802ec2
--- /dev/null
+++ b/Client/tauri-client/tests/unit/accessibility-tab.test.ts
@@ -0,0 +1,428 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { buildAccessibilityTab } from "@components/settings/AccessibilityTab";
+
+// ---------------------------------------------------------------------------
+// Mock os-motion module
+// ---------------------------------------------------------------------------
+
+const { mockSyncOsMotionListener } = vi.hoisted(() => ({
+  mockSyncOsMotionListener: vi.fn(),
+}));
+
+vi.mock("@lib/os-motion", () => ({
+  syncOsMotionListener: mockSyncOsMotionListener,
+}));
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Click a toggle by its 0-based index in the rendered section. */
+function clickToggle(container: HTMLElement, index: number): HTMLElement {
+  const toggles = container.querySelectorAll(".toggle");
+  const toggle = toggles[index] as HTMLElement;
+  toggle.click();
+  return toggle;
+}
+
+/** Return the toggle element at a given index. */
+function getToggle(container: HTMLElement, index: number): HTMLElement {
+  return container.querySelectorAll(".toggle")[index] as HTMLElement;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("AccessibilityTab", () => {
+  let container: HTMLDivElement;
+  const ac = new AbortController();
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    localStorage.clear();
+    document.documentElement.className = "";
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    container.remove();
+    document.documentElement.className = "";
+  });
+
+  // -----------------------------------------------------------------------
+  // Rendering
+  // -----------------------------------------------------------------------
+
+  describe("rendering", () => {
+    it("renders a settings-pane with active class", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(section.classList.contains("settings-pane")).toBe(true);
+      expect(section.classList.contains("active")).toBe(true);
+    });
+
+    it("renders exactly 5 toggles", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggles = container.querySelectorAll(".toggle");
+      expect(toggles.length).toBe(5);
+    });
+
+    it("renders all 5 setting labels", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const labels = container.querySelectorAll(".setting-label");
+      const labelTexts = Array.from(labels).map((l) => l.textContent);
+
+      expect(labelTexts).toEqual([
+        "Reduce Motion",
+        "High Contrast",
+        "Role Colors",
+        "Sync with OS",
+        "Large Font",
+      ]);
+    });
+
+    it("renders descriptions for all toggles", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const descs = container.querySelectorAll(".setting-desc");
+      expect(descs.length).toBe(5);
+
+      expect(descs[0]?.textContent).toBe("Disable animations and transitions");
+      expect(descs[1]?.textContent).toBe("Increase contrast for better readability");
+      expect(descs[2]?.textContent).toBe("Show colored usernames based on role in chat");
+      expect(descs[3]?.textContent).toBe(
+        "Automatically enable reduced motion based on your OS accessibility settings",
+      );
+      expect(descs[4]?.textContent).toBe(
+        "Use larger text throughout the app for better readability",
+      );
+    });
+
+    it("renders each row with setting-row class", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const rows = container.querySelectorAll(".setting-row");
+      expect(rows.length).toBe(5);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Default states
+  // -----------------------------------------------------------------------
+
+  describe("default states", () => {
+    it("reducedMotion defaults to off", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 0).classList.contains("on")).toBe(false);
+    });
+
+    it("highContrast defaults to off", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 1).classList.contains("on")).toBe(false);
+    });
+
+    it("roleColors defaults to on", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 2).classList.contains("on")).toBe(true);
+    });
+
+    it("syncOsMotion defaults to off", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 3).classList.contains("on")).toBe(false);
+    });
+
+    it("largeFont defaults to off", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 4).classList.contains("on")).toBe(false);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Restoring from localStorage
+  // -----------------------------------------------------------------------
+
+  describe("restore from localStorage", () => {
+    it("restores reducedMotion on from localStorage", () => {
+      localStorage.setItem("owncord:settings:reducedMotion", "true");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 0).classList.contains("on")).toBe(true);
+    });
+
+    it("restores highContrast on from localStorage", () => {
+      localStorage.setItem("owncord:settings:highContrast", "true");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 1).classList.contains("on")).toBe(true);
+    });
+
+    it("restores roleColors off from localStorage", () => {
+      localStorage.setItem("owncord:settings:roleColors", "false");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 2).classList.contains("on")).toBe(false);
+    });
+
+    it("restores syncOsMotion on from localStorage", () => {
+      localStorage.setItem("owncord:settings:syncOsMotion", "true");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 3).classList.contains("on")).toBe(true);
+    });
+
+    it("restores largeFont on from localStorage", () => {
+      localStorage.setItem("owncord:settings:largeFont", "true");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      expect(getToggle(container, 4).classList.contains("on")).toBe(true);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Toggle click behavior — persistence
+  // -----------------------------------------------------------------------
+
+  describe("toggle persistence", () => {
+    it("persists reducedMotion to localStorage on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 0);
+      expect(localStorage.getItem("owncord:settings:reducedMotion")).toBe("true");
+
+      clickToggle(container, 0);
+      expect(localStorage.getItem("owncord:settings:reducedMotion")).toBe("false");
+    });
+
+    it("persists highContrast to localStorage on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 1);
+      expect(localStorage.getItem("owncord:settings:highContrast")).toBe("true");
+    });
+
+    it("persists roleColors to localStorage on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      // roleColors defaults to on, so first click turns it off
+      clickToggle(container, 2);
+      expect(localStorage.getItem("owncord:settings:roleColors")).toBe("false");
+    });
+
+    it("persists syncOsMotion to localStorage on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 3);
+      expect(localStorage.getItem("owncord:settings:syncOsMotion")).toBe("true");
+    });
+
+    it("persists largeFont to localStorage on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 4);
+      expect(localStorage.getItem("owncord:settings:largeFont")).toBe("true");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Side effects
+  // -----------------------------------------------------------------------
+
+  describe("side effects", () => {
+    it("toggles reduced-motion class on documentElement for reducedMotion", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 0);
+      expect(document.documentElement.classList.contains("reduced-motion")).toBe(true);
+
+      clickToggle(container, 0);
+      expect(document.documentElement.classList.contains("reduced-motion")).toBe(false);
+    });
+
+    it("toggles high-contrast class on documentElement for highContrast", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 1);
+      expect(document.documentElement.classList.contains("high-contrast")).toBe(true);
+
+      clickToggle(container, 1);
+      expect(document.documentElement.classList.contains("high-contrast")).toBe(false);
+    });
+
+    it("does NOT have a side effect for roleColors (no class toggle)", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      // roleColors starts on, clicking turns it off
+      clickToggle(container, 2);
+
+      // No document class should be toggled
+      expect(document.documentElement.classList.contains("role-colors")).toBe(false);
+    });
+
+    it("calls syncOsMotionListener(true) when syncOsMotion is toggled on", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 3);
+      expect(mockSyncOsMotionListener).toHaveBeenCalledWith(true);
+    });
+
+    it("calls syncOsMotionListener(false) when syncOsMotion is toggled off", () => {
+      localStorage.setItem("owncord:settings:syncOsMotion", "true");
+
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 3);
+      expect(mockSyncOsMotionListener).toHaveBeenCalledWith(false);
+    });
+
+    it("toggles large-font class on documentElement for largeFont", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      clickToggle(container, 4);
+      expect(document.documentElement.classList.contains("large-font")).toBe(true);
+
+      clickToggle(container, 4);
+      expect(document.documentElement.classList.contains("large-font")).toBe(false);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // ARIA attributes
+  // -----------------------------------------------------------------------
+
+  describe("ARIA accessibility", () => {
+    it("toggles have role=switch", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggles = container.querySelectorAll(".toggle");
+      for (const toggle of toggles) {
+        expect(toggle.getAttribute("role")).toBe("switch");
+      }
+    });
+
+    it("toggles have aria-checked matching their state", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      // reducedMotion off
+      expect(getToggle(container, 0).getAttribute("aria-checked")).toBe("false");
+      // roleColors on
+      expect(getToggle(container, 2).getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("aria-checked updates when toggle is clicked", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggle = clickToggle(container, 0);
+      expect(toggle.getAttribute("aria-checked")).toBe("true");
+
+      clickToggle(container, 0);
+      expect(getToggle(container, 0).getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("toggles have tabindex=0 for keyboard focus", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggles = container.querySelectorAll(".toggle");
+      for (const toggle of toggles) {
+        expect(toggle.getAttribute("tabindex")).toBe("0");
+      }
+    });
+
+    it("toggles respond to Enter key", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggle = getToggle(container, 0);
+      toggle.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+
+      expect(toggle.classList.contains("on")).toBe(true);
+      expect(toggle.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("toggles respond to Space key", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggle = getToggle(container, 1);
+      toggle.dispatchEvent(new KeyboardEvent("keydown", { key: " ", bubbles: true }));
+
+      expect(toggle.classList.contains("on")).toBe(true);
+      expect(toggle.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("toggles do NOT respond to other keys", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const toggle = getToggle(container, 0);
+      toggle.dispatchEvent(new KeyboardEvent("keydown", { key: "a", bubbles: true }));
+
+      expect(toggle.classList.contains("on")).toBe(false);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // owncord:pref-change event
+  // -----------------------------------------------------------------------
+
+  describe("pref-change custom event", () => {
+    it("dispatches owncord:pref-change event on toggle", () => {
+      const section = buildAccessibilityTab(ac.signal);
+      container.appendChild(section);
+
+      const listener = vi.fn();
+      window.addEventListener("owncord:pref-change", listener);
+
+      clickToggle(container, 0);
+
+      expect(listener).toHaveBeenCalledTimes(1);
+      const detail = (listener.mock.calls[0]![0] as CustomEvent).detail;
+      expect(detail).toEqual({ key: "reducedMotion" });
+
+      window.removeEventListener("owncord:pref-change", listener);
+    });
+  });
+});
diff --git a/Client/tauri-client/tests/unit/api.test.ts b/Client/tauri-client/tests/unit/api.test.ts
index 09285004..92d16488 100644
--- a/Client/tauri-client/tests/unit/api.test.ts
+++ b/Client/tauri-client/tests/unit/api.test.ts
@@ -36,6 +36,17 @@ function errorResponse(
   } as unknown as Response;
 }
 
+/** Error response whose json() throws (simulates non-JSON body). */
+function brokenJsonErrorResponse(status: number, statusText: string): Response {
+  return {
+    ok: false,
+    status,
+    statusText,
+    json: () => Promise.reject(new SyntaxError("Unexpected token")),
+    headers: new Headers(),
+  } as unknown as Response;
+}
+
 describe("API Client", () => {
   let api: ReturnType<typeof createApiClient>;
   let onUnauthorized: ReturnType<typeof vi.fn>;
@@ -53,14 +64,23 @@ describe("API Client", () => {
     vi.restoreAllMocks();
   });
 
+  // ── helpers ──────────────────────────────────────────────
+
+  /** Extract the call args for the Nth fetch invocation. */
+  function fetchCallUrl(n = 0): string {
+    return mockFetch.mock.calls[n]?.[0] as string;
+  }
+  function fetchCallOpts(n = 0): Record<string, unknown> {
+    return mockFetch.mock.calls[n]?.[1] as Record<string, unknown>;
+  }
+
   describe("API base path uses /api/v1/", () => {
     it("login calls /api/v1/auth/login", async () => {
       mockFetch.mockResolvedValue(
         jsonResponse({ token: "t", requires_2fa: false }),
       );
       await api.login("user", "pass");
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toBe("https://localhost:8443/api/v1/auth/login");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/auth/login");
     });
 
     it("getMessages calls /api/v1/channels/{id}/messages", async () => {
@@ -68,15 +88,13 @@ describe("API Client", () => {
         jsonResponse({ messages: [], has_more: false }),
       );
       await api.getMessages(5);
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toBe("https://localhost:8443/api/v1/channels/5/messages");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/channels/5/messages");
     });
 
     it("search calls /api/v1/search", async () => {
       mockFetch.mockResolvedValue(jsonResponse({ results: [] }));
       await api.search("hello");
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toContain("https://localhost:8443/api/v1/search");
+      expect(fetchCallUrl()).toContain("https://localhost:8443/api/v1/search");
     });
 
     it("getHealth calls /api/v1/health", async () => {
@@ -84,8 +102,7 @@ describe("API Client", () => {
         jsonResponse({ status: "ok", version: "1.0.0", uptime: 100 }),
       );
       await api.getHealth();
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toBe("https://localhost:8443/api/v1/health");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/health");
     });
   });
 
@@ -95,16 +112,32 @@ describe("API Client", () => {
         jsonResponse({ user: { id: 1, username: "u" }, token: "t" }, 201),
       );
       await api.register("user", "pass", "invite123");
-      const body = JSON.parse(mockFetch.mock.calls[0]?.[1]?.body as string);
+      const body = JSON.parse(fetchCallOpts().body as string);
       expect(body.invite_code).toBe("invite123");
     });
 
     it("sends Authorization header", async () => {
       mockFetch.mockResolvedValue(jsonResponse({}));
       await api.getMe();
-      const headers = mockFetch.mock.calls[0]?.[1]?.headers as Record<string, string>;
+      const headers = fetchCallOpts().headers as Record<string, string>;
       expect(headers["Authorization"]).toBe("Bearer test-token");
     });
+
+    it("logout sends POST /auth/logout", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.logout();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/auth/logout");
+      expect(fetchCallOpts().method).toBe("POST");
+    });
+
+    it("deleteAccount sends DELETE /auth/account with password", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.deleteAccount("mypass");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/auth/account");
+      expect(fetchCallOpts().method).toBe("DELETE");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ password: "mypass" });
+    });
   });
 
   describe("error handling", () => {
@@ -134,6 +167,69 @@ describe("API Client", () => {
       await expect(api.getMe()).rejects.toThrow();
       expect(onUnauthorized).not.toHaveBeenCalled();
     });
+
+    it("throws original Error when fetch rejects with an Error instance", async () => {
+      const networkErr = new TypeError("Failed to fetch");
+      mockFetch.mockRejectedValue(networkErr);
+      await expect(api.getMe()).rejects.toBe(networkErr);
+    });
+
+    it("wraps non-Error fetch rejection (string) in a new Error", async () => {
+      mockFetch.mockRejectedValue("connection refused");
+      await expect(api.getMe()).rejects.toThrow("connection refused");
+    });
+
+    it("wraps non-Error non-string fetch rejection in a new Error via String()", async () => {
+      mockFetch.mockRejectedValue(42);
+      await expect(api.getMe()).rejects.toThrow("42");
+    });
+
+    it("parseError falls back to statusText when JSON body is not parseable", async () => {
+      mockFetch.mockResolvedValue(
+        brokenJsonErrorResponse(502, "Bad Gateway"),
+      );
+      await expect(api.getMe()).rejects.toMatchObject({
+        status: 502,
+        code: "UNKNOWN",
+        message: "Bad Gateway",
+      });
+    });
+
+    it("parseError uses UNKNOWN when error field missing from JSON", async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 422,
+        statusText: "Unprocessable",
+        json: () => Promise.resolve({ message: "bad input" }),
+        headers: new Headers(),
+      } as unknown as Response);
+      await expect(api.getMe()).rejects.toMatchObject({
+        status: 422,
+        code: "UNKNOWN",
+        message: "bad input",
+      });
+    });
+
+    it("parseError uses statusText when message field missing from JSON", async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 422,
+        statusText: "Unprocessable",
+        json: () => Promise.resolve({ error: "VALIDATION" }),
+        headers: new Headers(),
+      } as unknown as Response);
+      await expect(api.getMe()).rejects.toMatchObject({
+        status: 422,
+        code: "VALIDATION",
+        message: "Unprocessable",
+      });
+    });
+
+    it("handles 204 No Content response", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      const result = await api.logout();
+      expect(result).toBeUndefined();
+    });
   });
 
   describe("cancellation", () => {
@@ -141,7 +237,7 @@ describe("API Client", () => {
       mockFetch.mockResolvedValue(jsonResponse({}));
       const controller = new AbortController();
       await api.getMe(controller.signal);
-      expect(mockFetch.mock.calls[0]?.[1]?.signal).toBe(controller.signal);
+      expect(fetchCallOpts().signal).toBe(controller.signal);
     });
   });
 
@@ -151,9 +247,16 @@ describe("API Client", () => {
         jsonResponse({ messages: [], has_more: false }),
       );
       await api.getMessages(5, { before: 100, limit: 25 });
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toContain("before=100");
-      expect(url).toContain("limit=25");
+      expect(fetchCallUrl()).toContain("before=100");
+      expect(fetchCallUrl()).toContain("limit=25");
+    });
+
+    it("getMessages works without options (no query string)", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ messages: [], has_more: false }),
+      );
+      await api.getMessages(3);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/channels/3/messages");
     });
   });
 
@@ -162,26 +265,77 @@ describe("API Client", () => {
       mockFetch.mockResolvedValue(jsonResponse({}));
       api.setConfig({ token: "new-token" });
       await api.getMe();
-      const headers = mockFetch.mock.calls[0]?.[1]?.headers as Record<string, string>;
+      const headers = fetchCallOpts().headers as Record<string, string>;
       expect(headers["Authorization"]).toBe("Bearer new-token");
     });
+
+    it("getConfig returns config with redacted token", () => {
+      const cfg = api.getConfig();
+      expect(cfg.host).toBe("localhost:8443");
+      expect(cfg.token).toBe("[redacted]");
+    });
+
+    it("getConfig returns undefined token when no token set", () => {
+      const noTokenApi = createApiClient({ host: "h" });
+      const cfg = noTokenApi.getConfig();
+      expect(cfg.token).toBeUndefined();
+    });
+
+    it("omits Authorization header when no token is set", async () => {
+      const noTokenApi = createApiClient({ host: "localhost:8443" });
+      mockFetch.mockResolvedValue(jsonResponse({}));
+      await noTokenApi.login("u", "p");
+      const headers = fetchCallOpts().headers as Record<string, string>;
+      expect(headers["Authorization"]).toBeUndefined();
+      expect(headers["Content-Type"]).toBe("application/json");
+    });
   });
 
   describe("user endpoints", () => {
+    it("getMe calls GET /users/me", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ id: 1, username: "me" }));
+      const result = await api.getMe();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual({ id: 1, username: "me" });
+    });
+
+    it("updateProfile sends PATCH /users/me with data", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ id: 1, username: "newname" }));
+      await api.updateProfile({ username: "newname" });
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me");
+      expect(fetchCallOpts().method).toBe("PATCH");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ username: "newname" });
+    });
+
+    it("updateProfile sends avatar field", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ id: 1, avatar: "data:image/png;base64,abc" }));
+      await api.updateProfile({ avatar: "data:image/png;base64,abc" });
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body.avatar).toBe("data:image/png;base64,abc");
+    });
+
+    it("changePassword sends PUT /users/me/password", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.changePassword("oldpw", "newpw");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/password");
+      expect(fetchCallOpts().method).toBe("PUT");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ current_password: "oldpw", new_password: "newpw" });
+    });
+
     it("getSessions calls correct endpoint", async () => {
       mockFetch.mockResolvedValue(jsonResponse([]));
       await api.getSessions();
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      expect(url).toBe("https://localhost:8443/api/v1/users/me/sessions");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/sessions");
     });
 
     it("revokeSession calls DELETE with session ID", async () => {
       mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
       await api.revokeSession(42);
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      const method = mockFetch.mock.calls[0]?.[1]?.method as string;
-      expect(url).toBe("https://localhost:8443/api/v1/users/me/sessions/42");
-      expect(method).toBe("DELETE");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/sessions/42");
+      expect(fetchCallOpts().method).toBe("DELETE");
     });
   });
 
@@ -191,13 +345,9 @@ describe("API Client", () => {
         jsonResponse({ qr_uri: "otpauth://totp/test", backup_codes: ["abc"] }),
       );
       const result = await api.enableTotp("mypassword");
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      const opts = mockFetch.mock.calls[0]?.[1];
-      const method = opts?.method as string;
-      const body = JSON.parse(opts?.body as string);
-
-      expect(url).toBe("https://localhost:8443/api/v1/users/me/totp/enable");
-      expect(method).toBe("POST");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/totp/enable");
+      expect(fetchCallOpts().method).toBe("POST");
+      const body = JSON.parse(fetchCallOpts().body as string);
       expect(body).toEqual({ password: "mypassword" });
       expect(result).toEqual({
         qr_uri: "otpauth://totp/test",
@@ -208,26 +358,18 @@ describe("API Client", () => {
     it("confirmTotp sends POST /users/me/totp/confirm with password and code", async () => {
       mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
       await api.confirmTotp("mypassword", "123456");
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      const opts = mockFetch.mock.calls[0]?.[1];
-      const method = opts?.method as string;
-      const body = JSON.parse(opts?.body as string);
-
-      expect(url).toBe("https://localhost:8443/api/v1/users/me/totp/confirm");
-      expect(method).toBe("POST");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/totp/confirm");
+      expect(fetchCallOpts().method).toBe("POST");
+      const body = JSON.parse(fetchCallOpts().body as string);
       expect(body).toEqual({ password: "mypassword", code: "123456" });
     });
 
     it("disableTotp sends DELETE /users/me/totp with password", async () => {
       mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
       await api.disableTotp("mypassword");
-      const url = mockFetch.mock.calls[0]?.[0] as string;
-      const opts = mockFetch.mock.calls[0]?.[1];
-      const method = opts?.method as string;
-      const body = JSON.parse(opts?.body as string);
-
-      expect(url).toBe("https://localhost:8443/api/v1/users/me/totp");
-      expect(method).toBe("DELETE");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/users/me/totp");
+      expect(fetchCallOpts().method).toBe("DELETE");
+      const body = JSON.parse(fetchCallOpts().body as string);
       expect(body).toEqual({ password: "mypassword" });
     });
 
@@ -260,4 +402,513 @@ describe("API Client", () => {
       });
     });
   });
+
+  describe("verifyTotp", () => {
+    it("sends POST /auth/verify-totp with partial token in header", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ token: "full-token", user: { id: 1 } }),
+      );
+      const result = await api.verifyTotp("123456", "partial-tok");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/auth/verify-totp");
+      expect(fetchCallOpts().method).toBe("POST");
+      const headers = fetchCallOpts().headers as Record<string, string>;
+      expect(headers["Authorization"]).toBe("Bearer partial-tok");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ code: "123456" });
+      expect(result.token).toBe("full-token");
+    });
+
+    it("throws ApiClientError on 401 and calls onUnauthorized", async () => {
+      mockFetch.mockResolvedValue(
+        errorResponse(401, "INVALID_TOTP", "Bad code"),
+      );
+      await expect(api.verifyTotp("000000", "pt")).rejects.toMatchObject({
+        status: 401,
+        code: "INVALID_TOTP",
+      });
+      expect(onUnauthorized).toHaveBeenCalledTimes(1);
+    });
+
+    it("throws ApiClientError on non-ok non-401", async () => {
+      mockFetch.mockResolvedValue(
+        errorResponse(429, "RATE_LIMITED", "Too many attempts"),
+      );
+      await expect(api.verifyTotp("000000", "pt")).rejects.toMatchObject({
+        status: 429,
+        code: "RATE_LIMITED",
+      });
+    });
+
+    it("re-throws Error when fetch rejects with Error", async () => {
+      const networkErr = new TypeError("Network failure");
+      mockFetch.mockRejectedValue(networkErr);
+      await expect(api.verifyTotp("123456", "pt")).rejects.toBe(networkErr);
+    });
+
+    it("wraps non-Error string rejection in new Error", async () => {
+      mockFetch.mockRejectedValue("dns lookup failed");
+      await expect(api.verifyTotp("123456", "pt")).rejects.toThrow("dns lookup failed");
+    });
+
+    it("wraps non-Error non-string rejection via String()", async () => {
+      mockFetch.mockRejectedValue(99);
+      await expect(api.verifyTotp("123456", "pt")).rejects.toThrow("99");
+    });
+
+    it("passes AbortSignal to fetch", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ token: "t", user: { id: 1 } }),
+      );
+      const controller = new AbortController();
+      await api.verifyTotp("123456", "pt", controller.signal);
+      expect(fetchCallOpts().signal).toBe(controller.signal);
+    });
+
+    it("sets danger.acceptInvalidCerts for self-signed certs", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ token: "t", user: { id: 1 } }),
+      );
+      await api.verifyTotp("123456", "pt");
+      const opts = fetchCallOpts();
+      expect((opts as Record<string, unknown>).danger).toEqual({
+        acceptInvalidCerts: true,
+        acceptInvalidHostnames: false,
+      });
+    });
+  });
+
+  describe("channel endpoints", () => {
+    it("getPins calls GET /channels/{id}/pins", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ messages: [] }));
+      await api.getPins(7);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/channels/7/pins");
+      expect(fetchCallOpts().method).toBe("GET");
+    });
+
+    it("pinMessage calls POST /channels/{id}/pins/{msgId}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.pinMessage(7, 99);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/channels/7/pins/99");
+      expect(fetchCallOpts().method).toBe("POST");
+    });
+
+    it("unpinMessage calls DELETE /channels/{id}/pins/{msgId}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.unpinMessage(7, 99);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/channels/7/pins/99");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("search endpoint", () => {
+    it("passes channelId and limit options", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ results: [] }));
+      await api.search("hello", { channelId: 3, limit: 10 });
+      const url = fetchCallUrl();
+      expect(url).toContain("q=hello");
+      expect(url).toContain("channel_id=3");
+      expect(url).toContain("limit=10");
+    });
+
+    it("works with query only (no options)", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ results: [] }));
+      await api.search("test");
+      const url = fetchCallUrl();
+      expect(url).toContain("q=test");
+      expect(url).not.toContain("channel_id");
+      expect(url).not.toContain("limit");
+    });
+  });
+
+  describe("file upload", () => {
+    it("uploadFile sends POST /uploads with FormData", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ url: "https://cdn/file.png", filename: "file.png" }),
+      );
+      const file = new File(["hello"], "file.png", { type: "image/png" });
+      const result = await api.uploadFile(file);
+
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/uploads");
+      expect(fetchCallOpts().method).toBe("POST");
+      // Should use FormData (not JSON)
+      expect(fetchCallOpts().body).toBeInstanceOf(FormData);
+      // Auth header should be present
+      const headers = fetchCallOpts().headers as Record<string, string>;
+      expect(headers["Authorization"]).toBe("Bearer test-token");
+      // Should NOT set Content-Type (browser sets multipart boundary)
+      expect(headers["Content-Type"]).toBeUndefined();
+      expect(result).toEqual({ url: "https://cdn/file.png", filename: "file.png" });
+    });
+
+    it("uploadFile throws ApiClientError on non-ok", async () => {
+      mockFetch.mockResolvedValue(
+        errorResponse(413, "FILE_TOO_LARGE", "File exceeds limit"),
+      );
+      const file = new File(["x"], "big.bin");
+      await expect(api.uploadFile(file)).rejects.toMatchObject({
+        status: 413,
+        code: "FILE_TOO_LARGE",
+      });
+    });
+
+    it("uploadFile omits Authorization header when no token set", async () => {
+      const noTokenApi = createApiClient({ host: "localhost:8443" });
+      mockFetch.mockResolvedValue(
+        jsonResponse({ url: "https://cdn/f.png", filename: "f.png" }),
+      );
+      const file = new File(["data"], "f.png");
+      await noTokenApi.uploadFile(file);
+      const headers = fetchCallOpts().headers as Record<string, string>;
+      expect(headers["Authorization"]).toBeUndefined();
+    });
+
+    it("uploadFile passes AbortSignal", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ url: "u", filename: "f" }),
+      );
+      const controller = new AbortController();
+      await api.uploadFile(new File(["x"], "f"), controller.signal);
+      expect(fetchCallOpts().signal).toBe(controller.signal);
+    });
+
+    it("uploadFile parseError fallback on non-JSON error body", async () => {
+      mockFetch.mockResolvedValue(
+        brokenJsonErrorResponse(500, "Internal Server Error"),
+      );
+      const file = new File(["x"], "f");
+      await expect(api.uploadFile(file)).rejects.toMatchObject({
+        status: 500,
+        code: "UNKNOWN",
+        message: "Internal Server Error",
+      });
+    });
+  });
+
+  describe("invite endpoints", () => {
+    it("getInvites calls GET /invites", async () => {
+      mockFetch.mockResolvedValue(jsonResponse([]));
+      const result = await api.getInvites();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/invites");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual([]);
+    });
+
+    it("createInvite calls POST /invites with data", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ id: 1, code: "abc123", max_uses: 5 }),
+      );
+      const result = await api.createInvite({ max_uses: 5, expires_in_hours: 24 });
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/invites");
+      expect(fetchCallOpts().method).toBe("POST");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ max_uses: 5, expires_in_hours: 24 });
+      expect(result.code).toBe("abc123");
+    });
+
+    it("revokeInvite calls DELETE /invites/{id}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.revokeInvite(10);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/invites/10");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("emoji endpoints", () => {
+    it("getEmoji calls GET /emoji", async () => {
+      mockFetch.mockResolvedValue(jsonResponse([{ id: 1, name: "smile" }]));
+      const result = await api.getEmoji();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/emoji");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual([{ id: 1, name: "smile" }]);
+    });
+
+    it("deleteEmoji calls DELETE /emoji/{id}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.deleteEmoji(5);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/emoji/5");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("sound endpoints", () => {
+    it("getSounds calls GET /sounds", async () => {
+      mockFetch.mockResolvedValue(jsonResponse([{ id: 1, name: "beep" }]));
+      const result = await api.getSounds();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/sounds");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual([{ id: 1, name: "beep" }]);
+    });
+
+    it("deleteSound calls DELETE /sounds/{id}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.deleteSound(3);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/sounds/3");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("DM endpoints", () => {
+    it("getDmChannels calls GET /dms", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({ channels: [] }));
+      const result = await api.getDmChannels();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/dms");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual({ channels: [] });
+    });
+
+    it("createDm calls POST /dms with recipient_id", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ channel: { id: 10, type: "dm" } }),
+      );
+      const result = await api.createDm(42);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/dms");
+      expect(fetchCallOpts().method).toBe("POST");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ recipient_id: 42 });
+      expect(result).toEqual({ channel: { id: 10, type: "dm" } });
+    });
+
+    it("closeDm calls DELETE /dms/{channelId}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.closeDm(10);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/dms/10");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("voice endpoints", () => {
+    it("getVoiceCredentials calls GET /voice/credentials", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ url: "wss://lk", token: "vt" }),
+      );
+      const result = await api.getVoiceCredentials();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/voice/credentials");
+      expect(fetchCallOpts().method).toBe("GET");
+      expect(result).toEqual({ url: "wss://lk", token: "vt" });
+    });
+  });
+
+  describe("health endpoint", () => {
+    it("getHealth uses custom host when provided", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ status: "ok", version: "1.0.0", uptime: 50 }),
+      );
+      await api.getHealth("other-host:9443");
+      expect(fetchCallUrl()).toBe("https://other-host:9443/api/v1/health");
+    });
+
+    it("getHealth falls back to config host when no host arg", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ status: "ok", version: "1.0.0", uptime: 50 }),
+      );
+      await api.getHealth();
+      expect(fetchCallUrl()).toBe("https://localhost:8443/api/v1/health");
+    });
+
+    it("getHealth throws ApiClientError on non-ok response", async () => {
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 503,
+        statusText: "Service Unavailable",
+        json: () => Promise.resolve({}),
+        headers: new Headers(),
+      } as unknown as Response);
+      await expect(api.getHealth()).rejects.toMatchObject({
+        status: 503,
+        code: "HEALTH_CHECK_FAILED",
+      });
+    });
+
+    it("getHealth clears timeout on success", async () => {
+      const clearTimeoutSpy = vi.spyOn(globalThis, "clearTimeout");
+      mockFetch.mockResolvedValue(
+        jsonResponse({ status: "ok", version: "1.0.0", uptime: 0 }),
+      );
+      await api.getHealth();
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it("getHealth clears timeout on failure", async () => {
+      const clearTimeoutSpy = vi.spyOn(globalThis, "clearTimeout");
+      mockFetch.mockResolvedValue({
+        ok: false,
+        status: 500,
+        statusText: "Error",
+        json: () => Promise.resolve({}),
+        headers: new Headers(),
+      } as unknown as Response);
+      await expect(api.getHealth()).rejects.toThrow();
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it("getHealth sets abort timeout with provided timeoutMs", async () => {
+      const setTimeoutSpy = vi.spyOn(globalThis, "setTimeout");
+      mockFetch.mockResolvedValue(
+        jsonResponse({ status: "ok", version: "1.0.0", uptime: 0 }),
+      );
+      await api.getHealth(undefined, 5000);
+      // setTimeout should have been called with the timeout value
+      expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 5000);
+      setTimeoutSpy.mockRestore();
+    });
+
+    it("getHealth sets danger.acceptInvalidCerts", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ status: "ok", version: "1.0.0", uptime: 0 }),
+      );
+      await api.getHealth();
+      expect((fetchCallOpts() as Record<string, unknown>).danger).toEqual({
+        acceptInvalidCerts: true,
+        acceptInvalidHostnames: false,
+      });
+    });
+  });
+
+  describe("admin channel endpoints", () => {
+    it("adminCreateChannel calls POST /admin/api/channels", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ id: 1, name: "general", type: "text" }),
+      );
+      const result = await api.adminCreateChannel({
+        name: "general",
+        type: "text",
+        category: "Main",
+        topic: "General chat",
+        position: 0,
+      });
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/channels");
+      expect(fetchCallOpts().method).toBe("POST");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({
+        name: "general",
+        type: "text",
+        category: "Main",
+        topic: "General chat",
+        position: 0,
+      });
+      expect(result).toEqual({ id: 1, name: "general", type: "text" });
+    });
+
+    it("adminUpdateChannel calls PATCH /admin/api/channels/{id}", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ id: 5, name: "renamed", topic: "new topic" }),
+      );
+      const result = await api.adminUpdateChannel(5, {
+        name: "renamed",
+        topic: "new topic",
+        slow_mode: 10,
+        position: 2,
+        archived: false,
+      });
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/channels/5");
+      expect(fetchCallOpts().method).toBe("PATCH");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({
+        name: "renamed",
+        topic: "new topic",
+        slow_mode: 10,
+        position: 2,
+        archived: false,
+      });
+      expect(result.name).toBe("renamed");
+    });
+
+    it("adminDeleteChannel calls DELETE /admin/api/channels/{id}", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.adminDeleteChannel(5);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/channels/5");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+  });
+
+  describe("admin member endpoints", () => {
+    it("adminKickMember calls DELETE /admin/api/users/{id}/sessions", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.adminKickMember(42);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/users/42/sessions");
+      expect(fetchCallOpts().method).toBe("DELETE");
+    });
+
+    it("adminBanMember calls PATCH /admin/api/users/{id} with banned:true", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.adminBanMember(42, "spamming");
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/users/42");
+      expect(fetchCallOpts().method).toBe("PATCH");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ banned: true, ban_reason: "spamming" });
+    });
+
+    it("adminBanMember uses empty string when no reason provided", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.adminBanMember(42);
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ banned: true, ban_reason: "" });
+    });
+
+    it("adminChangeRole calls PATCH /admin/api/users/{id} with role_id", async () => {
+      mockFetch.mockResolvedValue(jsonResponse(undefined, 204));
+      await api.adminChangeRole(42, 3);
+      expect(fetchCallUrl()).toBe("https://localhost:8443/admin/api/users/42");
+      expect(fetchCallOpts().method).toBe("PATCH");
+      const body = JSON.parse(fetchCallOpts().body as string);
+      expect(body).toEqual({ role_id: 3 });
+    });
+  });
+
+  describe("ApiClientError class", () => {
+    it("has correct name, status, code, message properties", () => {
+      const err = new ApiClientError(404, "NOT_FOUND", "Resource not found");
+      expect(err.name).toBe("ApiClientError");
+      expect(err.status).toBe(404);
+      expect(err.code).toBe("NOT_FOUND");
+      expect(err.message).toBe("Resource not found");
+      expect(err).toBeInstanceOf(Error);
+    });
+  });
+
+  describe("doFetch danger option", () => {
+    it("all regular requests set danger.acceptInvalidCerts", async () => {
+      mockFetch.mockResolvedValue(jsonResponse({}));
+      await api.getMe();
+      expect((fetchCallOpts() as Record<string, unknown>).danger).toEqual({
+        acceptInvalidCerts: true,
+        acceptInvalidHostnames: false,
+      });
+    });
+  });
+
+  describe("client without onUnauthorized callback", () => {
+    it("does not throw when onUnauthorized is undefined and 401 received", async () => {
+      const apiNoCallback = createApiClient({ host: "localhost:8443", token: "t" });
+      mockFetch.mockResolvedValue(
+        errorResponse(401, "UNAUTHORIZED", "No session"),
+      );
+      await expect(apiNoCallback.getMe()).rejects.toMatchObject({
+        status: 401,
+        code: "UNAUTHORIZED",
+      });
+    });
+  });
+
+  describe("doFetch body serialization", () => {
+    it("omits body when body is undefined (GET requests)", async () => {
+      mockFetch.mockResolvedValue(jsonResponse([]));
+      await api.getSessions();
+      expect(fetchCallOpts().body).toBeUndefined();
+    });
+
+    it("serializes body as JSON for POST requests", async () => {
+      mockFetch.mockResolvedValue(
+        jsonResponse({ token: "t", requires_2fa: false }),
+      );
+      await api.login("u", "p");
+      expect(typeof fetchCallOpts().body).toBe("string");
+      expect(JSON.parse(fetchCallOpts().body as string)).toEqual({
+        username: "u",
+        password: "p",
+      });
+    });
+  });
 });
diff --git a/Client/tauri-client/tests/unit/audio-pipeline.test.ts b/Client/tauri-client/tests/unit/audio-pipeline.test.ts
index 85a0aff5..8dc83f9b 100644
--- a/Client/tauri-client/tests/unit/audio-pipeline.test.ts
+++ b/Client/tauri-client/tests/unit/audio-pipeline.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
 const { mockLoadPref, mockSavePref } = vi.hoisted(() => ({
   mockLoadPref: vi.fn((_key: string, defaultVal: unknown) => defaultVal),
@@ -239,5 +239,788 @@ describe("AudioPipeline", () => {
       await pipeline.reapplyAudioProcessing(onError);
       expect(onError).toHaveBeenCalledWith("Failed to update audio settings");
     });
+
+    it("does not call onError when no callback provided", async () => {
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              restartTrack: vi.fn().mockRejectedValue(new Error("device error")),
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      // Should not throw even without onError
+      await expect(pipeline.reapplyAudioProcessing()).resolves.toBeUndefined();
+    });
+
+    it("does nothing when mic track is undefined", async () => {
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({ track: undefined }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await expect(pipeline.reapplyAudioProcessing()).resolves.toBeUndefined();
+    });
+  });
+
+  // --- Full AudioContext pipeline tests ---
+
+  describe("setupAudioPipeline with AudioContext mock", () => {
+    let mockGainNode: any;
+    let mockAnalyserNode: any;
+    let mockDestNode: any;
+    let mockSourceNode: any;
+    let mockAudioCtx: any;
+    let mockRoom: any;
+    let mockSender: any;
+
+    afterEach(() => {
+      // Ensure pipeline is torn down to clear VAD timers
+      pipeline.teardownAudioPipeline();
+      vi.unstubAllGlobals();
+    });
+
+    beforeEach(() => {
+      mockGainNode = {
+        gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+        connect: vi.fn(),
+        disconnect: vi.fn(),
+      };
+      mockAnalyserNode = {
+        fftSize: 0,
+        smoothingTimeConstant: 0,
+        connect: vi.fn(),
+        disconnect: vi.fn(),
+        getFloatTimeDomainData: vi.fn(),
+      };
+      mockDestNode = {
+        stream: { getAudioTracks: vi.fn().mockReturnValue([{ id: "adjusted-track" }]) },
+        disconnect: vi.fn(),
+      };
+      mockSourceNode = {
+        connect: vi.fn(),
+      };
+      mockSender = {
+        replaceTrack: vi.fn().mockResolvedValue(undefined),
+      };
+
+      mockAudioCtx = {
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue(mockSourceNode),
+        createAnalyser: vi.fn().mockReturnValue(mockAnalyserNode),
+        createGain: vi.fn().mockReturnValue(mockGainNode),
+        createMediaStreamDestination: vi.fn().mockReturnValue(mockDestNode),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: { addModule: vi.fn().mockRejectedValue(new Error("no worklet")) },
+      };
+
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue(mockAudioCtx));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              mediaStreamTrack: { id: "original-track" },
+              sender: mockSender,
+              getProcessor: vi.fn().mockReturnValue(undefined),
+              setProcessor: vi.fn().mockResolvedValue(undefined),
+              stopProcessor: vi.fn().mockResolvedValue(undefined),
+            },
+          }),
+        },
+      };
+    });
+
+    it("creates the full audio pipeline when room and mic track are available", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      expect(pipeline.isActive).toBe(true);
+      expect(mockAudioCtx.createGain).toHaveBeenCalled();
+      expect(mockAudioCtx.createAnalyser).toHaveBeenCalled();
+      expect(mockAudioCtx.createMediaStreamDestination).toHaveBeenCalled();
+      expect(mockSourceNode.connect).toHaveBeenCalledWith(mockAnalyserNode);
+      expect(mockSourceNode.connect).toHaveBeenCalledWith(mockGainNode);
+      expect(mockGainNode.connect).toHaveBeenCalledWith(mockDestNode);
+    });
+
+    it("replaces WebRTC sender track with pipeline output", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      expect(mockSender.replaceTrack).toHaveBeenCalledWith({ id: "adjusted-track" });
+    });
+
+    it("skips sender replacement when no adjusted track available", () => {
+      mockDestNode.stream.getAudioTracks.mockReturnValue([]);
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      // replaceTrack is only called from teardown (not setup) since no adjusted track
+      // The teardown in setupAudioPipeline (line 1) calls replaceTrack for restore,
+      // but the setup itself should not call it with the adjusted track.
+      // We confirm isActive is true — the pipeline was set up successfully.
+      expect(pipeline.isActive).toBe(true);
+    });
+
+    it("does not replace sender if track has no sender", () => {
+      mockRoom.localParticipant.getTrackPublication.mockReturnValue({
+        track: {
+          mediaStreamTrack: { id: "original-track" },
+          sender: undefined,
+          getProcessor: vi.fn(),
+        },
+      });
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      // Should not throw
+      expect(pipeline.isActive).toBe(true);
+    });
+
+    it("reads input volume from preferences during setup", () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "inputVolume") return 75;
+        return defaultVal;
+      });
+
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      expect(mockGainNode.gain.setValueAtTime).toHaveBeenCalledWith(0.75, 0);
+    });
+
+    it("reports ctxState from active AudioContext", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      expect(pipeline.ctxState).toBe("running");
+    });
+
+    it("reports gainValue from active GainNode", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      expect(pipeline.gainValue).toBe(1);
+    });
+
+    it("teardown disconnects and closes all nodes", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      pipeline.teardownAudioPipeline();
+
+      expect(pipeline.isActive).toBe(false);
+      expect(mockGainNode.disconnect).toHaveBeenCalled();
+      expect(mockAnalyserNode.disconnect).toHaveBeenCalled();
+      expect(mockDestNode.disconnect).toHaveBeenCalled();
+      expect(mockAudioCtx.close).toHaveBeenCalled();
+    });
+
+    it("teardown restores original sender track", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      mockSender.replaceTrack.mockClear();
+      pipeline.teardownAudioPipeline();
+
+      expect(mockSender.replaceTrack).toHaveBeenCalledWith({ id: "original-track" });
+    });
+
+    it("teardown does not crash if room has no mic track", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      // Remove mic track before teardown
+      mockRoom.localParticipant.getTrackPublication.mockReturnValue(undefined);
+      expect(() => pipeline.teardownAudioPipeline()).not.toThrow();
+    });
+
+    it("teardown does not crash if mic track has no sender", () => {
+      const roomWithNoSender = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              mediaStreamTrack: { id: "track" },
+              sender: undefined,
+              getProcessor: vi.fn(),
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(roomWithNoSender);
+      pipeline.setupAudioPipeline();
+      expect(() => pipeline.teardownAudioPipeline()).not.toThrow();
+    });
+
+    it("setupAudioPipeline tears down existing pipeline first", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      expect(pipeline.isActive).toBe(true);
+
+      // Second setup should tear down the first
+      pipeline.setupAudioPipeline();
+      expect(pipeline.isActive).toBe(true);
+      expect(mockGainNode.disconnect).toHaveBeenCalled();
+    });
+
+    it("updatePipelineGain applies effective gain when active", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      pipeline.setInputVolume(50);
+
+      expect(mockGainNode.gain.setTargetAtTime).toHaveBeenCalled();
+      const call = mockGainNode.gain.setTargetAtTime.mock.calls[
+        mockGainNode.gain.setTargetAtTime.mock.calls.length - 1
+      ];
+      expect(call[0]).toBe(0.5); // inputGain = 50/100 = 0.5, not vadGated
+    });
+
+    it("updatePipelineGain sets gain to 0 when VAD is gated", () => {
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+      // Force VAD gated
+      (pipeline as any).vadGated = true;
+      pipeline.updatePipelineGain();
+
+      const call = mockGainNode.gain.setTargetAtTime.mock.calls[
+        mockGainNode.gain.setTargetAtTime.mock.calls.length - 1
+      ];
+      expect(call[0]).toBe(0);
+    });
+
+    it("handles AudioContext constructor failure gracefully", () => {
+      vi.stubGlobal("AudioContext", vi.fn(() => { throw new Error("AudioContext not supported"); }));
+      pipeline.setRoom(mockRoom);
+      // Should not throw
+      expect(() => pipeline.setupAudioPipeline()).not.toThrow();
+      expect(pipeline.isActive).toBe(false);
+    });
+  });
+
+  // --- Noise suppressor with track ---
+
+  describe("applyNoiseSuppressor with track", () => {
+    it("does nothing when track already has a processor", async () => {
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              getProcessor: vi.fn().mockReturnValue({}), // Already has processor
+              setProcessor: vi.fn(),
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await pipeline.applyNoiseSuppressor();
+      expect(mockRoom.localParticipant.getTrackPublication().track.setProcessor).not.toHaveBeenCalled();
+    });
+
+    it("attaches processor when track has none", async () => {
+      const setProcessor = vi.fn().mockResolvedValue(undefined);
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              getProcessor: vi.fn().mockReturnValue(undefined),
+              setProcessor,
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await pipeline.applyNoiseSuppressor();
+      expect(setProcessor).toHaveBeenCalled();
+    });
+  });
+
+  describe("removeNoiseSuppressor with track", () => {
+    it("does nothing when track has no processor", async () => {
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              getProcessor: vi.fn().mockReturnValue(undefined),
+              stopProcessor: vi.fn(),
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await pipeline.removeNoiseSuppressor();
+      expect(mockRoom.localParticipant.getTrackPublication().track.stopProcessor).not.toHaveBeenCalled();
+    });
+
+    it("removes processor when track has one", async () => {
+      const stopProcessor = vi.fn().mockResolvedValue(undefined);
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              getProcessor: vi.fn().mockReturnValue({}),
+              stopProcessor,
+            },
+          }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await pipeline.removeNoiseSuppressor();
+      expect(stopProcessor).toHaveBeenCalled();
+    });
+
+    it("does nothing when track is undefined", async () => {
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({ track: undefined }),
+        },
+      } as any;
+      pipeline.setRoom(mockRoom);
+      await expect(pipeline.removeNoiseSuppressor()).resolves.toBeUndefined();
+    });
+  });
+
+  describe("setVoiceSensitivity edge cases", () => {
+    it("sensitivity 100 ungates if previously gated", () => {
+      (pipeline as any).vadGated = true;
+      pipeline.setVoiceSensitivity(100);
+      expect(pipeline.isVadGated).toBe(false);
+    });
+
+    it("sensitivity below 100 does not change gated state without active pipeline", () => {
+      pipeline.setVoiceSensitivity(50);
+      // No crash, no active pipeline to start VAD on
+      expect(pipeline.isVadGated).toBe(false);
+    });
+  });
+
+  describe("VAD worklet path", () => {
+    let mockGainNode: any;
+    let mockAnalyserNode: any;
+    let mockDestNode: any;
+    let mockSourceNode: any;
+    let mockAudioCtx: any;
+    let mockRoom: any;
+
+    afterEach(() => {
+      pipeline.teardownAudioPipeline();
+      vi.unstubAllGlobals();
+    });
+
+    function setupPipelineWithWorklet(workletBehavior: "success" | "fail"): void {
+      mockGainNode = {
+        gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+        connect: vi.fn(), disconnect: vi.fn(),
+      };
+      mockAnalyserNode = {
+        fftSize: 0, smoothingTimeConstant: 0,
+        connect: vi.fn(), disconnect: vi.fn(),
+        getFloatTimeDomainData: vi.fn(),
+      };
+      mockDestNode = {
+        stream: { getAudioTracks: vi.fn().mockReturnValue([{ id: "track" }]) },
+        disconnect: vi.fn(),
+      };
+      mockSourceNode = { connect: vi.fn() };
+      mockAudioCtx = {
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue(mockSourceNode),
+        createAnalyser: vi.fn().mockReturnValue(mockAnalyserNode),
+        createGain: vi.fn().mockReturnValue(mockGainNode),
+        createMediaStreamDestination: vi.fn().mockReturnValue(mockDestNode),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: {
+          addModule: workletBehavior === "success"
+            ? vi.fn().mockResolvedValue(undefined)
+            : vi.fn().mockRejectedValue(new Error("no worklet")),
+        },
+      };
+
+      // Mock AudioWorkletNode
+      vi.stubGlobal("AudioWorkletNode", vi.fn().mockImplementation(() => ({
+        port: {
+          postMessage: vi.fn(),
+          onmessage: null as ((event: MessageEvent) => void) | null,
+        },
+        connect: vi.fn(),
+        disconnect: vi.fn(),
+      })));
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue(mockAudioCtx));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              mediaStreamTrack: { id: "track" },
+              sender: { replaceTrack: vi.fn().mockResolvedValue(undefined) },
+              getProcessor: vi.fn(), setProcessor: vi.fn(), stopProcessor: vi.fn(),
+            },
+          }),
+        },
+      };
+
+      // Set sensitivity < 100 so VAD polling starts
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "voiceSensitivity") return 50;
+        if (key === "inputVolume") return 100;
+        return defaultVal;
+      });
+    }
+
+    it("starts VAD worklet when AudioWorklet addModule succeeds", async () => {
+      setupPipelineWithWorklet("success");
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      // Wait for the async addModule to resolve
+      await vi.waitFor(() => {
+        expect(pipeline.vadUsingWorklet).toBe(true);
+      });
+    });
+
+    it("falls back to setTimeout VAD when AudioWorklet addModule fails", async () => {
+      setupPipelineWithWorklet("fail");
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.waitFor(() => {
+        // After worklet failure, falls back to setTimeout
+        expect(pipeline.vadUsingWorklet).toBe(false);
+      });
+    });
+
+    it("worklet gate message toggles VAD gate", async () => {
+      setupPipelineWithWorklet("success");
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.waitFor(() => {
+        expect(pipeline.vadUsingWorklet).toBe(true);
+      });
+
+      // Get the AudioWorkletNode mock and simulate a gate message
+      const WorkletNodeConstructor = (globalThis as any).AudioWorkletNode;
+      const workletInstance = WorkletNodeConstructor.mock.results[0].value;
+
+      // Simulate gate message
+      workletInstance.port.onmessage({ data: { type: "gate", gated: true } } as any);
+      expect(pipeline.isVadGated).toBe(true);
+
+      workletInstance.port.onmessage({ data: { type: "gate", gated: false } } as any);
+      expect(pipeline.isVadGated).toBe(false);
+    });
+
+    it("worklet rms message updates lastVadRms", async () => {
+      setupPipelineWithWorklet("success");
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.waitFor(() => {
+        expect(pipeline.vadUsingWorklet).toBe(true);
+      });
+
+      const WorkletNodeConstructor = (globalThis as any).AudioWorkletNode;
+      const workletInstance = WorkletNodeConstructor.mock.results[0].value;
+
+      workletInstance.port.onmessage({ data: { type: "rms", value: 0.42 } } as any);
+      expect(pipeline.lastVadRms).toBe(0.42);
+    });
+
+    it("stopVadPolling disconnects worklet node", async () => {
+      setupPipelineWithWorklet("success");
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.waitFor(() => {
+        expect(pipeline.vadUsingWorklet).toBe(true);
+      });
+
+      const WorkletNodeConstructor = (globalThis as any).AudioWorkletNode;
+      const workletInstance = WorkletNodeConstructor.mock.results[0].value;
+
+      pipeline.stopVadPolling();
+
+      expect(workletInstance.port.postMessage).toHaveBeenCalledWith({ type: "stop" });
+      expect(workletInstance.disconnect).toHaveBeenCalled();
+      expect(pipeline.vadUsingWorklet).toBe(false);
+    });
+
+    it("falls back to setTimeout when AudioWorkletNode constructor throws", async () => {
+      setupPipelineWithWorklet("success");
+      // Override AudioWorkletNode to throw
+      vi.stubGlobal("AudioWorkletNode", vi.fn().mockImplementation(() => {
+        throw new Error("AudioWorkletNode not supported");
+      }));
+
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.waitFor(() => {
+        // Should have fallen back to setTimeout
+        expect(pipeline.vadUsingWorklet).toBe(false);
+      });
+    });
+  });
+
+  describe("VAD fallback polling", () => {
+    afterEach(() => {
+      // Stop VAD first to clear the setTimeout chain before teardown
+      pipeline.stopVadPolling();
+      pipeline.teardownAudioPipeline();
+      vi.useRealTimers();
+      vi.unstubAllGlobals();
+    });
+
+    it("gates audio after sustained silence", async () => {
+      vi.useFakeTimers();
+      const dataArray = new Float32Array(2048);
+      // Fill with silence
+      dataArray.fill(0);
+
+      const mockAnalyser = {
+        fftSize: 2048, smoothingTimeConstant: 0.3,
+        connect: vi.fn(), disconnect: vi.fn(),
+        getFloatTimeDomainData: vi.fn().mockImplementation((arr: Float32Array) => {
+          arr.set(dataArray);
+        }),
+      };
+      const mockGainNode = {
+        gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+        connect: vi.fn(), disconnect: vi.fn(),
+      };
+      const mockAudioCtx = {
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue({ connect: vi.fn() }),
+        createAnalyser: vi.fn().mockReturnValue(mockAnalyser),
+        createGain: vi.fn().mockReturnValue(mockGainNode),
+        createMediaStreamDestination: vi.fn().mockReturnValue({
+          stream: { getAudioTracks: vi.fn().mockReturnValue([{ id: "track" }]) },
+          disconnect: vi.fn(),
+        }),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: { addModule: vi.fn().mockRejectedValue(new Error("no worklet")) },
+      };
+
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue(mockAudioCtx));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "voiceSensitivity") return 50;
+        if (key === "inputVolume") return 100;
+        return defaultVal;
+      });
+
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              mediaStreamTrack: { id: "track" },
+              sender: { replaceTrack: vi.fn().mockResolvedValue(undefined) },
+              getProcessor: vi.fn(), setProcessor: vi.fn(), stopProcessor: vi.fn(),
+            },
+          }),
+        },
+      } as any;
+
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      // Wait for worklet to fail and fallback to start
+      await vi.advanceTimersByTimeAsync(100);
+
+      // Run enough frames to pass startup grace (30 frames * 16ms = 480ms)
+      // and then enough silent frames to trigger gate (12 frames * 16ms = 192ms)
+      await vi.advanceTimersByTimeAsync(1200);
+
+      expect(pipeline.isVadGated).toBe(true);
+    });
+
+    it("ungates audio after speech is detected", async () => {
+      vi.useFakeTimers();
+      let isSilent = true;
+      const mockAnalyser = {
+        fftSize: 2048, smoothingTimeConstant: 0.3,
+        connect: vi.fn(), disconnect: vi.fn(),
+        getFloatTimeDomainData: vi.fn().mockImplementation((arr: Float32Array) => {
+          if (isSilent) {
+            arr.fill(0);
+          } else {
+            // Fill with loud signal
+            for (let i = 0; i < arr.length; i++) arr[i] = 0.5;
+          }
+        }),
+      };
+      const mockGainNode = {
+        gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+        connect: vi.fn(), disconnect: vi.fn(),
+      };
+      const mockAudioCtx = {
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue({ connect: vi.fn() }),
+        createAnalyser: vi.fn().mockReturnValue(mockAnalyser),
+        createGain: vi.fn().mockReturnValue(mockGainNode),
+        createMediaStreamDestination: vi.fn().mockReturnValue({
+          stream: { getAudioTracks: vi.fn().mockReturnValue([{ id: "track" }]) },
+          disconnect: vi.fn(),
+        }),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: { addModule: vi.fn().mockRejectedValue(new Error("no worklet")) },
+      };
+
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue(mockAudioCtx));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "voiceSensitivity") return 50;
+        if (key === "inputVolume") return 100;
+        return defaultVal;
+      });
+
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              mediaStreamTrack: { id: "track" },
+              sender: { replaceTrack: vi.fn().mockResolvedValue(undefined) },
+              getProcessor: vi.fn(), setProcessor: vi.fn(), stopProcessor: vi.fn(),
+            },
+          }),
+        },
+      } as any;
+
+      pipeline.setRoom(mockRoom);
+      pipeline.setupAudioPipeline();
+
+      await vi.advanceTimersByTimeAsync(100);
+
+      // Gate first with silence
+      await vi.advanceTimersByTimeAsync(1200);
+      expect(pipeline.isVadGated).toBe(true);
+
+      // Now simulate speech
+      isSilent = false;
+      await vi.advanceTimersByTimeAsync(200);
+      expect(pipeline.isVadGated).toBe(false);
+    });
+  });
+
+  describe("reapplyAudioProcessing success path", () => {
+    it("restarts track, rebuilds pipeline, and applies enhanced NS", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "enhancedNoiseSuppression") return true;
+        if (key === "echoCancellation") return true;
+        if (key === "noiseSuppression") return true;
+        if (key === "autoGainControl") return true;
+        return defaultVal;
+      });
+
+      const restartTrack = vi.fn().mockResolvedValue(undefined);
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              restartTrack,
+              mediaStreamTrack: { id: "track" },
+              sender: { replaceTrack: vi.fn().mockResolvedValue(undefined) },
+              getProcessor: vi.fn().mockReturnValue(undefined),
+              setProcessor: vi.fn().mockResolvedValue(undefined),
+            },
+          }),
+        },
+      } as any;
+
+      // Stub AudioContext for setupAudioPipeline called internally
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue({
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue({ connect: vi.fn() }),
+        createAnalyser: vi.fn().mockReturnValue({
+          fftSize: 0, smoothingTimeConstant: 0, connect: vi.fn(), disconnect: vi.fn(),
+        }),
+        createGain: vi.fn().mockReturnValue({
+          gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+          connect: vi.fn(), disconnect: vi.fn(),
+        }),
+        createMediaStreamDestination: vi.fn().mockReturnValue({
+          stream: { getAudioTracks: vi.fn().mockReturnValue([]) },
+          disconnect: vi.fn(),
+        }),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: { addModule: vi.fn().mockRejectedValue(new Error("no worklet")) },
+      }));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      pipeline.setRoom(mockRoom);
+      await pipeline.reapplyAudioProcessing();
+
+      expect(restartTrack).toHaveBeenCalledWith({
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+      });
+    });
+
+    it("removes noise suppressor when enhanced NS is disabled", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "enhancedNoiseSuppression") return false;
+        if (key === "echoCancellation") return true;
+        if (key === "noiseSuppression") return true;
+        if (key === "autoGainControl") return true;
+        return defaultVal;
+      });
+
+      const stopProcessor = vi.fn().mockResolvedValue(undefined);
+      const restartTrack = vi.fn().mockResolvedValue(undefined);
+      const mockRoom = {
+        localParticipant: {
+          getTrackPublication: vi.fn().mockReturnValue({
+            track: {
+              restartTrack,
+              mediaStreamTrack: { id: "track" },
+              sender: { replaceTrack: vi.fn().mockResolvedValue(undefined) },
+              getProcessor: vi.fn().mockReturnValue({}), // has a processor
+              setProcessor: vi.fn().mockResolvedValue(undefined),
+              stopProcessor,
+            },
+          }),
+        },
+      } as any;
+
+      vi.stubGlobal("AudioContext", vi.fn().mockReturnValue({
+        resume: vi.fn().mockResolvedValue(undefined),
+        createMediaStreamSource: vi.fn().mockReturnValue({ connect: vi.fn() }),
+        createAnalyser: vi.fn().mockReturnValue({
+          fftSize: 0, smoothingTimeConstant: 0, connect: vi.fn(), disconnect: vi.fn(),
+        }),
+        createGain: vi.fn().mockReturnValue({
+          gain: { value: 1, setValueAtTime: vi.fn(), setTargetAtTime: vi.fn() },
+          connect: vi.fn(), disconnect: vi.fn(),
+        }),
+        createMediaStreamDestination: vi.fn().mockReturnValue({
+          stream: { getAudioTracks: vi.fn().mockReturnValue([]) },
+          disconnect: vi.fn(),
+        }),
+        currentTime: 0,
+        close: vi.fn().mockResolvedValue(undefined),
+        state: "running",
+        audioWorklet: { addModule: vi.fn().mockRejectedValue(new Error("no worklet")) },
+      }));
+      vi.stubGlobal("MediaStream", vi.fn().mockImplementation(() => ({})));
+
+      pipeline.setRoom(mockRoom);
+      await pipeline.reapplyAudioProcessing();
+
+      expect(restartTrack).toHaveBeenCalled();
+      expect(stopProcessor).toHaveBeenCalled();
+    });
   });
 });
diff --git a/Client/tauri-client/tests/unit/chat-header.test.ts b/Client/tauri-client/tests/unit/chat-header.test.ts
index 087951aa..51c6048f 100644
--- a/Client/tauri-client/tests/unit/chat-header.test.ts
+++ b/Client/tauri-client/tests/unit/chat-header.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { buildChatHeader } from "../../src/pages/main-page/ChatHeader";
+import { buildChatHeader, updateChatHeaderForDm } from "../../src/pages/main-page/ChatHeader";
 
 describe("ChatHeader", () => {
   let container: HTMLDivElement;
@@ -89,4 +89,150 @@ describe("ChatHeader", () => {
     const pinBtn = container.querySelector('[data-testid="pin-btn"]');
     expect(pinBtn?.getAttribute("aria-label")).toBe("Pins");
   });
+
+  it("calls onSearchFocus and blurs input when search is focused", () => {
+    const onSearchFocus = vi.fn();
+    const { element } = buildChatHeader({
+      onTogglePins: vi.fn(),
+      onSearchFocus,
+    });
+    container.appendChild(element);
+
+    const searchInput = container.querySelector('[data-testid="search-input"]') as HTMLInputElement;
+    const blurSpy = vi.spyOn(searchInput, "blur");
+
+    searchInput.dispatchEvent(new Event("focus"));
+
+    expect(onSearchFocus).toHaveBeenCalledOnce();
+    expect(blurSpy).toHaveBeenCalledOnce();
+  });
+
+  it("does not add focus listener when onSearchFocus is not provided", () => {
+    const { element } = buildChatHeader({
+      onTogglePins: vi.fn(),
+      // no onSearchFocus
+    });
+    container.appendChild(element);
+
+    const searchInput = container.querySelector('[data-testid="search-input"]') as HTMLInputElement;
+    const blurSpy = vi.spyOn(searchInput, "blur");
+
+    // Focus should not cause blur since no handler was registered
+    searchInput.dispatchEvent(new Event("focus"));
+
+    expect(blurSpy).not.toHaveBeenCalled();
+  });
+
+  it("contains a pin icon inside the pin button", () => {
+    const { element } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    const pinBtn = container.querySelector('[data-testid="pin-btn"]');
+    // The button should contain an SVG icon element
+    expect(pinBtn?.children.length).toBeGreaterThan(0);
+  });
+
+  it("contains a divider element", () => {
+    const { element } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    const divider = container.querySelector(".ch-divider");
+    expect(divider).not.toBeNull();
+  });
+
+  it("topic element starts empty", () => {
+    const { refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+
+    expect(refs.topicEl.textContent).toBe("");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// updateChatHeaderForDm
+// ---------------------------------------------------------------------------
+
+describe("updateChatHeaderForDm", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("sets @ prefix and username for DM recipient", () => {
+    const { element, refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    updateChatHeaderForDm(refs, { username: "Alice", status: "online" });
+
+    expect(refs.hashEl.textContent).toBe("@");
+    expect(refs.nameEl.textContent).toBe("Alice");
+    expect(refs.topicEl.textContent).toBe("online");
+  });
+
+  it("sets status text as topic for DM", () => {
+    const { element, refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    updateChatHeaderForDm(refs, { username: "Bob", status: "idle" });
+
+    expect(refs.topicEl.textContent).toBe("idle");
+  });
+
+  it("resets to # when recipient is null", () => {
+    const { element, refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    // First set to DM mode
+    updateChatHeaderForDm(refs, { username: "Alice", status: "online" });
+    expect(refs.hashEl.textContent).toBe("@");
+
+    // Then reset to channel mode
+    updateChatHeaderForDm(refs, null);
+    expect(refs.hashEl.textContent).toBe("#");
+  });
+
+  it("does not change name or topic when recipient is null", () => {
+    const { element, refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    // Set DM first
+    updateChatHeaderForDm(refs, { username: "Alice", status: "online" });
+
+    // Reset — only hash changes, name/topic keep their values from setText
+    updateChatHeaderForDm(refs, null);
+    expect(refs.hashEl.textContent).toBe("#");
+    // Name and topic are NOT reset by updateChatHeaderForDm(null) — only hash
+  });
+
+  it("handles recipient with empty status", () => {
+    const { element, refs } = buildChatHeader({
+      onTogglePins: vi.fn(),
+    });
+    container.appendChild(element);
+
+    updateChatHeaderForDm(refs, { username: "Charlie", status: "" });
+
+    expect(refs.hashEl.textContent).toBe("@");
+    expect(refs.nameEl.textContent).toBe("Charlie");
+    expect(refs.topicEl.textContent).toBe("");
+  });
 });
diff --git a/Client/tauri-client/tests/unit/connection-stats.test.ts b/Client/tauri-client/tests/unit/connection-stats.test.ts
new file mode 100644
index 00000000..d5793db4
--- /dev/null
+++ b/Client/tauri-client/tests/unit/connection-stats.test.ts
@@ -0,0 +1,633 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+vi.mock("@lib/logger", () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+import {
+  createConnectionStatsPoller,
+  formatBytes,
+  formatRate,
+  formatBitrate,
+  type ConnectionStatsPoller,
+  type QualityLevel,
+} from "../../src/lib/connectionStats";
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+describe("formatBytes", () => {
+  it("formats bytes below 1000", () => {
+    expect(formatBytes(0)).toBe("0 B");
+    expect(formatBytes(512)).toBe("512 B");
+    expect(formatBytes(999)).toBe("999 B");
+  });
+
+  it("formats kilobytes", () => {
+    expect(formatBytes(1000)).toBe("1.00 kB");
+    expect(formatBytes(1500)).toBe("1.50 kB");
+    expect(formatBytes(999_999)).toBe("1000.00 kB");
+  });
+
+  it("formats megabytes", () => {
+    expect(formatBytes(1_000_000)).toBe("1.00 MB");
+    expect(formatBytes(5_432_100)).toBe("5.43 MB");
+  });
+});
+
+describe("formatRate", () => {
+  it("appends /s to formatted bytes", () => {
+    expect(formatRate(0)).toBe("0 B/s");
+    expect(formatRate(1500)).toBe("1.50 kB/s");
+    expect(formatRate(2_000_000)).toBe("2.00 MB/s");
+  });
+});
+
+describe("formatBitrate", () => {
+  it("returns 0 Mbps for very low rates", () => {
+    expect(formatBitrate(0)).toBe("0 Mbps");
+    // Less than 0.01 Mbps = 1250 bytes/s * 8 = 10000 bits = 0.01 Mbps
+    expect(formatBitrate(1000)).toBe("0 Mbps");
+  });
+
+  it("returns Kbps for sub-1 Mbps rates", () => {
+    // 0.05 Mbps = 6250 bytes/s
+    expect(formatBitrate(6250)).toBe("50 Kbps");
+    // 0.5 Mbps = 62500 bytes/s
+    expect(formatBitrate(62500)).toBe("500 Kbps");
+  });
+
+  it("returns Mbps for rates above 1 Mbps", () => {
+    // 1 Mbps = 125000 bytes/s
+    expect(formatBitrate(125_000)).toBe("1.0 Mbps");
+    // 10 Mbps = 1250000 bytes/s
+    expect(formatBitrate(1_250_000)).toBe("10.0 Mbps");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Connection stats poller
+// ---------------------------------------------------------------------------
+
+describe("createConnectionStatsPoller", () => {
+  let poller: ConnectionStatsPoller;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    poller?.stop();
+    vi.useRealTimers();
+  });
+
+  it("returns EMPTY_STATS before any polling", () => {
+    poller = createConnectionStatsPoller(() => null);
+    const stats = poller.getStats();
+    expect(stats.rtt).toBe(0);
+    expect(stats.quality).toBe("excellent");
+    expect(stats.outRate).toBe(0);
+    expect(stats.inRate).toBe(0);
+    expect(stats.outPackets).toBe(0);
+    expect(stats.inPackets).toBe(0);
+    expect(stats.totalUp).toBe(0);
+    expect(stats.totalDown).toBe(0);
+  });
+
+  it("does not poll when getRoom returns null", () => {
+    const getRoom = vi.fn().mockReturnValue(null);
+    poller = createConnectionStatsPoller(getRoom);
+    poller.start();
+    vi.advanceTimersByTime(5000);
+    // Stats should remain empty
+    expect(poller.getStats().rtt).toBe(0);
+  });
+
+  it("start is idempotent — calling start twice does not create double intervals", () => {
+    poller = createConnectionStatsPoller(() => null);
+    poller.start();
+    poller.start();
+    // If double interval were created, stopping would leave one running — we just check no throw
+    poller.stop();
+  });
+
+  it("stop is idempotent — calling stop without start does not throw", () => {
+    poller = createConnectionStatsPoller(() => null);
+    expect(() => poller.stop()).not.toThrow();
+  });
+
+  it("stop resets stats to empty", () => {
+    poller = createConnectionStatsPoller(() => null);
+    poller.start();
+    poller.stop();
+    expect(poller.getStats().quality).toBe("excellent");
+    expect(poller.getStats().rtt).toBe(0);
+  });
+
+  // --- onUpdate callback ---
+
+  it("onUpdate adds a listener and returns an unsubscribe function", () => {
+    poller = createConnectionStatsPoller(() => null);
+    const cb = vi.fn();
+    const unsub = poller.onUpdate(cb);
+    expect(typeof unsub).toBe("function");
+    unsub();
+    // After unsubscribe, callback should not be called during polling
+  });
+
+  // --- onQualityChanged callback ---
+
+  it("onQualityChanged adds a listener and returns an unsubscribe function", () => {
+    poller = createConnectionStatsPoller(() => null);
+    const cb = vi.fn();
+    const unsub = poller.onQualityChanged(cb);
+    expect(typeof unsub).toBe("function");
+    unsub();
+  });
+
+  // --- Polling with mock room ---
+
+  function createMockRoom(statsEntries: Array<Record<string, unknown>>): unknown {
+    const report = new Map<string, Record<string, unknown>>();
+    for (const entry of statsEntries) {
+      report.set(String(entry.id ?? Math.random()), entry);
+    }
+    // Make report.forEach work like RTCStatsReport
+    return {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: {
+              getStats: vi.fn().mockResolvedValue(report),
+            },
+          },
+          subscriber: {
+            pc: {
+              getStats: vi.fn().mockResolvedValue(report),
+            },
+          },
+        },
+      },
+    };
+  }
+
+  it("extracts RTT from candidate-pair entries", async () => {
+    const room = createMockRoom([
+      {
+        id: "cp1",
+        type: "candidate-pair",
+        currentRoundTripTime: 0.05, // 50ms
+        bytesSent: 1000,
+        bytesReceived: 2000,
+      },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+
+    // Advance past one poll interval
+    await vi.advanceTimersByTimeAsync(2100);
+
+    expect(cb).toHaveBeenCalled();
+    const stats = cb.mock.calls[0][0];
+    expect(stats.rtt).toBe(50); // 0.05 * 1000
+    expect(stats.quality).toBe("excellent");
+  });
+
+  it("classifies quality as fair for RTT 100-200ms", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.15, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+
+    const stats = cb.mock.calls[0][0];
+    expect(stats.quality).toBe("fair");
+  });
+
+  it("classifies quality as poor for RTT 200-400ms", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.3, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+
+    const stats = cb.mock.calls[0][0];
+    expect(stats.quality).toBe("poor");
+  });
+
+  it("classifies quality as bad for RTT >= 400ms", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.5, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+
+    const stats = cb.mock.calls[0][0];
+    expect(stats.quality).toBe("bad");
+  });
+
+  it("extracts outbound-rtp and inbound-rtp packet counts", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.01, bytesSent: 100, bytesReceived: 200 },
+      { id: "out1", type: "outbound-rtp", packetsSent: 500, bytesSent: 40000 },
+      { id: "in1", type: "inbound-rtp", packetsReceived: 300, bytesReceived: 30000 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+
+    const stats = cb.mock.calls[0][0];
+    // outPackets and inPackets are accumulated from both publisher and subscriber PCs
+    expect(stats.outPackets).toBeGreaterThanOrEqual(500);
+    expect(stats.inPackets).toBeGreaterThanOrEqual(300);
+  });
+
+  it("computes outRate and inRate between polls", async () => {
+    const room = createMockRoom([
+      { id: "out1", type: "outbound-rtp", packetsSent: 100, bytesSent: 10000 },
+      { id: "in1", type: "inbound-rtp", packetsReceived: 50, bytesReceived: 5000 },
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.01, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+
+    // First poll establishes baseline
+    await vi.advanceTimersByTimeAsync(2100);
+    // Second poll computes rates
+    await vi.advanceTimersByTimeAsync(2100);
+
+    // Rates should be >= 0 (exact value depends on timing)
+    const stats = cb.mock.calls[cb.mock.calls.length - 1][0];
+    expect(stats.outRate).toBeGreaterThanOrEqual(0);
+    expect(stats.inRate).toBeGreaterThanOrEqual(0);
+  });
+
+  it("fires quality change callback with debounce", async () => {
+    // The debounce timer for quality changes (3s) is perpetually reset by polls
+    // (2s interval) while quality remains changed. The timer only fires when
+    // polls stop finding data (room returns null). This matches real usage where
+    // the quality callback fires after the connection stabilizes.
+    let currentRtt = 0.01;
+    let roomActive = true;
+    const mockPc = {
+      getStats: vi.fn().mockImplementation(() => {
+        const report = new Map();
+        report.set("cp1", {
+          type: "candidate-pair",
+          currentRoundTripTime: currentRtt,
+          bytesSent: 0,
+          bytesReceived: 0,
+        });
+        return Promise.resolve(report);
+      }),
+    };
+    const room = {
+      engine: { pcManager: { publisher: { pc: mockPc } } },
+    };
+
+    const qualityCb = vi.fn();
+    poller = createConnectionStatsPoller(() => roomActive ? room as any : null);
+    poller.onQualityChanged(qualityCb);
+    poller.start();
+
+    // First poll (excellent)
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(qualityCb).not.toHaveBeenCalled();
+
+    // Change to bad — poll detects quality change and starts debounce
+    currentRtt = 0.5;
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(qualityCb).not.toHaveBeenCalled();
+
+    // Make room unavailable so subsequent polls return early (no timer reset)
+    roomActive = false;
+    // Advance past the 3s debounce — timer fires because polls no longer reset it
+    await vi.advanceTimersByTimeAsync(3100);
+
+    expect(qualityCb).toHaveBeenCalledWith("bad", "excellent");
+  });
+
+  it("unsubscribed onUpdate callback is not called", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.01, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    const unsub = poller.onUpdate(cb);
+    unsub();
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("unsubscribed onQualityChanged callback is not called", async () => {
+    let currentRtt = 0.01;
+    const room = {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: {
+              getStats: vi.fn().mockImplementation(() => {
+                const report = new Map();
+                report.set("cp1", {
+                  type: "candidate-pair",
+                  currentRoundTripTime: currentRtt,
+                  bytesSent: 0,
+                  bytesReceived: 0,
+                });
+                return Promise.resolve(report);
+              }),
+            },
+          },
+        },
+      },
+    };
+
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    const unsub = poller.onQualityChanged(cb);
+    unsub();
+    poller.start();
+
+    currentRtt = 0.5; // Switch to bad
+    await vi.advanceTimersByTimeAsync(2100);
+    await vi.advanceTimersByTimeAsync(3100);
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("handles getStats failure gracefully (returns empty reports)", async () => {
+    const room = {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: {
+              getStats: vi.fn().mockRejectedValue(new Error("stats error")),
+            },
+          },
+        },
+      },
+    };
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    // On failure, collectAllStats returns [], so no update callback fires
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("handles room with no pcManager", async () => {
+    const room = { engine: {} };
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    // No pcManager = no PCs = empty reports = no update
+    expect(cb).not.toHaveBeenCalled();
+  });
+
+  it("handles room with only publisher PC", async () => {
+    const report = new Map();
+    report.set("cp1", {
+      type: "candidate-pair",
+      currentRoundTripTime: 0.05,
+      bytesSent: 1000,
+      bytesReceived: 2000,
+    });
+
+    const room = {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: { getStats: vi.fn().mockResolvedValue(report) },
+          },
+          // No subscriber
+        },
+      },
+    };
+
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    expect(cb.mock.calls[0][0].rtt).toBe(50);
+  });
+
+  it("handles room with only subscriber PC", async () => {
+    const report = new Map();
+    report.set("cp1", {
+      type: "candidate-pair",
+      currentRoundTripTime: 0.12,
+      bytesSent: 0,
+      bytesReceived: 0,
+    });
+
+    const room = {
+      engine: {
+        pcManager: {
+          subscriber: {
+            pc: { getStats: vi.fn().mockResolvedValue(report) },
+          },
+        },
+      },
+    };
+
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    expect(cb.mock.calls[0][0].rtt).toBe(120);
+    expect(cb.mock.calls[0][0].quality).toBe("fair");
+  });
+
+  it("ignores candidate-pair entries with non-numeric or zero RTT", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: "bad", bytesSent: 0, bytesReceived: 0 },
+      { id: "cp2", type: "candidate-pair", currentRoundTripTime: 0, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    expect(cb.mock.calls[0][0].rtt).toBe(0);
+    expect(cb.mock.calls[0][0].quality).toBe("excellent"); // rtt 0 = excellent
+  });
+
+  it("picks the lowest RTT when multiple candidate-pairs exist", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.3, bytesSent: 0, bytesReceived: 0 },
+      { id: "cp2", type: "candidate-pair", currentRoundTripTime: 0.05, bytesSent: 0, bytesReceived: 0 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb.mock.calls[0][0].rtt).toBe(50);
+  });
+
+  it("clamps outRate and inRate to non-negative", async () => {
+    // First poll with high bytes, second poll with low bytes (simulated reset)
+    let callCount = 0;
+    const room = {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: {
+              getStats: vi.fn().mockImplementation(() => {
+                callCount++;
+                const report = new Map();
+                report.set("cp1", {
+                  type: "candidate-pair",
+                  currentRoundTripTime: 0.01,
+                  bytesSent: callCount === 1 ? 10000 : 5000,
+                  bytesReceived: callCount === 1 ? 10000 : 5000,
+                });
+                // Bytes that feed outRate/inRate via outbound-rtp/inbound-rtp
+                report.set("out1", {
+                  type: "outbound-rtp",
+                  packetsSent: 100,
+                  bytesSent: callCount === 1 ? 50000 : 20000,
+                });
+                report.set("in1", {
+                  type: "inbound-rtp",
+                  packetsReceived: 100,
+                  bytesReceived: callCount === 1 ? 50000 : 20000,
+                });
+                return Promise.resolve(report);
+              }),
+            },
+          },
+        },
+      },
+    };
+
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100); // First poll
+    await vi.advanceTimersByTimeAsync(2100); // Second poll
+    const lastStats = cb.mock.calls[cb.mock.calls.length - 1][0];
+    // outRate uses Math.max(0, ...) so should be >= 0
+    expect(lastStats.outRate).toBeGreaterThanOrEqual(0);
+    expect(lastStats.inRate).toBeGreaterThanOrEqual(0);
+  });
+
+  it("quality change callback is not fired if quality reverts before debounce expires", async () => {
+    let currentRtt = 0.01;
+    const room = {
+      engine: {
+        pcManager: {
+          publisher: {
+            pc: {
+              getStats: vi.fn().mockImplementation(() => {
+                const report = new Map();
+                report.set("cp1", {
+                  type: "candidate-pair",
+                  currentRoundTripTime: currentRtt,
+                  bytesSent: 0,
+                  bytesReceived: 0,
+                });
+                return Promise.resolve(report);
+              }),
+            },
+          },
+        },
+      },
+    };
+
+    const qualityCb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onQualityChanged(qualityCb);
+    poller.start();
+
+    // First poll (excellent)
+    await vi.advanceTimersByTimeAsync(2100);
+
+    // Change to bad
+    currentRtt = 0.5;
+    await vi.advanceTimersByTimeAsync(2100);
+
+    // Revert to excellent before debounce
+    currentRtt = 0.01;
+    await vi.advanceTimersByTimeAsync(2100);
+
+    // Now wait for debounce to expire
+    await vi.advanceTimersByTimeAsync(3100);
+
+    // Quality reverted to excellent before debounce fired, so callback should not fire
+    expect(qualityCb).not.toHaveBeenCalled();
+  });
+
+  it("handles candidate-pair without bytesSent/bytesReceived", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.05 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    const stats = cb.mock.calls[0][0];
+    expect(stats.totalUp).toBe(0);
+    expect(stats.totalDown).toBe(0);
+  });
+
+  it("handles outbound-rtp without packetsSent", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.01, bytesSent: 0, bytesReceived: 0 },
+      { id: "out1", type: "outbound-rtp", bytesSent: 100 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    expect(cb.mock.calls[0][0].outPackets).toBe(0);
+  });
+
+  it("handles inbound-rtp without packetsReceived", async () => {
+    const room = createMockRoom([
+      { id: "cp1", type: "candidate-pair", currentRoundTripTime: 0.01, bytesSent: 0, bytesReceived: 0 },
+      { id: "in1", type: "inbound-rtp", bytesReceived: 100 },
+    ]);
+    const cb = vi.fn();
+    poller = createConnectionStatsPoller(() => room as any);
+    poller.onUpdate(cb);
+    poller.start();
+    await vi.advanceTimersByTimeAsync(2100);
+    expect(cb).toHaveBeenCalled();
+    expect(cb.mock.calls[0][0].inPackets).toBe(0);
+  });
+});
diff --git a/Client/tauri-client/tests/unit/device-manager.test.ts b/Client/tauri-client/tests/unit/device-manager.test.ts
new file mode 100644
index 00000000..3648d30c
--- /dev/null
+++ b/Client/tauri-client/tests/unit/device-manager.test.ts
@@ -0,0 +1,419 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+// --- Hoisted mocks ---
+
+const { mockLoadPref, mockSavePref } = vi.hoisted(() => ({
+  mockLoadPref: vi.fn((_key: string, defaultVal: unknown) => defaultVal),
+  mockSavePref: vi.fn(),
+}));
+
+vi.mock("@components/settings/helpers", () => ({
+  loadPref: (key: string, defaultVal: unknown) => mockLoadPref(key, defaultVal),
+  savePref: (key: string, val: unknown) => mockSavePref(key, val),
+}));
+
+vi.mock("@lib/logger", () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+const mockGetLocalDevices = vi.fn();
+
+vi.mock("livekit-client", () => ({
+  Room: Object.assign(vi.fn(), {
+    getLocalDevices: (...args: unknown[]) => mockGetLocalDevices(...args),
+  }),
+}));
+
+import { DeviceManager } from "../../src/lib/deviceManager";
+
+describe("DeviceManager", () => {
+  let dm: DeviceManager;
+  let mockRoom: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+    dm = new DeviceManager();
+    mockRoom = {
+      localParticipant: {
+        setMicrophoneEnabled: vi.fn().mockResolvedValue(undefined),
+      },
+      switchActiveDevice: vi.fn().mockResolvedValue(undefined),
+    };
+
+    // Stub navigator.mediaDevices
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        enumerateDevices: vi.fn().mockResolvedValue([]),
+      },
+    });
+  });
+
+  afterEach(() => {
+    dm.setRoom(null);
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  // -----------------------------------------------------------------------
+  // setRoom
+  // -----------------------------------------------------------------------
+
+  describe("setRoom", () => {
+    it("accepts null without throwing", () => {
+      expect(() => dm.setRoom(null)).not.toThrow();
+    });
+
+    it("starts device change listener when room is set", () => {
+      dm.setRoom(mockRoom);
+      expect(navigator.mediaDevices.addEventListener).toHaveBeenCalledWith(
+        "devicechange",
+        expect.any(Function),
+      );
+    });
+
+    it("stops device change listener when room is set to null", () => {
+      dm.setRoom(mockRoom);
+      dm.setRoom(null);
+      expect(navigator.mediaDevices.removeEventListener).toHaveBeenCalledWith(
+        "devicechange",
+        expect.any(Function),
+      );
+    });
+
+    it("stops old listener before starting new one when room changes", () => {
+      dm.setRoom(mockRoom);
+      const firstHandler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      dm.setRoom(mockRoom);
+      expect(navigator.mediaDevices.removeEventListener).toHaveBeenCalledWith(
+        "devicechange",
+        firstHandler,
+      );
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // setAudioPipeline, setOnError, setOnToast
+  // -----------------------------------------------------------------------
+
+  describe("setAudioPipeline", () => {
+    it("accepts null without throwing", () => {
+      expect(() => dm.setAudioPipeline(null)).not.toThrow();
+    });
+
+    it("accepts a pipeline object", () => {
+      const pipeline = { setupAudioPipeline: vi.fn(), applyNoiseSuppressor: vi.fn(), removeNoiseSuppressor: vi.fn() } as any;
+      expect(() => dm.setAudioPipeline(pipeline)).not.toThrow();
+    });
+  });
+
+  describe("setOnError", () => {
+    it("accepts null without throwing", () => {
+      expect(() => dm.setOnError(null)).not.toThrow();
+    });
+  });
+
+  describe("setOnToast", () => {
+    it("accepts null without throwing", () => {
+      expect(() => dm.setOnToast(null)).not.toThrow();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // switchInputDevice
+  // -----------------------------------------------------------------------
+
+  describe("switchInputDevice", () => {
+    it("does nothing when no room is set", async () => {
+      await dm.switchInputDevice("device-1");
+      expect(mockRoom.switchActiveDevice).not.toHaveBeenCalled();
+    });
+
+    it("calls room.switchActiveDevice for non-empty deviceId", async () => {
+      dm.setRoom(mockRoom);
+      await dm.switchInputDevice("device-1");
+      expect(mockRoom.switchActiveDevice).toHaveBeenCalledWith("audioinput", "device-1");
+    });
+
+    it("re-enables microphone for empty deviceId (default fallback)", async () => {
+      dm.setRoom(mockRoom);
+      await dm.switchInputDevice("");
+      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(false);
+      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(true);
+    });
+
+    it("calls setupAudioPipeline on the pipeline after switch", async () => {
+      const pipeline = {
+        setupAudioPipeline: vi.fn(),
+        applyNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+        removeNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+      } as any;
+      dm.setRoom(mockRoom);
+      dm.setAudioPipeline(pipeline);
+      await dm.switchInputDevice("device-1");
+      expect(pipeline.setupAudioPipeline).toHaveBeenCalled();
+    });
+
+    it("applies enhanced noise suppression when enabled", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "enhancedNoiseSuppression") return true;
+        return defaultVal;
+      });
+      const pipeline = {
+        setupAudioPipeline: vi.fn(),
+        applyNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+        removeNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+      } as any;
+      dm.setRoom(mockRoom);
+      dm.setAudioPipeline(pipeline);
+      await dm.switchInputDevice("device-1");
+      expect(pipeline.applyNoiseSuppressor).toHaveBeenCalled();
+    });
+
+    it("removes noise suppression when not enabled", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "enhancedNoiseSuppression") return false;
+        return defaultVal;
+      });
+      const pipeline = {
+        setupAudioPipeline: vi.fn(),
+        applyNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+        removeNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+      } as any;
+      dm.setRoom(mockRoom);
+      dm.setAudioPipeline(pipeline);
+      await dm.switchInputDevice("device-1");
+      expect(pipeline.removeNoiseSuppressor).toHaveBeenCalled();
+    });
+
+    it("calls onError callback on device switch failure", async () => {
+      const onError = vi.fn();
+      dm.setRoom(mockRoom);
+      dm.setOnError(onError);
+      mockRoom.switchActiveDevice.mockRejectedValue(new Error("device error"));
+      await dm.switchInputDevice("device-1");
+      expect(onError).toHaveBeenCalledWith("Failed to switch microphone");
+    });
+
+    it("shows toast when pipeline setup fails", async () => {
+      const onToast = vi.fn();
+      const pipeline = {
+        setupAudioPipeline: vi.fn(() => { throw new Error("pipeline error"); }),
+        applyNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+        removeNoiseSuppressor: vi.fn().mockResolvedValue(undefined),
+      } as any;
+      dm.setRoom(mockRoom);
+      dm.setAudioPipeline(pipeline);
+      dm.setOnToast(onToast);
+      await dm.switchInputDevice("device-1");
+      expect(onToast).toHaveBeenCalledWith("Audio pipeline error after device switch");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // switchOutputDevice
+  // -----------------------------------------------------------------------
+
+  describe("switchOutputDevice", () => {
+    it("does nothing when no room is set", async () => {
+      await dm.switchOutputDevice("device-1");
+      // No throw
+    });
+
+    it("calls room.switchActiveDevice for audiooutput", async () => {
+      dm.setRoom(mockRoom);
+      await dm.switchOutputDevice("device-1");
+      expect(mockRoom.switchActiveDevice).toHaveBeenCalledWith("audiooutput", "device-1");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Device change detection (hot-swap)
+  // -----------------------------------------------------------------------
+
+  describe("handleDeviceChange", () => {
+    it("does nothing if room is null when change fires", async () => {
+      dm.setRoom(mockRoom);
+      // Capture the handler
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      // Set room to null before triggering
+      dm.setRoom(null);
+      // Trigger the handler (simulates device change event)
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+      // No crash expected
+    });
+
+    it("falls back to default input when saved device is removed", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "audioInputDevice") return "saved-device-id";
+        if (key === "audioOutputDevice") return "";
+        return defaultVal;
+      });
+      // The saved device is not in the returned list
+      mockGetLocalDevices.mockImplementation((kind: string) => {
+        if (kind === "audioinput") return Promise.resolve([{ deviceId: "other-device" }]);
+        return Promise.resolve([]);
+      });
+
+      const onToast = vi.fn();
+      dm.setRoom(mockRoom);
+      dm.setOnToast(onToast);
+
+      // Trigger device change
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      expect(mockSavePref).toHaveBeenCalledWith("audioInputDevice", "");
+      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(false);
+      expect(mockRoom.localParticipant.setMicrophoneEnabled).toHaveBeenCalledWith(true);
+      expect(onToast).toHaveBeenCalledWith("Audio device disconnected — switched to default");
+    });
+
+    it("does nothing if saved input device still exists", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "audioInputDevice") return "device-A";
+        if (key === "audioOutputDevice") return "";
+        return defaultVal;
+      });
+      mockGetLocalDevices.mockImplementation((kind: string) => {
+        if (kind === "audioinput") return Promise.resolve([{ deviceId: "device-A" }]);
+        return Promise.resolve([]);
+      });
+
+      dm.setRoom(mockRoom);
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      // Should not reset the saved device
+      expect(mockSavePref).not.toHaveBeenCalledWith("audioInputDevice", "");
+    });
+
+    it("does nothing if no saved device (empty string)", async () => {
+      mockLoadPref.mockImplementation((_key: string, defaultVal: unknown) => defaultVal);
+      mockGetLocalDevices.mockResolvedValue([]);
+
+      dm.setRoom(mockRoom);
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      expect(mockSavePref).not.toHaveBeenCalledWith("audioInputDevice", "");
+    });
+
+    it("falls back to default output when saved output device is removed", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "audioInputDevice") return "";
+        if (key === "audioOutputDevice") return "saved-output-id";
+        return defaultVal;
+      });
+      mockGetLocalDevices.mockImplementation((kind: string) => {
+        if (kind === "audioinput") return Promise.resolve([]);
+        if (kind === "audiooutput") return Promise.resolve([{ deviceId: "other-output" }]);
+        return Promise.resolve([]);
+      });
+
+      const onToast = vi.fn();
+      dm.setRoom(mockRoom);
+      dm.setOnToast(onToast);
+
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      expect(mockSavePref).toHaveBeenCalledWith("audioOutputDevice", "");
+      expect(onToast).toHaveBeenCalledWith("Audio output device disconnected — switched to default");
+    });
+
+    it("calls onError when mic fallback fails", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "audioInputDevice") return "saved-device-id";
+        if (key === "audioOutputDevice") return "";
+        return defaultVal;
+      });
+      mockGetLocalDevices.mockImplementation((kind: string) => {
+        if (kind === "audioinput") return Promise.resolve([]);
+        return Promise.resolve([]);
+      });
+      mockRoom.localParticipant.setMicrophoneEnabled.mockRejectedValue(new Error("no device"));
+
+      const onError = vi.fn();
+      dm.setRoom(mockRoom);
+      dm.setOnError(onError);
+
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      expect(onError).toHaveBeenCalledWith("No audio input device available");
+    });
+
+    it("debounces rapid device change events", async () => {
+      mockLoadPref.mockImplementation((_key: string, defaultVal: unknown) => defaultVal);
+      mockGetLocalDevices.mockResolvedValue([]);
+
+      dm.setRoom(mockRoom);
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+
+      // Fire multiple times in rapid succession
+      handler();
+      handler();
+      handler();
+
+      await vi.advanceTimersByTimeAsync(600);
+
+      // handleDeviceChange calls getLocalDevices twice (audioinput + audiooutput)
+      // but only ONE handleDeviceChange should run (debounced from 3 events)
+      expect(mockGetLocalDevices).toHaveBeenCalledTimes(2);
+      expect(mockGetLocalDevices).toHaveBeenCalledWith("audioinput");
+      expect(mockGetLocalDevices).toHaveBeenCalledWith("audiooutput");
+    });
+
+    it("shows toast when pipeline setup fails during fallback", async () => {
+      mockLoadPref.mockImplementation((key: string, defaultVal: unknown) => {
+        if (key === "audioInputDevice") return "saved-device-id";
+        if (key === "audioOutputDevice") return "";
+        return defaultVal;
+      });
+      mockGetLocalDevices.mockImplementation((kind: string) => {
+        if (kind === "audioinput") return Promise.resolve([]); // Device removed
+        return Promise.resolve([]);
+      });
+
+      const pipeline = {
+        setupAudioPipeline: vi.fn(() => { throw new Error("pipeline error"); }),
+      } as any;
+      const onToast = vi.fn();
+
+      dm.setRoom(mockRoom);
+      dm.setAudioPipeline(pipeline);
+      dm.setOnToast(onToast);
+
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      expect(onToast).toHaveBeenCalledWith("Audio pipeline error after device switch");
+    });
+
+    it("handles enumerate devices failure gracefully", async () => {
+      mockGetLocalDevices.mockRejectedValue(new Error("enumerate error"));
+
+      dm.setRoom(mockRoom);
+      const handler = (navigator.mediaDevices.addEventListener as any).mock.calls[0][1];
+      handler();
+      await vi.advanceTimersByTimeAsync(600);
+
+      // Should not throw or crash
+    });
+  });
+});
diff --git a/Client/tauri-client/tests/unit/media.test.ts b/Client/tauri-client/tests/unit/media.test.ts
new file mode 100644
index 00000000..17fa1c99
--- /dev/null
+++ b/Client/tauri-client/tests/unit/media.test.ts
@@ -0,0 +1,1290 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// ---------------------------------------------------------------------------
+// Hoisted mocks — must be set up before any import that references them.
+// ---------------------------------------------------------------------------
+
+const { fetchMock, observeMediaMock, loadPrefMock } = vi.hoisted(() => ({
+  fetchMock: vi.fn(),
+  observeMediaMock: vi.fn(),
+  loadPrefMock: vi.fn(),
+}));
+
+vi.mock("@tauri-apps/plugin-http", () => ({
+  fetch: fetchMock,
+}));
+
+vi.mock("@lib/logger", () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+vi.mock("@lib/media-visibility", () => ({
+  observeMedia: observeMediaMock,
+}));
+
+vi.mock("@lib/icons", () => ({
+  createIcon: (name: string, size: number) => {
+    const el = document.createElement("span");
+    el.setAttribute("data-icon", name);
+    el.setAttribute("data-size", String(size));
+    return el;
+  },
+}));
+
+vi.mock("@components/settings/helpers", () => ({
+  loadPref: loadPrefMock,
+}));
+
+vi.mock("../../src/components/message-list/attachments", () => ({
+  isSafeUrl: (url: string) => {
+    try {
+      const parsed = new URL(url, "https://placeholder");
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  },
+}));
+
+vi.mock("../../src/components/message-list/embeds", () => ({
+  renderGenericLinkPreview: (url: string) => {
+    const el = document.createElement("div");
+    el.className = "msg-embed-link";
+    el.textContent = url;
+    return el;
+  },
+}));
+
+// ---------------------------------------------------------------------------
+// Imports (after mocks)
+// ---------------------------------------------------------------------------
+
+import {
+  extractYouTubeId,
+  isDirectImageUrl,
+  renderInlineImage,
+  renderYouTubeEmbed,
+  openImageLightbox,
+  extractUrls,
+  renderUrlEmbeds,
+  clearMediaCaches,
+} from "../../src/components/message-list/media";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function oembedResponse(title: string) {
+  return {
+    ok: true,
+    json: vi.fn().mockResolvedValue({ title }),
+  };
+}
+
+function oembedFail() {
+  return {
+    ok: false,
+    json: vi.fn().mockResolvedValue(null),
+  };
+}
+
+/** Simulate image load event on the first <img> found inside an element. */
+function fireImgLoad(parent: HTMLElement): void {
+  const img = parent.querySelector("img") as HTMLImageElement | null;
+  if (img === null) throw new Error("No <img> found");
+  img.dispatchEvent(new Event("load"));
+}
+
+/** Simulate image error event on the first <img> found inside an element. */
+function fireImgError(parent: HTMLElement): void {
+  const img = parent.querySelector("img") as HTMLImageElement | null;
+  if (img === null) throw new Error("No <img> found");
+  img.dispatchEvent(new Event("error"));
+}
+
+/** Create a MouseEvent with specified client coordinates. */
+function mouseEvent(type: string, opts: { clientX?: number; clientY?: number; deltaY?: number } = {}): MouseEvent {
+  return new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    clientX: opts.clientX ?? 0,
+    clientY: opts.clientY ?? 0,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("media.ts", () => {
+  beforeEach(() => {
+    fetchMock.mockReset();
+    observeMediaMock.mockReset();
+    loadPrefMock.mockReset();
+    loadPrefMock.mockImplementation((_key: string, fallback: unknown) => fallback);
+    clearMediaCaches();
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    // Clean up any lightboxes left on body
+    document.querySelectorAll(".image-lightbox").forEach((el) => el.remove());
+    document.body.innerHTML = "";
+  });
+
+  // =========================================================================
+  // extractYouTubeId
+  // =========================================================================
+
+  describe("extractYouTubeId", () => {
+    it("extracts ID from youtube.com/watch?v=ID", () => {
+      expect(extractYouTubeId("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe("dQw4w9WgXcQ");
+    });
+
+    it("extracts ID from youtube.com (no www) /watch?v=ID", () => {
+      expect(extractYouTubeId("https://youtube.com/watch?v=abc123")).toBe("abc123");
+    });
+
+    it("extracts ID from youtu.be/ID", () => {
+      expect(extractYouTubeId("https://youtu.be/dQw4w9WgXcQ")).toBe("dQw4w9WgXcQ");
+    });
+
+    it("returns null for youtu.be with empty path", () => {
+      expect(extractYouTubeId("https://youtu.be/")).toBeNull();
+    });
+
+    it("extracts ID from youtube.com/embed/ID", () => {
+      expect(extractYouTubeId("https://www.youtube.com/embed/abc123")).toBe("abc123");
+    });
+
+    it("extracts ID from youtube.com (no www) /embed/ID", () => {
+      expect(extractYouTubeId("https://youtube.com/embed/xyz789")).toBe("xyz789");
+    });
+
+    it("returns null for youtube.com/embed/ with empty ID", () => {
+      expect(extractYouTubeId("https://www.youtube.com/embed/")).toBeNull();
+    });
+
+    it("extracts ID from youtube.com/shorts/ID", () => {
+      expect(extractYouTubeId("https://www.youtube.com/shorts/shortId1")).toBe("shortId1");
+    });
+
+    it("extracts ID from youtube.com (no www) /shorts/ID", () => {
+      expect(extractYouTubeId("https://youtube.com/shorts/shortId2")).toBe("shortId2");
+    });
+
+    it("returns null for youtube.com/shorts/ with empty ID", () => {
+      expect(extractYouTubeId("https://www.youtube.com/shorts/")).toBeNull();
+    });
+
+    it("returns null for non-YouTube URLs", () => {
+      expect(extractYouTubeId("https://example.com/watch?v=abc")).toBeNull();
+    });
+
+    it("returns null for invalid URL", () => {
+      expect(extractYouTubeId("not a url at all")).toBeNull();
+    });
+
+    it("returns null when youtube.com/watch has no v parameter", () => {
+      expect(extractYouTubeId("https://www.youtube.com/watch")).toBeNull();
+    });
+
+    it("returns null for youtube.com with non-watch path", () => {
+      expect(extractYouTubeId("https://www.youtube.com/channel/abc")).toBeNull();
+    });
+  });
+
+  // =========================================================================
+  // isDirectImageUrl
+  // =========================================================================
+
+  describe("isDirectImageUrl", () => {
+    it.each([".gif", ".png", ".jpg", ".jpeg", ".webp"])(
+      "returns true for %s extension",
+      (ext) => {
+        expect(isDirectImageUrl(`https://example.com/photo${ext}`)).toBe(true);
+      },
+    );
+
+    it("returns true for uppercase extensions", () => {
+      expect(isDirectImageUrl("https://example.com/PHOTO.PNG")).toBe(true);
+    });
+
+    it("returns false for non-image extensions", () => {
+      expect(isDirectImageUrl("https://example.com/doc.pdf")).toBe(false);
+    });
+
+    it("returns false for URLs without extensions", () => {
+      expect(isDirectImageUrl("https://example.com/page")).toBe(false);
+    });
+
+    it("returns false for invalid URLs", () => {
+      expect(isDirectImageUrl("not-a-url")).toBe(false);
+    });
+  });
+
+  // =========================================================================
+  // renderInlineImage
+  // =========================================================================
+
+  describe("renderInlineImage", () => {
+    it("creates a div.msg-image wrapper with an <img> inside", () => {
+      const wrap = renderInlineImage("https://example.com/photo.jpg");
+      expect(wrap.classList.contains("msg-image")).toBe(true);
+      const img = wrap.querySelector("img");
+      expect(img).not.toBeNull();
+      expect(img!.getAttribute("src")).toBe("https://example.com/photo.jpg");
+    });
+
+    it("sets default min-height of 200px when no cached height", () => {
+      const wrap = renderInlineImage("https://example.com/new.jpg");
+      expect(wrap.style.minHeight).toBe("200px");
+    });
+
+    it("uses cached height for subsequent renders of the same URL", () => {
+      const url = "https://example.com/cached.jpg";
+      // First render: trigger load to cache height
+      const wrap1 = renderInlineImage(url);
+      document.body.appendChild(wrap1);
+
+      // Simulate offsetHeight by defining the property
+      Object.defineProperty(wrap1, "offsetHeight", { value: 150, configurable: true });
+      fireImgLoad(wrap1);
+
+      // Second render should use cached height
+      const wrap2 = renderInlineImage(url);
+      expect(wrap2.style.minHeight).toBe("150px");
+    });
+
+    it("clears min-height on successful image load", () => {
+      const wrap = renderInlineImage("https://example.com/load.png");
+      document.body.appendChild(wrap);
+
+      Object.defineProperty(wrap, "offsetHeight", { value: 100, configurable: true });
+      fireImgLoad(wrap);
+
+      expect(wrap.style.minHeight).toBe("");
+    });
+
+    it("clears min-height on image error", () => {
+      const wrap = renderInlineImage("https://example.com/broken.png");
+      document.body.appendChild(wrap);
+
+      fireImgError(wrap);
+
+      expect(wrap.style.minHeight).toBe("");
+    });
+
+    it("does not cache height of 0", () => {
+      const url = "https://example.com/zero-height.png";
+      const wrap = renderInlineImage(url);
+      document.body.appendChild(wrap);
+
+      Object.defineProperty(wrap, "offsetHeight", { value: 0, configurable: true });
+      fireImgLoad(wrap);
+
+      // Second render should still use default 200px because 0 was not cached
+      const wrap2 = renderInlineImage(url);
+      expect(wrap2.style.minHeight).toBe("200px");
+    });
+
+    it("adds crossorigin attribute for GIF URLs", () => {
+      const wrap = renderInlineImage("https://example.com/anim.gif");
+      const img = wrap.querySelector("img")!;
+      expect(img.getAttribute("crossorigin")).toBe("anonymous");
+    });
+
+    it("does not add crossorigin attribute for non-GIF URLs", () => {
+      const wrap = renderInlineImage("https://example.com/photo.png");
+      const img = wrap.querySelector("img")!;
+      expect(img.hasAttribute("crossorigin")).toBe(false);
+    });
+
+    it("calls observeMedia for GIF after load (animateGifs enabled)", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => {
+        if (key === "animateGifs") return true;
+        return fallback;
+      });
+
+      const url = "https://example.com/animated.gif";
+      const wrap = renderInlineImage(url);
+      document.body.appendChild(wrap);
+
+      const img = wrap.querySelector("img")!;
+      // Fire load - the second "load" listener (GIF-specific) should call observeMedia
+      img.dispatchEvent(new Event("load"));
+
+      expect(observeMediaMock).toHaveBeenCalledWith(img, url, wrap, false);
+    });
+
+    it("calls observeMedia with startFrozen=true when animateGifs is disabled", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => {
+        if (key === "animateGifs") return false;
+        return fallback;
+      });
+
+      const url = "https://example.com/frozen.gif";
+      const wrap = renderInlineImage(url);
+      document.body.appendChild(wrap);
+
+      const img = wrap.querySelector("img")!;
+      img.dispatchEvent(new Event("load"));
+
+      expect(observeMediaMock).toHaveBeenCalledWith(img, url, wrap, true);
+    });
+
+    it("does not call observeMedia for non-GIF images", () => {
+      const wrap = renderInlineImage("https://example.com/photo.png");
+      document.body.appendChild(wrap);
+
+      fireImgLoad(wrap);
+
+      expect(observeMediaMock).not.toHaveBeenCalled();
+    });
+
+    it("opens lightbox on image click", () => {
+      const wrap = renderInlineImage("https://example.com/click.jpg");
+      document.body.appendChild(wrap);
+
+      const img = wrap.querySelector("img")!;
+      img.click();
+
+      const lightbox = document.body.querySelector(".image-lightbox");
+      expect(lightbox).not.toBeNull();
+    });
+  });
+
+  // =========================================================================
+  // Image height cache eviction
+  // =========================================================================
+
+  describe("image height cache eviction", () => {
+    it("evicts the oldest entry when cache exceeds MAX_IMAGE_HEIGHT_CACHE", () => {
+      // Fill the cache with 500 entries then add one more
+      for (let i = 0; i < 501; i++) {
+        const url = `https://example.com/img-${i}.jpg`;
+        const wrap = renderInlineImage(url);
+        document.body.appendChild(wrap);
+        Object.defineProperty(wrap, "offsetHeight", { value: 100 + i, configurable: true });
+        fireImgLoad(wrap);
+      }
+
+      // The first URL should have been evicted - renders with default 200px
+      const wrap = renderInlineImage("https://example.com/img-0.jpg");
+      expect(wrap.style.minHeight).toBe("200px");
+
+      // The second URL should still be cached
+      const wrap2 = renderInlineImage("https://example.com/img-1.jpg");
+      expect(wrap2.style.minHeight).toBe("101px");
+    });
+  });
+
+  // =========================================================================
+  // isGifUrl (tested indirectly through renderInlineImage)
+  // =========================================================================
+
+  describe("isGifUrl (indirect)", () => {
+    it("identifies .gif extension as GIF", () => {
+      const wrap = renderInlineImage("https://example.com/img.gif");
+      expect(wrap.querySelector("img")!.getAttribute("crossorigin")).toBe("anonymous");
+    });
+
+    it("does not identify .png as GIF", () => {
+      const wrap = renderInlineImage("https://example.com/img.png");
+      expect(wrap.querySelector("img")!.hasAttribute("crossorigin")).toBe(false);
+    });
+
+    it("handles malformed URL gracefully in GIF check", () => {
+      // isGifUrl catches URL parse errors — this should not throw
+      // We test by providing a URL that fails new URL() but still works
+      // for image rendering. Since renderInlineImage doesn't validate URLs,
+      // it just passes through. The isGifUrl uses a placeholder base.
+      const wrap = renderInlineImage("https://example.com/image.GIF");
+      // .GIF (uppercase) should be detected as GIF because pathname.toLowerCase()
+      expect(wrap.querySelector("img")!.getAttribute("crossorigin")).toBe("anonymous");
+    });
+  });
+
+  // =========================================================================
+  // renderYouTubeEmbed
+  // =========================================================================
+
+  describe("renderYouTubeEmbed", () => {
+    it("renders a YouTube embed with thumbnail and play button", () => {
+      fetchMock.mockResolvedValue(oembedResponse("Test Video"));
+
+      const embed = renderYouTubeEmbed("abc123", "https://www.youtube.com/watch?v=abc123");
+      document.body.appendChild(embed);
+
+      expect(embed.classList.contains("msg-embed-youtube")).toBe(true);
+      expect(embed.querySelector(".msg-embed-host")?.textContent).toBe("YouTube");
+      expect(embed.querySelector(".msg-embed-thumb")).not.toBeNull();
+      expect(embed.querySelector(".msg-embed-play")).not.toBeNull();
+    });
+
+    it("shows 'Loading...' while fetching the title", () => {
+      fetchMock.mockReturnValue(new Promise(() => {})); // Never resolves
+
+      const embed = renderYouTubeEmbed("pending", "https://www.youtube.com/watch?v=pending");
+      const title = embed.querySelector(".msg-embed-yt-title");
+      expect(title?.textContent).toBe("Loading...");
+    });
+
+    it("updates title when oembed fetch succeeds", async () => {
+      fetchMock.mockResolvedValue(oembedResponse("My Great Video"));
+
+      const embed = renderYouTubeEmbed("success1", "https://www.youtube.com/watch?v=success1");
+      document.body.appendChild(embed);
+
+      const title = embed.querySelector(".msg-embed-yt-title")!;
+      await vi.waitFor(() => {
+        expect(title.textContent).toBe("My Great Video");
+      });
+    });
+
+    it("caches the title and reuses it on subsequent renders", async () => {
+      fetchMock.mockResolvedValue(oembedResponse("Cached Title"));
+
+      const embed1 = renderYouTubeEmbed("cached1", "https://www.youtube.com/watch?v=cached1");
+      document.body.appendChild(embed1);
+
+      await vi.waitFor(() => {
+        expect(embed1.querySelector(".msg-embed-yt-title")?.textContent).toBe("Cached Title");
+      });
+
+      // Second render should use cache
+      const embed2 = renderYouTubeEmbed("cached1", "https://www.youtube.com/watch?v=cached1");
+      expect(embed2.querySelector(".msg-embed-yt-title")?.textContent).toBe("Cached Title");
+      expect(fetchMock).toHaveBeenCalledTimes(1); // Only one fetch
+    });
+
+    it("falls back to 'YouTube Video' when oembed returns no title", async () => {
+      fetchMock.mockResolvedValue({
+        ok: true,
+        json: vi.fn().mockResolvedValue({}),
+      });
+
+      const embed = renderYouTubeEmbed("notitle", "https://www.youtube.com/watch?v=notitle");
+      document.body.appendChild(embed);
+
+      await vi.waitFor(() => {
+        expect(embed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("falls back to 'YouTube Video' when oembed returns null", async () => {
+      fetchMock.mockResolvedValue({
+        ok: true,
+        json: vi.fn().mockResolvedValue(null),
+      });
+
+      const embed = renderYouTubeEmbed("nulldata", "https://www.youtube.com/watch?v=nulldata");
+      document.body.appendChild(embed);
+
+      await vi.waitFor(() => {
+        expect(embed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("falls back to 'YouTube Video' when oembed fetch fails (non-ok)", async () => {
+      fetchMock.mockResolvedValue(oembedFail());
+
+      const embed = renderYouTubeEmbed("fail1", "https://www.youtube.com/watch?v=fail1");
+      document.body.appendChild(embed);
+
+      await vi.waitFor(() => {
+        expect(embed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("falls back to 'YouTube Video' when oembed fetch rejects (network error)", async () => {
+      fetchMock.mockRejectedValue(new Error("Network error"));
+
+      const embed = renderYouTubeEmbed("neterr", "https://www.youtube.com/watch?v=neterr");
+      document.body.appendChild(embed);
+
+      await vi.waitFor(() => {
+        expect(embed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("renders fallback link for invalid video ID (XSS prevention)", () => {
+      const embed = renderYouTubeEmbed(
+        "<script>alert(1)</script>",
+        "https://www.youtube.com/watch?v=<script>alert(1)</script>",
+      );
+      document.body.appendChild(embed);
+
+      // Should render a plain link fallback, not YouTube embed
+      expect(embed.classList.contains("msg-embed-youtube")).toBe(false);
+      expect(embed.classList.contains("msg-embed")).toBe(true);
+      const link = embed.querySelector("a");
+      expect(link).not.toBeNull();
+    });
+
+    it("replaces thumbnail with iframe on click", () => {
+      fetchMock.mockResolvedValue(oembedResponse("Click Test"));
+
+      const embed = renderYouTubeEmbed("click1", "https://www.youtube.com/watch?v=click1");
+      document.body.appendChild(embed);
+
+      const thumbWrap = embed.querySelector(".msg-embed-yt-player")!;
+      expect(thumbWrap.querySelector("img")).not.toBeNull();
+      expect(thumbWrap.querySelector("iframe")).toBeNull();
+
+      (thumbWrap as HTMLElement).click();
+
+      expect(thumbWrap.querySelector("iframe")).not.toBeNull();
+      expect(thumbWrap.querySelector("img")).toBeNull();
+      const iframe = thumbWrap.querySelector("iframe")!;
+      expect(iframe.src).toContain("click1");
+      expect(iframe.src).toContain("autoplay=1");
+      expect(iframe.getAttribute("allowfullscreen")).toBe("");
+    });
+
+    it("only replaces thumbnail once (click handler is {once: true})", () => {
+      fetchMock.mockResolvedValue(oembedResponse("Once Test"));
+
+      const embed = renderYouTubeEmbed("once1", "https://www.youtube.com/watch?v=once1");
+      document.body.appendChild(embed);
+
+      const thumbWrap = embed.querySelector(".msg-embed-yt-player") as HTMLElement;
+      thumbWrap.click();
+
+      const iframe = thumbWrap.querySelector("iframe")!;
+      const originalSrc = iframe.src;
+
+      // Second click should not replace iframe again
+      thumbWrap.click();
+      expect(thumbWrap.querySelector("iframe")!.src).toBe(originalSrc);
+    });
+
+    it("evicts oldest YouTube title cache entry when exceeding limit", async () => {
+      // Fill ytTitleCache to its max (200) and verify eviction
+      for (let i = 0; i < 201; i++) {
+        fetchMock.mockResolvedValueOnce(oembedResponse(`Title ${i}`));
+        const embed = renderYouTubeEmbed(`vid${i}`, `https://www.youtube.com/watch?v=vid${i}`);
+        document.body.appendChild(embed);
+      }
+
+      await vi.waitFor(() => {
+        // Last video should have its title
+        const last = document.body.querySelector(
+          `[href="https://www.youtube.com/watch?v=vid200"]`,
+        );
+        expect(last?.textContent).toBe("Title 200");
+      });
+    });
+
+    it("evicts oldest cache entry on catch branch too", async () => {
+      // First fill 200 entries via successful fetches
+      for (let i = 0; i < 200; i++) {
+        fetchMock.mockResolvedValueOnce(oembedResponse(`Title ${i}`));
+        const embed = renderYouTubeEmbed(`errv${i}`, `https://www.youtube.com/watch?v=errv${i}`);
+        document.body.appendChild(embed);
+      }
+
+      await vi.waitFor(() => {
+        const link = document.body.querySelector(
+          `[href="https://www.youtube.com/watch?v=errv199"]`,
+        );
+        expect(link?.textContent).toBe("Title 199");
+      });
+
+      // Now add one more that fails (triggers catch branch)
+      fetchMock.mockRejectedValueOnce(new Error("fail"));
+      const failEmbed = renderYouTubeEmbed("errv200", "https://www.youtube.com/watch?v=errv200");
+      document.body.appendChild(failEmbed);
+
+      await vi.waitFor(() => {
+        expect(failEmbed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("uses fallback title when cache generation changes during successful fetch", async () => {
+      let resolveFetch: ((value: ReturnType<typeof oembedResponse>) => void) | null = null;
+      fetchMock.mockImplementationOnce(
+        () => new Promise((resolve) => { resolveFetch = resolve; }),
+      );
+
+      const embed = renderYouTubeEmbed("gen1", "https://www.youtube.com/watch?v=gen1");
+      document.body.appendChild(embed);
+
+      const title = embed.querySelector(".msg-embed-yt-title")!;
+      expect(title.textContent).toBe("Loading...");
+
+      // Clear caches (bumps generation)
+      clearMediaCaches();
+
+      // Resolve the fetch after cache clear
+      resolveFetch?.(oembedResponse("Stale Title"));
+
+      await vi.waitFor(() => {
+        expect(title.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("uses fallback title when cache generation changes during failed fetch", async () => {
+      let rejectFetch: ((reason: Error) => void) | null = null;
+      fetchMock.mockImplementationOnce(
+        () => new Promise((_resolve, reject) => { rejectFetch = reject; }),
+      );
+
+      const embed = renderYouTubeEmbed("gen2", "https://www.youtube.com/watch?v=gen2");
+      document.body.appendChild(embed);
+
+      clearMediaCaches();
+      rejectFetch?.(new Error("Network error"));
+
+      await vi.waitFor(() => {
+        expect(embed.querySelector(".msg-embed-yt-title")?.textContent).toBe("YouTube Video");
+      });
+    });
+
+    it("sets thumbnail image src and alt correctly", () => {
+      fetchMock.mockResolvedValue(oembedResponse("Thumb Test"));
+
+      const embed = renderYouTubeEmbed("thumb1", "https://www.youtube.com/watch?v=thumb1");
+      const thumb = embed.querySelector(".msg-embed-thumb") as HTMLImageElement;
+      expect(thumb.src).toContain("thumb1");
+      expect(thumb.getAttribute("alt")).toBe("YouTube video");
+      expect(thumb.getAttribute("loading")).toBe("lazy");
+    });
+
+    it("title link has correct href and target attributes", () => {
+      fetchMock.mockResolvedValue(oembedResponse("Link Test"));
+      const originalUrl = "https://www.youtube.com/watch?v=link1";
+
+      const embed = renderYouTubeEmbed("link1", originalUrl);
+      const titleLink = embed.querySelector(".msg-embed-yt-title") as HTMLAnchorElement;
+      expect(titleLink.getAttribute("href")).toBe(originalUrl);
+      expect(titleLink.getAttribute("target")).toBe("_blank");
+      expect(titleLink.getAttribute("rel")).toBe("noopener noreferrer");
+    });
+  });
+
+  // =========================================================================
+  // openImageLightbox
+  // =========================================================================
+
+  describe("openImageLightbox", () => {
+    it("appends a lightbox overlay to document.body", () => {
+      openImageLightbox("https://example.com/test.png", "Test image");
+
+      const lightbox = document.body.querySelector(".image-lightbox");
+      expect(lightbox).not.toBeNull();
+    });
+
+    it("contains an image with the provided src and alt", () => {
+      openImageLightbox("https://example.com/pic.jpg", "My photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLImageElement;
+      expect(img).not.toBeNull();
+      expect(img.getAttribute("src")).toBe("https://example.com/pic.jpg");
+      expect(img.getAttribute("alt")).toBe("My photo");
+    });
+
+    it("contains a close button", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const closeBtn = document.body.querySelector(".image-lightbox-close");
+      expect(closeBtn).not.toBeNull();
+    });
+
+    it("closes on close button click", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const closeBtn = document.body.querySelector(".image-lightbox-close") as HTMLElement;
+      closeBtn.click();
+
+      expect(document.body.querySelector(".image-lightbox")).toBeNull();
+    });
+
+    it("closes on overlay background click", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const overlay = document.body.querySelector(".image-lightbox") as HTMLElement;
+      // Click the overlay itself (not a child)
+      overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+      expect(document.body.querySelector(".image-lightbox")).toBeNull();
+    });
+
+    it("does not close when clicking on the image", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      // Simulate a click where mouse didn't move (dx=0, dy=0)
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 100, clientY: 100, bubbles: true }));
+      img.dispatchEvent(new MouseEvent("click", { clientX: 100, clientY: 100, bubbles: true }));
+
+      // The image click toggles zoom, not close. Lightbox should still exist.
+      expect(document.body.querySelector(".image-lightbox")).not.toBeNull();
+    });
+
+    it("closes on Escape key", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+      expect(document.body.querySelector(".image-lightbox")).toBeNull();
+    });
+
+    it("zooms in on + key", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "+", bubbles: true }));
+
+      // After zoom, transform should contain scale > 1
+      expect(img.style.transform).toContain("scale(");
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      const scale = parseFloat(scaleMatch![1]);
+      expect(scale).toBeGreaterThan(1);
+    });
+
+    it("zooms in on = key (same as +)", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "=", bubbles: true }));
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      const scale = parseFloat(scaleMatch![1]);
+      expect(scale).toBeGreaterThan(1);
+    });
+
+    it("zooms out on - key", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "-", bubbles: true }));
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      const scale = parseFloat(scaleMatch![1]);
+      expect(scale).toBeLessThan(1);
+    });
+
+    it("resets zoom on 0 key", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      // Zoom in first
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "+", bubbles: true }));
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "+", bubbles: true }));
+
+      // Reset
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "0", bubbles: true }));
+
+      expect(img.style.transform).toContain("scale(1)");
+      expect(img.style.transform).toContain("translate(0px, 0px)");
+    });
+
+    it("toggles zoom on image click (zoom in when not zoomed)", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      // Mock getBoundingClientRect for the click zoom calculation
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0,
+        top: 0,
+        width: 400,
+        height: 300,
+        right: 400,
+        bottom: 300,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      });
+
+      // Simulate mousedown then click at same position (no drag)
+      img.dispatchEvent(new MouseEvent("mousedown", {
+        clientX: 200,
+        clientY: 150,
+        bubbles: true,
+        cancelable: true,
+      }));
+      img.dispatchEvent(new MouseEvent("click", {
+        clientX: 200,
+        clientY: 150,
+        bubbles: true,
+        cancelable: true,
+      }));
+
+      // Should zoom to scale 3
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      expect(parseFloat(scaleMatch![1])).toBe(3);
+    });
+
+    it("toggles zoom on image click (zoom out when zoomed in)", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Zoom in first
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+      img.dispatchEvent(new MouseEvent("click", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+
+      // Now click again to zoom out (scale > 1.1 so it resets)
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+      img.dispatchEvent(new MouseEvent("click", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+
+      expect(img.style.transform).toContain("scale(1)");
+    });
+
+    it("does not toggle zoom when mouse moves during click (drag gesture)", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      // Mousedown at one position, click at another (moved > 5px)
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 100, clientY: 100, bubbles: true, cancelable: true }));
+      img.dispatchEvent(new MouseEvent("click", { clientX: 120, clientY: 100, bubbles: true, cancelable: true }));
+
+      // Should remain at scale(1) because dx=20 > 5
+      expect(img.style.transform).toBe("");
+    });
+
+    it("supports panning when zoomed in", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      const overlay = document.body.querySelector(".image-lightbox") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Zoom in first
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+      img.dispatchEvent(new MouseEvent("click", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+
+      // Now start panning (mousedown while zoomed)
+      img.dispatchEvent(new MouseEvent("mousedown", { clientX: 200, clientY: 150, bubbles: true, cancelable: true }));
+      expect(overlay.classList.contains("dragging")).toBe(true);
+
+      // Move mouse
+      document.dispatchEvent(new MouseEvent("mousemove", { clientX: 250, clientY: 200, bubbles: true }));
+
+      // Transform should reflect pan offset
+      expect(img.style.transform).toContain("translate(");
+
+      // Mouse up ends dragging
+      document.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+      expect(overlay.classList.contains("dragging")).toBe(false);
+    });
+
+    it("mouseup does nothing when not dragging", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+      const overlay = document.body.querySelector(".image-lightbox") as HTMLElement;
+
+      // mouseup without prior drag should not throw or change anything
+      document.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+      expect(overlay.classList.contains("dragging")).toBe(false);
+    });
+
+    it("mousemove does nothing when not dragging", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      // mousemove without prior drag should not alter transform
+      document.dispatchEvent(new MouseEvent("mousemove", { clientX: 300, clientY: 300, bubbles: true }));
+      expect(img.style.transform).toBe("");
+    });
+
+    it("handles wheel zoom in", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      const imgWrap = document.body.querySelector(".image-lightbox-wrap") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Scroll up (negative deltaY = zoom in)
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: -100,
+        clientX: 200,
+        clientY: 150,
+        bubbles: true,
+        cancelable: true,
+      });
+      imgWrap.dispatchEvent(wheelEvent);
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      expect(parseFloat(scaleMatch![1])).toBeGreaterThan(1);
+    });
+
+    it("handles wheel zoom out", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      const imgWrap = document.body.querySelector(".image-lightbox-wrap") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Scroll down (positive deltaY = zoom out)
+      const wheelEvent = new WheelEvent("wheel", {
+        deltaY: 100,
+        clientX: 200,
+        clientY: 150,
+        bubbles: true,
+        cancelable: true,
+      });
+      imgWrap.dispatchEvent(wheelEvent);
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(scaleMatch).not.toBeNull();
+      expect(parseFloat(scaleMatch![1])).toBeLessThan(1);
+    });
+
+    it("clamps wheel zoom to min scale 0.5", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      const imgWrap = document.body.querySelector(".image-lightbox-wrap") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Zoom out many times
+      for (let i = 0; i < 20; i++) {
+        imgWrap.dispatchEvent(new WheelEvent("wheel", {
+          deltaY: 100, clientX: 200, clientY: 150, bubbles: true, cancelable: true,
+        }));
+      }
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(parseFloat(scaleMatch![1])).toBeGreaterThanOrEqual(0.5);
+    });
+
+    it("clamps wheel zoom to max scale 10", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+      const imgWrap = document.body.querySelector(".image-lightbox-wrap") as HTMLElement;
+
+      vi.spyOn(img, "getBoundingClientRect").mockReturnValue({
+        left: 0, top: 0, width: 400, height: 300,
+        right: 400, bottom: 300, x: 0, y: 0, toJSON: () => ({}),
+      });
+
+      // Zoom in many times
+      for (let i = 0; i < 50; i++) {
+        imgWrap.dispatchEvent(new WheelEvent("wheel", {
+          deltaY: -100, clientX: 200, clientY: 150, bubbles: true, cancelable: true,
+        }));
+      }
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(parseFloat(scaleMatch![1])).toBeLessThanOrEqual(10);
+    });
+
+    it("clamps keyboard zoom to max scale 10", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      for (let i = 0; i < 50; i++) {
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "+", bubbles: true }));
+      }
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(parseFloat(scaleMatch![1])).toBeLessThanOrEqual(10);
+    });
+
+    it("clamps keyboard zoom to min scale 0.5", () => {
+      openImageLightbox("https://example.com/pic.jpg", "Photo");
+      const img = document.body.querySelector(".image-lightbox img") as HTMLElement;
+
+      for (let i = 0; i < 50; i++) {
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "-", bubbles: true }));
+      }
+
+      const scaleMatch = img.style.transform.match(/scale\(([^)]+)\)/);
+      expect(parseFloat(scaleMatch![1])).toBeGreaterThanOrEqual(0.5);
+    });
+
+    it("closes previous lightbox when opening a new one", () => {
+      openImageLightbox("https://example.com/first.png", "First");
+      expect(document.body.querySelectorAll(".image-lightbox").length).toBe(1);
+
+      openImageLightbox("https://example.com/second.png", "Second");
+
+      // Should have replaced the first one
+      const lightboxes = document.body.querySelectorAll(".image-lightbox");
+      expect(lightboxes.length).toBe(1);
+      const img = lightboxes[0].querySelector("img") as HTMLImageElement;
+      expect(img.getAttribute("src")).toBe("https://example.com/second.png");
+    });
+
+    it("cleans up document-level listeners on close", () => {
+      openImageLightbox("https://example.com/cleanup.png", "Cleanup");
+
+      const closeBtn = document.body.querySelector(".image-lightbox-close") as HTMLElement;
+      closeBtn.click();
+
+      // After close, key events should not error or affect anything
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      document.dispatchEvent(new MouseEvent("mousemove", { clientX: 100, clientY: 100, bubbles: true }));
+      document.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+    });
+  });
+
+  // =========================================================================
+  // extractUrls
+  // =========================================================================
+
+  describe("extractUrls", () => {
+    it("extracts a single URL", () => {
+      const urls = extractUrls("Check out https://example.com");
+      expect(urls).toEqual(["https://example.com"]);
+    });
+
+    it("extracts multiple URLs", () => {
+      const urls = extractUrls("Visit https://a.com and https://b.com");
+      expect(urls).toEqual(["https://a.com", "https://b.com"]);
+    });
+
+    it("returns empty array for text without URLs", () => {
+      const urls = extractUrls("Just plain text here");
+      expect(urls).toEqual([]);
+    });
+
+    it("skips URLs inside code blocks", () => {
+      const urls = extractUrls("```\nhttps://hidden.com\n```");
+      expect(urls).toEqual([]);
+    });
+
+    it("skips URLs inside inline code", () => {
+      const urls = extractUrls("See `https://hidden.com` here");
+      expect(urls).toEqual([]);
+    });
+
+    it("extracts URLs outside code blocks but not inside", () => {
+      const urls = extractUrls("https://visible.com ```https://hidden.com```");
+      expect(urls).toEqual(["https://visible.com"]);
+    });
+
+    it("extracts http and https URLs", () => {
+      const urls = extractUrls("http://insecure.com https://secure.com");
+      expect(urls).toEqual(["http://insecure.com", "https://secure.com"]);
+    });
+  });
+
+  // =========================================================================
+  // renderUrlEmbeds
+  // =========================================================================
+
+  describe("renderUrlEmbeds", () => {
+    it("renders YouTube embed for YouTube URLs", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+      fetchMock.mockResolvedValue(oembedResponse("YT Video"));
+
+      const fragment = renderUrlEmbeds("Check this: https://www.youtube.com/watch?v=test1");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-embed-youtube")).not.toBeNull();
+    });
+
+    it("renders inline image for direct image URLs", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+
+      const fragment = renderUrlEmbeds("Image: https://example.com/photo.png");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-image")).not.toBeNull();
+    });
+
+    it("renders generic link preview for non-image, non-YouTube URLs", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+
+      const fragment = renderUrlEmbeds("Check https://example.com/article");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-embed-link")).not.toBeNull();
+    });
+
+    it("deduplicates URLs in the same message", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+
+      const url = "https://example.com/photo.jpg";
+      const fragment = renderUrlEmbeds(`${url} and ${url}`);
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      const images = container.querySelectorAll(".msg-image");
+      expect(images.length).toBe(1);
+    });
+
+    it("skips YouTube embed when showEmbeds is disabled", () => {
+      loadPrefMock.mockImplementation((key: string, _fallback: unknown) => {
+        if (key === "showEmbeds") return false;
+        return true;
+      });
+
+      const fragment = renderUrlEmbeds("https://www.youtube.com/watch?v=skip1");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-embed-youtube")).toBeNull();
+    });
+
+    it("skips inline images when inlineMedia is disabled", () => {
+      loadPrefMock.mockImplementation((key: string, _fallback: unknown) => {
+        if (key === "inlineMedia") return false;
+        return true;
+      });
+
+      const fragment = renderUrlEmbeds("https://example.com/photo.png");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-image")).toBeNull();
+    });
+
+    it("skips link previews when showLinkPreviews is disabled", () => {
+      loadPrefMock.mockImplementation((key: string, _fallback: unknown) => {
+        if (key === "showLinkPreviews") return false;
+        return true;
+      });
+
+      const fragment = renderUrlEmbeds("https://example.com/article");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-embed-link")).toBeNull();
+    });
+
+    it("produces empty fragment when all preferences are disabled", () => {
+      loadPrefMock.mockReturnValue(false);
+
+      const fragment = renderUrlEmbeds(
+        "https://www.youtube.com/watch?v=abc https://example.com/pic.png https://example.com/page",
+      );
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.children.length).toBe(0);
+    });
+
+    it("does not render embeds for unsafe URLs", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+
+      // ftp:// is not a safe URL (only http/https)
+      const fragment = renderUrlEmbeds("ftp://example.com/photo.png");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      // ftp URL won't match URL_REGEX (which only matches http/https)
+      expect(container.children.length).toBe(0);
+    });
+
+    it("renders multiple different embed types in a single message", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+      fetchMock.mockResolvedValue(oembedResponse("Video"));
+
+      const fragment = renderUrlEmbeds(
+        "Video: https://www.youtube.com/watch?v=multi1 Image: https://example.com/pic.jpg Article: https://example.com/news",
+      );
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.querySelector(".msg-embed-youtube")).not.toBeNull();
+      expect(container.querySelector(".msg-image")).not.toBeNull();
+      expect(container.querySelector(".msg-embed-link")).not.toBeNull();
+    });
+
+    it("produces empty fragment for message with no URLs", () => {
+      loadPrefMock.mockImplementation((key: string, fallback: unknown) => fallback);
+
+      const fragment = renderUrlEmbeds("Just a plain message with no links");
+
+      const container = document.createElement("div");
+      container.appendChild(fragment);
+      expect(container.children.length).toBe(0);
+    });
+  });
+
+  // =========================================================================
+  // clearMediaCaches
+  // =========================================================================
+
+  describe("clearMediaCaches", () => {
+    it("clears image height cache", () => {
+      const url = "https://example.com/clear-test.jpg";
+      // First render and cache height
+      const wrap = renderInlineImage(url);
+      document.body.appendChild(wrap);
+      Object.defineProperty(wrap, "offsetHeight", { value: 250, configurable: true });
+      fireImgLoad(wrap);
+
+      // Verify cached
+      const wrap2 = renderInlineImage(url);
+      expect(wrap2.style.minHeight).toBe("250px");
+
+      // Clear caches
+      clearMediaCaches();
+
+      // Should now use default
+      const wrap3 = renderInlineImage(url);
+      expect(wrap3.style.minHeight).toBe("200px");
+    });
+
+    it("clears YouTube title cache", async () => {
+      fetchMock.mockResolvedValueOnce(oembedResponse("Original Title"));
+
+      const embed1 = renderYouTubeEmbed("clear1", "https://www.youtube.com/watch?v=clear1");
+      document.body.appendChild(embed1);
+
+      await vi.waitFor(() => {
+        expect(embed1.querySelector(".msg-embed-yt-title")?.textContent).toBe("Original Title");
+      });
+
+      clearMediaCaches();
+
+      // After clearing, should fetch again
+      fetchMock.mockResolvedValueOnce(oembedResponse("New Title"));
+
+      const embed2 = renderYouTubeEmbed("clear1", "https://www.youtube.com/watch?v=clear1");
+      document.body.appendChild(embed2);
+
+      // Should show "Loading..." initially (not cached)
+      expect(embed2.querySelector(".msg-embed-yt-title")?.textContent).toBe("Loading...");
+
+      await vi.waitFor(() => {
+        expect(embed2.querySelector(".msg-embed-yt-title")?.textContent).toBe("New Title");
+      });
+    });
+  });
+});
diff --git a/Client/tauri-client/tests/unit/overlay-managers.test.ts b/Client/tauri-client/tests/unit/overlay-managers.test.ts
index db16fdd9..8bfe0f06 100644
--- a/Client/tauri-client/tests/unit/overlay-managers.test.ts
+++ b/Client/tauri-client/tests/unit/overlay-managers.test.ts
@@ -12,6 +12,11 @@ const {
   mockPinnedMessagesMount,
   mockPinnedMessagesDestroy,
   mockShowToast,
+  mockQuickSwitcherMount,
+  mockQuickSwitcherDestroy,
+  mockSearchOverlayMount,
+  mockSearchOverlayDestroy,
+  mockSetActiveChannel,
 } = vi.hoisted(() => ({
   mockLogError: vi.fn(),
   mockInviteManagerMount: vi.fn(),
@@ -19,6 +24,11 @@ const {
   mockPinnedMessagesMount: vi.fn(),
   mockPinnedMessagesDestroy: vi.fn(),
   mockShowToast: vi.fn(),
+  mockQuickSwitcherMount: vi.fn(),
+  mockQuickSwitcherDestroy: vi.fn(),
+  mockSearchOverlayMount: vi.fn(),
+  mockSearchOverlayDestroy: vi.fn(),
+  mockSetActiveChannel: vi.fn(),
 }));
 
 vi.mock("@lib/logger", () => ({
@@ -32,8 +42,8 @@ vi.mock("@lib/logger", () => ({
 
 vi.mock("@components/QuickSwitcher", () => ({
   createQuickSwitcher: vi.fn(() => ({
-    mount: vi.fn(),
-    destroy: vi.fn(),
+    mount: mockQuickSwitcherMount,
+    destroy: mockQuickSwitcherDestroy,
   })),
 }));
 
@@ -51,8 +61,15 @@ vi.mock("@components/PinnedMessages", () => ({
   })),
 }));
 
+vi.mock("@components/SearchOverlay", () => ({
+  createSearchOverlay: vi.fn(() => ({
+    mount: mockSearchOverlayMount,
+    destroy: mockSearchOverlayDestroy,
+  })),
+}));
+
 vi.mock("@stores/channels.store", () => ({
-  setActiveChannel: vi.fn(),
+  setActiveChannel: mockSetActiveChannel,
 }));
 
 vi.mock("@lib/toast", () => ({
@@ -65,11 +82,17 @@ vi.mock("@lib/toast", () => ({
 // Imports (after mocks)
 // ---------------------------------------------------------------------------
 
+import { createQuickSwitcher } from "@components/QuickSwitcher";
 import { createInviteManager } from "@components/InviteManager";
 import { createPinnedMessages } from "@components/PinnedMessages";
+import { createSearchOverlay } from "@components/SearchOverlay";
 import {
+  mapInviteResponse,
+  mapToPinnedMessage,
+  createQuickSwitcherManager,
   createInviteManagerController,
   createPinnedPanelController,
+  createSearchOverlayController,
 } from "@pages/main-page/OverlayManagers";
 
 // ---------------------------------------------------------------------------
@@ -99,6 +122,7 @@ function makeMockApi(overrides: Record<string, unknown> = {}) {
       ],
     }),
     unpinMessage: vi.fn().mockResolvedValue(undefined),
+    search: vi.fn().mockResolvedValue({ results: [{ channel_id: 1, message_id: 10, content: "hello" }] }),
     ...overrides,
   };
 }
@@ -366,4 +390,872 @@ describe("createPinnedPanelController", () => {
 
     expect(mockShowToast).toHaveBeenCalledWith("Failed to load pinned messages", "error");
   });
+
+  it("does nothing when root is null", async () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => null,
+      getCurrentChannelId: () => 42,
+    });
+
+    await controller.toggle();
+
+    expect(createPinnedMessages).not.toHaveBeenCalled();
+  });
+
+  it("does nothing when channelId is null", async () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => null,
+    });
+
+    await controller.toggle();
+
+    expect(createPinnedMessages).not.toHaveBeenCalled();
+  });
+
+  it("toggle closes panel when already open", async () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 42,
+    });
+
+    await controller.toggle();
+    expect(mockPinnedMessagesMount).toHaveBeenCalledOnce();
+
+    // Toggle again should close
+    await controller.toggle();
+    expect(mockPinnedMessagesDestroy).toHaveBeenCalled();
+  });
+
+  it("cleanup closes panel if open", async () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 42,
+    });
+
+    await controller.toggle();
+    controller.cleanup();
+
+    expect(mockPinnedMessagesDestroy).toHaveBeenCalled();
+  });
+
+  it("cleanup is safe when no panel is open", () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 42,
+    });
+
+    // Should not throw
+    controller.cleanup();
+    expect(mockPinnedMessagesDestroy).not.toHaveBeenCalled();
+  });
+
+  it("onJumpToMessage closes panel when no callback is provided", async () => {
+    const api = makeMockApi();
+
+    const controller = createPinnedPanelController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 42,
+      // no onJumpToMessage provided
+    });
+
+    await controller.toggle();
+
+    const opts = (createPinnedMessages as Mock).mock.calls[0]![0] as {
+      onJumpToMessage: (msgId: number) => void;
+    };
+
+    opts.onJumpToMessage(1);
+
+    // Without a callback, should just close the panel
+    expect(mockPinnedMessagesDestroy).toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// mapInviteResponse
+// ---------------------------------------------------------------------------
+
+describe("mapInviteResponse", () => {
+  it("maps a basic invite response with use_count", () => {
+    const result = mapInviteResponse({
+      id: 1,
+      code: "abc123",
+      url: "https://example.com/abc123",
+      max_uses: 10,
+      use_count: 3,
+      expires_at: "2024-12-31",
+    });
+
+    expect(result.code).toBe("abc123");
+    expect(result.uses).toBe(3);
+    expect(result.maxUses).toBe(10);
+    expect(result.expiresAt).toBe("2024-12-31");
+    expect(result.createdBy).toBe("unknown");
+    expect(result.createdAt).toBe("2024-12-31");
+  });
+
+  it("extracts created_by username from extra field", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: 0,
+      expires_at: null,
+      created_by: { username: "Alice" },
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.createdBy).toBe("Alice");
+  });
+
+  it("falls back to 'unknown' when created_by has no username", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: 0,
+      expires_at: null,
+      created_by: {},
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.createdBy).toBe("unknown");
+  });
+
+  it("falls back to 'unknown' when created_by is not an object", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: 0,
+      expires_at: null,
+      created_by: "string-value",
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.createdBy).toBe("unknown");
+  });
+
+  it("uses 'uses' extra field when use_count is undefined", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: undefined,
+      expires_at: null,
+      uses: 7,
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.uses).toBe(7);
+  });
+
+  it("defaults uses to 0 when neither use_count nor uses is present", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: undefined,
+      expires_at: null,
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.uses).toBe(0);
+  });
+
+  it("uses empty string for createdAt when expires_at is null", () => {
+    const raw = {
+      id: 1,
+      code: "abc",
+      url: "https://example.com/abc",
+      max_uses: 5,
+      use_count: 0,
+      expires_at: null,
+    };
+
+    const result = mapInviteResponse(raw as never);
+    expect(result.createdAt).toBe("");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// mapToPinnedMessage
+// ---------------------------------------------------------------------------
+
+describe("mapToPinnedMessage", () => {
+  it("maps a pinned message with created_at", () => {
+    const result = mapToPinnedMessage({
+      id: 1,
+      user: { username: "Alice" },
+      content: "Hello",
+      created_at: "2024-01-01",
+    });
+
+    expect(result.id).toBe(1);
+    expect(result.author).toBe("Alice");
+    expect(result.content).toBe("Hello");
+    expect(result.timestamp).toBe("2024-01-01");
+    expect(result.avatarColor).toMatch(/^hsl\(\d+, 55%, 55%\)$/);
+  });
+
+  it("falls back to timestamp when created_at is undefined", () => {
+    const result = mapToPinnedMessage({
+      id: 2,
+      user: { username: "Bob" },
+      content: "World",
+      timestamp: "2024-02-15",
+    });
+
+    expect(result.timestamp).toBe("2024-02-15");
+  });
+
+  it("falls back to empty string when neither created_at nor timestamp is set", () => {
+    const result = mapToPinnedMessage({
+      id: 3,
+      user: { username: "Charlie" },
+      content: "No timestamp",
+    });
+
+    expect(result.timestamp).toBe("");
+  });
+
+  it("generates deterministic avatar color for same username", () => {
+    const a = mapToPinnedMessage({ id: 1, user: { username: "Alice" }, content: "" });
+    const b = mapToPinnedMessage({ id: 2, user: { username: "Alice" }, content: "" });
+
+    expect(a.avatarColor).toBe(b.avatarColor);
+  });
+
+  it("generates different colors for different usernames", () => {
+    const a = mapToPinnedMessage({ id: 1, user: { username: "Alice" }, content: "" });
+    const b = mapToPinnedMessage({ id: 2, user: { username: "Bob" }, content: "" });
+
+    // Not guaranteed to be different in theory, but these specific names will differ
+    expect(a.avatarColor).not.toBe(b.avatarColor);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createQuickSwitcherManager
+// ---------------------------------------------------------------------------
+
+describe("createQuickSwitcherManager", () => {
+  let root: HTMLDivElement;
+
+  beforeEach(() => {
+    root = document.createElement("div");
+    document.body.appendChild(root);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    root.remove();
+  });
+
+  it("opens quick switcher on Ctrl+K", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+    expect(mockQuickSwitcherMount).toHaveBeenCalledWith(root);
+
+    cleanup();
+  });
+
+  it("closes quick switcher on second Ctrl+K", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    // Open
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+
+    // Close
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(mockQuickSwitcherDestroy).toHaveBeenCalled();
+
+    cleanup();
+  });
+
+  it("opens quick switcher on Meta+K (macOS)", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
+
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+
+    cleanup();
+  });
+
+  it("does not open on plain K key without modifier", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k" }));
+
+    expect(createQuickSwitcher).not.toHaveBeenCalled();
+
+    cleanup();
+  });
+
+  it("does nothing when root is null", () => {
+    const manager = createQuickSwitcherManager(() => null);
+    const cleanup = manager.attach();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+
+    expect(createQuickSwitcher).not.toHaveBeenCalled();
+
+    cleanup();
+  });
+
+  it("cleanup removes the keydown listener and closes", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    // Open first
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+
+    // Cleanup
+    cleanup();
+
+    // Verify destroy was called
+    expect(mockQuickSwitcherDestroy).toHaveBeenCalled();
+
+    // After cleanup, Ctrl+K should not open a new instance
+    vi.clearAllMocks();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(createQuickSwitcher).not.toHaveBeenCalled();
+  });
+
+  it("onSelectChannel callback sets active channel", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+
+    // Extract the onSelectChannel callback
+    const opts = (createQuickSwitcher as Mock).mock.calls[0]![0] as {
+      onSelectChannel: (channelId: number) => void;
+    };
+
+    opts.onSelectChannel(42);
+    expect(mockSetActiveChannel).toHaveBeenCalledWith(42);
+
+    cleanup();
+  });
+
+  it("onClose callback resets instance so re-open works", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    // Open
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+
+    // Simulate component calling onClose directly
+    const opts = (createQuickSwitcher as Mock).mock.calls[0]![0] as {
+      onClose: () => void;
+    };
+    opts.onClose();
+
+    // Re-open should work
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+    expect(createQuickSwitcher).toHaveBeenCalledTimes(2);
+
+    cleanup();
+  });
+
+  it("does not open a second instance if already open", () => {
+    const manager = createQuickSwitcherManager(() => root);
+    const cleanup = manager.attach();
+
+    // Open
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "k", ctrlKey: true }));
+
+    // Simulate trying to open from external code — the instance check should prevent it
+    // The attach() function only exposes Ctrl+K, and the toggle logic handles this
+    expect(createQuickSwitcher).toHaveBeenCalledOnce();
+
+    cleanup();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createInviteManagerController (additional coverage)
+// ---------------------------------------------------------------------------
+
+describe("createInviteManagerController (additional)", () => {
+  let root: HTMLDivElement;
+
+  beforeEach(() => {
+    root = document.createElement("div");
+    document.body.appendChild(root);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    root.remove();
+  });
+
+  it("does nothing when root is null", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => null,
+    });
+
+    await controller.open();
+
+    expect(createInviteManager).not.toHaveBeenCalled();
+  });
+
+  it("does not open a second time if already open", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+    await controller.open();
+
+    expect(createInviteManager).toHaveBeenCalledOnce();
+  });
+
+  it("cleanup destroys instance when open", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+    controller.cleanup();
+
+    expect(mockInviteManagerDestroy).toHaveBeenCalled();
+  });
+
+  it("cleanup is safe when not open", () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    // Should not throw
+    controller.cleanup();
+    expect(mockInviteManagerDestroy).not.toHaveBeenCalled();
+  });
+
+  it("onCreateInvite callback creates and maps an invite", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+
+    const opts = (createInviteManager as Mock).mock.calls[0]![0] as {
+      onCreateInvite: () => Promise<unknown>;
+    };
+
+    const result = await opts.onCreateInvite();
+    expect(api.createInvite).toHaveBeenCalledWith({});
+    expect((result as { code: string }).code).toBe("new123");
+  });
+
+  it("onCopyLink copies code to clipboard", async () => {
+    const api = makeMockApi();
+    const mockWriteText = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: { writeText: mockWriteText },
+    });
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+
+    const opts = (createInviteManager as Mock).mock.calls[0]![0] as {
+      onCopyLink: (code: string) => void;
+    };
+
+    opts.onCopyLink("test-code");
+    expect(mockWriteText).toHaveBeenCalledWith("test-code");
+  });
+
+  it("onClose callback destroys instance and allows re-open", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+
+    const opts = (createInviteManager as Mock).mock.calls[0]![0] as {
+      onClose: () => void;
+    };
+
+    opts.onClose();
+    expect(mockInviteManagerDestroy).toHaveBeenCalled();
+
+    // Should be able to re-open
+    vi.clearAllMocks();
+    await controller.open();
+    expect(createInviteManager).toHaveBeenCalledOnce();
+  });
+
+  it("onError logs and shows toast", async () => {
+    const api = makeMockApi();
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+
+    const opts = (createInviteManager as Mock).mock.calls[0]![0] as {
+      onError: (message: string) => void;
+    };
+
+    opts.onError("Something went wrong");
+    expect(mockLogError).toHaveBeenCalledWith("Something went wrong");
+    expect(mockShowToast).toHaveBeenCalledWith("Something went wrong", "error");
+  });
+
+  it("onRevokeInvite succeeds when invite code is not found in re-fetch", async () => {
+    const api = makeMockApi({
+      getInvites: vi.fn()
+        .mockResolvedValueOnce([makeInviteResponse()]) // initial load
+        .mockResolvedValueOnce([]), // re-fetch returns empty
+    });
+
+    const controller = createInviteManagerController({
+      api: api as never,
+      getRoot: () => root,
+    });
+
+    await controller.open();
+
+    const opts = (createInviteManager as Mock).mock.calls[0]![0] as {
+      onRevokeInvite: (code: string) => Promise<void>;
+    };
+
+    // Should not throw and should not call revokeInvite since no match
+    await expect(opts.onRevokeInvite("nonexistent")).resolves.toBeUndefined();
+    expect(api.revokeInvite).not.toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createSearchOverlayController
+// ---------------------------------------------------------------------------
+
+describe("createSearchOverlayController", () => {
+  let root: HTMLDivElement;
+
+  beforeEach(() => {
+    root = document.createElement("div");
+    document.body.appendChild(root);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    root.remove();
+  });
+
+  it("opens search overlay and mounts to root", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    expect(createSearchOverlay).toHaveBeenCalledOnce();
+    expect(mockSearchOverlayMount).toHaveBeenCalledWith(root);
+  });
+
+  it("does nothing when root is null", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => null,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    expect(createSearchOverlay).not.toHaveBeenCalled();
+  });
+
+  it("does not open a second instance if already open", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+    controller.open();
+
+    expect(createSearchOverlay).toHaveBeenCalledOnce();
+  });
+
+  it("passes currentChannelId as undefined when null", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => null,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      currentChannelId: number | undefined;
+    };
+
+    expect(opts.currentChannelId).toBeUndefined();
+  });
+
+  it("onSearch calls api.search and returns results", async () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSearch: (query: string, chId: number | undefined, signal?: AbortSignal) => Promise<unknown[]>;
+    };
+
+    const results = await opts.onSearch("hello", 5);
+    expect(api.search).toHaveBeenCalledWith("hello", { channelId: 5 }, undefined);
+    expect(results).toEqual([{ channel_id: 1, message_id: 10, content: "hello" }]);
+  });
+
+  it("onSearch re-throws AbortError", async () => {
+    const abortError = new DOMException("Aborted", "AbortError");
+    const api = makeMockApi({
+      search: vi.fn().mockRejectedValue(abortError),
+    });
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSearch: (query: string, chId: number | undefined, signal?: AbortSignal) => Promise<unknown[]>;
+    };
+
+    await expect(opts.onSearch("test", 5)).rejects.toThrow("Aborted");
+    // Should NOT show toast for abort errors
+    expect(mockShowToast).not.toHaveBeenCalled();
+  });
+
+  it("onSearch shows toast and re-throws on non-abort error", async () => {
+    const api = makeMockApi({
+      search: vi.fn().mockRejectedValue(new Error("network failure")),
+    });
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSearch: (query: string, chId: number | undefined, signal?: AbortSignal) => Promise<unknown[]>;
+    };
+
+    await expect(opts.onSearch("test", 5)).rejects.toThrow("network failure");
+    expect(mockShowToast).toHaveBeenCalledWith("Search failed", "error");
+    expect(mockLogError).toHaveBeenCalled();
+  });
+
+  it("onSelectResult sets active channel and calls onJumpToMessage", () => {
+    const api = makeMockApi();
+    const mockJump = vi.fn().mockReturnValue(true);
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+      onJumpToMessage: mockJump,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSelectResult: (result: { channel_id: number; message_id: number }) => void;
+    };
+
+    // Mock requestAnimationFrame to execute immediately
+    const origRaf = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+
+    opts.onSelectResult({ channel_id: 3, message_id: 42 });
+
+    expect(mockSetActiveChannel).toHaveBeenCalledWith(3);
+    expect(mockJump).toHaveBeenCalledWith(3, 42);
+
+    globalThis.requestAnimationFrame = origRaf;
+  });
+
+  it("onSelectResult shows toast when message not found", () => {
+    const api = makeMockApi();
+    const mockJump = vi.fn().mockReturnValue(false);
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+      onJumpToMessage: mockJump,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSelectResult: (result: { channel_id: number; message_id: number }) => void;
+    };
+
+    const origRaf = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+
+    opts.onSelectResult({ channel_id: 3, message_id: 999 });
+
+    expect(mockShowToast).toHaveBeenCalledWith("Message not in loaded history", "info");
+
+    globalThis.requestAnimationFrame = origRaf;
+  });
+
+  it("onSelectResult works without onJumpToMessage callback", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+      // no onJumpToMessage
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onSelectResult: (result: { channel_id: number; message_id: number }) => void;
+    };
+
+    // Should not throw
+    opts.onSelectResult({ channel_id: 3, message_id: 42 });
+    expect(mockSetActiveChannel).toHaveBeenCalledWith(3);
+  });
+
+  it("onClose closes overlay and allows re-open", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+
+    const opts = (createSearchOverlay as Mock).mock.calls[0]![0] as {
+      onClose: () => void;
+    };
+
+    opts.onClose();
+    expect(mockSearchOverlayDestroy).toHaveBeenCalled();
+
+    // Re-open should work
+    vi.clearAllMocks();
+    controller.open();
+    expect(createSearchOverlay).toHaveBeenCalledOnce();
+  });
+
+  it("cleanup destroys instance when open", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    controller.open();
+    controller.cleanup();
+
+    expect(mockSearchOverlayDestroy).toHaveBeenCalled();
+  });
+
+  it("cleanup is safe when not open", () => {
+    const api = makeMockApi();
+
+    const controller = createSearchOverlayController({
+      api: api as never,
+      getRoot: () => root,
+      getCurrentChannelId: () => 5,
+    });
+
+    // Should not throw
+    controller.cleanup();
+    expect(mockSearchOverlayDestroy).not.toHaveBeenCalled();
+  });
 });
diff --git a/Client/tauri-client/tests/unit/server-panel.test.ts b/Client/tauri-client/tests/unit/server-panel.test.ts
new file mode 100644
index 00000000..504d2141
--- /dev/null
+++ b/Client/tauri-client/tests/unit/server-panel.test.ts
@@ -0,0 +1,1024 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  createServerPanel,
+  type ServerPanelOptions,
+  type SimpleProfile,
+} from "@pages/connect-page/ServerPanel";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+// loadCredential returns null by default (non-Tauri environment)
+vi.mock("@lib/credentials", () => ({
+  loadCredential: vi.fn().mockResolvedValue(null),
+}));
+
+// Icons mock — return a real SVG element so the DOM tests work
+vi.mock("@lib/icons", () => ({
+  createIcon: vi.fn((_name: string, _size?: number) => {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("data-icon", _name);
+    return svg;
+  }),
+}));
+
+import { loadCredential } from "@lib/credentials";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeAc(): AbortController {
+  return new AbortController();
+}
+
+function makeOpts(overrides: Partial<ServerPanelOptions> = {}): ServerPanelOptions {
+  return {
+    signal: overrides.signal ?? makeAc().signal,
+    onServerClick: overrides.onServerClick ?? vi.fn(),
+    onCredentialLoaded: overrides.onCredentialLoaded ?? vi.fn(),
+    onAddProfile: overrides.onAddProfile ?? vi.fn(),
+    onDeleteProfile: overrides.onDeleteProfile ?? vi.fn(),
+    onToggleAutoLogin: overrides.onToggleAutoLogin ?? vi.fn(),
+  };
+}
+
+const SIMPLE_PROFILES: readonly SimpleProfile[] = [
+  { name: "Test Server", host: "localhost:8443" },
+  { name: "Another Server", host: "remote.example.com:9443" },
+];
+
+/** Full profile shape with id/username/autoConnect for auto-login + delete tests. */
+function fullProfile(overrides: Record<string, unknown> = {}): SimpleProfile {
+  return {
+    name: "Full Server",
+    host: "full.example.com:8443",
+    id: "profile-1",
+    username: "testuser",
+    autoConnect: false,
+    rememberPassword: true,
+    color: "#5865F2",
+    lastConnected: null,
+    ...overrides,
+  } as unknown as SimpleProfile;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("ServerPanel", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    // Wrap in a connect-page root so handleAddServer can mount the modal
+    container.classList.add("connect-page");
+    document.body.appendChild(container);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  // -----------------------------------------------------------------------
+  // Basic rendering
+  // -----------------------------------------------------------------------
+
+  describe("rendering", () => {
+    it("renders a server-panel element", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      expect(container.querySelector(".server-panel")).not.toBeNull();
+    });
+
+    it("renders a heading with text 'Servers'", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const heading = container.querySelector("h2");
+      expect(heading?.textContent).toBe("Servers");
+    });
+
+    it("renders one server-item per profile", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const items = container.querySelectorAll(".server-item");
+      expect(items.length).toBe(2);
+    });
+
+    it("renders server name and host", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      expect(container.querySelector(".srv-name")?.textContent).toBe("Test Server");
+      expect(container.querySelector(".srv-host")?.textContent).toBe("localhost:8443");
+    });
+
+    it("renders an icon with the first letter of the server name", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const icon = container.querySelector(".srv-icon");
+      expect(icon?.textContent).toBe("T");
+    });
+
+    it("renders an icon with a background color from the palette", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const icon = container.querySelector(".srv-icon") as HTMLElement;
+      expect(icon.style.background).toBeTruthy();
+    });
+
+    it("renders data-host attribute on each server-item", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const items = container.querySelectorAll(".server-item");
+      expect(items[0]?.getAttribute("data-host")).toBe("localhost:8443");
+      expect(items[1]?.getAttribute("data-host")).toBe("remote.example.com:9443");
+    });
+
+    it("renders a status dot with unknown class initially", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.classList.contains("unknown")).toBe(true);
+    });
+
+    it("renders the '+ Add Server' button in the footer", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server");
+      expect(addBtn?.textContent).toBe("+ Add Server");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Username display for full profiles
+  // -----------------------------------------------------------------------
+
+  describe("username display", () => {
+    it("renders username in meta when profile has one", () => {
+      const fp = fullProfile();
+      const panel = createServerPanel(makeOpts(), [fp]);
+      container.appendChild(panel.element);
+
+      const hosts = container.querySelectorAll(".srv-host");
+      // First is the host address, second is the username
+      expect(hosts.length).toBe(2);
+      expect(hosts[1]?.textContent).toBe("testuser");
+    });
+
+    it("does NOT render extra username span for simple profiles", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const hosts = container.querySelectorAll(".srv-host");
+      expect(hosts.length).toBe(1);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Server click
+  // -----------------------------------------------------------------------
+
+  describe("server click", () => {
+    it("calls onServerClick with host when a server item is clicked", () => {
+      const onServerClick = vi.fn();
+      const panel = createServerPanel(
+        makeOpts({ onServerClick }),
+        [SIMPLE_PROFILES[0]!],
+      );
+      container.appendChild(panel.element);
+
+      const item = container.querySelector(".server-item") as HTMLElement;
+      item.click();
+
+      expect(onServerClick).toHaveBeenCalledWith("localhost:8443", undefined);
+    });
+
+    it("calls onServerClick with host AND username for full profiles", () => {
+      const onServerClick = vi.fn();
+      const fp = fullProfile();
+      const panel = createServerPanel(
+        makeOpts({ onServerClick }),
+        [fp],
+      );
+      container.appendChild(panel.element);
+
+      const item = container.querySelector(".server-item") as HTMLElement;
+      item.click();
+
+      expect(onServerClick).toHaveBeenCalledWith("full.example.com:8443", "testuser");
+    });
+
+    it("attempts to load credentials from credential store on click", async () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const item = container.querySelector(".server-item") as HTMLElement;
+      item.click();
+
+      // Wait for the async loadCredential call
+      await vi.waitFor(() => {
+        expect(loadCredential).toHaveBeenCalledWith("localhost:8443");
+      });
+    });
+
+    it("calls onCredentialLoaded when credentials are found", async () => {
+      const onCredentialLoaded = vi.fn();
+      vi.mocked(loadCredential).mockResolvedValueOnce({
+        username: "saveduser",
+        token: "tok",
+        password: "savedpass",
+      });
+
+      const panel = createServerPanel(
+        makeOpts({ onCredentialLoaded }),
+        [SIMPLE_PROFILES[0]!],
+      );
+      container.appendChild(panel.element);
+
+      const item = container.querySelector(".server-item") as HTMLElement;
+      item.click();
+
+      await vi.waitFor(() => {
+        expect(onCredentialLoaded).toHaveBeenCalledWith(
+          "localhost:8443",
+          "saveduser",
+          "savedpass",
+        );
+      });
+    });
+
+    it("does NOT call onCredentialLoaded when no credentials found", async () => {
+      const onCredentialLoaded = vi.fn();
+      vi.mocked(loadCredential).mockResolvedValueOnce(null);
+
+      const panel = createServerPanel(
+        makeOpts({ onCredentialLoaded }),
+        [SIMPLE_PROFILES[0]!],
+      );
+      container.appendChild(panel.element);
+
+      const item = container.querySelector(".server-item") as HTMLElement;
+      item.click();
+
+      // Wait for loadCredential to resolve
+      await new Promise((r) => setTimeout(r, 10));
+      expect(onCredentialLoaded).not.toHaveBeenCalled();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Auto-login toggle
+  // -----------------------------------------------------------------------
+
+  describe("auto-login toggle", () => {
+    it("renders auto-login button for full profiles with onToggleAutoLogin", () => {
+      const panel = createServerPanel(makeOpts(), [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login");
+      expect(autoLoginBtn).not.toBeNull();
+    });
+
+    it("does NOT render auto-login button for simple profiles", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login");
+      expect(autoLoginBtn).toBeNull();
+    });
+
+    it("does NOT render auto-login button when onToggleAutoLogin not provided", () => {
+      const ac = new AbortController();
+      const opts: ServerPanelOptions = {
+        signal: ac.signal,
+        onServerClick: vi.fn(),
+        onCredentialLoaded: vi.fn(),
+        // onToggleAutoLogin intentionally omitted
+      };
+      const panel = createServerPanel(opts, [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login");
+      expect(autoLoginBtn).toBeNull();
+    });
+
+    it("renders active class and correct aria-label when autoConnect is true", () => {
+      const fp = fullProfile({ autoConnect: true });
+      const panel = createServerPanel(makeOpts(), [fp]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login") as HTMLElement;
+      expect(autoLoginBtn.classList.contains("active")).toBe(true);
+      expect(autoLoginBtn.getAttribute("aria-label")).toBe("Disable auto-login");
+      expect(autoLoginBtn.getAttribute("title")).toBe("Auto-login enabled");
+    });
+
+    it("renders without active class when autoConnect is false", () => {
+      const fp = fullProfile({ autoConnect: false });
+      const panel = createServerPanel(makeOpts(), [fp]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login") as HTMLElement;
+      expect(autoLoginBtn.classList.contains("active")).toBe(false);
+      expect(autoLoginBtn.getAttribute("aria-label")).toBe("Enable auto-login");
+      expect(autoLoginBtn.getAttribute("title")).toBe("Enable auto-login");
+    });
+
+    it("calls onToggleAutoLogin with profile id and toggled state", () => {
+      const onToggleAutoLogin = vi.fn();
+      const fp = fullProfile({ autoConnect: false });
+      const panel = createServerPanel(
+        makeOpts({ onToggleAutoLogin }),
+        [fp],
+      );
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login") as HTMLElement;
+      autoLoginBtn.click();
+
+      expect(onToggleAutoLogin).toHaveBeenCalledWith("profile-1", true);
+    });
+
+    it("stops event propagation so server click is not also triggered", () => {
+      const onServerClick = vi.fn();
+      const onToggleAutoLogin = vi.fn();
+      const fp = fullProfile();
+      const panel = createServerPanel(
+        makeOpts({ onServerClick, onToggleAutoLogin }),
+        [fp],
+      );
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login") as HTMLElement;
+      autoLoginBtn.click();
+
+      expect(onToggleAutoLogin).toHaveBeenCalled();
+      expect(onServerClick).not.toHaveBeenCalled();
+    });
+
+    it("renders the zap icon inside the auto-login button", () => {
+      const panel = createServerPanel(makeOpts(), [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const autoLoginBtn = container.querySelector(".auto-login") as HTMLElement;
+      const svg = autoLoginBtn.querySelector("svg");
+      expect(svg?.getAttribute("data-icon")).toBe("zap");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Delete button
+  // -----------------------------------------------------------------------
+
+  describe("delete button", () => {
+    it("renders delete button for full profiles with onDeleteProfile", () => {
+      const panel = createServerPanel(makeOpts(), [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger");
+      expect(deleteBtn).not.toBeNull();
+    });
+
+    it("does NOT render delete button for simple profiles", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger");
+      expect(deleteBtn).toBeNull();
+    });
+
+    it("does NOT render delete button when onDeleteProfile not provided", () => {
+      const ac = new AbortController();
+      const opts: ServerPanelOptions = {
+        signal: ac.signal,
+        onServerClick: vi.fn(),
+        onCredentialLoaded: vi.fn(),
+        // onDeleteProfile intentionally omitted
+      };
+      const panel = createServerPanel(opts, [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger");
+      expect(deleteBtn).toBeNull();
+    });
+
+    it("calls onDeleteProfile with profile id on click", () => {
+      const onDeleteProfile = vi.fn();
+      const fp = fullProfile();
+      const panel = createServerPanel(
+        makeOpts({ onDeleteProfile }),
+        [fp],
+      );
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger") as HTMLElement;
+      deleteBtn.click();
+
+      expect(onDeleteProfile).toHaveBeenCalledWith("profile-1");
+    });
+
+    it("stops event propagation so server click is not also triggered", () => {
+      const onServerClick = vi.fn();
+      const onDeleteProfile = vi.fn();
+      const fp = fullProfile();
+      const panel = createServerPanel(
+        makeOpts({ onServerClick, onDeleteProfile }),
+        [fp],
+      );
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger") as HTMLElement;
+      deleteBtn.click();
+
+      expect(onDeleteProfile).toHaveBeenCalled();
+      expect(onServerClick).not.toHaveBeenCalled();
+    });
+
+    it("renders the x icon inside the delete button", () => {
+      const panel = createServerPanel(makeOpts(), [fullProfile()]);
+      container.appendChild(panel.element);
+
+      const deleteBtn = container.querySelector(".srv-btn.danger") as HTMLElement;
+      const svg = deleteBtn.querySelector("svg");
+      expect(svg?.getAttribute("data-icon")).toBe("x");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Health status updates
+  // -----------------------------------------------------------------------
+
+  describe("updateHealthStatus", () => {
+    it("updates the status dot class to online", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 42,
+        version: "1.0.0",
+        onlineUsers: 5,
+      });
+
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.className).toBe("srv-status-dot online");
+    });
+
+    it("updates latency text and class for good latency", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 42,
+        version: "1.0.0",
+        onlineUsers: 3,
+      });
+
+      const latency = container.querySelector(".srv-latency");
+      expect(latency?.textContent).toBe("42ms");
+      expect(latency?.className).toBe("srv-latency good");
+    });
+
+    it("applies warn class for moderate latency (100-500ms)", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "slow",
+        latencyMs: 250,
+        version: "1.0.0",
+        onlineUsers: 1,
+      });
+
+      const latency = container.querySelector(".srv-latency");
+      expect(latency?.textContent).toBe("250ms");
+      expect(latency?.className).toBe("srv-latency warn");
+    });
+
+    it("applies bad class for high latency (>500ms)", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "slow",
+        latencyMs: 750,
+        version: "1.0.0",
+        onlineUsers: 0,
+      });
+
+      const latency = container.querySelector(".srv-latency");
+      expect(latency?.textContent).toBe("750ms");
+      expect(latency?.className).toBe("srv-latency bad");
+    });
+
+    it("clears latency text when latencyMs is null", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      // First set a latency
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 42,
+        version: "1.0.0",
+        onlineUsers: 3,
+      });
+
+      // Then clear it
+      panel.updateHealthStatus("localhost:8443", {
+        status: "offline",
+        latencyMs: null,
+        version: null,
+        onlineUsers: null,
+      });
+
+      const latency = container.querySelector(".srv-latency");
+      expect(latency?.textContent).toBe("");
+      expect(latency?.className).toBe("srv-latency");
+    });
+
+    it("displays online users count", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 30,
+        version: "1.0.0",
+        onlineUsers: 5,
+      });
+
+      const onlineUsers = container.querySelector(".srv-online-users");
+      expect(onlineUsers?.textContent).toBe("5 online");
+      expect(onlineUsers?.classList.contains("has-users")).toBe(true);
+    });
+
+    it("displays online users without has-users class when count is 0", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 30,
+        version: "1.0.0",
+        onlineUsers: 0,
+      });
+
+      const onlineUsers = container.querySelector(".srv-online-users");
+      expect(onlineUsers?.textContent).toBe("0 online");
+      expect(onlineUsers?.classList.contains("has-users")).toBe(false);
+    });
+
+    it("clears online users text when onlineUsers is null", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "offline",
+        latencyMs: null,
+        version: null,
+        onlineUsers: null,
+      });
+
+      const onlineUsers = container.querySelector(".srv-online-users");
+      expect(onlineUsers?.textContent).toBe("");
+      expect(onlineUsers?.className).toBe("srv-online-users");
+    });
+
+    it("ignores updates for unknown hosts", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      // Should not throw
+      panel.updateHealthStatus("unknown.host:9999", {
+        status: "online",
+        latencyMs: 10,
+        version: "1.0.0",
+        onlineUsers: 1,
+      });
+
+      // Original dot should still be unknown
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.classList.contains("unknown")).toBe(true);
+    });
+
+    it("updates status dot to offline class", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "offline",
+        latencyMs: null,
+        version: null,
+        onlineUsers: null,
+      });
+
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.className).toBe("srv-status-dot offline");
+    });
+
+    it("updates status dot to checking class", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "checking",
+        latencyMs: null,
+        version: null,
+        onlineUsers: null,
+      });
+
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.className).toBe("srv-status-dot checking");
+    });
+
+    it("clears online users when onlineUsers is negative", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 30,
+        version: "1.0.0",
+        onlineUsers: -1,
+      });
+
+      const onlineUsers = container.querySelector(".srv-online-users");
+      expect(onlineUsers?.textContent).toBe("");
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // renderProfiles (re-render)
+  // -----------------------------------------------------------------------
+
+  describe("renderProfiles", () => {
+    it("replaces existing profiles with new ones", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      expect(container.querySelectorAll(".server-item").length).toBe(1);
+
+      panel.renderProfiles(SIMPLE_PROFILES);
+      expect(container.querySelectorAll(".server-item").length).toBe(2);
+    });
+
+    it("clears health elements so old hosts no longer receive updates", () => {
+      const panel = createServerPanel(makeOpts(), [SIMPLE_PROFILES[0]!]);
+      container.appendChild(panel.element);
+
+      // Re-render with different profiles
+      panel.renderProfiles([SIMPLE_PROFILES[1]!]);
+
+      // Updating the old host should not throw and should have no effect
+      panel.updateHealthStatus("localhost:8443", {
+        status: "online",
+        latencyMs: 10,
+        version: "1.0.0",
+        onlineUsers: 1,
+      });
+
+      // The new profile's dot should still be unknown
+      const dot = container.querySelector(".srv-status-dot");
+      expect(dot?.classList.contains("unknown")).toBe(true);
+    });
+
+    it("renders with empty array (no profiles)", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      panel.renderProfiles([]);
+      expect(container.querySelectorAll(".server-item").length).toBe(0);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Add Server modal
+  // -----------------------------------------------------------------------
+
+  describe("Add Server modal", () => {
+    it("opens a modal when the Add Server button is clicked", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const overlay = container.querySelector(".modal-overlay");
+      expect(overlay).not.toBeNull();
+      expect(overlay?.classList.contains("visible")).toBe(true);
+    });
+
+    it("does nothing if onAddProfile is not provided", () => {
+      const ac = new AbortController();
+      const opts: ServerPanelOptions = {
+        signal: ac.signal,
+        onServerClick: vi.fn(),
+        onCredentialLoaded: vi.fn(),
+        // onAddProfile intentionally omitted
+      };
+      const panel = createServerPanel(opts, SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const overlay = container.querySelector(".modal-overlay");
+      expect(overlay).toBeNull();
+    });
+
+    it("modal has name and host input fields", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input");
+      expect(inputs.length).toBe(2);
+      expect((inputs[0] as HTMLInputElement).placeholder).toBe("My Server");
+      expect((inputs[1] as HTMLInputElement).placeholder).toBe("example.com:8443");
+    });
+
+    it("modal has Cancel and Add Server buttons", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      expect(container.querySelector(".btn-ghost")?.textContent).toBe("Cancel");
+      expect(container.querySelector(".modal-footer .btn-primary")?.textContent).toBe("Add Server");
+    });
+
+    it("closes modal when Cancel is clicked", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      expect(container.querySelector(".modal-overlay")).not.toBeNull();
+
+      const cancelBtn = container.querySelector(".btn-ghost") as HTMLElement;
+      cancelBtn.click();
+
+      expect(container.querySelector(".modal-overlay")).toBeNull();
+    });
+
+    it("closes modal when the X close button is clicked", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const closeBtn = container.querySelector(".modal-close") as HTMLElement;
+      closeBtn.click();
+
+      expect(container.querySelector(".modal-overlay")).toBeNull();
+    });
+
+    it("closes modal when clicking the backdrop", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const overlay = container.querySelector(".modal-overlay") as HTMLElement;
+      // Simulate clicking the overlay itself (not the modal content)
+      overlay.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+      expect(container.querySelector(".modal-overlay")).toBeNull();
+    });
+
+    it("does NOT close modal when clicking inside the modal body", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const modal = container.querySelector(".modal") as HTMLElement;
+      modal.click();
+
+      expect(container.querySelector(".modal-overlay")).not.toBeNull();
+    });
+
+    it("calls onAddProfile and closes modal on valid save", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "My New Server";
+      inputs[1]!.value = "newserver.com:8443";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).toHaveBeenCalledWith("My New Server", "newserver.com:8443");
+      expect(container.querySelector(".modal-overlay")).toBeNull();
+    });
+
+    it("does NOT call onAddProfile when name is empty", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "";
+      inputs[1]!.value = "host.com:8443";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).not.toHaveBeenCalled();
+      // Modal stays open
+      expect(container.querySelector(".modal-overlay")).not.toBeNull();
+    });
+
+    it("does NOT call onAddProfile when host is empty", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "Some Server";
+      inputs[1]!.value = "";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).not.toHaveBeenCalled();
+    });
+
+    it("rejects invalid host addresses with special characters", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "Bad Server";
+      inputs[1]!.value = "http://evil.com/path";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).not.toHaveBeenCalled();
+      expect(container.querySelector(".modal-overlay")).not.toBeNull();
+    });
+
+    it("accepts host without port", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "Port-less";
+      inputs[1]!.value = "myserver.example.com";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).toHaveBeenCalledWith("Port-less", "myserver.example.com");
+    });
+
+    it("submits on Enter key in host input", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "Enter Server";
+      inputs[1]!.value = "enter.example.com:8443";
+
+      // Dispatch Enter keydown on the host input
+      inputs[1]!.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+
+      expect(onAddProfile).toHaveBeenCalledWith("Enter Server", "enter.example.com:8443");
+    });
+
+    it("trims whitespace from name and host values", () => {
+      const onAddProfile = vi.fn();
+      const panel = createServerPanel(makeOpts({ onAddProfile }), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const inputs = container.querySelectorAll(".form-input") as NodeListOf<HTMLInputElement>;
+      inputs[0]!.value = "  Trimmed Server  ";
+      inputs[1]!.value = "  trimmed.com:8443  ";
+
+      const saveBtn = container.querySelector(".modal-footer .btn-primary") as HTMLElement;
+      saveBtn.click();
+
+      expect(onAddProfile).toHaveBeenCalledWith("Trimmed Server", "trimmed.com:8443");
+    });
+
+    it("focuses the name input on modal open", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      const addBtn = container.querySelector(".btn-add-server") as HTMLElement;
+      addBtn.click();
+
+      const nameInput = container.querySelectorAll(".form-input")[0] as HTMLInputElement;
+      expect(document.activeElement).toBe(nameInput);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // destroy()
+  // -----------------------------------------------------------------------
+
+  describe("destroy", () => {
+    it("destroy() can be called without errors", () => {
+      const panel = createServerPanel(makeOpts(), SIMPLE_PROFILES);
+      container.appendChild(panel.element);
+
+      expect(() => panel.destroy()).not.toThrow();
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // Edge cases — icon color & initials
+  // -----------------------------------------------------------------------
+
+  describe("icon generation", () => {
+    it("handles single-character server names", () => {
+      const panel = createServerPanel(makeOpts(), [{ name: "X", host: "x.com:443" }]);
+      container.appendChild(panel.element);
+
+      const icon = container.querySelector(".srv-icon");
+      expect(icon?.textContent).toBe("X");
+    });
+
+    it("handles lowercase names by uppercasing the initial", () => {
+      const panel = createServerPanel(makeOpts(), [{ name: "lowercase", host: "lower.com:443" }]);
+      container.appendChild(panel.element);
+
+      const icon = container.querySelector(".srv-icon");
+      expect(icon?.textContent).toBe("L");
+    });
+
+    it("generates consistent colors for the same name", () => {
+      const panel1 = createServerPanel(makeOpts(), [{ name: "Consistent", host: "a.com:443" }]);
+      container.appendChild(panel1.element);
+      const color1 = (container.querySelector(".srv-icon") as HTMLElement).style.background;
+
+      container.innerHTML = "";
+      const panel2 = createServerPanel(makeOpts(), [{ name: "Consistent", host: "b.com:443" }]);
+      container.appendChild(panel2.element);
+      const color2 = (container.querySelector(".srv-icon") as HTMLElement).style.background;
+
+      expect(color1).toBe(color2);
+    });
+
+    it("generates different colors for different names", () => {
+      const panel = createServerPanel(makeOpts(), [
+        { name: "Alpha", host: "a.com:443" },
+        { name: "Zulu", host: "z.com:443" },
+      ]);
+      container.appendChild(panel.element);
+
+      const icons = container.querySelectorAll(".srv-icon") as NodeListOf<HTMLElement>;
+      // Not guaranteed to be different for all names, but for these two it should be
+      // (given the hash algorithm). Just check they both have a background set.
+      expect(icons[0]!.style.background).toBeTruthy();
+      expect(icons[1]!.style.background).toBeTruthy();
+    });
+  });
+});
diff --git a/Client/tauri-client/tests/unit/voice-audio-tab.test.ts b/Client/tauri-client/tests/unit/voice-audio-tab.test.ts
index f86782aa..93dc2835 100644
--- a/Client/tauri-client/tests/unit/voice-audio-tab.test.ts
+++ b/Client/tauri-client/tests/unit/voice-audio-tab.test.ts
@@ -1,12 +1,19 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+
+const mockSwitchInputDevice = vi.fn().mockResolvedValue(undefined);
+const mockSwitchOutputDevice = vi.fn().mockResolvedValue(undefined);
+const mockSetVoiceSensitivity = vi.fn();
+const mockSetInputVolume = vi.fn();
+const mockSetOutputVolume = vi.fn();
+const mockReapplyAudioProcessing = vi.fn().mockResolvedValue(undefined);
 
 vi.mock("@lib/livekitSession", () => ({
-  switchInputDevice: vi.fn().mockResolvedValue(undefined),
-  switchOutputDevice: vi.fn().mockResolvedValue(undefined),
-  setVoiceSensitivity: vi.fn(),
-  setInputVolume: vi.fn(),
-  setOutputVolume: vi.fn(),
-  reapplyAudioProcessing: vi.fn().mockResolvedValue(undefined),
+  switchInputDevice: (...args: unknown[]) => mockSwitchInputDevice(...args),
+  switchOutputDevice: (...args: unknown[]) => mockSwitchOutputDevice(...args),
+  setVoiceSensitivity: (...args: unknown[]) => mockSetVoiceSensitivity(...args),
+  setInputVolume: (...args: unknown[]) => mockSetInputVolume(...args),
+  setOutputVolume: (...args: unknown[]) => mockSetOutputVolume(...args),
+  reapplyAudioProcessing: (...args: unknown[]) => mockReapplyAudioProcessing(...args),
 }));
 
 import { createVoiceAudioTab } from "@components/settings/VoiceAudioTab";
@@ -118,4 +125,543 @@ describe("VoiceAudioTab camera preview", () => {
       expect(preview.srcObject).toBeNull();
     });
   });
+});
+
+// ---------------------------------------------------------------------------
+// UI structure and interaction tests
+// ---------------------------------------------------------------------------
+
+describe("VoiceAudioTab UI structure", () => {
+  function stubNavigator(devices: Array<{ kind: string; deviceId: string; label: string }> = []): void {
+    const audioStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue(devices),
+        getUserMedia: vi.fn().mockResolvedValue(audioStream),
+      },
+    });
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    document.body.innerHTML = "";
+    vi.stubGlobal("AudioContext", class {
+      createAnalyser() {
+        return {
+          fftSize: 0, smoothingTimeConstant: 0, frequencyBinCount: 32,
+          getByteFrequencyData: vi.fn(),
+        };
+      }
+      createMediaStreamSource() { return { connect: vi.fn() }; }
+      close() { return Promise.resolve(); }
+    });
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("builds a section element with settings-pane class", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    expect(el.tagName).toBe("DIV");
+    expect(el.classList.contains("settings-pane")).toBe(true);
+    ac.abort();
+  });
+
+  it("contains input device, output device, and video device selects", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const selects = el.querySelectorAll("select");
+    // Input, output, stream quality, video = 4 selects
+    expect(selects.length).toBe(4);
+    ac.abort();
+  });
+
+  it("contains input volume and output volume sliders", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const sliders = el.querySelectorAll('input[type="range"]');
+    expect(sliders.length).toBe(2); // input volume + output volume
+    ac.abort();
+  });
+
+  it("input volume slider calls setInputVolume on change", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const sliders = el.querySelectorAll('input[type="range"]') as NodeListOf<HTMLInputElement>;
+    const inputSlider = sliders[0];
+    inputSlider.value = "75";
+    inputSlider.dispatchEvent(new Event("input"));
+
+    expect(mockSetInputVolume).toHaveBeenCalledWith(75);
+    ac.abort();
+  });
+
+  it("output volume slider calls setOutputVolume on change", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const sliders = el.querySelectorAll('input[type="range"]') as NodeListOf<HTMLInputElement>;
+    const outputSlider = sliders[1];
+    outputSlider.value = "80";
+    outputSlider.dispatchEvent(new Event("input"));
+
+    expect(mockSetOutputVolume).toHaveBeenCalledWith(80);
+    ac.abort();
+  });
+
+  it("restores saved input volume from preferences", () => {
+    localStorage.setItem("owncord:settings:inputVolume", "75");
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const sliders = el.querySelectorAll('input[type="range"]') as NodeListOf<HTMLInputElement>;
+    expect(sliders[0].value).toBe("75");
+    ac.abort();
+  });
+
+  it("restores saved output volume from preferences", () => {
+    localStorage.setItem("owncord:settings:outputVolume", "60");
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const sliders = el.querySelectorAll('input[type="range"]') as NodeListOf<HTMLInputElement>;
+    expect(sliders[1].value).toBe("60");
+    ac.abort();
+  });
+
+  it("populates device lists from enumerateDevices", async () => {
+    stubNavigator([
+      { kind: "audioinput", deviceId: "mic-1", label: "Mic 1" },
+      { kind: "audioinput", deviceId: "mic-2", label: "Mic 2" },
+      { kind: "audiooutput", deviceId: "spk-1", label: "Speaker 1" },
+      { kind: "videoinput", deviceId: "cam-1", label: "Cam 1" },
+    ]);
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    // Wait for async device enumeration
+    await vi.waitFor(() => {
+      const selects = el.querySelectorAll("select");
+      const inputSelect = selects[0];
+      // Default + 2 mics = 3 options
+      expect(inputSelect.querySelectorAll("option").length).toBe(3);
+    });
+
+    const selects = el.querySelectorAll("select");
+    const outputSelect = selects[1];
+    // Default + 1 speaker = 2 options
+    expect(outputSelect.querySelectorAll("option").length).toBe(2);
+
+    ac.abort();
+  });
+
+  it("input device change calls switchInputDevice and saves pref", async () => {
+    stubNavigator([
+      { kind: "audioinput", deviceId: "mic-1", label: "Mic 1" },
+    ]);
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const selects = el.querySelectorAll("select");
+      expect(selects[0].querySelectorAll("option").length).toBeGreaterThan(1);
+    });
+
+    const inputSelect = el.querySelectorAll("select")[0] as HTMLSelectElement;
+    inputSelect.value = "mic-1";
+    inputSelect.dispatchEvent(new Event("change"));
+
+    expect(mockSwitchInputDevice).toHaveBeenCalledWith("mic-1");
+    ac.abort();
+  });
+
+  it("output device change calls switchOutputDevice and saves pref", async () => {
+    stubNavigator([
+      { kind: "audiooutput", deviceId: "spk-1", label: "Speaker 1" },
+    ]);
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const selects = el.querySelectorAll("select");
+      expect(selects[1].querySelectorAll("option").length).toBeGreaterThan(1);
+    });
+
+    const outputSelect = el.querySelectorAll("select")[1] as HTMLSelectElement;
+    outputSelect.value = "spk-1";
+    outputSelect.dispatchEvent(new Event("change"));
+
+    expect(mockSwitchOutputDevice).toHaveBeenCalledWith("spk-1");
+    ac.abort();
+  });
+
+  it("stream quality select saves to preferences on change", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    // Stream quality is the 3rd select (index 2)
+    const qualitySelect = el.querySelectorAll("select")[2] as HTMLSelectElement;
+    qualitySelect.value = "low";
+    qualitySelect.dispatchEvent(new Event("change"));
+
+    const saved = localStorage.getItem("owncord:settings:streamQuality");
+    expect(saved).toBe('"low"');
+    ac.abort();
+  });
+
+  it("contains audio processing toggles", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const settingRows = el.querySelectorAll(".setting-row");
+    // 4 toggles: echo cancellation, noise suppression, auto gain control, enhanced NS
+    expect(settingRows.length).toBe(4);
+    ac.abort();
+  });
+
+  it("audio toggle calls reapplyAudioProcessing when changed", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    // Toggles are divs with class "toggle" (not buttons)
+    const toggleDiv = el.querySelector(".setting-row .toggle") as HTMLElement;
+    expect(toggleDiv).not.toBeNull();
+    toggleDiv.click();
+
+    expect(mockReapplyAudioProcessing).toHaveBeenCalled();
+    ac.abort();
+  });
+
+  it("handles enumerateDevices failure gracefully", async () => {
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockRejectedValue(new Error("permission denied")),
+        getUserMedia: vi.fn().mockRejectedValue(new Error("permission denied")),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const inputSelect = el.querySelectorAll("select")[0];
+      const options = inputSelect.querySelectorAll("option");
+      // Should have default + error option
+      const texts = Array.from(options).map(o => o.textContent);
+      expect(texts.some(t => t?.includes("Could not enumerate"))).toBe(true);
+    });
+
+    ac.abort();
+  });
+
+  it("does not start camera preview when no video device is saved", () => {
+    stubNavigator();
+    // Do NOT set videoInputDevice in localStorage
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const preview = el.querySelector("video") as HTMLVideoElement;
+    // srcObject is undefined in JSDOM when never assigned (not null)
+    expect(preview.srcObject).toBeFalsy();
+    ac.abort();
+  });
+
+  it("starts camera preview when a video device is saved", async () => {
+    localStorage.setItem("owncord:settings:videoInputDevice", '"cam-1"');
+    const cameraStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+    const audioStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue([
+          { kind: "videoinput", deviceId: "cam-1", label: "Camera 1" },
+        ]),
+        getUserMedia: vi.fn().mockImplementation((constraints: MediaStreamConstraints) => {
+          if (constraints.video && constraints.audio === false) {
+            return Promise.resolve(cameraStream);
+          }
+          return Promise.resolve(audioStream);
+        }),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const preview = el.querySelector("video") as HTMLVideoElement;
+      expect(preview.srcObject).toBe(cameraStream);
+    });
+    ac.abort();
+  });
+
+  it("video select change starts camera preview", async () => {
+    const cameraStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+    const audioStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue([
+          { kind: "videoinput", deviceId: "cam-1", label: "Camera 1" },
+        ]),
+        getUserMedia: vi.fn().mockImplementation((constraints: MediaStreamConstraints) => {
+          if (constraints.video && constraints.audio === false) {
+            return Promise.resolve(cameraStream);
+          }
+          return Promise.resolve(audioStream);
+        }),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    // Wait for devices to load
+    await vi.waitFor(() => {
+      const videoSelect = el.querySelectorAll("select")[3] as HTMLSelectElement;
+      expect(videoSelect.querySelectorAll("option").length).toBeGreaterThan(1);
+    });
+
+    const videoSelect = el.querySelectorAll("select")[3] as HTMLSelectElement;
+    videoSelect.value = "cam-1";
+    videoSelect.dispatchEvent(new Event("change"));
+
+    await vi.waitFor(() => {
+      const preview = el.querySelector("video") as HTMLVideoElement;
+      expect(preview.srcObject).toBe(cameraStream);
+    });
+
+    ac.abort();
+  });
+
+  it("camera preview shows error when getUserMedia fails", async () => {
+    localStorage.setItem("owncord:settings:videoInputDevice", '"cam-1"');
+    const audioStream = {
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
+
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue([
+          { kind: "videoinput", deviceId: "cam-1", label: "Camera 1" },
+        ]),
+        getUserMedia: vi.fn().mockImplementation((constraints: MediaStreamConstraints) => {
+          if (constraints.video && constraints.audio === false) {
+            return Promise.reject(new Error("Camera access denied"));
+          }
+          return Promise.resolve(audioStream);
+        }),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const errorEl = el.querySelector(".setting-desc");
+      expect(errorEl).not.toBeNull();
+      expect(errorEl!.textContent).toBe("Camera access denied");
+    });
+
+    ac.abort();
+  });
+
+  it("sensitivity threshold handle is positioned based on saved sensitivity", () => {
+    localStorage.setItem("owncord:settings:voiceSensitivity", "75");
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const threshold = el.querySelector(".mic-meter-threshold") as HTMLElement;
+    expect(threshold).not.toBeNull();
+    // Sensitivity 75 -> 100 - 75 = 25%
+    expect(threshold.style.left).toBe("25%");
+    ac.abort();
+  });
+
+  it("clicking the meter bar calls setVoiceSensitivity", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const meterBar = el.querySelector(".mic-meter-bar") as HTMLElement;
+    expect(meterBar).not.toBeNull();
+
+    // Simulate click at middle of bar — getBoundingClientRect returns 0,0
+    // so clientX=0, ratio=0, sensitivity=100 (1-0)*100
+    meterBar.dispatchEvent(new MouseEvent("click", { clientX: 0 }));
+
+    expect(mockSetVoiceSensitivity).toHaveBeenCalled();
+    ac.abort();
+  });
+
+  it("mic level monitoring handles getUserMedia failure gracefully", async () => {
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue([]),
+        getUserMedia: vi.fn().mockRejectedValue(new Error("mic denied")),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    // Should not throw — mic meter stays empty
+    await new Promise(r => setTimeout(r, 0));
+    ac.abort();
+  });
+
+  it("restores saved device selections from localStorage", async () => {
+    localStorage.setItem("owncord:settings:audioInputDevice", '"mic-2"');
+    localStorage.setItem("owncord:settings:audioOutputDevice", '"spk-2"');
+    stubNavigator([
+      { kind: "audioinput", deviceId: "mic-2", label: "Mic 2" },
+      { kind: "audiooutput", deviceId: "spk-2", label: "Speaker 2" },
+    ]);
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const selects = el.querySelectorAll("select");
+      expect((selects[0] as HTMLSelectElement).value).toBe("mic-2");
+      expect((selects[1] as HTMLSelectElement).value).toBe("spk-2");
+    });
+
+    ac.abort();
+  });
+
+  it("uses device ID fallback label for devices without labels", async () => {
+    stubNavigator([
+      { kind: "audioinput", deviceId: "abcdef12", label: "" },
+    ]);
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    await vi.waitFor(() => {
+      const inputSelect = el.querySelectorAll("select")[0];
+      const options = inputSelect.querySelectorAll("option");
+      expect(options.length).toBe(2); // default + 1 device
+      expect(options[1].textContent).toContain("Microphone");
+    });
+
+    ac.abort();
+  });
+
+  it("cleanup stops mic and camera streams", () => {
+    const stopMicTrack = vi.fn();
+    const stopCamTrack = vi.fn();
+    const micStream = { getTracks: () => [{ stop: stopMicTrack }] } as unknown as MediaStream;
+    const camStream = { getTracks: () => [{ stop: stopCamTrack }] } as unknown as MediaStream;
+
+    vi.stubGlobal("navigator", {
+      mediaDevices: {
+        enumerateDevices: vi.fn().mockResolvedValue([]),
+        getUserMedia: vi.fn().mockResolvedValue(micStream),
+      },
+    });
+
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    tab.build();
+    tab.cleanup();
+
+    // After cleanup, streams should be stopped
+    // (the mic track stop is called in cleanupMic)
+    ac.abort();
+  });
+
+  it("restores saved stream quality selection", () => {
+    localStorage.setItem("owncord:settings:streamQuality", '"low"');
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    const el = tab.build();
+    document.body.appendChild(el);
+
+    const qualitySelect = el.querySelectorAll("select")[2] as HTMLSelectElement;
+    expect(qualitySelect.value).toBe("low");
+    ac.abort();
+  });
+
+  it("rebuild cleans up previous mic/camera before building again", () => {
+    stubNavigator();
+    const ac = new AbortController();
+    const tab = createVoiceAudioTab(ac.signal);
+    tab.build();
+    // Calling build again should not throw
+    expect(() => tab.build()).not.toThrow();
+    ac.abort();
+  });
 });
\ No newline at end of file