feat(widgets): open a widget in its own window (#205 )

Each widget in the Widgets panel (and the open widget's header) gets an "Open in a new window" button, so a pad or board can sit beside the chat. It opens the same filled-in URL the frame uses (widgetCompleteUrl, now shared) with noopener,noreferrer, standalone as in Element. Only cross-origin https URLs get the button: room state can carry anything, e.g. a script URL from another client. Refs #205 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
2026-10-20 20:17:52 -04:00
25 changed files with 116 additions and 447 deletions
@@ -81,7 +81,7 @@
      },
      "devDependencies": {
        "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.29",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.28",
        "@playwright/test": "1.63.0",
        "@rollup/plugin-inject": "5.0.5",
        "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
    },
    "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.29",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.29/element-call-embedded-0.25.0-lotus.29.tgz",
-      "integrity": "sha512-IAIEyiOFfkfb1k2JfBNOkX4LOVaGF8LzeKVQYCqKoyKDVao6rYEYA71LON8ntTaxkredXOK4CeLFsnkCiJHuGg==",
+      "version": "0.25.0-lotus.28",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.28/element-call-embedded-0.25.0-lotus.28.tgz",
+      "integrity": "sha512-IFBHHSVw0CzrrLgx3oIIcJmBB4YMb8at4oVuSKXifZ7MmyHydxg9U3sTlZGgLUjMVrrAXj4gFzCksGHet4LSQw==",
      "dev": true
    },
    "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -12,7 +12,7 @@
    "build": "vite build",
    "preview": "vite preview",
    "lint": "npm run check:eslint && npm run check:prettier",
-    "check:eslint": "eslint src/* --max-warnings 29",
+    "check:eslint": "eslint src/* --max-warnings 36",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
    "typecheck": "tsc --noEmit",
