feat(lotus): tell the host when the call drops, and let it press Reconnect (cinny #318)

After a homeserver stall the frame shows "Connection lost · Reconnect"
while the host kept showing the call as joined, with controls that did
nothing. While the error page is up, report io.lotus.call_error
{ code, recoverable } (and { code: null } when it clears), and accept
io.lotus.reconnect to run the page's own Reconnect / Try again.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

embedded/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotusguild/element-call-embedded",
-  "version": "0.25.0-lotus.22",
+  "version": "0.25.0-lotus.24",
   "files": [
     "README.md",
     "LICENSE-AGPL-3.0",

src/lotus/lotusActions.test.ts

@@ -34,6 +34,7 @@ describe("LotusWidgetActions", () => {
       LotusWidgetActions.SetHotkeys,
       LotusWidgetActions.SetFrameScreenshare,
       LotusWidgetActions.PromptScreenshare,
+      LotusWidgetActions.Reconnect,
     ];
 
     expect(new Set(LOTUS_TO_WIDGET_ACTIONS)).toEqual(new Set(expectedToWidget));
@@ -56,5 +57,6 @@ describe("LotusWidgetActions", () => {
     );
     expect(LOTUS_TO_WIDGET_ACTIONS).not.toContain(LotusWidgetActions.MicLevel);
     expect(LOTUS_TO_WIDGET_ACTIONS).not.toContain(LotusWidgetActions.Hotkey);
+    expect(LOTUS_TO_WIDGET_ACTIONS).not.toContain(LotusWidgetActions.CallError);
   });
 });

src/lotus/lotusActions.ts

@@ -116,6 +116,14 @@ export enum LotusWidgetActions {
    * only when it changes (≤ 10 Hz); 0 while muted or with no mic.
    */
   MicLevel = "io.lotus.mic_level",
+  /**
+   * fromWidget: the call's error page is up (`{ code, recoverable }`) or
+   * cleared (`{ code: null }`) (cinny #318), so the host stops showing the call
+   * as joined after "Connection lost".
+   */
+  CallError = "io.lotus.call_error",
+  /** toWidget: press the error page's Reconnect / Try again (cinny #318). */
+  Reconnect = "io.lotus.reconnect",
 }
 
 /** toWidget Lotus actions that must be allow-listed in `initializeWidget`. */
@@ -133,4 +141,5 @@ export const LOTUS_TO_WIDGET_ACTIONS: LotusWidgetActions[] = [
   LotusWidgetActions.SetHotkeys,
   LotusWidgetActions.SetFrameScreenshare,
   LotusWidgetActions.PromptScreenshare,
+  LotusWidgetActions.Reconnect,
 ];

src/lotus/lotusAudioOutput.test.ts

