feat(lld): open the mock server configuration UI from the top bar indicator

Right-clicking the indicator opens the mock server's configuration UI on the
session Ledger Live is already using, so its devices can be edited without
pasting a token by hand. Left click still copies the token.

The token is handed over in the URL fragment (`#token=…`), which the UI reads
once and wipes from its address bar. A fragment never reaches the server, so the
token stays out of its access logs, and the link is opened with no analytics
event name because `openURL` otherwise reports the URL it opened.

`TopBarAction` gains an optional `onContextMenu`, so a right click means nothing
on every other top bar button.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: aussedatlo

.changeset/lld-mock-server-configuration-ui-link.md

@@ -0,0 +1,9 @@
+---
+"ledger-live-desktop": patch
+---
+
+Open the mock server configuration UI by right-clicking the top bar indicator.
+
+The indicator still copies the session token on a left click. A right click now opens the mock server's own configuration UI — served from the server root — on that same session, so the devices Ledger Live sees can be edited without pasting a token by hand.
+
+The token travels in the URL fragment (`#token=…`), which never reaches the server, and the link is opened without an analytics event so the token stays out of the tracking payload.

apps/ledger-live-desktop/src/mvvm/components/TopBar/components/TopBarActionButton.tsx

@@ -20,6 +20,7 @@ export function TopBarActionButton({
   appearance = "gray",
   className,
   onTooltipShow,
+  onContextMenu,
   cta,
 }: TopBarActionButtonProps) {
   const testId = `topbar-action-button-${label.replace(/\s+/g, "-").toLowerCase()}`;
@@ -31,12 +32,22 @@ export function TopBarActionButton({
     [onTooltipShow],
   );
 
+  const handleContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      if (!onContextMenu) return;
+      event.preventDefault();
+      onContextMenu();
+    },
+    [onContextMenu],
+  );
+
   const button = cta ? (
     <Button
       appearance={appearance}
       size="sm"
       icon={icon}
       onClick={onClick}
+      onContextMenu={handleContextMenu}
       data-testid={testId}
       disabled={!isInteractive}
       className={`rounded-full${className ? ` ${className}` : ""}`}
@@ -50,6 +61,7 @@ export function TopBarActionButton({
       aria-label={label}
       icon={icon}
       onClick={onClick}
+      onContextMenu={handleContextMenu}
       data-testid={testId}
       disabled={!isInteractive}
       className={className}

apps/ledger-live-desktop/src/mvvm/components/TopBar/components/__tests__/TopBarActionButton.test.tsx

@@ -67,4 +67,37 @@ describe("TopBarActionButton", () => {
     const button = screen.getByTestId("topbar-action-button-test-action");
     expect(button).toBeDisabled();
   });
+
+  it("calls onContextMenu instead of opening the native menu on right click", async () => {
+    const handleContextMenu = jest.fn();
+
+    const { user } = render(
+      <TopBarActionButton {...defaultProps} onContextMenu={handleContextMenu} />,
+    );
+
+    const contextMenu = jest.fn();
+    document.addEventListener("contextmenu", contextMenu);
+    await user.pointer({
+      target: screen.getByTestId("topbar-action-button-test-action"),
+      keys: "[MouseRight]",
+    });
+    document.removeEventListener("contextmenu", contextMenu);
+
+    expect(handleContextMenu).toHaveBeenCalledTimes(1);
+    expect(contextMenu.mock.calls[0][0].defaultPrevented).toBe(true);
+  });
+
+  it("leaves the native menu alone when no onContextMenu is given", async () => {
+    const { user } = render(<TopBarActionButton {...defaultProps} />);
+
+    const contextMenu = jest.fn();
+    document.addEventListener("contextmenu", contextMenu);
+    await user.pointer({
+      target: screen.getByTestId("topbar-action-button-test-action"),
+      keys: "[MouseRight]",
+    });
+    document.removeEventListener("contextmenu", contextMenu);
+
+    expect(contextMenu.mock.calls[0][0].defaultPrevented).toBe(false);
+  });
 });

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/__tests__/useMockServerTransport.test.ts

@@ -0,0 +1,76 @@
+import { renderHook, act } from "tests/testSetup";
+import { openURL } from "~/renderer/linking";
+import { useMockServerTransport } from "../useMockServerTransport";
+import { useMockServerStatus, type MockServerStatus } from "../useMockServerStatus";
+
+jest.mock("@ledgerhq/live-dmk-desktop", () => ({
+  getMockServerTransportUrl: () => "https://mock.example",
+}));
+
+jest.mock("~/renderer/linking", () => ({
+  openURL: jest.fn(),
+}));
+
+jest.mock("../useMockServerStatus", () => ({
+  useMockServerStatus: jest.fn(),
+}));
+
+const mockCopyToClipboard = jest.fn();
+jest.mock("LLD/hooks/useCopyToClipboard", () => ({
+  useCopyToClipboard: () => mockCopyToClipboard,
+}));
+
+const givenStatus = (status: Partial<MockServerStatus>) =>
+  jest.mocked(useMockServerStatus).mockReturnValue({ enabled: true, connected: true, ...status });
+
+describe("useMockServerTransport", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    givenStatus({ sessionToken: "a-session-token" });
+  });
+
+  it("copies the session token when clicked", () => {
+    const { result } = renderHook(() => useMockServerTransport());
+
+    act(() => result.current.handleMockServer());
+
+    expect(mockCopyToClipboard).toHaveBeenCalledWith("a-session-token");
+  });
+
+  it("opens the configuration UI on the current session", () => {
+    const { result } = renderHook(() => useMockServerTransport());
+
+    act(() => result.current.handleOpenConfigurationUi());
+
+    expect(openURL).toHaveBeenCalledWith("https://mock.example/#token=a-session-token", "");
+  });
+
+  it("escapes a session token that is not URL safe", () => {
+    givenStatus({ sessionToken: "a+b/c=" });
+    const { result } = renderHook(() => useMockServerTransport());
+
+    act(() => result.current.handleOpenConfigurationUi());
+
+    expect(openURL).toHaveBeenCalledWith("https://mock.example/#token=a%2Bb%2Fc%3D", "");
+  });
+
+  it("does nothing without a session token", () => {
+    givenStatus({ sessionToken: undefined });
+    const { result } = renderHook(() => useMockServerTransport());
+
+    act(() => {
+      result.current.handleMockServer();
+      result.current.handleOpenConfigurationUi();
+    });
+
+    expect(mockCopyToClipboard).not.toHaveBeenCalled();
+    expect(openURL).not.toHaveBeenCalled();
+  });
+
+  it("is hidden while the transport is disabled", () => {
+    givenStatus({ enabled: false, sessionToken: undefined });
+    const { result } = renderHook(() => useMockServerTransport());
+
+    expect(result.current.isVisible).toBe(false);
+  });
+});

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/useMockServerTransport.ts