@@ -108,7 +108,7 @@
  },
  "devDependencies": {
    "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.29",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.28",
    "@playwright/test": "1.63.0",
    "@rollup/plugin-inject": "5.0.5",
    "@rollup/plugin-wasm": "6.2.2",
@@ -1,7 +1,6 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
 import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
-import type { SecretStorageKeyDescription } from 'matrix-js-sdk/lib/secret-storage';
 import { PasswordInput } from './password-input';
 import {
  SecretStorageKeyContent,
@@ -40,10 +39,7 @@ export function SecretStorageRecoveryPassphrase({
          bits,
        );

-        const match = await mx.secretStorage.checkKey(
-          decodedRecoveryKey,
-          keyContent as SecretStorageKeyDescription,
-        );
+        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);

        if (!match) {
          throw new Error('Invalid recovery passphrase.');
@@ -136,10 +132,7 @@ export function SecretStorageRecoveryKey({
      async (recoveryKey) => {
        const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);

-        const match = await mx.secretStorage.checkKey(
-          decodedRecoveryKey,
-          keyContent as SecretStorageKeyDescription,
-        );
+        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);

        if (!match) {
          throw new Error('Invalid recovery key.');
@@ -1,84 +0,0 @@
-import React from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-} from 'folds';
-import { useAtom } from 'jotai';
-import { callSummaryViewAtom } from '../../state/callSummary';
-import { useModalStyle } from '../../hooks/useModalStyle';
-import { stopPropagation } from '../../utils/keyboard';
-
-/**
- * [Gitea #253] The post-call "Details" card: opened from the call-ended toast,
- * shows who was in the call, connection quality and whose side it was on,
- * network numbers and your own activity (technical wording).
- */
-export function CallSummaryDialog() {
-  const [view, setView] = useAtom(callSummaryViewAtom);
-  const modalStyle = useModalStyle(400);
-  if (!view) return null;
-  const close = () => setView(undefined);
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: close,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Dialog
-            variant="Surface"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="call-summary-title"
-            style={modalStyle}
-          >
-            <Header
-              variant="Surface"
-              size="500"
-              style={{
-                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                borderBottomWidth: config.borderWidth.B300,
-              }}
-            >
-              <Box grow="Yes" alignItems="Center" gap="200">
-                <Icon src={Icons.Phone} size="100" />
-                <Text id="call-summary-title" size="H4" truncate>
-                  Call summary · {view.roomName}
-                </Text>
-              </Box>
-              <IconButton size="300" radii="300" onClick={close} aria-label="Close">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
-              {view.sections.map((section) => (
-                <Box key={section.title} direction="Column" gap="100">
-                  <Text size="L400">{section.title}</Text>
-                  {section.lines.map((line) => (
-                    <Text key={line} size="T300" style={{ fontVariantNumeric: 'tabular-nums' }}>
-                      {line}
-                    </Text>
-                  ))}
-                </Box>
-              ))}
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
@@ -30,7 +30,6 @@ import {
  AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { setRoomAccountData } from '../../../utils/accountData';

 type DeveloperToolsProps = {
  requestClose: () => void;
@@ -59,7 +58,8 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {

  const submitAccountData: AccountDataSubmitCallback = useCallback(
    async (type, content) => {
-      await setRoomAccountData(mx, room.roomId, type, content);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await mx.setRoomAccountData(room.roomId, type as any, content);
    },
    [mx, room.roomId],
  );
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
-import { IContent, MatrixError } from 'matrix-js-sdk';
+import { MatrixError } from 'matrix-js-sdk';
 import {
  Box,
  Chip,
@@ -22,7 +22,6 @@ import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { Cursor } from '../../../plugins/text-area';
-import { sendRoomEvent, sendStateEvent } from '../../../utils/room';

 const EDITOR_INTENT_SPACE_COUNT = 2;

@@ -52,9 +51,9 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
    useCallback(
      (evtType, evtStateKey, evtContent) => {
        if (typeof evtStateKey === 'string') {
-          return sendStateEvent(mx, room.roomId, evtType, evtContent, evtStateKey);
+          return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
        }
-        return sendRoomEvent(mx, room.roomId, null, evtType, evtContent as IContent);
+        return mx.sendEvent(room.roomId, evtType as any, evtContent);
      },
      [mx, room],
    ),
@@ -31,7 +31,6 @@ import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { sendStateEvent } from '../../../utils/room';

 const EDITOR_INTENT_SPACE_COUNT = 2;

@@ -60,7 +59,7 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi

  const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
    useCallback(
-      (c) => sendStateEvent(mx, room.roomId, type, c, stateKey),
+      (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
      [mx, room, type, stateKey],
    ),
  );
@@ -11,7 +11,7 @@ import {
 import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { GeneralWidgetDriver } from './GeneralWidgetDriver';
-import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
+import { WidgetPermissionRequest, isWidgetUrlSafe, widgetCompleteUrl } from './widgetUtils';
 import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
 import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
 import { isFromFilteredTimelineSet } from '../../../utils/room';
@@ -46,12 +46,7 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
    if (!container) return undefined;
    const current = widgetRef.current;

-    const completeUrl = current.getCompleteUrl({
-      currentUserId: mx.getSafeUserId(),
-      widgetRoomId: room.roomId,
-      deviceId: mx.getDeviceId() ?? undefined,
-      baseUrl: mx.baseUrl,
-    });
+    const completeUrl = widgetCompleteUrl(current, mx, room.roomId);

    // Security: never render a same-origin widget with allow-same-origin (a
    // same-origin frame could break out of the sandbox against our own origin).
@@ -27,7 +27,13 @@ import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import { StateEvent } from '../../../../types/matrix/room';
 import { sendStateEvent } from '../../../utils/room';
-import { generateWidgetId, validateWidgetUrl, WidgetUrlError } from './widgetUtils';
+import {
+  generateWidgetId,
+  validateWidgetUrl,
+  widgetCompleteUrl,
+  widgetPopoutUrl,
+  WidgetUrlError,
+} from './widgetUtils';

 const urlErrorMessage = (err: WidgetUrlError): string => {
  switch (err) {
@@ -60,6 +66,14 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
  const [error, setError] = useState<string>();

  const viewing = widgets.find((w) => w.id === viewingId) ?? null;
+  // [Gitea #205] Open a widget in its own window, beside the chat. It runs
+  // standalone there (no widget API), as in Element's popout.
+  const popoutUrl = (widget: (typeof widgets)[number]) =>
+    widgetPopoutUrl(widgetCompleteUrl(widget, mx, room.roomId), window.location.origin);
+  const popout = (widget: (typeof widgets)[number]) => {
+    const url = popoutUrl(widget);
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+  };

  const handleAdd: FormEventHandler<HTMLFormElement> = async (evt) => {
    evt.preventDefault();
@@ -144,7 +158,13 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
      <Box grow="Yes" className={css.WidgetsPanelContent}>
        {viewing ? (
          <Box grow="Yes" direction="Column">
-            <Box shrink="No" style={{ padding: config.space.S200 }}>
+            <Box
+              shrink="No"
+              alignItems="Center"
+              justifyContent="SpaceBetween"
+              gap="200"
+              style={{ padding: config.space.S200 }}
+            >
              <Button
                variant="Secondary"
                fill="Soft"
@@ -157,6 +177,17 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
                  {viewing.name || 'Widget'}
                </Text>
              </Button>
+              {popoutUrl(viewing) && (
+                <IconButton
+                  size="300"
+                  radii="300"
+                  variant="Background"
+                  aria-label={`Open ${viewing.name || 'widget'} in a new window`}
+                  onClick={() => popout(viewing)}
+                >
+                  <Icon size="100" src={Icons.External} />
+                </IconButton>
+              )}
            </Box>
            <RoomWidgetView room={room} widget={viewing} />
          </Box>
@@ -184,6 +215,17 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
                      {widget.name || widget.templateUrl}
                    </Text>
                  </Box>
+                  {popoutUrl(widget) && (
+                    <IconButton
+                      size="300"
+                      radii="300"
+                      variant="Background"
+                      aria-label={`Open ${widget.name || 'widget'} in a new window`}
+                      onClick={() => popout(widget)}
+                    >
+                      <Icon size="100" src={Icons.External} />
+                    </IconButton>
+                  )}
                  {canModify && (
                    <IconButton
                      size="300"
@@ -8,6 +8,7 @@ import {
  generateWidgetId,
  classifyWidgetCapabilities,
  loadWidgetConsent,
+  widgetPopoutUrl,
 } from './widgetUtils';

 const APP = 'https://chat.lotusguild.org';
@@ -122,3 +123,17 @@ test('[#266] space structure, call membership and Lotus room policy can never be
  assert.equal(auto.size, 0);
  assert.deepEqual(ask, []);
 });
+
+test('[#205] widgetPopoutUrl: only cross-origin https opens in a new window', () => {
+  // Built at runtime so the no-script-url lint rule doesn't flag the test data.
+  const scriptUrl = ['javascript', 'alert(1)'].join(':');
+  assert.equal(
+    widgetPopoutUrl('https://pad.example.org/p/room', APP),
+    'https://pad.example.org/p/room',
+  );
+  assert.equal(widgetPopoutUrl('https://chat.lotusguild.org/evil', APP), null, 'same origin');
+  assert.equal(widgetPopoutUrl('http://pad.example.org/', APP), null, 'not https');
+  assert.equal(widgetPopoutUrl(scriptUrl, APP), null, 'script URL');
+  assert.equal(widgetPopoutUrl('data:text/html,<b>x</b>', APP), null, 'data:');
+  assert.equal(widgetPopoutUrl('not a url', APP), null);
+});
@@ -1,8 +1,10 @@
+import type { MatrixClient } from 'matrix-js-sdk';
 import {
  Capability,
  EventDirection,
  EventKind,
  MatrixCapabilities,
+  type Widget,
  WidgetEventCapability,
 } from 'matrix-widget-api';

@@ -48,6 +50,29 @@ export const isWidgetUrlSafe = (completeUrl: string, appOrigin: string): boolean
  }
 };

+/** The widget's URL with its template variables filled in for this viewer. */
+export const widgetCompleteUrl = (widget: Widget, mx: MatrixClient, roomId: string): string =>
+  widget.getCompleteUrl({
+    currentUserId: mx.getSafeUserId(),
+    widgetRoomId: roomId,
+    deviceId: mx.getDeviceId() ?? undefined,
+    baseUrl: mx.baseUrl,
+  });
+
+/**
+ * [Gitea #205] The URL to open a widget in its own window, or null when it
+ * mustn't be opened: only cross-origin https (room state can carry anything,
+ * e.g. a `javascript:` URL from another client, whose origin is "null").
+ */
+export const widgetPopoutUrl = (completeUrl: string, appOrigin: string): string | null => {
+  try {
+    const u = new URL(completeUrl);
+    return u.protocol === 'https:' && u.origin !== appOrigin ? u.href : null;
+  } catch {
+    return null;
+  }
+};
+
 export const generateWidgetId = (): string =>
  `lotus_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;

@@ -1749,7 +1749,6 @@ function Calls() {
  );

  const [pttMode, setPttMode] = useSetting(settingsAtom, 'pttMode');
-  const [callSummaryToast, setCallSummaryToast] = useSetting(settingsAtom, 'callSummaryToast');
  const [callRejoin, setCallRejoin] = useSetting(settingsAtom, 'callRejoinAfterRestart');
  const [haptics, setHaptics] = useSetting(settingsAtom, 'hapticFeedback');
  const [pttKey, setPttKey] = useSetting(settingsAtom, 'pttKey');
@@ -2063,13 +2062,6 @@ function Calls() {
            />
          }
        />
-        <SettingTile
-          title="Summary After Calls"
-          description="When a call ends, show how long it was and how the connection held up, with a Details button for who was there, network numbers and your own talk/mute time."
-          after={
-            <Switch variant="Primary" value={callSummaryToast} onChange={setCallSummaryToast} />
-          }
-        />
        {hapticsSupported() && (
          <SettingTile
            title="Haptic Feedback"
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, CSSProperties } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { Button, color, config, Icon, IconButton, Icons, Text } from 'folds';
+import { color, config, Icon, IconButton, Icons } from 'folds';
 import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
 import { useSetting } from '../../state/hooks/settings';
@@ -43,17 +43,13 @@ function ToastCard({ toast }: ToastCardProps) {

  useEffect(() => {
    if (toast.sticky) return;
-    timerRef.current = setTimeout(
-      () => {
-        dismiss(toast.id);
-      },
-      // [Gitea #253] A toast with a button stays long enough to use it.
-      toast.actionLabel ? 10_000 : 4000,
-    );
+    timerRef.current = setTimeout(() => {
+      dismiss(toast.id);
+    }, 4000);
    return () => {
      if (timerRef.current !== null) clearTimeout(timerRef.current);
    };
-  }, [dismiss, toast.id, toast.sticky, toast.actionLabel]);
+  }, [dismiss, toast.id, toast.sticky]);

  const handleCardClick = () => {
    if (toast.onClick) {
@@ -216,24 +212,6 @@ function ToastCard({ toast }: ToastCardProps) {
      </div>
      <div style={bodyStyle}>{toast.body}</div>
      {toast.roomName && <div style={roomNameStyle}>{toast.roomName}</div>}
-      {toast.actionLabel && toast.onAction && (
-        <div style={{ marginTop: config.space.S200 }}>
-          <Button
-            type="button"
-            size="300"
-            radii="300"
-            variant="Secondary"
-            fill="Soft"
-            onClick={(e) => {
-              e.stopPropagation();
-              toast.onAction?.();
-              dismiss(toast.id);
-            }}
-          >
-            <Text size="B300">{toast.actionLabel}</Text>
-          </Button>
-        </div>
-      )}
    </div>
  );
 }
@@ -3,10 +3,7 @@ import { useSetAtom } from 'jotai';
 import { CallEmbed } from '../plugins/call';
 import { useCallHangupEvent } from './useCallEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { describeCallDetails, describeCallEnd } from '../utils/callSummary';
-import { callSummaryViewAtom } from '../state/callSummary';
-import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
+import { describeCallEnd } from '../utils/callSummary';

 // The fork sends io.lotus.call_summary on SFU disconnect, which normally lands
 // before Element Call's hangup echo; give a late one this long before toasting.
@@ -19,8 +16,6 @@ const SUMMARY_GRACE_MS = 400;
 */
 export function useCallEndedToast(embed: CallEmbed): void {
  const setToast = useSetAtom(toastQueueAtom);
-  const setSummaryView = useSetAtom(callSummaryViewAtom);
-  const [callSummaryToast] = useSetting(settingsAtom, 'callSummaryToast');
  const fired = useRef(false);

  useEffect(() => {
@@ -30,25 +25,14 @@ export function useCallEndedToast(embed: CallEmbed): void {
  useCallHangupEvent(embed, () => {
    if (fired.current || !embed.joined || embed.joinedAt === undefined) return;
    fired.current = true;
-    if (!callSummaryToast) return;
    const durationMs = Date.now() - embed.joinedAt;
-    const deafenedMs = embed.deafenedMs();
-    const roomName = embed.room.name ?? 'Voice call';
-    const nameOf = (userId: string) => embed.room.getMember(userId)?.name ?? userId;
    const toast = () =>
      setToast({
        id: `call-ended-${Date.now()}`,
        displayName: 'Lotus Chat',
        body: describeCallEnd(durationMs, embed.lastSummary),
-        roomName,
+        roomName: embed.room.name ?? 'Voice call',
        roomId: embed.roomId,
-        // [Gitea #253] The full breakdown, snapshotted at hangup.
-        actionLabel: 'Details',
-        onAction: () =>
-          setSummaryView({
-            roomName,
-            sections: describeCallDetails(embed.lastSummary, durationMs, deafenedMs, nameOf),
-          }),
      });
    if (embed.lastSummary) toast();
    else setTimeout(toast, SUMMARY_GRACE_MS);
@@ -46,7 +46,7 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
    const keys = Object.keys(DEFAULT_POWER_LEVELS) as unknown as (keyof IPowerLevels)[];
    keys.forEach((key) => {
      if (draftPl[key] === undefined) {
-        (draftPl as Record<string, unknown>)[key] = DEFAULT_POWER_LEVELS[key];
+        draftPl[key] = DEFAULT_POWER_LEVELS[key] as any;
      }
    });
    if (draftPl.notifications && typeof draftPl.notifications.room !== 'number') {
@@ -25,7 +25,6 @@ import { useCompositionEndTracking } from '../hooks/useComposingCheck';
 import { settingsAtom } from '../state/settings';
 import { isWithinTimeWindow } from '../utils/timeWindow';
 import { LotusToastContainer } from '../features/toast/LotusToastContainer';
-import { CallSummaryDialog } from '../features/call-summary/CallSummaryDialog';
 import { useTauriNotificationBadge } from '../hooks/useTauriNotificationBadge';
 import { useSessionAppeared } from '../hooks/useSessionAppeared';
 import { useTauriWindowChrome } from '../hooks/useTauriWindowChrome';
@@ -249,7 +248,6 @@ function App() {
                            <SeasonalEffect />
                            <NightLightOverlay />
                            <LotusToastContainer />
-                            <CallSummaryDialog />
                          </JotaiProvider>
                          <ReactQueryDevtools initialIsOpen={false} />
                        </QueryClientProvider>
@@ -15,7 +15,6 @@ import {
  WidgetApiFromWidgetAction,
  WidgetApiToWidgetAction,
  WidgetDriver,
-  IWidgetApiRequest,
 } from 'matrix-widget-api';
 import { CallWidgetDriver } from './CallWidgetDriver';
 import { trimTrailingSlash } from '../../utils/common';
@@ -26,14 +25,13 @@ import {
  ElementMediaStateDetail,
  ElementWidgetActions,
 } from './types';
-import { CallControl, CallControlEvent } from './CallControl';
+import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
 import { verifyDenoiseAssets } from './denoiseSmokeCheck';
 import { canDelegateCapability } from './utils';
 import { getCallPageUrl } from './callPageUrl';
 import { restrictWidgetMessages } from '../widgetTransport';
 import { isRingableRoom } from '../../utils/callRing';
-import { parseCallSummaryDetails, type LotusCallSummaryDetails } from '../../utils/callSummary';

 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -60,8 +58,6 @@ export interface LotusCallSummary {
  reconnects: number;
  poorMs: number;
  verdict: 'good' | 'fair' | 'poor' | 'unknown';
-  /** [Gitea #253] Breakdown for the Details card (fork lotus.29+). */
-  details?: LotusCallSummaryDetails;
 }

 export class CallEmbed {
@@ -81,25 +77,6 @@ export class CallEmbed {
  /** [Gitea #143] The fork's end-of-call summary, once it arrives. */
  public lastSummary: LotusCallSummary | undefined;

-  // [Gitea #253] Time spent deafened (sound off), for the post-call Details.
-  private deafenedSince: number | undefined;
-
-  private deafenedTotal = 0;
-
-  public deafenedMs(now = Date.now()): number {
-    return this.deafenedTotal + (this.deafenedSince === undefined ? 0 : now - this.deafenedSince);
-  }
-
-  private trackDeafened = (): void => {
-    if (!this.joined) return;
-    const deaf = !this.control.sound;
-    if (deaf && this.deafenedSince === undefined) this.deafenedSince = Date.now();
-    if (!deaf && this.deafenedSince !== undefined) {
-      this.deafenedTotal += Date.now() - this.deafenedSince;
-      this.deafenedSince = undefined;
-    }
-  };
-
  // C-M4: set once dispose() has run so the hangup fallback timer can tell
  // whether the embed was already torn down by the normal Close/Hangup echo.
  public disposed = false;
@@ -361,8 +338,6 @@ export class CallEmbed {
    const controlState = initialControlState ?? new CallControlState(true, false, true);
    this.control = new CallControl(controlState, call, iframe);
    this.initialState = controlState;
-    this.control.on(CallControlEvent.StateUpdate, this.trackDeafened);
-    this.disposables.push(() => this.control.off(CallControlEvent.StateUpdate, this.trackDeafened));
    // If the iframe document itself fails to load, fail fast.
    iframe.onerror = () => {
      this.settleLoad('iframe');
@@ -458,7 +433,6 @@ export class CallEmbed {
            reconnects: data.reconnects ?? 0,
            poorMs: data.poorMs ?? 0,
            verdict: data.verdict ?? 'unknown',
-            details: parseCallSummaryDetails((data as { details?: unknown }).details),
          };
        }
      }),
@@ -648,7 +622,6 @@ export class CallEmbed {
    }
    this.joined = true;
    this.joinedAt = Date.now();
-    this.trackDeafened();
    // EC ignores io.element.device_mute before join; re-apply desired state now that EC is live
    this.control.forceState(this.initialState);
  }
@@ -823,7 +796,7 @@ export class CallEmbed {
    const wrapped = (ev: CustomEvent<T>) => {
      ev.preventDefault();
      // Reply with success so the widget transport doesn't time out waiting for a response
-      this.call.transport.reply(ev.detail as unknown as IWidgetApiRequest, {});
+      this.call.transport.reply(ev.detail as any, {});
      callback(ev);
    };
    return this.listenEvent(`action:${type}`, wrapped);
@@ -1,6 +0,0 @@
-import { atom } from 'jotai';
-import type { CallSummarySection } from '../utils/callSummary';
-
-/** [Gitea #253] The post-call Details card currently open (undefined = closed). */
-export type CallSummaryView = { roomName: string; sections: CallSummarySection[] };
-export const callSummaryViewAtom = atom<CallSummaryView | undefined>(undefined);
@@ -2,7 +2,6 @@ import { atom, useSetAtom } from 'jotai';
 import { MatrixClient, MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { useEffect } from 'react';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
-import { setRoomAccountData } from '../../utils/accountData';

 // MSC2867 — "mark a room as unread". A per-room account-data flag `{ unread }`.
 // Stable type `m.marked_unread`; servers/clients predating the stabilization use
@@ -26,9 +25,11 @@ export const setMarkedUnread = (
  unread: boolean,
 ): Promise<unknown> =>
  Promise.all([
-    setRoomAccountData(mx, roomId, AccountDataEvent.MarkedUnread, { unread }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mx.setRoomAccountData(roomId, AccountDataEvent.MarkedUnread as any, { unread }),
    // Best-effort mirror for older servers; never fail the primary write on it.
-    setRoomAccountData(mx, roomId, UNSTABLE_MARKED_UNREAD, { unread }).catch(() => undefined),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mx.setRoomAccountData(roomId, UNSTABLE_MARKED_UNREAD as any, { unread }).catch(() => undefined),
  ]);

 export const receiptIsMine = (event: MatrixEvent, userId: string): boolean => {
@@ -310,8 +310,6 @@ export interface Settings {
  screenshareFramerate: ScreenshareFramerate;
  // [P5-15] In-call soundboard
  soundboardEnabled: boolean;
-  // [Gitea #253] The call-ended toast (with its Details card).
-  callSummaryToast: boolean;
  soundboardVolume: number; // 0–100

  seasonalThemeOverride: SeasonalThemeOverride;
@@ -431,7 +429,6 @@ const defaultSettings: Settings = {
  screenshareBitrate: 'auto',
  screenshareFramerate: 'auto',
  soundboardEnabled: true,
-  callSummaryToast: true,
  soundboardVolume: 80,

  seasonalThemeOverride: 'auto',
@@ -13,8 +13,6 @@ export type ToastNotif = {
  onClick?: () => void; // custom click handler; skips hash navigation when set
  sticky?: boolean; // when true, does not auto-dismiss — use for action toasts that require a click
  onDismiss?: () => void; // called when the user closes the toast with its X (not on click/eviction)
-  actionLabel?: string; // [Gitea #253] a small button on the toast, e.g. "Details"
-  onAction?: () => void;
  createdAt?: number; // set by toastQueueAtom when enqueued; used for #80 eviction ordering
 };

@@ -18,17 +18,6 @@ export function getAccountData<T>(
  return event?.getContent() as T | undefined;
 }

-/** Room account data under a custom or developer-chosen type (same cast). */
-export function setRoomAccountData<T>(
-  mx: MatrixClient,
-  roomId: string,
-  eventType: string,
-  content: T,
-): Promise<unknown> {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return (mx as any).setRoomAccountData(roomId, eventType, content);
-}
-
 export function setAccountData<T>(
  mx: MatrixClient,
  eventType: AccountDataEvent | string,
@@ -1,11 +1,6 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
-import {
-  describeCallDuration,
-  describeCallEnd,
-  describeCallDetails,
-  parseCallSummaryDetails,
-} from './callSummary';
+import { describeCallDuration, describeCallEnd } from './callSummary';

 describe('describeCallDuration', () => {
  it('picks the unit', () => {
@@ -70,97 +65,3 @@ describe('describeCallEnd', () => {
    );
  });
 });
-
-it('[#253] parseCallSummaryDetails keeps well-formed fields and drops the rest', () => {
-  const d = parseCallSummaryDetails({
-    participants: ['@bob:x', 7, '@carol:x'],
-    peakParticipants: 3,
-    quality: {
-      youPoorMs: 1000,
-      othersPoorMs: { '@bob:x': 500, evil: 9, '@c:x': -1 },
-      everyonePoorMs: 0,
-    },
-    network: { rttMedianMs: 38, rttP95Ms: 'fast', inboundLossPct: 0.5 },
-    activity: { speakingMs: 60_000, mutedMs: 'x', screenshareMs: 0 },
-  });
-  assert.deepEqual(d, {
-    participants: ['@bob:x', '@carol:x'],
-    peakParticipants: 3,
-    quality: { youPoorMs: 1000, othersPoorMs: { '@bob:x': 500 }, everyonePoorMs: 0 },
-    network: { rttMedianMs: 38, inboundLossPct: 0.5 },
-    activity: { speakingMs: 60_000, mutedMs: 0, screenshareMs: 0 },
-  });
-  assert.equal(parseCallSummaryDetails(undefined), undefined);
-  assert.equal(parseCallSummaryDetails('details'), undefined);
-});
-
-it('[#253] describeCallDetails: technical sections with names, blame and numbers', () => {
-  const names: Record<string, string> = { '@bob:x': 'Bob', '@carol:x': 'Carol' };
-  const sections = describeCallDetails(
-    {
-      durationMs: 2_460_000,
-      reconnects: 2,
-      poorMs: 120_000,
-      verdict: 'fair',
-      details: {
-        participants: ['@bob:x', '@carol:x'],
-        peakParticipants: 3,
-        quality: {
-          youPoorMs: 120_000,
-          othersPoorMs: { '@carol:x': 30_000 },
-          everyonePoorMs: 10_000,
-        },
-        network: {
-          rttMedianMs: 38,
-          rttP95Ms: 310,
-          outboundLossPct: 4.1,
-          inboundLossPct: 0.5,
-          jitterMs: 6,
-        },
-        activity: { speakingMs: 600_000, mutedMs: 1_200_000, screenshareMs: 300_000 },
-      },
-    },
-    2_460_000,
-    90_000,
-    (u) => names[u] ?? u,
-  );
-  assert.deepEqual(sections, [
-    { title: 'Call', lines: ['Duration 41 min · peak 3 in the call', 'With Bob, Carol'] },
-    {
-      title: 'Connection',
-      lines: [
-        'Verdict: fair · 2 reconnects',
-        'Your connection poor/lost: 2 min',
-        'Carol poor/lost: 30 s',
-        'Everyone poor at once: 10 s (likely server or SFU side)',
-      ],
-    },
-    {
-      title: 'Network',
-      lines: [
-        'RTT median 38 ms · p95 310 ms',
-        'Outbound packet loss 4.1%',
-        'Inbound packet loss 0.5%',
-        'Jitter 6 ms',
-      ],
-    },
-    {
-      title: 'You',
-      lines: ['Talking 10 min · muted 20 min · deafened 2 min', 'Screensharing 5 min'],
-    },
-  ]);
-});
-
-it('[#253] describeCallDetails without fork details (older fork) still says something useful', () => {
-  const sections = describeCallDetails(
-    { durationMs: 60_000, reconnects: 0, poorMs: 0, verdict: 'good' },
-    60_000,
-    0,
-    (u) => u,
-  );
-  assert.deepEqual(
-    sections.map((s) => s.title),
-    ['Call', 'Connection'],
-  );
-  assert.deepEqual(sections[0].lines, ['Duration 1 min', 'Participants unknown']);
-});
@@ -32,123 +32,3 @@ export function describeCallEnd(durationMs: number, summary?: LotusCallSummary):
  }
  return parts.join(' · ');
 }
-
-/** [Gitea #253] The fork's `details` in io.lotus.call_summary (lotus.29+). */
-export type LotusCallSummaryDetails = {
-  participants: string[];
-  peakParticipants: number;
-  quality: { youPoorMs: number; othersPoorMs: Record<string, number>; everyonePoorMs: number };
-  network: {
-    rttMedianMs?: number;
-    rttP95Ms?: number;
-    outboundLossPct?: number;
-    inboundLossPct?: number;
-    jitterMs?: number;
-  };
-  activity: { speakingMs: number; mutedMs: number; screenshareMs: number };
-};
-
-const num = (v: unknown): number | undefined =>
-  typeof v === 'number' && Number.isFinite(v) && v >= 0 ? v : undefined;
-const obj = (v: unknown): Record<string, unknown> =>
-  typeof v === 'object' && v !== null && !Array.isArray(v) ? (v as Record<string, unknown>) : {};
-
-/** Defensive: the frame is another origin; take only well-formed fields. */
-export function parseCallSummaryDetails(raw: unknown): LotusCallSummaryDetails | undefined {
-  if (typeof raw !== 'object' || raw === null) return undefined;
-  const r = obj(raw);
-  const quality = obj(r.quality);
-  const network = obj(r.network);
-  const activity = obj(r.activity);
-  const othersPoorMs: Record<string, number> = {};
-  Object.entries(obj(quality.othersPoorMs)).forEach(([user, ms]) => {
-    const n = num(ms);
-    if (n !== undefined && user.startsWith('@')) othersPoorMs[user] = n;
-  });
-  const net: LotusCallSummaryDetails['network'] = {};
-  (['rttMedianMs', 'rttP95Ms', 'outboundLossPct', 'inboundLossPct', 'jitterMs'] as const).forEach(
-    (k) => {
-      const n = num(network[k]);
-      if (n !== undefined) net[k] = n;
-    },
-  );
-  return {
-    participants: Array.isArray(r.participants)
-      ? r.participants.filter((p): p is string => typeof p === 'string').slice(0, 200)
-      : [],
-    peakParticipants: num(r.peakParticipants) ?? 1,
-    quality: {
-      youPoorMs: num(quality.youPoorMs) ?? 0,
-      othersPoorMs,
-      everyonePoorMs: num(quality.everyonePoorMs) ?? 0,
-    },
-    network: net,
-    activity: {
-      speakingMs: num(activity.speakingMs) ?? 0,
-      mutedMs: num(activity.mutedMs) ?? 0,
-      screenshareMs: num(activity.screenshareMs) ?? 0,
-    },
-  };
-}
-
-export type CallSummarySection = { title: string; lines: string[] };
-
-/**
- * [Gitea #253] The Details card, in technical wording (the owner's choice):
- * who was there, connection quality and whose side it was on, network
- * numbers, and your own activity. `nameOf` turns a user id into a display name.
- */
-export function describeCallDetails(
-  summary: LotusCallSummary | undefined,
-  durationMs: number,
-  deafenedMs: number,
-  nameOf: (userId: string) => string,
-): CallSummarySection[] {
-  const sections: CallSummarySection[] = [];
-  const d = summary?.details;
-  const dur = describeCallDuration;
-  const people = d?.participants ?? [];
-  sections.push({
-    title: 'Call',
-    lines: [
-      `Duration ${dur(durationMs)}${d ? ` · peak ${d.peakParticipants} in the call` : ''}`,
-      people.length
-        ? `With ${people.map(nameOf).join(', ')}`
-        : d
-          ? 'Nobody else joined'
-          : 'Participants unknown',
-    ],
-  });
-  if (summary) {
-    const quality: string[] = [
-      `Verdict: ${summary.verdict} · ${summary.reconnects} reconnect${summary.reconnects === 1 ? '' : 's'}`,
-    ];
-    if (d) {
-      quality.push(`Your connection poor/lost: ${dur(d.quality.youPoorMs)}`);
-      Object.entries(d.quality.othersPoorMs)
-        .sort((a, b) => b[1] - a[1])
-        .forEach(([user, ms]) => quality.push(`${nameOf(user)} poor/lost: ${dur(ms)}`));
-      if (d.quality.everyonePoorMs > 0)
-        quality.push(
-          `Everyone poor at once: ${dur(d.quality.everyonePoorMs)} (likely server or SFU side)`,
-        );
-    } else quality.push(`Your connection poor/lost: ${dur(summary.poorMs)}`);
-    sections.push({ title: 'Connection', lines: quality });
-  }
-  if (d) {
-    const n = d.network;
-    const net: string[] = [];
-    if (n.rttMedianMs !== undefined)
-      net.push(`RTT median ${n.rttMedianMs} ms · p95 ${n.rttP95Ms ?? n.rttMedianMs} ms`);
-    if (n.outboundLossPct !== undefined) net.push(`Outbound packet loss ${n.outboundLossPct}%`);
-    if (n.inboundLossPct !== undefined) net.push(`Inbound packet loss ${n.inboundLossPct}%`);
-    if (n.jitterMs !== undefined) net.push(`Jitter ${n.jitterMs} ms`);
-    if (net.length) sections.push({ title: 'Network', lines: net });
-    const act = [
-      `Talking ${dur(d.activity.speakingMs)} · muted ${dur(d.activity.mutedMs)} · deafened ${dur(deafenedMs)}`,
-    ];
-    if (d.activity.screenshareMs > 0) act.push(`Screensharing ${dur(d.activity.screenshareMs)}`);
-    sections.push({ title: 'You', lines: act });
-  }
-  return sections;
-}
@@ -60,7 +60,7 @@ export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[]
 export function sendStateEvent<T extends object>(
  mx: MatrixClient,
  roomId: string,
-  eventType: StateEvent | string,
+  eventType: StateEvent,
  content: T,
  stateKey = '',
 ): Promise<ISendEventResponse> {