@@ -0,0 +1,24 @@
+/*
+Copyright 2026 Lotus Guild
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+
+import { audioOutputList } from "./lotusAudioOutput";
+import { type AudioOutputDeviceLabel } from "../state/MediaDevices";
+
+test("audioOutputList labels every kind of output (cinny #310)", () => {
+  const m = new Map<string, AudioOutputDeviceLabel>([
+    ["", { type: "default", name: "Speakers" }],
+    ["a1", { type: "name", name: "Headset" }],
+    ["a2", { type: "number", number: 3 }],
+  ]);
+  expect(audioOutputList(m)).toEqual([
+    { id: "", label: "Default (Speakers)" },
+    { id: "a1", label: "Headset" },
+    { id: "a2", label: "Output 3" },
+  ]);
+});

src/lotus/lotusAudioOutput.ts

@@ -8,7 +8,12 @@ Please see LICENSE in the repository root for full details.
 import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { type MediaDevices } from "../state/MediaDevices";
+import { combineLatest } from "rxjs";
+
+import {
+  type AudioOutputDeviceLabel,
+  type MediaDevices,
+} from "../state/MediaDevices";
 import { widget } from "../widget";
 import { LotusWidgetActions } from "./lotusActions";
 import { lotusSendToHost } from "./lotusWidget";
@@ -19,6 +24,10 @@ import { lotusSendToHost } from "./lotusWidget";
  * selects the output; the fork answers each change (and the initial state)
  * with `io.lotus.audio_output_state { deviceId, available: [{id,label}] }`.
  * No effect unless the host sends the action. Returns a teardown function.
+ *
+ * [cinny #310] Browsers hash deviceIds per frame/origin, so the host can't
+ * use ids from its own enumerateDevices(); it builds its menu from
+ * `available` here, whose ids are valid in this frame.
  */
 export function startLotusAudioOutput(mediaDevices: MediaDevices): () => void {
   const w = widget;
@@ -33,9 +42,13 @@ export function startLotusAudioOutput(mediaDevices: MediaDevices): () => void {
   };
   w.lazyActions.on(LotusWidgetActions.SetAudioOutput, handler);
 
-  const sub = mediaDevices.audioOutput.selected$.subscribe((selected) => {
+  const sub = combineLatest([
+    mediaDevices.audioOutput.available$,
+    mediaDevices.audioOutput.selected$,
+  ]).subscribe(([available, selected]) => {
     lotusSendToHost(LotusWidgetActions.AudioOutputState, {
       deviceId: selected?.id ?? null,
+      available: audioOutputList(available),
     });
   });
 
@@ -44,3 +57,29 @@ export function startLotusAudioOutput(mediaDevices: MediaDevices): () => void {
     w.lazyActions.off(LotusWidgetActions.SetAudioOutput, handler);
   };
 }
+
+/** The output list as `{id, label}` for the host's menu (#310). */
+export function audioOutputList(
+  available: Map<string, AudioOutputDeviceLabel>,
+): { id: string; label: string }[] {
+  return [...available].map(([id, l]) => {
+    let label: string;
+    switch (l.type) {
+      case "name":
+        label = l.name;
+        break;
+      case "number":
+        label = `Output ${l.number}`;
+        break;
+      case "default":
+        label = l.name ? `Default (${l.name})` : "Default";
+        break;
+      case "speaker":
+        label = "Speaker";
+        break;
+      default:
+        label = "Earpiece";
+    }
+    return { id, label };
+  });
+}

src/room/GroupCallErrorBoundary.tsx

@@ -13,6 +13,7 @@ import {
   type ReactNode,
   type SVGAttributes,
   useCallback,
+  useEffect,
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
@@ -24,6 +25,7 @@ import {
 import { Button } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { MatrixError } from "matrix-js-sdk";
+import { type IWidgetApiRequest } from "matrix-widget-api";
 
 import {
   ConnectionLostError,
@@ -38,6 +40,7 @@ import { FullScreenView } from "../FullScreenView.tsx";
 import { ErrorView } from "../ErrorView.tsx";
 import { type WidgetHelpers } from "../widget.ts";
 import styles from "../ErrorView.module.css";
+import { LotusWidgetActions, lotusSendToHost } from "../lotus/lotusWidget";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
 
@@ -74,6 +77,29 @@ const ErrorPage: FC<ErrorPageProps> = ({
       icon = ErrorSolidIcon;
   }
 
+  // [cinny #318] Tell the host the call dropped (it kept showing the call as
+  // joined), and let its call bar press Reconnect for us.
+  const recoverable =
+    error instanceof ConnectionLostError ||
+    error instanceof LivekitConnectionError ||
+    error instanceof PeerConnectionTimeoutError;
+  useEffect(() => {
+    lotusSendToHost(LotusWidgetActions.CallError, {
+      code: error.code,
+      recoverable,
+    });
+    const w = widget;
+    const onReconnect = (ev: CustomEvent<IWidgetApiRequest>): void => {
+      w?.api.transport.reply(ev.detail, {});
+      if (recoverable) void recoveryActionHandler("reconnect");
+    };
+    w?.lazyActions?.on(LotusWidgetActions.Reconnect, onReconnect);
+    return (): void => {
+      w?.lazyActions?.off(LotusWidgetActions.Reconnect, onReconnect);
+      lotusSendToHost(LotusWidgetActions.CallError, { code: null });
+    };
+  }, [error.code, recoverable, recoveryActionHandler, widget]);
+
   const actions: { label: string; onClick: () => void }[] = [];
   if (error instanceof ConnectionLostError) {
     actions.push({