Show current SFU and Server Info in developer tab (#3000)

* Show current SFU and Server Info in developer tab

* Lint

Author: hughns

locales/en/app.json

@@ -66,6 +66,8 @@
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
     "hostname": "Hostname: {{hostname}}",
+    "livekit_server_info": "LiveKit Server Info",
+    "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
     "show_connection_stats": "Show connection statistics",
     "show_non_member_tiles": "Show tiles for non-member media"

src/room/InCallView.tsx

@@ -679,6 +679,7 @@ export const InCallView: FC<InCallViewProps> = ({
             onDismiss={closeSettings}
             tab={settingsTab}
             onTabChange={setSettingsTab}
+            livekitRoom={livekitRoom}
           />
         </>
       )}

src/settings/DeveloperSettingsTab.module.css

@@ -0,0 +1,10 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+pre {
+  font-size: var(--font-size-micro);
+}

src/settings/DeveloperSettingsTab.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, useCallback } from "react";
+import { type ChangeEvent, type FC, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { FieldRow, InputField } from "../input/Input";
@@ -17,12 +17,14 @@ import {
   showConnectionStats as showConnectionStatsSetting,
 } from "./settings";
 import type { MatrixClient } from "matrix-js-sdk/src/client";
-
+import type { Room as LivekitRoom } from "livekit-client";
+import styles from "./DeveloperSettingsTab.module.css";
 interface Props {
   client: MatrixClient;
+  livekitRoom?: LivekitRoom;
 }
 
-export const DeveloperSettingsTab: FC<Props> = ({ client }) => {
+export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
   const { t } = useTranslation();
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
   const [debugTileLayout, setDebugTileLayout] = useSetting(
@@ -36,6 +38,16 @@ export const DeveloperSettingsTab: FC<Props> = ({ client }) => {
     showConnectionStatsSetting,
   );
 
+  const sfuUrl = useMemo((): URL | null => {
+    if (livekitRoom?.engine.client.ws?.url) {
+      // strip the URL params
+      const url = new URL(livekitRoom.engine.client.ws.url);
+      url.search = "";
+      return url;
+    }
+    return null;
+  }, [livekitRoom]);
+
   return (
     <>
       <p>
@@ -122,6 +134,22 @@ export const DeveloperSettingsTab: FC<Props> = ({ client }) => {
           )}
         />
       </FieldRow>
+      {livekitRoom ? (
+        <>
+          <p>
+            {t("developer_mode.livekit_sfu", {
+              url: sfuUrl?.href || "unknown",
+            })}
+          </p>
+          <p>{t("developer_mode.livekit_server_info")}</p>
+          <pre className={styles.pre}>
+            {livekitRoom.serverInfo
+              ? JSON.stringify(livekitRoom.serverInfo, null, 2)
+              : "undefined"}
+            {livekitRoom.metadata}
+          </pre>
+        </>
+      ) : null}
     </>
   );
 };

src/settings/SettingsModal.tsx

@@ -9,6 +9,7 @@ import { type FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Root as Form } from "@vector-im/compound-web";
+import { type Room as LivekitRoom } from "livekit-client";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -46,6 +47,7 @@ interface Props {
   onTabChange: (tab: SettingsTab) => void;
   client: MatrixClient;
   roomId?: string;
+  livekitRoom?: LivekitRoom;
 }
 
 export const defaultSettingsTab: SettingsTab = "audio";
@@ -57,6 +59,7 @@ export const SettingsModal: FC<Props> = ({
   onTabChange,
   client,
   roomId,
+  livekitRoom,
 }) => {
   const { t } = useTranslation();
 
@@ -138,7 +141,7 @@ export const SettingsModal: FC<Props> = ({
   const developerTab: Tab<SettingsTab> = {
     key: "developer",
     name: t("settings.developer_tab_title"),
-    content: <DeveloperSettingsTab client={client} />,
+    content: <DeveloperSettingsTab client={client} livekitRoom={livekitRoom} />,
   };
 
   const tabs = [audioTab, videoTab];