@@ -1,15 +1,26 @@
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Devices } from "@ledgerhq/lumen-ui-react/symbols";
+import { getMockServerTransportUrl } from "@ledgerhq/live-dmk-desktop";
+import { openURL } from "~/renderer/linking";
 import { useMockServerStatus } from "./useMockServerStatus";
 import { useCopyToClipboard } from "LLD/hooks/useCopyToClipboard";
 
+/**
+ * The mock server's configuration UI, served from the server root, takes over a
+ * session handed to it as `#token=…`. A fragment never reaches the server, so
+ * the token stays out of its logs.
+ */
+const configurationUiUrl = (token: string): string =>
+  `${getMockServerTransportUrl()}/#${new URLSearchParams({ token }).toString()}`;
+
 /**
  * Drives the developer top bar indicator for the Device Management Kit mock
  * server transport. The button is only visible while the transport is enabled
  * (env `MOCK_SERVER_TRANSPORT`), and is colored green when the mock server is
  * reachable, red otherwise. Clicking it copies the current mock server session
- * token to the clipboard.
+ * token to the clipboard; right-clicking opens the mock server configuration UI
+ * on that session.
  */
 export const useMockServerTransport = () => {
   const { t } = useTranslation();
@@ -20,12 +31,19 @@ export const useMockServerTransport = () => {
     if (sessionToken) copyToClipboard(sessionToken);
   }, [copyToClipboard, sessionToken]);
 
+  // No event name: `openURL` reports the URL it opened, and this one carries the
+  // session token.
+  const handleOpenConfigurationUi = useCallback(() => {
+    if (sessionToken) openURL(configurationUiUrl(sessionToken), "");
+  }, [sessionToken]);
+
   return {
     isVisible: enabled,
     handleMockServer,
+    handleOpenConfigurationUi,
     icon: Devices,
     tooltip: connected
-      ? t("settings.developer.mockServerStatus.copySessionToken")
+      ? t("settings.developer.mockServerStatus.sessionActions")
       : t("settings.developer.mockServerStatus.disconnected"),
     // Solid green / red circle, matching the experimental & feature-flag buttons.
     className: connected

apps/ledger-live-desktop/src/mvvm/components/TopBar/hooks/useTopBarViewModel.ts

@@ -45,6 +45,7 @@ const useTopBarViewModel = () => {
   const {
     isVisible: isMockServerVisible,
     handleMockServer,
+    handleOpenConfigurationUi: handleMockServerConfigurationUi,
     icon: mockServerIcon,
     tooltip: mockServerTooltip,
     className: mockServerClassName,
@@ -91,9 +92,11 @@ const useTopBarViewModel = () => {
             action: {
               label: "mock server",
               tooltip: mockServerTooltip,
+              tooltipClassName: "max-w-sm text-wrap",
               icon: mockServerIcon,
               isInteractive: true,
               onClick: handleMockServer,
+              onContextMenu: handleMockServerConfigurationUi,
               appearance: "accent" as const,
               className: mockServerClassName,
             },

apps/ledger-live-desktop/src/mvvm/components/TopBar/types.ts

@@ -41,6 +41,8 @@ type TopBarAction = {
   tooltipClassName?: string;
   /** Called when the tooltip is shown (e.g. on hover). Used for analytics when showing error tooltip. */
   onTooltipShow?: () => void;
+  /** When set, right-clicking the button calls this instead of opening the native context menu. */
+  onContextMenu?: () => void;
   /** When set, renders a Button (icon + text label) instead of an IconButton. */
   cta?: string;
 };

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -5535,7 +5535,7 @@
       "mockServerStatus": {
         "connected": "Mock server connected",
         "disconnected": "Mock server unreachable",
-        "copySessionToken": "Mock server connected · click to copy session token"
+        "sessionActions": "Mock server connected · click to copy the session token, right-click to open the configuration UI"
       },
       "openOnboardingAppInstallDebug": "Open onboarding app install debug screen",
       "openOnboardingAppInstallDebugDesc": "Open a screen with the components from the sync onboarding app installation step"