dev-tool: Add option to enable extended livekit logs

src/App.tsx

@@ -32,6 +32,7 @@ import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import { getUrlParams, HeaderStyle } from "./UrlParams";
 import { AppBar } from "./AppBar";
+import { LivekitLogLevelSync } from "./LivekitLogLevelSync.tsx";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -81,6 +82,7 @@ export const App: FC<Props> = ({ vm }) => {
   const content = loaded ? (
     <ClientProvider>
       <MediaDevicesContext value={vm.mediaDevices}>
+        <LivekitLogLevelSync />
         <ProcessorProvider>
           <Sentry.ErrorBoundary
             fallback={(error) => <ErrorPage error={error} widget={widget} />}

src/LivekitLogLevelSync.tsx

@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+// Syncs the livekit log level with the "Enable extended Livekit logs" developer setting.
+import { type FC, useEffect } from "react";
+import { setLogLevel } from "livekit-client";
+
+import { useSetting, enableExtendedLivekitLogs } from "./settings/settings.ts";
+
+export const LivekitLogLevelSync: FC = () => {
+  const [extendedLivekitLogs] = useSetting(enableExtendedLivekitLogs);
+
+  useEffect(() => {
+    setLogLevel(extendedLivekitLogs ? "trace" : "info");
+  }, [extendedLivekitLogs]);
+
+  return <></>;
+};

src/settings/DeveloperSettingsTab.tsx

@@ -43,6 +43,7 @@ import {
   matrixRTCMode as matrixRTCModeSetting,
   customLivekitUrl as customLivekitUrlSetting,
   MatrixRTCMode,
+  enableExtendedLivekitLogs as enableExtendedLivekitLogsSetting,
 } from "./settings";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
@@ -101,6 +102,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
     alwaysShowIphoneEarpieceSetting,
   );
 
+  const [enableExtendedLivekitLogs, setEnableExtendedLivekitLogs] = useSetting(
+    enableExtendedLivekitLogsSetting,
+  );
+
   const [customLivekitUrlUpdateError, setCustomLivekitUrlUpdateError] =
     useState<string | null>(null);
   const [customLivekitUrl, setCustomLivekitUrl] = useSetting(
@@ -227,6 +232,20 @@ export const DeveloperSettingsTab: FC<Props> = ({
           )}
         />{" "}
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="enableLivekitExtendedLogs"
+          type="checkbox"
+          label="Enable extended livekit logs"
+          checked={enableExtendedLivekitLogs}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setEnableExtendedLivekitLogs(event.target.checked);
+            },
+            [setEnableExtendedLivekitLogs],
+          )}
+        />{" "}
+      </FieldRow>
       <EditInPlace
         onSubmit={(e) => e.preventDefault()}
         helpLabel={

src/settings/settings.ts

@@ -129,6 +129,11 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
   false,
 );
 
+export const enableExtendedLivekitLogs = new Setting<boolean>(
+  "extended-livekit-logs",
+  false,
+);
+
 export enum MatrixRTCMode {
   Legacy = "legacy",
   Compatibility = "compatibility",