feat(rooms): Room Widgets (MSC1236 im.vector.modular.widgets)

Phase C.1 of the protocol-gaps roadmap, gate-green (693 tests). Generalizes the
Element Call widget host into a general room-widget feature:
- StateEvent.Widget + widgetsPanelAtom + useRoomWidgets (WidgetParser).
- RoomWidgetView: sandboxed-iframe host via ClientWidgetApi with a conservative
  GeneralWidgetDriver (approves only benign display caps — no room-event
  send/read/to-device). Blocks same-origin widget URLs (sandbox breakout guard).
- WidgetsPanel: list / open / add / remove, PL-gated on im.vector.modular.widgets,
  https + non-same-origin URL validation. Mounted like the media gallery (header
  toggle + 3-way content-panel exclusivity + mobile full-screen overlay).
- Tested URL/capability/id helpers.

Requires the prod CSP frame-src widening (matrix repo) for external widgets.
v1 cuts (capability consent prompt, Jitsi/sticker types, user widgets) noted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/Room.tsx

@@ -7,6 +7,8 @@ import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { MediaGallery } from './MediaGallery';
 import { mediaGalleryAtom } from '../../state/mediaGallery';
+import { WidgetsPanel } from './widgets/WidgetsPanel';
+import { widgetsPanelAtom } from '../../state/widgetsPanel';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -39,6 +41,8 @@ export function Room() {
   const setActiveThreadId = useSetAtom(roomIdToActiveThreadIdAtomFamily(room.roomId));
   const galleryOpen = useAtomValue(mediaGalleryAtom);
   const setGalleryOpen = useSetAtom(mediaGalleryAtom);
+  const widgetsOpen = useAtomValue(widgetsPanelAtom);
+  const setWidgetsOpen = useSetAtom(widgetsPanelAtom);
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
@@ -64,30 +68,40 @@ export function Room() {
 
   const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
 
-  // Thread panel and media gallery are mutually exclusive on every screen size:
-  // opening one closes the other. Detect the just-opened transition so whichever
-  // was opened most recently wins.
+  // The content panels (thread / media gallery / widgets) are mutually exclusive
+  // on every screen size: opening one closes the others. Detect the just-opened
+  // transition so whichever was opened most recently wins.
   const prevThreadRef = useRef(activeThreadId);
   const prevGalleryRef = useRef(galleryOpen);
+  const prevWidgetsRef = useRef(widgetsOpen);
   useEffect(() => {
     const threadJustOpened = Boolean(activeThreadId) && !prevThreadRef.current;
     const galleryJustOpened = galleryOpen && !prevGalleryRef.current;
-    if (threadJustOpened && galleryOpen) {
-      setGalleryOpen(false);
-    } else if (galleryJustOpened && activeThreadId) {
-      setActiveThreadId(null);
+    const widgetsJustOpened = widgetsOpen && !prevWidgetsRef.current;
+    if (threadJustOpened) {
+      if (galleryOpen) setGalleryOpen(false);
+      if (widgetsOpen) setWidgetsOpen(false);
+    } else if (galleryJustOpened) {
+      if (activeThreadId) setActiveThreadId(null);
+      if (widgetsOpen) setWidgetsOpen(false);
+    } else if (widgetsJustOpened) {
+      if (activeThreadId) setActiveThreadId(null);
+      if (galleryOpen) setGalleryOpen(false);
     }
     prevThreadRef.current = activeThreadId;
     prevGalleryRef.current = galleryOpen;
-  }, [activeThreadId, galleryOpen, setGalleryOpen, setActiveThreadId]);
+    prevWidgetsRef.current = widgetsOpen;
+  }, [activeThreadId, galleryOpen, widgetsOpen, setGalleryOpen, setActiveThreadId, setWidgetsOpen]);
 
   // On non-desktop screens at most one right-side panel may show, priority
-  // thread > gallery > members. On desktop thread + members may coexist while
-  // thread + gallery stay mutually exclusive (via the effect above).
+  // thread > gallery > widgets > members. On desktop thread + members may coexist
+  // while the content panels stay mutually exclusive (via the effect above).
   const isDesktop = screenSize === ScreenSize.Desktop;
   const showThreadPanel = !callView && Boolean(activeThreadId);
   const showGallery = !callView && galleryOpen && (isDesktop || !activeThreadId);
-  const showMembers = !callView && isDrawer && (isDesktop || (!activeThreadId && !galleryOpen));
+  const showWidgets = !callView && widgetsOpen && (isDesktop || (!activeThreadId && !galleryOpen));
+  const showMembers =
+    !callView && isDrawer && (isDesktop || (!activeThreadId && !galleryOpen && !widgetsOpen));
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
@@ -125,6 +139,18 @@ export function Room() {
             <MediaGallery key={room.roomId} room={room} onClose={() => setGalleryOpen(false)} />
           </>
         )}
+        {showWidgets && (
+          <>
+            {screenSize === ScreenSize.Desktop && (
+              <Line variant="Background" direction="Vertical" size="300" />
+            )}
+            <WidgetsPanel
+              key={room.roomId}
+              room={room}
+              requestClose={() => setWidgetsOpen(false)}
+            />
+          </>
+        )}
         {showThreadPanel && activeThreadId && (
           <>
             {screenSize === ScreenSize.Desktop && (