Add bot-driven room app UI via im.paarrot.ui state.

Bots can publish a declarative panel UI that takes over a room; user
actions are sent as im.paarrot.ui.action timeline events.

src/app/features/room-app/RoomAppSchema.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Button, Input, Text, config } from 'folds';
+import { MatrixClient } from 'matrix-js-sdk';
+import {
+  PaarrotUiActionContent,
+  PaarrotUiButtonNode,
+  PaarrotUiContent,
+  PaarrotUiNode,
+} from '../../../types/matrix/room';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { isAllowedRoomAppImageSrc, scopeRoomAppCss } from './sanitizeRoomAppCss';
+import * as css from './RoomAppView.css';
+
+const SCOPE = '[data-room-app]';
+
+type RoomAppSchemaProps = {
+  mx: MatrixClient;
+  content: PaarrotUiContent;
+  uiEventId?: string;
+  useAuthentication: boolean;
+  onAction: (payload: PaarrotUiActionContent) => void | Promise<void>;
+};
+
+function fieldName(node: { id: string; name?: string }): string {
+  return node.name || node.id;
+}
+
+function spacerSize(size?: number): 'sm' | 'md' | 'lg' {
+  if (typeof size === 'number' && size <= 8) return 'sm';
+  if (typeof size === 'number' && size >= 24) return 'lg';
+  return 'md';
+}
+
+export function RoomAppSchema({
+  mx,
+  content,
+  uiEventId,
+  useAuthentication,
+  onAction,
+}: RoomAppSchemaProps) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [sending, setSending] = useState(false);
+
+  const scopedCss = useMemo(
+    () => (content.css ? scopeRoomAppCss(content.css, SCOPE) : ''),
+    [content.css]
+  );
+
+  const setField = useCallback((name: string, value: string) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+
+  const handleButton = useCallback(
+    async (node: PaarrotUiButtonNode) => {
+      if (node.disabled || sending) return;
+      setSending(true);
+      try {
+        await onAction({
+          action: node.action,
+          component_id: node.id,
+          value: node.value,
+          values: { ...values },
+          ui_event_id: uiEventId,
+        });
+      } finally {
+        setSending(false);
+      }
+    },
+    [onAction, sending, uiEventId, values]
+  );
+
+  const renderNode = (node: PaarrotUiNode): React.ReactNode => {
+    switch (node.type) {
+      case 'panel':
+        return (
+          <div key={node.id} className={css.Panel} data-room-app-node={node.id}>
+            {node.children?.map((child) => renderNode(child))}
+          </div>
+        );
+      case 'row':
+        return (
+          <div key={node.id} className={css.Row} data-room-app-node={node.id}>
+            {node.children?.map((child) => renderNode(child))}
+          </div>
+        );
+      case 'text':
+        return (
+          <Text
+            key={node.id}
+            as="p"
+            size="T400"
+            className={node.className}
+            data-room-app-node={node.id}
+          >
+            {node.text ?? ''}
+          </Text>
+        );
+      case 'button': {
+        const variant = node.variant ?? 'Primary';
+        return (
+          <Button
+            key={node.id}
+            type="button"
+            size="400"
+            variant={variant}
+            radii="300"
+            disabled={node.disabled || sending}
+            onClick={() => handleButton(node)}
+            data-room-app-node={node.id}
+          >
+            <Text size="B400">{node.label}</Text>
+          </Button>
+        );
+      }
+      case 'input': {
+        const name = fieldName(node);
+        const current = values[name] ?? node.value ?? '';
+        return (
+          <div key={node.id} className={css.Field} data-room-app-node={node.id}>
+            {node.label && (
+              <Text as="label" size="L400" htmlFor={`room-app-${node.id}`}>
+                {node.label}
+              </Text>
+            )}
+            <Input
+              id={`room-app-${node.id}`}
+              name={name}
+              variant="Background"
+              radii="300"
+              type={node.inputType ?? 'text'}
+              placeholder={node.placeholder}
+              value={current}
+              onChange={(evt) => setField(name, evt.currentTarget.value)}
+            />
+          </div>
+        );
+      }
+      case 'select': {
+        const name = fieldName(node);
+        const current = values[name] ?? node.value ?? '';
+        return (
+          <div key={node.id} className={css.Field} data-room-app-node={node.id}>
+            {node.label && (
+              <Text as="label" size="L400" htmlFor={`room-app-${node.id}`}>
+                {node.label}
+              </Text>
+            )}
+            <Box as="span" grow="Yes" style={{ position: 'relative' }}>
+              <select
+                id={`room-app-${node.id}`}
+                name={name}
+                value={current}
+                onChange={(evt) => setField(name, evt.currentTarget.value)}
+                style={{
+                  width: '100%',
+                  padding: `${config.space.S200} ${config.space.S300}`,
+                  borderRadius: config.radii.R300,
+                  border: '1px solid var(--bq-border, CurrentColor)',
+                  background: 'transparent',
+                  color: 'inherit',
+                  font: 'inherit',
+                }}
+              >
+                {(node.options ?? []).map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </Box>
+          </div>
+        );
+      }
+      case 'image': {
+        if (!isAllowedRoomAppImageSrc(node.src)) return null;
+        const httpSrc = node.src.startsWith('mxc://')
+          ? mxcUrlToHttp(mx, node.src, useAuthentication) ?? undefined
+          : node.src;
+        if (!httpSrc) return null;
+        return (
+          <img
+            key={node.id}
+            className={css.Image}
+            src={httpSrc}
+            alt={node.alt ?? ''}
+            width={node.width}
+            height={node.height}
+            data-room-app-node={node.id}
+          />
+        );
+      }
+      case 'spacer':
+        return <div key={node.id} className={css.Spacer({ size: spacerSize(node.size) })} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div data-room-app="">
+      {scopedCss ? <style>{scopedCss}</style> : null}
+      {renderNode(content.root)}
+    </div>
+  );
+}

src/app/features/room-app/RoomAppView.css.ts

@@ -0,0 +1,74 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, config, toRem } from 'folds';
+
+export const Root = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minHeight: 0,
+    minWidth: 0,
+  },
+]);
+
+export const Header = style({
+  paddingLeft: config.space.S200,
+  paddingRight: config.space.S200,
+});
+
+export const Body = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+    minHeight: 0,
+    overflow: 'auto',
+    padding: config.space.S400,
+  },
+]);
+
+export const Panel = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S300,
+  width: '100%',
+});
+
+export const Row = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: config.space.S200,
+  alignItems: 'center',
+});
+
+export const Field = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S100,
+  minWidth: toRem(160),
+  flexGrow: 1,
+});
+
+export const Image = style({
+  maxWidth: '100%',
+  height: 'auto',
+  borderRadius: config.radii.R300,
+});
+
+export const Spacer = recipe({
+  base: {
+    flexShrink: 0,
+  },
+  variants: {
+    size: {
+      sm: { height: config.space.S200 },
+      md: { height: config.space.S400 },
+      lg: { height: config.space.S600 },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

src/app/features/room-app/RoomAppView.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { Box, Button, Header, Text, config } from 'folds';
+import { Room } from 'matrix-js-sdk';
+import { Page } from '../../components/page';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { useRoomName } from '../../hooks/useRoomMeta';
+import {
+  MessageEvent,
+  PaarrotUiActionContent,
+  StateEvent,
+} from '../../../types/matrix/room';
+import { parsePaarrotUiContent } from '../../utils/room';
+import { RoomAppSchema } from './RoomAppSchema';
+import * as css from './RoomAppView.css';
+
+type RoomAppViewProps = {
+  room: Room;
+  onShowChat: () => void;
+};
+
+export function RoomAppView({ room, onShowChat }: RoomAppViewProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const roomName = useRoomName(room);
+  const uiEvent = useStateEvent(room, StateEvent.PaarrotUi);
+  const content = parsePaarrotUiContent(uiEvent?.getContent());
+  const title = content?.title || roomName || 'Room App';
+
+  const handleAction = useCallback(
+    async (payload: PaarrotUiActionContent) => {
+      await mx.sendEvent(room.roomId, MessageEvent.PaarrotUiAction as any, payload);
+    },
+    [mx, room.roomId]
+  );
+
+  return (
+    <Page>
+      <Header className={css.Header} size="600">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200" minWidth="0">
+            <Text size="H6" truncate>
+              {title}
+            </Text>
+          </Box>
+          <Button size="300" variant="Secondary" radii="300" onClick={onShowChat}>
+            <Text size="B300">Show chat</Text>
+          </Button>
+        </Box>
+      </Header>
+      <Box className={css.Body} grow="Yes" direction="Column" style={{ gap: config.space.S400 }}>
+        {content ? (
+          <RoomAppSchema
+            mx={mx}
+            content={content}
+            uiEventId={uiEvent?.getId()}
+            useAuthentication={useAuthentication}
+            onAction={handleAction}
+          />
+        ) : (
+          <Text size="T400">This room’s app UI is missing or invalid.</Text>
+        )}
+      </Box>
+    </Page>
+  );
+}

src/app/features/room-app/index.ts

@@ -0,0 +1,7 @@
+export { RoomAppView } from './RoomAppView';
+export { RoomAppSchema } from './RoomAppSchema';
+export {
+  sanitizeRoomAppCss,
+  scopeRoomAppCss,
+  isAllowedRoomAppImageSrc,
+} from './sanitizeRoomAppCss';

src/app/features/room-app/sanitizeRoomAppCss.ts

@@ -0,0 +1,91 @@
+/**
+ * Strip dangerous CSS constructs from bot-supplied stylesheets.
+ * Not a full CSS parser — best-effort for MVP scoped injection.
+ */
+export function sanitizeRoomAppCss(css: string): string {
+  let out = css;
+  out = out.replace(/@import\b[^;{]*;?/gi, '');
+  out = out.replace(/url\s*\(\s*['"]?\s*javascript:[^)]*\)/gi, 'url(about:blank)');
+  out = out.replace(/expression\s*\([^)]*\)/gi, 'initial');
+  out = out.replace(/-moz-binding\s*:[^;]+;?/gi, '');
+  out = out.replace(/behavior\s*:[^;]+;?/gi, '');
+  out = out.replace(/@charset\b[^;]*;?/gi, '');
+  return out;
+}
+
+/**
+ * Prefix plain selectors with a scope so bot CSS cannot escape the room app root.
+ * At-rules (@media, @supports, @keyframes) are kept with nested rules re-scoped where possible.
+ */
+export function scopeRoomAppCss(css: string, scopeSelector: string): string {
+  const sanitized = sanitizeRoomAppCss(css).trim();
+  if (!sanitized) return '';
+
+  const scopeRule = (selectors: string, body: string): string => {
+    const scoped = selectors
+      .split(',')
+      .map((s) => {
+        const sel = s.trim();
+        if (!sel) return '';
+        if (sel.startsWith(scopeSelector)) return sel;
+        return `${scopeSelector} ${sel}`;
+      })
+      .filter(Boolean)
+      .join(', ');
+    return `${scoped}{${body}}`;
+  };
+
+  const rewriteBlock = (block: string): string => {
+    const trimmed = block.trim();
+    if (!trimmed) return '';
+
+    if (trimmed.startsWith('@')) {
+      const open = trimmed.indexOf('{');
+      if (open === -1) return `${trimmed};`;
+      const header = trimmed.slice(0, open).trim();
+      const inner = trimmed.slice(open + 1);
+      // @keyframes / @font-face: keep as-is (namespaced risk is low for MVP)
+      if (/^@(keyframes|font-face)\b/i.test(header)) {
+        return `${header}{${inner}}`;
+      }
+      // @media / @supports: re-scope nested rules
+      const nested = rewriteCssChunk(inner);
+      return `${header}{${nested}}`;
+    }
+
+    const open = trimmed.indexOf('{');
+    if (open === -1) return '';
+    const selectors = trimmed.slice(0, open);
+    const body = trimmed.slice(open + 1);
+    return scopeRule(selectors, body);
+  };
+
+  const rewriteCssChunk = (chunk: string): string => {
+    const parts: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < chunk.length; i += 1) {
+      const ch = chunk[i];
+      if (ch === '{') depth += 1;
+      else if (ch === '}') {
+        depth -= 1;
+        if (depth === 0) {
+          parts.push(rewriteBlock(chunk.slice(start, i)));
+          start = i + 1;
+        }
+      }
+    }
+    return parts.filter(Boolean).join('\n');
+  };
+
+  return rewriteCssChunk(sanitized);
+}
+
+export function isAllowedRoomAppImageSrc(src: string): boolean {
+  const trimmed = src.trim();
+  return (
+    trimmed.startsWith('mxc://') ||
+    trimmed.startsWith('https://') ||
+    trimmed.startsWith('http://')
+  );
+}

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -204,6 +204,19 @@ export const usePermissionGroups = (): PermissionGroup[] => {
           },
           name: 'Modify Widgets',
         },
+        {
+          location: {
+            state: true,
+            key: StateEvent.PaarrotUi,
+          },
+          name: 'Set Room App UI',
+        },
+        {
+          location: {
+            key: MessageEvent.PaarrotUiAction,
+          },
+          name: 'Send Room App Actions',
+        },
       ],
     };
 

src/app/features/room/Room.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect } from 'react';
-import { Box, Line } from 'folds';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Line, Text, config } from 'folds';
 import { decodeRouteParam } from '../../pages/pathUtils';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
@@ -18,8 +18,11 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { activeRoomIdAtom } from '../../state/activeRoom';
 import { isMediaDrawerAtom } from '../../state/mediaDrawer';
-import { isForum } from '../../utils/room';
+import { isForum, parsePaarrotUiContent } from '../../utils/room';
 import { ForumRoomView } from './ForumRoomView';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { StateEvent } from '../../../types/matrix/room';
+import { RoomAppView } from '../room-app';
 
 export function Room() {
   const { eventId: rawEventId } = useParams();
@@ -41,6 +44,16 @@ export function Room() {
   const showRightDrawer =
     !skinny && (isPeopleDrawer || isMediaDrawer);
 
+  const uiEvent = useStateEvent(room, StateEvent.PaarrotUi);
+  const hasAppUi = useMemo(() => !!parsePaarrotUiContent(uiEvent?.getContent()), [uiEvent]);
+  const [preferChat, setPreferChat] = useState(false);
+
+  useEffect(() => {
+    setPreferChat(false);
+  }, [room.roomId]);
+
+  const showAppView = !forumRoom && hasAppUi && !preferChat;
+
   // Update titlebar with current room ID
   useEffect(() => {
     setActiveRoomId(room.roomId);
@@ -63,10 +76,38 @@ export function Room() {
     <PowerLevelsContextProvider value={powerLevels}>
       <Box grow="Yes">
         {!showMediaSolo &&
-          (forumRoom ? (
+          (showAppView ? (
+            <RoomAppView room={room} onShowChat={() => setPreferChat(true)} />
+          ) : forumRoom ? (
             <ForumRoomView room={room} eventId={eventId} />
           ) : (
-            <RoomView room={room} eventId={eventId} />
+            <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
+              {hasAppUi && preferChat && (
+                <Box
+                  shrink="No"
+                  alignItems="Center"
+                  justifyContent="SpaceBetween"
+                  gap="200"
+                  style={{
+                    padding: `${config.space.S200} ${config.space.S300}`,
+                    borderBottom: '1px solid var(--bq-surface-border, CurrentColor)',
+                  }}
+                >
+                  <Text size="T300">Room app available</Text>
+                  <Button
+                    size="300"
+                    variant="Primary"
+                    radii="300"
+                    onClick={() => setPreferChat(false)}
+                  >
+                    <Text size="B300">Show app</Text>
+                  </Button>
+                </Box>
+              )}
+              <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
+                <RoomView room={room} eventId={eventId} />
+              </Box>
+            </Box>
           ))}
         {showMediaSolo && <MediaDrawer room={room} solo />}
         {!showMediaSolo && showRightDrawer && (

src/app/features/room/RoomTimeline.tsx

@@ -2011,6 +2011,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         return 'CALL_EVENT_PENDING' as unknown as React.ReactNode;
       },
       [MessageEvent.RelayEmojiConfetti]: () => null,
+      [MessageEvent.PaarrotUiAction]: () => null,
     },
     (mEventId, mEvent, item) => {
       if (!showHiddenEvents) return null;