chore(deps): Element Call 0.28.0-lotus.2 (expected-device check, #121)

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

build/element-call/config.json

@@ -0,0 +1,5 @@
+{
+  "matrix_rtc_session": {
+    "delayed_leave": { "delay_ms": 60000, "restart_ms": 15000 }
+  }
+}

e2e/a11y.spec.ts

@@ -118,8 +118,26 @@ test.describe('accessibility', () => {
     test('room settings', async ({ page }) => {
       await page.getByRole('button', { name: 'More Options' }).first().click();
       await page.getByText('Room Settings', { exact: true }).click();
-      await expect(page.getByRole('dialog').first()).toBeVisible();
+      // [Gitea #278] The dialog has an accessible name.
+      await expect(page.getByRole('dialog', { name: 'A11y Room settings' })).toBeVisible();
       await auditPage(page, 'room settings');
+      // [Gitea #278] aria-selected on the power chips, unlabelled pack name and
+      // export date inputs were only on these pages.
+      // One page at a time, in order.
+      for (const name of ['Permissions', 'Emojis & Stickers', 'Export']) {
+        // eslint-disable-next-line no-await-in-loop
+        await page.getByRole('dialog').getByText(name, { exact: true }).first().click();
+        // eslint-disable-next-line no-await-in-loop
+        await page.waitForTimeout(1000);
+        // eslint-disable-next-line no-await-in-loop
+        await auditPage(page, `room settings: ${name}`);
+      }
+    });
+
+    test('inbox invites', async ({ page }) => {
+      await page.goto('/inbox/invites/');
+      await expect(page.getByRole('button', { name: /Known|Unknown|Spam/ }).first()).toBeVisible();
+      await auditPage(page, 'inbox invites');
     });
   });
 });

e2e/key-upload-recovery.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+import { ensureUser, hsReachable, loginUI, uniq } from './localHs';
+
+// [Gitea #201 KE-1] When the server keeps rejecting this device's key uploads
+// with "One time key … already exists", the app says so and offers the fix.
+const CONFLICT = {
+  errcode: 'M_UNKNOWN',
+  error: 'One time key signed_curve25519:AAAAAAAAAA0 already exists. Old key: {}; new key: {}',
+};
+
+test.describe('key upload recovery (#201)', () => {
+  test.beforeAll(async () => {
+    test.skip(!(await hsReachable()), 'local homeserver not running');
+  });
+
+  test('a diverged device sees the banner, and Fix opens the logout dialog', async ({ page }) => {
+    test.setTimeout(240_000);
+    const user = await ensureUser(uniq('kup'));
+    let rejected = 0;
+    await page.route(/\/_matrix\/client\/v3\/keys\/upload/, async (route) => {
+      rejected += 1;
+      await route.fulfill({ status: 400, json: CONFLICT });
+    });
+    await loginUI(page, user);
+
+    const banner = page
+      .getByRole('alert')
+      .filter({ hasText: /Encryption on this device is out of sync/ });
+    await expect(banner).toBeVisible({ timeout: 200_000 });
+    console.log(`key uploads rejected: ${rejected}`);
+    expect(rejected).toBeGreaterThanOrEqual(3);
+
+    await banner.getByRole('button', { name: 'Details' }).click();
+    await expect(banner).toContainText('Settings → Devices');
+    await expect(banner).toContainText('already exists');
+
+    await banner.getByRole('button', { name: /Fix: sign out/ }).click();
+    await expect(page.getByRole('dialog').getByText('Logout').first()).toBeVisible();
+  });
+
+  test('a healthy device never sees it', async ({ page }) => {
+    test.setTimeout(120_000);
+    const user = await ensureUser(uniq('kok'));
+    await loginUI(page, user);
+    await page.getByText('Connecting...').first().waitFor({ state: 'detached', timeout: 90_000 });
+    await page.waitForTimeout(5000);
+    await expect(page.getByText(/Encryption on this device is out of sync/)).toHaveCount(0);
+  });
+});

e2e/local-homeserver.spec.ts

@@ -109,9 +109,17 @@ test.describe('local homeserver regression', () => {
     );
     await loginUI(page, alice);
     await openRoom(page, room);
+    // Wait for the timeline to settle at the newest message first: a wheel
+    // during the initial jump-to-bottom gets snapped back (test race, seen
+    // ~1 in 5 runs once matrix-js-sdk 44 changed the load timing).
+    await expect(page.getByText('filler 39')).toBeInViewport();
     await page.mouse.move(600, 350);
-    await page.mouse.wheel(0, -600);
-    await expect(page.getByRole('button', { name: /Jump to Latest/ })).toBeVisible();
+    await expect(async () => {
+      await page.mouse.wheel(0, -600);
+      await expect(page.getByRole('button', { name: /Jump to Latest/ })).toBeVisible({
+        timeout: 2000,
+      });
+    }).toPass({ timeout: 20_000 });
     await page.locator('[data-slate-editor]').first().click();
     await page.keyboard.type('sent while scrolled up');
     await page.keyboard.press('Enter');

e2e/oauth-sdk44.spec.ts

@@ -0,0 +1,260 @@
+import { createHash } from 'node:crypto';
+import { test, expect, Page, Route, BrowserContext } from '@playwright/test';
+import { HS, PASSWORD, api, enc, ensureUser, hsReachable, uniq } from './localHs';
+
+// Native OAuth sign-in on matrix-js-sdk 44 (Gitea #201 SDK upgrade): login,
+// refresh on an expired token, the #16 two-tab refresh race, and logout
+// revocation. The homeserver is the real local Synapse; the auth server is
+// faked here and hands out REAL Synapse tokens for the device the client asked
+// for, so sync works after every step. "Expiry" is simulated by answering
+// M_UNKNOWN_TOKEN for a token we mark expired.
+const AUTH = 'https://auth.fake.test';
+
+type Fake = {
+  prompts: (string | null)[];
+  registered: number;
+  tokenCalls: { grant: string; refresh?: string }[];
+  revoked: string[];
+  expired: Set<string>;
+  issuedAccess: string[];
+};
+
+const b64url = (buf: Buffer) =>
+  buf.toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+
+async function synapseToken(localpart: string, deviceId: string): Promise<string> {
+  const res = await api<{ access_token: string }>('POST', '/_matrix/client/v3/login', undefined, {
+    type: 'm.login.password',
+    identifier: { type: 'm.id.user', user: localpart },
+    password: PASSWORD,
+    device_id: deviceId,
+  });
+  return res.access_token;
+}
+
+async function fakeOAuth(context: BrowserContext, localpart: string): Promise<Fake> {
+  const fake: Fake = {
+    prompts: [],
+    registered: 0,
+    tokenCalls: [],
+    revoked: [],
+    expired: new Set(),
+    issuedAccess: [],
+  };
+  const codes = new Map<string, { challenge: string; deviceId: string }>();
+  const refreshes = new Map<string, string>(); // live refresh token -> deviceId (rotating)
+  let n = 0;
+  const cors = { 'access-control-allow-origin': '*', 'access-control-allow-headers': '*' };
+
+  const issue = async (deviceId: string) => {
+    n += 1;
+    const access = await synapseToken(localpart, deviceId);
+    const refresh = `r${n}`;
+    refreshes.set(refresh, deviceId);
+    fake.issuedAccess.push(access);
+    return { token_type: 'Bearer', access_token: access, refresh_token: refresh, expires_in: 300 };
+  };
+
+  // Homeserver: advertise the issuer, serve auth metadata, and "expire" tokens.
+  await context.route(`${HS}/.well-known/matrix/client`, (route) =>
+    route.fulfill({
+      headers: cors,
+      json: { 'm.homeserver': { base_url: HS }, 'm.authentication': { issuer: `${AUTH}/` } },
+    }),
+  );
+  await context.route(`${HS}/_matrix/client/v1/auth_metadata`, (route) =>
+    route.fulfill({
+      headers: cors,
+      json: {
+        issuer: `${AUTH}/`,
+        authorization_endpoint: `${AUTH}/authorize`,
+        token_endpoint: `${AUTH}/token`,
+        registration_endpoint: `${AUTH}/register`,
+        revocation_endpoint: `${AUTH}/revoke`,
+        response_types_supported: ['code'],
+        response_modes_supported: ['query', 'fragment'],
+        grant_types_supported: ['authorization_code', 'refresh_token'],
+        code_challenge_methods_supported: ['S256'],
+        prompt_values_supported: ['create'],
+      },
+    }),
+  );
+  await context.route(`${HS}/_matrix/**`, async (route: Route) => {
+    const auth = route.request().headers().authorization ?? '';
+    const token = auth.replace(/^Bearer /, '');
+    if (token && fake.expired.has(token)) {
+      await route.fulfill({
+        status: 401,
+        headers: cors,
+        json: { errcode: 'M_UNKNOWN_TOKEN', error: 'Token expired', soft_logout: true },
+      });
+      return;
+    }
+    await route.fallback();
+  });
+
+  // Auth server.
+  await context.route(`${AUTH}/**`, async (route: Route) => {
+    const req = route.request();
+    const url = new URL(req.url());
+    if (req.method() === 'OPTIONS') {
+      await route.fulfill({ status: 204, headers: cors });
+      return;
+    }
+    if (url.pathname === '/register') {
+      fake.registered += 1;
+      await route.fulfill({ headers: cors, json: { client_id: 'fake-client' } });
+      return;
+    }
+    if (url.pathname === '/authorize') {
+      const deviceId = /urn:matrix:client:device:(\S+)/.exec(
+        url.searchParams.get('scope') ?? '',
+      )?.[1];
+      fake.prompts.push(url.searchParams.get('prompt'));
+      expect(url.searchParams.get('response_mode')).toBe('query');
+      expect(url.searchParams.get('code_challenge_method')).toBe('S256');
+      const code = `code-${Date.now()}`;
+      codes.set(code, { challenge: url.searchParams.get('code_challenge')!, deviceId: deviceId! });
+      const back = new URL(url.searchParams.get('redirect_uri')!);
+      back.searchParams.set('code', code);
+      back.searchParams.set('state', url.searchParams.get('state')!);
+      await route.fulfill({ status: 302, headers: { location: back.href } });
+      return;
+    }
+    const form = new URLSearchParams(req.postData() ?? '');
+    if (url.pathname === '/token') {
+      const grant = form.get('grant_type') ?? '';
+      fake.tokenCalls.push({ grant, refresh: form.get('refresh_token') ?? undefined });
+      if (grant === 'authorization_code') {
+        const pending = codes.get(form.get('code') ?? '');
+        const verifier = form.get('code_verifier') ?? '';
+        if (
+          !pending ||
+          b64url(createHash('sha256').update(verifier).digest()) !== pending.challenge
+        ) {
+          await route.fulfill({ status: 400, headers: cors, json: { error: 'invalid_grant' } });
+          return;
+        }
+        codes.delete(form.get('code')!);
+        await route.fulfill({ headers: cors, json: await issue(pending.deviceId) });
+        return;
+      }
+      if (grant === 'refresh_token') {
+        const deviceId = refreshes.get(form.get('refresh_token') ?? '');
+        if (!deviceId) {
+          // rotating refresh tokens: a used one is dead
+          await route.fulfill({ status: 400, headers: cors, json: { error: 'invalid_grant' } });
+          return;
+        }
+        refreshes.delete(form.get('refresh_token')!);
+        await route.fulfill({ headers: cors, json: await issue(deviceId) });
+        return;
+      }
+    }
+    if (url.pathname === '/revoke') {
+      fake.revoked.push(form.get('token') ?? '');
+      await route.fulfill({ status: 200, headers: cors, body: '' });
+      return;
+    }
+    await route.fulfill({ status: 404, headers: cors, body: '' });
+  });
+  return fake;
+}
+
+const storedSession = (page: Page) =>
+  page.evaluate(() => JSON.parse(localStorage.getItem('cinny_session_v1') ?? 'null'));
+
+async function oauthLogin(page: Page) {
+  await page.goto(`/login/${enc(HS)}/`);
+  await page.getByRole('button', { name: /Continue with/ }).click();
+  await page.waitForURL(/\/home/, { timeout: 60_000 });
+  await page.getByText('Connecting...').first().waitFor({ state: 'detached', timeout: 90_000 });
+}
+
+test.describe('OAuth sign-in on SDK 44', () => {
+  test.beforeAll(async () => {
+    test.skip(!(await hsReachable()), 'local homeserver not running');
+  });
+
+  test('login, refresh on expiry, two-tab race, logout revokes', async ({ context }) => {
+    test.setTimeout(240_000);
+    const user = await ensureUser(uniq('oa'));
+    const fake = await fakeOAuth(context, user.localpart);
+    const page = await context.newPage();
+
+    // 1. Login: registration, PKCE-checked code exchange, session persisted.
+    await oauthLogin(page);
+    expect(fake.registered).toBe(1);
+    expect(fake.tokenCalls.map((c) => c.grant)).toEqual(['authorization_code']);
+    let s = await storedSession(page);
+    expect(s.userId).toBe(user.userId);
+    expect(s.refreshToken).toBe('r1');
+    expect(s.oidc.clientId).toBe('fake-client');
+    const t1 = s.accessToken;
+
+    // 2. Second tab on the same session.
+    const page2 = await context.newPage();
+    await page2.goto('/home/');
+    await page2.getByText('Connecting...').first().waitFor({ state: 'detached', timeout: 90_000 });
+
+    // 3. Token "expires": both tabs get M_UNKNOWN_TOKEN on their next request
+    //    and refresh at once. Exactly one refresh may reach the auth server
+    //    (r1 is single-use); the other tab must adopt its tokens.
+    // Sync long-polls continuously, so both tabs hit it within ~30 s.
+    fake.expired.add(t1);
+    await expect
+      .poll(async () => (await storedSession(page)).accessToken, { timeout: 90_000 })
+      .not.toBe(t1);
+    await page.waitForTimeout(5000);
+    const refreshCalls = fake.tokenCalls.filter((c) => c.grant === 'refresh_token');
+    expect(refreshCalls.map((c) => c.refresh)).toEqual(['r1']);
+    s = await storedSession(page);
+    expect(s.refreshToken).toBe('r2');
+    await Promise.all(
+      [page, page2].map((p) =>
+        expect(p.getByText(/Username or email|Sign-in failed|logged out/i)).toHaveCount(0),
+      ),
+    );
+
+    // 4. Logout through the UI revokes both tokens at the auth server
+    //    (the SDK does it for OAuth sessions instead of calling /logout).
+    await page2.close();
+    const latest = await storedSession(page);
+    await page.getByRole('button', { name: 'User Settings' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Logout' }).first().click();
+    await page
+      .getByRole('dialog')
+      .getByRole('button', { name: 'Logout', exact: true })
+      .last()
+      .click();
+    await expect(
+      page.getByLabel('Username or email').or(page.getByRole('button', { name: /Continue with/ })),
+    ).toBeVisible({
+      timeout: 60_000,
+    });
+    expect(fake.revoked.sort()).toEqual([latest.accessToken, latest.refreshToken].sort());
+    expect(await storedSession(page)).toBeNull();
+  });
+
+  test('Register opens the auth server sign-up page (prompt=create)', async ({ context }) => {
+    test.setTimeout(120_000);
+    const user = await ensureUser(uniq('or'));
+    const fake = await fakeOAuth(context, user.localpart);
+    const page = await context.newPage();
+    await page.goto(`/register/${enc(HS)}/`);
+    // Native-OAuth server: no legacy registration form, just the auth server.
+    await expect(page.getByLabel('Username', { exact: true })).toHaveCount(0);
+    await page.getByRole('button', { name: /Continue with/ }).click();
+    await page.waitForURL(/\/home/, { timeout: 60_000 });
+    expect(fake.prompts).toEqual(['create']);
+  });
+
+  test('Login sends no prompt', async ({ context }) => {
+    test.setTimeout(120_000);
+    const user = await ensureUser(uniq('ol'));
+    const fake = await fakeOAuth(context, user.localpart);
+    const page = await context.newPage();
+    await oauthLogin(page);
+    expect(fake.prompts).toEqual([null]);
+  });
+});

package-lock.json

@@ -53,7 +53,7 @@
         "katex": "0.18.11",
         "linkify-react": "4.3.3",
         "linkifyjs": "4.3.3",
-        "matrix-js-sdk": "41.7.0",
+        "matrix-js-sdk": "44.0.0",
         "matrix-widget-api": "1.18.0",
         "millify": "6.1.0",
         "pdfjs-dist": "6.3.289",
@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.26",
+        "@lotusguild/element-call-embedded": "0.28.0-lotus.2",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,15 +2695,15 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.26",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.26/element-call-embedded-0.25.0-lotus.26.tgz",
-      "integrity": "sha512-u0gFV/ne61MHVkl2JFY6TjC0C/vY2oYTz6dFaDtAmdLUBH6gU+6ar0QOr5xs9bhr4+HT8CSBibU8mLTR+ByjKA==",
+      "version": "0.28.0-lotus.2",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.28.0-lotus.2/element-call-embedded-0.28.0-lotus.2.tgz",
+      "integrity": "sha512-g3xaZ/i3RQ0mToWmjLi08HjSuKD3BpAllj9aEucPS8wh3Uwmz4HXa0tgF1hEN3dPrZR2BTWLQii5Mtfh4037vg==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.1.tgz",
-      "integrity": "sha512-VRjWhE1UgHnPpJ3b9B5+8z71ZC/HICFngPPFIN6ktzmUBKI5RusPujzbAQUoB3CgZ0yU58L99AfSQS4YTztSWw==",
+      "version": "18.9.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.9.0.tgz",
+      "integrity": "sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 18"
@@ -5580,12 +5580,12 @@
       "dev": true
     },
     "node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-3.1.1.tgz",
+      "integrity": "sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==",
       "license": "MIT",
       "engines": {
-        "node": ">=18"
+        "node": ">=22"
       },
       "funding": {
         "type": "opencollective",
@@ -9152,15 +9152,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/katex": {
       "version": "0.18.11",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.18.11.tgz",
@@ -10037,21 +10028,19 @@
       "license": "Apache-2.0"
     },
     "node_modules/matrix-js-sdk": {
-      "version": "41.7.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.7.0.tgz",
-      "integrity": "sha512-MP0xNv/VVRbshq00TE6EVo77IIXsQk0KjiVtgKV0t9j/V77a6Klt00QrrO0XykkTUsNC0+mQeBMxnx75rZO86Q==",
+      "version": "44.0.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-44.0.0.tgz",
+      "integrity": "sha512-5wjcYMIX1aqhJC9hSUGjfSW+7SWEaLC8NUaek0xH5KGXqAO11M4Z5Mk7Voodsk+16Jm9PYB8/wMtyqIKFm0VAQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^18.3.1",
+        "@babel/runtime": "^8.0.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^18.9.0",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",
-        "content-type": "^2.0.0",
-        "jwt-decode": "^4.0.0",
+        "content-type": "^3.0.0",
         "loglevel": "^1.9.2",
         "matrix-events-sdk": "0.0.1",
-        "matrix-widget-api": "^1.16.1",
-        "oidc-client-ts": "^3.0.1",
+        "matrix-widget-api": "^1.19.0",
         "p-retry": "8",
         "sdp-transform": "^3.0.0",
         "unhomoglyph": "^1.0.6"
@@ -10060,6 +10049,22 @@
         "node": ">=22.0.0"
       }
     },
+    "node_modules/matrix-js-sdk/node_modules/@babel/runtime": {
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-8.0.8.tgz",
+      "integrity": "sha512-dEu8nGlRqjsJsvviUUoSMfcRHpwomCiRlXsc2mPfJ79+ffTpDm+JtfUtTMzUrqCApHQnCsVPD3gT1ZT8RgBRCQ==",
+      "license": "MIT"
+    },
+    "node_modules/matrix-js-sdk/node_modules/matrix-widget-api": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.20.0.tgz",
+      "integrity": "sha512-qwFP37rgns7mPesM5/vvZgknzb+kvyRB5BISv5sCuBxsGMceMr+Kogf7OkjRxBXdMCPBFuf6gIuYRe5S+lpzQw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/events": "^3.0.0",
+        "events": "^3.2.0"
+      }
+    },
     "node_modules/matrix-widget-api": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.18.0.tgz",
@@ -10405,18 +10410,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/oidc-client-ts": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.1.tgz",
-      "integrity": "sha512-hS5AJ5s/x4bXhHvNJT1v+GGvzHUwdRWqNQQbSrp10L1IRmzfRGKQ3VWN3dstJb+oF3WtAyKezwD2+dTEIyBiAA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "jwt-decode": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",

package.json

@@ -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 36",
+    "check:eslint": "eslint src/* --max-warnings 29",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
     "typecheck": "tsc --noEmit",
@@ -80,7 +80,7 @@
     "katex": "0.18.11",
     "linkify-react": "4.3.3",
     "linkifyjs": "4.3.3",
-    "matrix-js-sdk": "41.7.0",
+    "matrix-js-sdk": "44.0.0",
     "matrix-widget-api": "1.18.0",
     "millify": "6.1.0",
     "pdfjs-dist": "6.3.289",
@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.26",
+    "@lotusguild/element-call-embedded": "0.28.0-lotus.2",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/AuthFlowsLoader.tsx

@@ -23,7 +23,12 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
 
   const [state, load] = useAsyncCallback(
     useCallback(async () => {
-      const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
+      const result = await Promise.allSettled([
+        mx.loginFlows(),
+        mx.registerRequest({}),
+        // Rejects when the server has no native OAuth: normal for most servers.
+        mx.getAuthMetadata(),
+      ]);
       const loginFlows = promiseFulfilledResult(result[0]);
       const registerResp = promiseRejectedResult(result[1]) as MatrixError | undefined;
       let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
@@ -42,6 +47,7 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
       const authFlows: AuthFlows = {
         loginFlows,
         registerFlows,
+        authMetadata: promiseFulfilledResult(result[2]),
       };
 
       return authFlows;

src/app/components/CallEmbedProvider.tsx

@@ -52,6 +52,7 @@ import { useCallEndedToast } from '../hooks/useCallEndedToast';
 import { useCallRejoin } from '../hooks/useCallRejoin';
 import { usePttHaptics } from '../hooks/usePttHaptics';
 import { useScreenshareNotices } from '../hooks/useScreenshareNotices';
+import { ExpectedDevicesPrompt } from '../features/call/ExpectedDevicesPrompt';
 import { useCallAnnouncements } from '../hooks/useCallAnnouncements';
 import { useMutedTalkWarning } from '../hooks/useMutedTalkWarning';
 import { callAnnouncementAtom } from '../state/callAnnouncement';
@@ -571,7 +572,11 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
           ? content.sender_ts
           : event.getTs();
       const lifetime = Math.min(content.lifetime, 120000);
-      const notificationType = content.notification_type;
+      // `notification_type` is deprecated in MSC4075 (matrix-js-sdk 43+): newer
+      // senders may omit it and leave the presentation to us. Then ring in a
+      // direct chat and notify quietly elsewhere, like Element Web.
+      const notificationType =
+        content.notification_type ?? (directs.has(room.roomId) ? 'ring' : 'notification');
       const relation =
         event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
       const refEventId = relation?.event_id;
@@ -653,7 +658,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       mx.getRooms().forEach((r) => {
         mx.matrixRTC
           .getActiveRoomSession(r)
-          ?._onRTCSessionMemberUpdate()
+          ?.ensureRecalculateSessionMembers()
           .catch(() => undefined);
       });
     };
@@ -854,7 +859,14 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
     };
   }, [joined]);
 
-  return null;
+  return (
+    <ExpectedDevicesPrompt
+      embed={embed}
+      onCancel={() => {
+        setCallEmbed(undefined);
+      }}
+    />
+  );
 }
 
 /**

src/app/components/ManualVerification.tsx

@@ -82,7 +82,7 @@ export function ManualVerificationMethodSwitcher({
                 <MenuItem
                   size="300"
                   variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryPassphrase}
+                  aria-pressed={value === ManualVerificationMethod.RecoveryPassphrase}
                   radii="300"
                   onClick={() => handleSelect(ManualVerificationMethod.RecoveryPassphrase)}
                 >
@@ -93,7 +93,7 @@ export function ManualVerificationMethodSwitcher({
                 <MenuItem
                   size="300"
                   variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryKey}
+                  aria-pressed={value === ManualVerificationMethod.RecoveryKey}
                   radii="300"
                   onClick={() => handleSelect(ManualVerificationMethod.RecoveryKey)}
                 >

src/app/components/Modal500.tsx

@@ -7,8 +7,10 @@ import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
+  /** [Gitea #278] The dialog's accessible name (role="dialog" needs one). */
+  label: string;
 };
-export function Modal500({ requestClose, children }: Modal500Props) {
+export function Modal500({ requestClose, children, label }: Modal500Props) {
   const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -26,6 +28,7 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             variant="Background"
             role="dialog"
             aria-modal="true"
+            aria-label={label}
             // On mobile expand to fill the viewport. On desktop fall back to the
             // folds `size="500"` width (~50rem) — overriding maxWidth here would
             // squish the two-pane settings layout.

src/app/components/SecretStorage.tsx

@@ -1,6 +1,7 @@
 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,
@@ -39,7 +40,10 @@ export function SecretStorageRecoveryPassphrase({
           bits,
         );
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+        const match = await mx.secretStorage.checkKey(
+          decodedRecoveryKey,
+          keyContent as SecretStorageKeyDescription,
+        );
 
         if (!match) {
           throw new Error('Invalid recovery passphrase.');
@@ -132,7 +136,10 @@ export function SecretStorageRecoveryKey({
       async (recoveryKey) => {
         const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+        const match = await mx.secretStorage.checkKey(
+          decodedRecoveryKey,
+          keyContent as SecretStorageKeyDescription,
+        );
 
         if (!match) {
           throw new Error('Invalid recovery key.');

src/app/components/ServerConfigsLoader.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useMemo } from 'react';
-import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { Capabilities, ValidatedAuthMetadata } from 'matrix-js-sdk';
 import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { MediaConfig } from '../hooks/useMediaConfig';
@@ -28,23 +28,14 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
 
       const capabilities = promiseFulfilledResult(result[0]);
       const mediaConfig = promiseFulfilledResult(result[1]);
+      // getAuthMetadata validates (and rejects when the server has no native
+      // OAuth, which is normal for servers using traditional SSO).
       const authMetadata = promiseFulfilledResult(result[2]);
-      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
-
-      // Only validate if the server returned metadata — a rejected promise means no native
-      // Matrix OIDC (MSC3861/MAS), which is normal for servers using traditional SSO.
-      if (authMetadata !== undefined) {
-        try {
-          validatedAuthMetadata = validateAuthMetadata(authMetadata);
-        } catch (e) {
-          console.error(e);
-        }
-      }
 
       return {
         capabilities,
         mediaConfig,
-        authMetadata: validatedAuthMetadata,
+        authMetadata,
       };
     }, [mx]),
   );

src/app/components/editor/Editor.tsx

@@ -117,7 +117,14 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     const renderPlaceholder = useCallback(
       ({ attributes, children }: RenderPlaceholderProps) => (
-        <span {...attributes} className={css.EditorPlaceholderContainer}>
+        <span
+          {...attributes}
+          // [Gitea #278] Slate puts an inline `opacity: 0.333` on the placeholder,
+          // which beat EditorPlaceholderContainer's AA-contrast opacity (#222):
+          // measured 2.66:1. Drop it so the class decides.
+          style={{ ...attributes.style, opacity: undefined }}
+          className={css.EditorPlaceholderContainer}
+        >
           {/* Inner component to style the actual text position and appearance */}
           <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
             {children}

src/app/components/image-pack-view/UsageSwitcher.tsx

@@ -39,7 +39,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
           key={getUsageStr(usage)}
           size="300"
           variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
-          aria-selected={isSelected(usage)}
+          aria-pressed={isSelected(usage)}
           radii="300"
           onClick={() => onChange(usage)}
         >

src/app/components/setting-tile/SettingTile.tsx

@@ -34,7 +34,8 @@ export function SettingTile({ title, description, before, after, children }: Set
   });
 
   return (
-    <Box alignItems="Center" gap="300">
+    // data-setting-tile: lets a group card draw dividers between tiles only (#273).
+    <Box alignItems="Center" gap="300" data-setting-tile="">
       {before && <Box shrink="No">{before}</Box>}
       <Box grow="Yes" direction="Column" gap="100">
         {title && (

src/app/components/time-date/DatePicker.tsx

@@ -69,7 +69,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedDay === day}
+                  aria-pressed={selectedDay === day}
                   onClick={() => handleDay(day)}
                   disabled={
                     (selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
@@ -90,7 +90,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedMonth === month}
+                  aria-pressed={selectedMonth === month}
                   onClick={() => handleMonth(month)}
                   disabled={
                     (selectedYear === minYear && month < minMonth) ||
@@ -115,7 +115,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedYear === year}
+                  aria-pressed={selectedYear === year}
                   onClick={() => handleYear(year)}
                 >
                   <Text size="T300">{year}</Text>

src/app/components/time-date/TimePicker.tsx

@@ -71,7 +71,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                     variant={hour === selectedHour ? 'Primary' : 'Background'}
                     fill="None"
                     radii="300"
-                    aria-selected={hour === selectedHour}
+                    aria-pressed={hour === selectedHour}
                     onClick={() => handleHour(hour)}
                     disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
                   >
@@ -90,7 +90,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                       variant={hour === selectedHour ? 'Primary' : 'Background'}
                       fill="None"
                       radii="300"
-                      aria-selected={hour === selectedHour}
+                      aria-pressed={hour === selectedHour}
                       onClick={() => handleHour(hour)}
                       disabled={
                         (minDay && hour12to24(hour, selectedPM) < minHour24) ||
@@ -109,7 +109,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={minute === selectedMinute ? 'Primary' : 'Background'}
                 fill="None"
                 radii="300"
-                aria-selected={minute === selectedMinute}
+                aria-pressed={minute === selectedMinute}
                 onClick={() => handleMinute(minute)}
                 disabled={
                   (minDay && hour24 === minHour24 && minute < minMinute) ||
@@ -127,7 +127,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
                 fill="None"
                 radii="300"
-                aria-selected={!selectedPM}
+                aria-pressed={!selectedPM}
                 onClick={() => handlePeriod(false)}
                 disabled={minDay && minPM}
               >
@@ -138,7 +138,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
                 fill="None"
                 radii="300"
-                aria-selected={selectedPM}
+                aria-pressed={selectedPM}
                 onClick={() => handlePeriod(true)}
                 disabled={maxDay && !maxPM}
               >

src/app/components/user-avatar/UserAvatar.tsx

@@ -33,7 +33,9 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     <AvatarImage
       className={classNames(css.UserAvatar, className)}
       src={src}
-      alt={alt}
+      // [Gitea #278] An avatar sits next to the person's name or inside a
+      // labelled button, so without an explicit alt it is decorative.
+      alt={alt ?? ''}
       onError={() => setError(true)}
       onLoad={handleLoad}
       draggable={false}

src/app/features/call-summary/CallSummaryDialog.tsx

@@ -0,0 +1,84 @@
+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>
+  );
+}

src/app/features/call/CallControls.tsx

@@ -44,6 +44,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
 import { pttActiveAtom } from '../../hooks/useCallHotkeys';
+import { SCREENSHARE_AUDIO_STATE } from '../../plugins/call/CallControl';
 import { CallSoundboard } from './CallSoundboard';
 import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
 import { ScreenshareConfirm } from './ScreenshareConfirm';
@@ -90,6 +91,21 @@ export function CallControls({ callEmbed }: CallControlsProps) {
 
   const { microphone, video, sound, screenshare, spotlight, screenshareAudioMuted } =
     useCallControlState(callEmbed.control);
+  // [Gitea #277] Only offer "Mute Screenshare Audio" while a remote share's
+  // audio is playing, or while it is muted (so a hidden mute can't silently
+  // swallow the next share).
+  const [remoteScreenshareAudio, setRemoteScreenshareAudio] = useState(
+    callEmbed.control.remoteScreenshareAudio,
+  );
+  useEffect(() => {
+    const onState = () => setRemoteScreenshareAudio(callEmbed.control.remoteScreenshareAudio);
+    onState();
+    callEmbed.control.on(SCREENSHARE_AUDIO_STATE, onState);
+    return () => {
+      callEmbed.control.off(SCREENSHARE_AUDIO_STATE, onState);
+    };
+  }, [callEmbed]);
+  const showScreenshareAudio = remoteScreenshareAudio || screenshareAudioMuted;
   const micLevel = useCallMicLevel(callEmbed);
 
   const [cords, setCords] = useState<RectCords>();
@@ -122,6 +138,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   };
   const showScreenshare = allowScreenshare || screenshare;
   const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
+  // [Gitea #265] Phones can't share their screen from a browser; don't offer it.
+  const canShareScreen = typeof navigator.mediaDevices?.getDisplayMedia === 'function';
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
@@ -166,6 +184,111 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     return () => clearTimeout(id);
   }, [hangupState.status, callEmbed, setCallEmbed]);
 
+  const moreMenu = (
+    <PopOut
+      anchor={cords}
+      position="Top"
+      align="Center"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu>
+            <Box direction="Column" style={{ padding: config.space.S100 }}>
+              {compact && showScreenshare && screenshareMode !== 'hidden' && canShareScreen && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    handleScreenshareToggle();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {screenshare ? 'Stop Screenshare' : 'Share Screen'}
+                  </Text>
+                </MenuItem>
+              )}
+              {compact && showScreenshareAudio && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    callEmbed.control.toggleScreenshareAudio();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {screenshareAudioMuted ? 'Unmute Screenshare Audio' : 'Mute Screenshare Audio'}
+                  </Text>
+                </MenuItem>
+              )}
+              {compact && !!document.fullscreenEnabled && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    handleFullscreen();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+                  </Text>
+                </MenuItem>
+              )}
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleSpotlightClick}>
+                <Text size="B300" truncate>
+                  {spotlight ? 'Grid View' : 'Spotlight View'}
+                </Text>
+              </MenuItem>
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleReactionsClick}>
+                <Text size="B300" truncate>
+                  Reactions
+                </Text>
+              </MenuItem>
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleSettingsClick}>
+                <Text size="B300" truncate>
+                  Settings
+                </Text>
+              </MenuItem>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <IconButton
+        variant="Surface"
+        fill="Soft"
+        radii="400"
+        size="400"
+        onClick={handleOpenMenu}
+        outlined
+        aria-label="More options"
+        aria-expanded={!!cords}
+        aria-haspopup="menu"
+      >
+        <Icon size="400" src={Icons.VerticalDots} />
+      </IconButton>
+    </PopOut>
+  );
+
+  const hangupIcon = exiting ? (
+    <Spinner variant="Critical" fill="Solid" size="200" />
+  ) : (
+    <Icon src={Icons.PhoneDown} size="200" filled />
+  );
+
   const pttKeyLabel = pttKey === 'Space' ? 'SPACE' : pttKey.replace('Key', '').replace('Digit', '');
 
   return (
@@ -204,144 +327,114 @@ export function CallControls({ callEmbed }: CallControlsProps) {
         }}
         onCancel={() => setShareConfirm(false)}
       />
-      <SequenceCard
-        className={css.ControlCard}
-        variant="SurfaceVariant"
-        gap="400"
-        radii="500"
-        alignItems="Center"
-        justifyContent="SpaceBetween"
-        wrap="Wrap"
-      >
-        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
-          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <MicrophoneButton
-              enabled={microphone}
-              onToggle={handleMicrophoneToggle}
-              level={micLevel}
-            />
-            <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
-          </Box>
-          {!compact && showVideoGroup && <ControlDivider />}
-          {showVideoGroup && (
+      {compact ? (
+        // [Gitea #265] Phones / narrow windows: ONE row. Screenshare, its audio
+        // mute and fullscreen live in More (they rarely matter on a phone), and
+        // End is icon-only. The old stacked layout took four rows (~40% of a
+        // portrait phone).
+        <SequenceCard
+          className={css.ControlCard}
+          variant="SurfaceVariant"
+          gap="200"
+          radii="500"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          wrap="NoWrap"
+        >
+          <MicrophoneButton
+            enabled={microphone}
+            onToggle={handleMicrophoneToggle}
+            level={micLevel}
+          />
+          <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
+          {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
+          <ChatButton />
+          {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
+          {moreMenu}
+          <Button
+            variant="Critical"
+            fill="Solid"
+            radii="400"
+            size="400"
+            onClick={hangup}
+            disabled={exiting}
+            aria-label="End Call"
+            style={{ paddingInline: config.space.S300 }}
+          >
+            {hangupIcon}
+          </Button>
+        </SequenceCard>
+      ) : (
+        <SequenceCard
+          className={css.ControlCard}
+          variant="SurfaceVariant"
+          gap="400"
+          radii="500"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          wrap="Wrap"
+        >
+          <Box alignItems="Center" gap="Inherit" grow="Yes">
             <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-              {/* Show a forbidden control while its track is still live so the
-                  user can stop it; once stopped it hides and can't be restarted. */}
-              {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
-              {showScreenshare && (
-                <>
-                  {screenshareMode !== 'hidden' && (
-                    <ScreenShareButton
-                      enabled={screenshare}
-                      onToggle={() => handleScreenshareToggle()}
-                    />
-                  )}
-                  {/* Mute-screenshare-audio sits directly next to the screenshare
-                      control since they're the same concern. */}
-                  <ScreenshareAudioButton
-                    muted={screenshareAudioMuted}
-                    onToggle={() => callEmbed.control.toggleScreenshareAudio()}
-                  />
-                </>
-              )}
-              {!!document.fullscreenEnabled && (
-                <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
-              )}
+              <MicrophoneButton
+                enabled={microphone}
+                onToggle={handleMicrophoneToggle}
+                level={micLevel}
+              />
+              <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
             </Box>
-          )}
-        </Box>
-        {!compact && <ControlDivider />}
-        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
-          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <ChatButton />
-            {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
-            <PopOut
-              anchor={cords}
-              position="Top"
-              align="Center"
-              content={
-                <FocusTrap
-                  focusTrapOptions={{
-                    initialFocus: false,
-                    onDeactivate: () => setCords(undefined),
-                    clickOutsideDeactivates: true,
-                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                    escapeDeactivates: stopPropagation,
-                  }}
-                >
-                  <Menu>
-                    <Box direction="Column" style={{ padding: config.space.S100 }}>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleSpotlightClick}
-                      >
-                        <Text size="B300" truncate>
-                          {spotlight ? 'Grid View' : 'Spotlight View'}
-                        </Text>
-                      </MenuItem>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleReactionsClick}
-                      >
-                        <Text size="B300" truncate>
-                          Reactions
-                        </Text>
-                      </MenuItem>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleSettingsClick}
-                      >
-                        <Text size="B300" truncate>
-                          Settings
-                        </Text>
-                      </MenuItem>
-                    </Box>
-                  </Menu>
-                </FocusTrap>
-              }
-            >
-              <IconButton
-                variant="Surface"
-                fill="Soft"
-                radii="400"
-                size="400"
-                onClick={handleOpenMenu}
-                outlined
-                aria-label="More options"
-                aria-expanded={!!cords}
-                aria-haspopup="menu"
+            {showVideoGroup && <ControlDivider />}
+            {showVideoGroup && (
+              <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+                {/* Show a forbidden control while its track is still live so the
+                    user can stop it; once stopped it hides and can't be restarted. */}
+                {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
+                {showScreenshare && (
+                  <>
+                    {screenshareMode !== 'hidden' && (
+                      <ScreenShareButton
+                        enabled={screenshare}
+                        onToggle={() => handleScreenshareToggle()}
+                      />
+                    )}
+                    {/* Mute-screenshare-audio sits directly next to the screenshare
+                        control since they're the same concern. */}
+                    {showScreenshareAudio && (
+                      <ScreenshareAudioButton
+                        muted={screenshareAudioMuted}
+                        onToggle={() => callEmbed.control.toggleScreenshareAudio()}
+                      />
+                    )}
+                  </>
+                )}
+                {!!document.fullscreenEnabled && (
+                  <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
+                )}
+              </Box>
+            )}
+          </Box>
+          <ControlDivider />
+          <Box alignItems="Center" gap="Inherit" grow="Yes">
+            <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+              <ChatButton />
+              {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
+              {moreMenu}
+            </Box>
+            <Box shrink="No" direction="Column">
+              <Button
+                style={{ minWidth: toRem(88) }}
+                variant="Critical"
+                fill="Solid"
+                onClick={hangup}
+                before={hangupIcon}
+                disabled={exiting}
               >
-                <Icon size="400" src={Icons.VerticalDots} />
-              </IconButton>
-            </PopOut>
+                <Text size="B400">End</Text>
+              </Button>
+            </Box>
           </Box>
-          <Box shrink="No" direction="Column">
-            <Button
-              style={{ minWidth: toRem(88) }}
-              variant="Critical"
-              fill="Solid"
-              onClick={hangup}
-              before={
-                exiting ? (
-                  <Spinner variant="Critical" fill="Solid" size="200" />
-                ) : (
-                  <Icon src={Icons.PhoneDown} size="200" filled />
-                )
-              }
-              disabled={exiting}
-            >
-              <Text size="B400">End</Text>
-            </Button>
-          </Box>
-        </Box>
-      </SequenceCard>
+        </SequenceCard>
+      )}
     </Box>
   );
 }

src/app/features/call/ExpectedDevicesPrompt.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { useSetAtom } from 'jotai';
+import {
+  Box,
+  Button,
+  Dialog,
+  Header,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { CallEmbed } from '../../plugins/call';
+import {
+  MissingDevice,
+  acceptForSession,
+  describeLost,
+  describeMissing,
+  isAcceptedThisSession,
+  parseDeviceLost,
+  parseDeviceMissing,
+} from '../../plugins/call/expectedDevices';
+import { toastQueueAtom } from '../../state/toast';
+import { useModalStyle } from '../../hooks/useModalStyle';
+
+/**
+ * [Gitea #121] "Your usual headset isn't connected": the fork holds the join
+ * until we answer. Join anyway (not asked again this session for the same
+ * device) or Cancel (closes the call before it starts). A device lost mid-call
+ * is only a toast.
+ */
+export function ExpectedDevicesPrompt({
+  embed,
+  onCancel,
+}: {
+  embed: CallEmbed;
+  onCancel: () => void;
+}) {
+  const [missing, setMissing] = useState<MissingDevice[]>([]);
+  const setToast = useSetAtom(toastQueueAtom);
+  const modalStyle = useModalStyle(440);
+
+  useEffect(() => {
+    const offMissing = embed.listenAction<{ data?: unknown }>('io.lotus.device_missing', (evt) => {
+      const list = parseDeviceMissing(evt.detail?.data);
+      if (list.length === 0) return;
+      if (isAcceptedThisSession(list)) {
+        embed.control.sendDeviceDecision(true);
+        return;
+      }
+      setMissing(list);
+    });
+    const offLost = embed.listenAction<{ data?: unknown }>('io.lotus.device_lost', (evt) => {
+      const lost = parseDeviceLost(evt.detail?.data);
+      if (!lost) return;
+      setToast({
+        id: `device-lost-${lost.kind}-${Date.now()}`,
+        iconSrc: lost.kind === 'audioinput' ? Icons.Mic : Icons.VolumeHigh,
+        displayName: 'Audio device',
+        body: describeLost(lost),
+        roomName: embed.room.name ?? 'Voice call',
+        roomId: embed.roomId,
+      });
+    });
+    return () => {
+      offMissing();
+      offLost();
+    };
+  }, [embed, setToast]);
+
+  if (missing.length === 0) return null;
+
+  const joinAnyway = () => {
+    acceptForSession(missing);
+    embed.control.sendDeviceDecision(true);
+    setMissing([]);
+  };
+  const cancel = () => {
+    embed.control.sendDeviceDecision(false);
+    setMissing([]);
+    onCancel();
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
+          <Dialog
+            variant="Surface"
+            role="alertdialog"
+            aria-labelledby="expected-devices-title"
+            style={modalStyle}
+          >
+            <Header
+              variant="Surface"
+              size="500"
+              style={{
+                padding: `0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+            >
+              <Text id="expected-devices-title" as="h2" size="H4">
+                {missing.length === 1
+                  ? describeMissing(missing[0]).title
+                  : "Your usual audio devices aren't connected"}
+              </Text>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              {missing.map((d) => {
+                const t = describeMissing(d);
+                return (
+                  <Text key={d.kind} size="T300">
+                    <b>{t.expected}</b> isn&apos;t connected. Join with <b>{t.fallback}</b> instead?
+                  </Text>
+                );
+              })}
+              <Text size="T200" priority="300">
+                Plug it in and choose Cancel to start over with it.
+              </Text>
+              <Box direction="Column" gap="200">
+                <Button variant="Primary" onClick={joinAnyway}>
+                  <Text size="B400">Join anyway</Text>
+                </Button>
+                <Button variant="Secondary" fill="Soft" onClick={cancel}>
+                  <Text size="B400">Cancel</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -30,6 +30,7 @@ import {
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { setRoomAccountData } from '../../../utils/accountData';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -58,8 +59,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await mx.setRoomAccountData(room.roomId, type as any, content);
+      await setRoomAccountData(mx, room.roomId, type, content);
     },
     [mx, room.roomId],
   );

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
+import { IContent, MatrixError } from 'matrix-js-sdk';
 import {
   Box,
   Chip,
@@ -22,6 +22,7 @@ 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;
 
@@ -51,9 +52,9 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
     useCallback(
       (evtType, evtStateKey, evtContent) => {
         if (typeof evtStateKey === 'string') {
-          return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
+          return sendStateEvent(mx, room.roomId, evtType, evtContent, evtStateKey);
         }
-        return mx.sendEvent(room.roomId, evtType as any, evtContent);
+        return sendRoomEvent(mx, room.roomId, null, evtType, evtContent as IContent);
       },
       [mx, room],
     ),

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -31,6 +31,7 @@ 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;
 
@@ -59,7 +60,7 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
 
   const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
     useCallback(
-      (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
+      (c) => sendStateEvent(mx, room.roomId, type, c, stateKey),
       [mx, room, type, stateKey],
     ),
   );

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -109,8 +109,11 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
           alignItems="End"
         >
           <Box direction="Column" gap="100" grow="Yes">
-            <Text size="L400">Name</Text>
+            <Text as="label" htmlFor="room-pack-name" size="L400">
+              Name
+            </Text>
             <Input
+              id="room-pack-name"
               name="nameInput"
               required
               size="400"

src/app/features/common-settings/general/RoomProfile.tsx

@@ -52,8 +52,7 @@ import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-
-const MARKDOWN_PATTERN = /(\*\*|__|\*|_|~~|`|\[.+?\]\(.+?\))/;
+import { buildTopicContent } from '../../../utils/topicMarkdown';
 
 function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholder: string) {
   const start = textarea.selectionStart;
@@ -71,30 +70,6 @@ function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholde
   textarea.setSelectionRange(cursorStart, cursorEnd);
 }
 
-function topicMarkdownToHtml(text: string): string {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
-    .replace(/\n/g, '<br>');
-}
-
-function buildTopicContent(topic: string): Record<string, string> {
-  if (!MARKDOWN_PATTERN.test(topic)) return { topic };
-  const formattedBody = topicMarkdownToHtml(topic);
-  // Use HTML-stripped text as the plain topic so the header shows clean text, not raw markdown syntax
-  const plainTopic = formattedBody.replace(/<br>/g, '\n').replace(/<[^>]+>/g, '');
-
-  return { topic: plainTopic, format: 'org.matrix.custom.html', formatted_body: formattedBody };
-}
-
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
   canEditName: boolean;

src/app/features/common-settings/permissions/PermissionGroups.tsx

@@ -136,7 +136,8 @@ export function PermissionGroups({
                     outlined={powerChanges}
                     fill="Soft"
                     radii="Pill"
-                    aria-selected={opened}
+                    aria-haspopup="menu"
+                    aria-expanded={opened}
                     disabled={!canEdit || applyingChanges}
                     after={
                       powerChanges && (
@@ -200,7 +201,8 @@ export function PermissionGroups({
                           outlined={powerChanges}
                           fill="Soft"
                           radii="Pill"
-                          aria-selected={opened}
+                          aria-haspopup="menu"
+                          aria-expanded={opened}
                           disabled={!canEdit || applyingChanges}
                           after={
                             powerChanges && (

src/app/features/common-settings/soundboard/Soundboard.tsx

@@ -38,10 +38,14 @@ export function Soundboard({ requestClose }: SoundboardProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Box direction="Column" gap="200">
-                <Text size="L400">This room / space (shared)</Text>
+                <Text size="L400">
+                  {room?.isSpaceRoom() ? 'This space (shared)' : 'This room (shared)'}
+                </Text>
                 <Text size="T200" priority="300">
-                  Clips here are shared with everyone, and inherited by every room under this space
-                  — just like emoji/sticker packs. Only members with permission can edit.
+                  {/* [Gitea #279] Only a space's clips are inherited by rooms under it. */}
+                  {room?.isSpaceRoom()
+                    ? 'Clips here are shared with everyone, and inherited by every room under this space — just like emoji/sticker packs. Only members with permission can edit.'
+                    : 'Clips here are shared with everyone in this room — just like emoji/sticker packs. Only members with permission can edit.'}
                 </Text>
                 {room && <RoomSoundboardPack room={room} stateKey="" />}
               </Box>

src/app/features/outbox/OutboxFeature.tsx

@@ -94,10 +94,15 @@ export function OutboxFeature() {
       OFFLINE.has(mx.getSyncState()) ||
       (typeof navigator !== 'undefined' && navigator.onLine === false);
 
-    const persist = (next: OutboxEntry[]) => {
-      if (next === entries) return;
+    // [Gitea #268] Read-modify-write: another tab may have queued or cleared
+    // entries since we last looked, and saving our own copy over the key
+    // would drop theirs. Entries are added/removed by txnId, so applying our
+    // change to the stored list merges cleanly.
+    const persist = (update: (list: OutboxEntry[]) => OutboxEntry[]) => {
+      const stored = loadOutbox(userId);
+      const next = update(stored);
       entries = next;
-      saveOutbox(userId, entries);
+      if (next !== stored) saveOutbox(userId, next);
     };
 
     /**
@@ -123,8 +128,8 @@ export function OutboxFeature() {
         if (!shouldKeepInOutbox(event.getType(), event.getContent())) return;
         live.set(txnId, { event, room });
         if (event.status === EventStatus.NOT_SENT) scheduleBlipRetry(event);
-        persist(
-          withEntry(entries, {
+        persist((list) =>
+          withEntry(list, {
             txnId,
             roomId: room.roomId,
             threadId: event.threadRootId ?? null,
@@ -138,7 +143,7 @@ export function OutboxFeature() {
       // SENT, CANCELLED, or the remote echo replaced it (status null).
       live.delete(txnId);
       autoRetries.delete(txnId);
-      persist(withoutEntry(entries, txnId));
+      persist((list) => withoutEntry(list, txnId));
     };
 
     /** Re-send network failures, oldest first; a room stops at its first failure. */
@@ -191,7 +196,7 @@ export function OutboxFeature() {
           return !!room && isDelivered(room, entry.txnId);
         },
       );
-      plan.drop.forEach((entry) => persist(withoutEntry(entries, entry.txnId)));
+      plan.drop.forEach((entry) => persist((list) => withoutEntry(list, entry.txnId)));
       plan.restore.forEach((entry) => {
         const room = mx.getRoom(entry.roomId);
         if (!room || live.has(entry.txnId)) return;

src/app/features/room-settings/ExportRoomHistory.tsx

@@ -353,8 +353,11 @@ ${msgRows}
                 >
                   <Box gap="400" wrap="Wrap">
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
-                      <Text size="T300">From</Text>
+                      <Text as="label" htmlFor="export-from-date" size="T300">
+                        From
+                      </Text>
                       <Input
+                        id="export-from-date"
                         type="date"
                         variant="Secondary"
                         size="400"
@@ -364,8 +367,11 @@ ${msgRows}
                       />
                     </Box>
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
-                      <Text size="T300">To</Text>
+                      <Text as="label" htmlFor="export-to-date" size="T300">
+                        To
+                      </Text>
                       <Input
+                        id="export-to-date"
                         type="date"
                         variant="Secondary"
                         size="400"

src/app/features/room-settings/RoomInsights.tsx

@@ -401,16 +401,19 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                               {displayName}
                             </Text>
                             <Box alignItems="Center" gap="200">
-                              <div
-                                style={{
-                                  height: 6,
-                                  width: barWidth,
-                                  background: color.Primary.Main,
-                                  borderRadius: config.radii.R300,
-                                  transition: 'width 0.3s ease',
-                                  flexShrink: 0,
-                                }}
-                              />
+                              {/* [Gitea #270] The bar's % width is of its own track,
+                                  not of the row, so the count always fits beside it. */}
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                                <div
+                                  style={{
+                                    height: 6,
+                                    width: barWidth,
+                                    background: color.Primary.Main,
+                                    borderRadius: config.radii.R300,
+                                    transition: 'width 0.3s ease',
+                                  }}
+                                />
+                              </div>
                               <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
                                 {count}
                               </Text>

src/app/features/room-settings/RoomServerACL.tsx

@@ -32,24 +32,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../components/sequence-card';
 import { SequenceCardStyle } from '../common-settings/styles.css';
 import { stopPropagation } from '../../utils/keyboard';
-import { isValidServerPattern, matchesAnyGlob } from '../../utils/serverAcl';
+import { isValidServerPattern, matchesAnyGlob, normalizeServerAcl } from '../../utils/serverAcl';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useModalStyle } from '../../hooks/useModalStyle';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-type ServerAclContent = {
-  allow: string[];
-  deny: string[];
-  allow_ip_literals: boolean;
-};
-
-const DEFAULT_ACL: ServerAclContent = {
-  allow: ['*'],
-  deny: [],
-  allow_ip_literals: false,
-};
-
 // ── Server list sub-component ─────────────────────────────────────────────────
 
 type ServerListProps = {
@@ -185,20 +173,20 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
 
   // Read current ACL from room state
   const aclEvent = useStateEvent(room, StateEvent.RoomServerAcl);
-  const currentAcl = aclEvent?.getContent<ServerAclContent>() ?? DEFAULT_ACL;
+  const currentAcl = normalizeServerAcl(aclEvent?.getContent());
 
   // Local draft state — initialised from current ACL
-  const [allowList, setAllowList] = useState<string[]>(() => currentAcl.allow ?? ['*']);
-  const [denyList, setDenyList] = useState<string[]>(() => currentAcl.deny ?? []);
+  const [allowList, setAllowList] = useState<string[]>(() => currentAcl.allow);
+  const [denyList, setDenyList] = useState<string[]>(() => currentAcl.deny);
   const [allowIpLiterals, setAllowIpLiterals] = useState<boolean>(
-    () => currentAcl.allow_ip_literals ?? false,
+    () => currentAcl.allow_ip_literals,
   );
 
   // Track whether there are unsaved changes
   const isDirty =
-    JSON.stringify(allowList) !== JSON.stringify(currentAcl.allow ?? ['*']) ||
-    JSON.stringify(denyList) !== JSON.stringify(currentAcl.deny ?? []) ||
-    allowIpLiterals !== (currentAcl.allow_ip_literals ?? false);
+    JSON.stringify(allowList) !== JSON.stringify(currentAcl.allow) ||
+    JSON.stringify(denyList) !== JSON.stringify(currentAcl.deny) ||
+    allowIpLiterals !== currentAcl.allow_ip_literals;
 
   // Save handler
   const [saveState, save] = useAsyncCallback(
@@ -336,7 +324,10 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
                       id="allow-ip-literals"
                       checked={allowIpLiterals}
                       disabled={!canEdit}
-                      onClick={() => setAllowIpLiterals(!allowIpLiterals)}
+                      // folds' Checkbox has no onChange; readOnly tells React the
+                      // click handler controls it (no "checked without onChange").
+                      readOnly
+                      onClick={(e) => setAllowIpLiterals(e.currentTarget.checked)}
                       size="300"
                       variant="Primary"
                     />

src/app/features/room-settings/RoomSettingsRenderer.tsx

@@ -21,7 +21,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   if (!room) return null;
 
   return (
-    <Modal500 requestClose={closeSettings}>
+    <Modal500 requestClose={closeSettings} label={`${room.name} settings`}>
       <SpaceProvider value={space ?? null}>
         <RoomProvider value={room}>
           <RoomSettings initialPage={page} requestClose={closeSettings} />

src/app/features/room/ScheduleMessageModal.tsx

@@ -20,7 +20,12 @@ import { IContent } from 'matrix-js-sdk';
 import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
-import { scheduleMessage } from '../../utils/scheduledMessages';
+import {
+  describeScheduleError,
+  MAX_SCHEDULE_AHEAD_MS,
+  scheduleMessage,
+  SCHEDULE_TOO_FAR_TEXT,
+} from '../../utils/scheduledMessages';
 import { useModalStyle } from '../../hooks/useModalStyle';
 import {
   toLocalDate,
@@ -121,7 +126,13 @@ export function ScheduleMessageModal({
       return;
     }
     const diffMs = sendAt.getTime() - Date.now();
-    if (diffMs < 60_000) {
+    // [Gitea #275] Say so as soon as a too-late time is picked, not on submit.
+    const tooFar = diffMs > MAX_SCHEDULE_AHEAD_MS;
+    setError((e) => {
+      if (tooFar) return SCHEDULE_TOO_FAR_TEXT;
+      return e === SCHEDULE_TOO_FAR_TEXT ? null : e;
+    });
+    if (diffMs < 60_000 || tooFar) {
       setPreview(null);
       return;
     }
@@ -149,6 +160,10 @@ export function ScheduleMessageModal({
       setError('Scheduled time must be at least 1 minute in the future.');
       return;
     }
+    if (diffMs > MAX_SCHEDULE_AHEAD_MS) {
+      setError(SCHEDULE_TOO_FAR_TEXT);
+      return;
+    }
     if (!messageText.trim()) {
       setError('Please enter a message to schedule.');
       return;
@@ -162,7 +177,7 @@ export function ScheduleMessageModal({
       onScheduled(delayId, sendAt.getTime(), content);
       onClose();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to schedule message.');
+      setError(describeScheduleError(err));
       setSubmitting(false);
     }
   };
@@ -247,6 +262,8 @@ export function ScheduleMessageModal({
                     <input
                       id="schedule-date"
                       type="date"
+                      min={toLocalDate(new Date())}
+                      max={toLocalDate(new Date(Date.now() + MAX_SCHEDULE_AHEAD_MS))}
                       value={dateValue}
                       onChange={(e) => setDateValue(e.target.value)}
                       style={pickerInputStyle(color, config)}
@@ -294,7 +311,8 @@ export function ScheduleMessageModal({
                   </Box>
                 </Box>
               ) : (
-                (dateValue || timeValue) && (
+                (dateValue || timeValue) &&
+                error !== SCHEDULE_TOO_FAR_TEXT && (
                   <Text size="T200" style={{ color: color.Critical.Main }}>
                     Must be at least 1 minute in the future
                   </Text>

src/app/features/room/message/Message.tsx

@@ -1137,25 +1137,31 @@ export const Message = React.memo(
         </AvatarBase>
       );
 
+      // [Gitea #269] The content column shrinks to the message's width; the
+      // receipt pill / delivery status sit OUTSIDE it, in a full-width column,
+      // so their `margin-left: auto` reaches the row's right edge instead of
+      // wherever the text happens to end.
       const msgContentJSX = (
-        <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
-          {reply}
-          {edit && onEditId ? (
-            <MessageEditor
-              style={{
-                maxWidth: '100%',
-                width: '100vw',
-              }}
-              roomId={room.roomId}
-              room={room}
-              mEvent={mEvent}
-              imagePackRooms={imagePackRooms}
-              onCancel={() => onEditId()}
-            />
-          ) : (
-            children
-          )}
-          {reactions}
+        <Box direction="Column" style={{ maxWidth: '100%', flexGrow: 1, minWidth: 0 }}>
+          <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
+            {reply}
+            {edit && onEditId ? (
+              <MessageEditor
+                style={{
+                  maxWidth: '100%',
+                  width: '100vw',
+                }}
+                roomId={room.roomId}
+                room={room}
+                mEvent={mEvent}
+                imagePackRooms={imagePackRooms}
+                onCancel={() => onEditId()}
+              />
+            ) : (
+              children
+            )}
+            {reactions}
+          </Box>
           {readReceiptUsers.length > 0 && (
             <ReadReceiptAvatars
               room={room}

src/app/features/room/message/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
 
 export const MessageBase = style({
@@ -77,3 +77,14 @@ export const ReactionsMore = style([
 export const ReactionsTooltipText = style({
   wordBreak: 'break-word',
 });
+
+// [Gitea #199] Long-press opens the message action sheet on touch screens. On
+// iOS a long-press otherwise belongs to the system: a link/image callout, or
+// the text-selection loupe, both of which race (and win against) the 450 ms
+// press. No callout on message rows, and no selection while a finger is
+// down; copying text is in the sheet.
+globalStyle('[data-touch-actions]', { WebkitTouchCallout: 'none' });
+globalStyle('[data-touch-actions][data-pressing], [data-touch-actions][data-pressing] *', {
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+});

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -531,7 +531,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
                         No Pinned Messages
                       </Text>
                       <Text size="T400" align="Center">
-                        Users with sufficient power level can pin a messages from its context menu.
+                        Users with sufficient power level can pin a message from its context menu.
                       </Text>
                     </Box>
                   </Box>

src/app/features/room/widgets/FloatingWidget.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useSyncExternalStore } from 'react';
+import { Box, color, config, Icon, IconButton, Icons, Text } from 'folds';
+import { useSetAtom } from 'jotai';
+import {
+  destroyAllWidgetSessions,
+  destroyWidgetSession,
+  FLOATING_WIDGET,
+  floatingWidgetSessions,
+  subscribeWidgetSessions,
+  widgetSessionsVersion,
+} from './widgetSessions';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { widgetViewingAtom, widgetsPanelAtom } from '../../../state/widgetsPanel';
+import { zIndices } from '../../../styles/zIndex';
+
+/**
+ * [Gitea #205] Title bar for a widget kept on screen (MSC2931) after its room
+ * or the Widgets panel was left. The widget's own frame is positioned by
+ * widgetSessions.ts right below this bar. Mounted once for the signed-in
+ * client; unmounting (logout) stops every widget.
+ */
+export function FloatingWidget() {
+  useSyncExternalStore(subscribeWidgetSessions, widgetSessionsVersion);
+  const { navigateRoom } = useRoomNavigate();
+  const setPanel = useSetAtom(widgetsPanelAtom);
+  const setViewing = useSetAtom(widgetViewingAtom);
+  useEffect(() => () => destroyAllWidgetSessions(), []);
+
+  const session = floatingWidgetSessions()[0];
+  if (!session) return null;
+  const f = FLOATING_WIDGET;
+  const back = () => {
+    setViewing((prev) => ({ ...prev, [session.roomId]: session.widgetId }));
+    setPanel(true);
+    navigateRoom(session.roomId);
+  };
+
+  return (
+    <Box
+      role="region"
+      aria-label={`${session.name} (kept on screen)`}
+      alignItems="Center"
+      gap="100"
+      style={{
+        position: 'fixed',
+        right: f.right,
+        bottom: f.bottom + f.height,
+        width: f.width,
+        height: f.bar,
+        zIndex: zIndices.floatingWidget,
+        padding: `0 ${config.space.S100} 0 ${config.space.S300}`,
+        background: color.Surface.Container,
+        color: color.Surface.OnContainer,
+        borderRadius: '8px 8px 0 0',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+      }}
+    >
+      <Icon size="100" src={Icons.Category} />
+      <Text size="T300" truncate style={{ flexGrow: 1 }}>
+        {session.name}
+      </Text>
+      <IconButton size="300" radii="300" variant="Surface" aria-label="Back to room" onClick={back}>
+        <Icon size="100" src={Icons.ArrowGoLeft} />
+      </IconButton>
+      <IconButton
+        size="300"
+        radii="300"
+        variant="Surface"
+        aria-label={`Close ${session.name}`}
+        onClick={() => destroyWidgetSession(session.key)}
+      >
+        <Icon size="100" src={Icons.Cross} />
+      </IconButton>
+    </Box>
+  );
+}

src/app/features/room/widgets/RoomWidgetView.tsx

@@ -1,138 +1,48 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useSyncExternalStore } from 'react';
 import { Box, Icon, Icons, Text, color } from 'folds';
-import {
-  MatrixEvent,
-  MatrixEventEvent,
-  Room,
-  RoomEvent,
-  RoomEventHandlerMap,
-  RoomStateEvent,
-} from 'matrix-js-sdk';
-import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-api';
+import { Room } from 'matrix-js-sdk';
+import { Widget } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { GeneralWidgetDriver } from './GeneralWidgetDriver';
-import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
-import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
 import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
-import { isFromFilteredTimelineSet } from '../../../utils/room';
-
-type PendingAsk = {
-  requests: WidgetPermissionRequest[];
-  origin: string;
-  resolve: (allowed: Set<Capability>, remember: boolean) => void;
-};
+import {
+  attachWidgetSession,
+  detachWidgetSession,
+  getWidgetSession,
+  subscribeWidgetSessions,
+  widgetSessionKey,
+  widgetSessionsVersion,
+} from './widgetSessions';
 
 type RoomWidgetViewProps = {
   room: Room;
   widget: Widget;
 };
 
-// Hosts one room widget in a sandboxed iframe via ClientWidgetApi (so widgets
-// that wait on the client handshake load). Display-only access is granted
-// silently; reading/sending in this room is asked for (WidgetPermissionPrompt)
-// and, once granted, the room's live events are fed to the widget.
-// Re-mounts only when the widget id or its (template) URL changes — not on every
-// unrelated room-state update — so viewing a widget doesn't reload constantly.
+// Shows one room widget in the Widgets panel. The widget itself runs in a
+// session (widgetSessions.ts) whose sandboxed iframe lives in an app-level
+// layer and is positioned over this placeholder, so a widget that asked to
+// stay on screen can keep running in a floating window after the panel closes.
+// Display-only access is granted silently; reading/sending in this room is
+// asked for (WidgetPermissionPrompt) and, once granted, the room's live events
+// are fed to the widget. Re-attaches only when the widget id or its (template)
+// URL changes, so viewing a widget doesn't reload it on unrelated state updates.
 export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
   const mx = useMatrixClient();
-  const containerRef = useRef<HTMLDivElement>(null);
+  const slotRef = useRef<HTMLDivElement>(null);
   const widgetRef = useRef(widget);
   widgetRef.current = widget;
-  const [blocked, setBlocked] = useState(false);
-  const [pendingAsk, setPendingAsk] = useState<PendingAsk>();
+  const key = widgetSessionKey(room.roomId, widget.id);
+  useSyncExternalStore(subscribeWidgetSessions, widgetSessionsVersion);
+  const session = getWidgetSession(key);
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return undefined;
-    const current = widgetRef.current;
+    const slot = slotRef.current;
+    if (!slot) return undefined;
+    attachWidgetSession(mx, room, widgetRef.current, slot);
+    return () => detachWidgetSession(key, slot);
+  }, [mx, room, key, widget.templateUrl]);
 
-    const completeUrl = current.getCompleteUrl({
-      currentUserId: mx.getSafeUserId(),
-      widgetRoomId: room.roomId,
-      deviceId: mx.getDeviceId() ?? undefined,
-      baseUrl: mx.baseUrl,
-    });
-
-    // 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).
-    if (!isWidgetUrlSafe(completeUrl, window.location.origin)) {
-      setBlocked(true);
-      return undefined;
-    }
-    setBlocked(false);
-
-    const iframe = document.createElement('iframe');
-    iframe.title = current.name || 'Widget';
-    iframe.sandbox.value =
-      'allow-forms allow-scripts allow-same-origin allow-popups allow-downloads';
-    iframe.allow = 'autoplay; clipboard-write;';
-    iframe.src = completeUrl;
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.border = 'none';
-    container.append(iframe);
-
-    let origin = completeUrl;
-    try {
-      origin = new URL(completeUrl).host;
-    } catch {
-      // isWidgetUrlSafe already rejected unparsable URLs
-    }
-    let cancelAsk: (() => void) | undefined;
-    const driver = new GeneralWidgetDriver(
-      mx,
-      room.roomId,
-      { id: current.id, url: current.templateUrl },
-      (requests) =>
-        new Promise((resolve) => {
-          let settled = false;
-          const done = (allowed: Set<Capability>, remember: boolean) => {
-            if (settled) return;
-            settled = true;
-            cancelAsk = undefined;
-            setPendingAsk(undefined);
-            resolve({ allowed, remember });
-          };
-          cancelAsk = () => done(new Set(), false);
-          setPendingAsk({ requests, origin, resolve: done });
-        }),
-    );
-    const clientApi = new ClientWidgetApi(current, iframe, driver);
-    // Only messages from this widget's own frame and origin are handled, so a
-    // widget can't impersonate another one (or the call).
-    restrictWidgetMessages(clientApi, iframe, current.origin);
-    clientApi.setViewedRoomId(room.roomId);
-
-    // Live room events for widgets that were allowed to see them
-    // (ClientWidgetApi drops anything the widget has no capability for).
-    const feed = (ev: MatrixEvent) => {
-      if (ev.getRoomId() !== room.roomId) return;
-      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
-      clientApi.feedEvent(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
-    };
-    const onTimeline: RoomEventHandlerMap[RoomEvent.Timeline] = (ev, r, toStart, removed, data) => {
-      if (toStart || removed || !data?.liveEvent) return;
-      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259] don't feed widgets each event twice
-      if (ev.isBeingDecrypted()) ev.once(MatrixEventEvent.Decrypted, feed);
-      else feed(ev);
-    };
-    const onState = (ev: MatrixEvent) => {
-      if (ev.getRoomId() !== room.roomId) return;
-      clientApi.feedStateUpdate(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
-    };
-    mx.on(RoomEvent.Timeline, onTimeline);
-    mx.on(RoomStateEvent.Events, onState);
-
-    return () => {
-      mx.off(RoomEvent.Timeline, onTimeline);
-      mx.off(RoomStateEvent.Events, onState);
-      cancelAsk?.();
-      clientApi.stop();
-      iframe.remove();
-    };
-  }, [mx, room.roomId, widget.id, widget.templateUrl]);
-
-  if (blocked) {
+  if (session?.blocked) {
     return (
       <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
         <Icon size="400" src={Icons.Warning} style={{ color: color.Warning.Main }} />
@@ -149,14 +59,14 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
 
   return (
     <>
-      <Box ref={containerRef} grow="Yes" style={{ height: '100%', minHeight: 0 }} />
-      {pendingAsk && (
+      <Box ref={slotRef} grow="Yes" style={{ height: '100%', minHeight: 0 }} />
+      {session?.pendingAsk && (
         <WidgetPermissionPrompt
           widgetName={widget.name || 'Widget'}
-          origin={pendingAsk.origin}
+          origin={session.pendingAsk.origin}
           addedBy={addedBy}
-          requests={pendingAsk.requests}
-          onDone={pendingAsk.resolve}
+          requests={session.pendingAsk.requests}
+          onDone={session.pendingAsk.resolve}
         />
       )}
     </>

src/app/features/room/widgets/WidgetsPanel.tsx

@@ -16,7 +16,9 @@ import {
   config,
 } from 'folds';
 import { Room } from 'matrix-js-sdk';
+import { useAtom } from 'jotai';
 import classNames from 'classnames';
+import { widgetViewingAtom } from '../../../state/widgetsPanel';
 import * as css from './WidgetsPanel.css';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { RoomWidgetView } from './RoomWidgetView';
@@ -27,7 +29,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) {
@@ -54,12 +62,23 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
   const permissions = useRoomPermissions(creators, powerLevels);
   const canModify = permissions.stateEvent(StateEvent.Widget, mx.getSafeUserId());
 
-  const [viewingId, setViewingId] = useState<string | null>(null);
+  const [viewingByRoom, setViewingByRoom] = useAtom(widgetViewingAtom);
+  const viewingId = viewingByRoom[room.roomId] ?? null;
+  const setViewingId = (id: string | null) =>
+    setViewingByRoom((prev) => ({ ...prev, [room.roomId]: id }));
   const [adding, setAdding] = useState(false);
   const [saving, setSaving] = useState(false);
   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 +163,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 +182,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 +220,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"

src/app/features/room/widgets/widgetSessions.ts

@@ -0,0 +1,341 @@
+import {
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+  Room,
+  RoomEvent,
+  RoomEventHandlerMap,
+  RoomStateEvent,
+} from 'matrix-js-sdk';
+import {
+  Capability,
+  ClientWidgetApi,
+  IRoomEvent,
+  IWidgetApiRequest,
+  MatrixCapabilities,
+  Widget,
+  WidgetApiFromWidgetAction,
+} from 'matrix-widget-api';
+import { GeneralWidgetDriver } from './GeneralWidgetDriver';
+import { WidgetPermissionRequest, isWidgetUrlSafe, widgetCompleteUrl } from './widgetUtils';
+import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
+import { isFromFilteredTimelineSet } from '../../../utils/room';
+import { zIndices } from '../../../styles/zIndex';
+
+/**
+ * [Gitea #205] Running room widgets, kept outside React so a widget that asked
+ * to stay on screen (MSC2931 `set_always_on_screen`) survives closing the
+ * Widgets panel or switching rooms.
+ *
+ * Moving an iframe in the DOM reloads it, so every widget frame lives from the
+ * start in one app-level fixed layer. While the panel shows the widget, the
+ * frame is positioned over the panel's placeholder (`attach`), so it looks and
+ * behaves as before. When the placeholder goes away (`detach`) the widget is
+ * torn down, unless it is always-on-screen: then the same live frame moves to
+ * a small floating window (see FloatingWidget) until it is closed, the widget
+ * says it no longer needs to be on screen, or it is removed from the room.
+ */
+
+export type PendingAsk = {
+  requests: WidgetPermissionRequest[];
+  origin: string;
+  resolve: (allowed: Set<Capability>, remember: boolean) => void;
+};
+
+export type WidgetSession = {
+  readonly key: string;
+  readonly roomId: string;
+  readonly widgetId: string;
+  readonly name: string;
+  readonly templateUrl: string;
+  /** The URL is on this app's own origin: never rendered. */
+  readonly blocked: boolean;
+  alwaysOnScreen: boolean;
+  floating: boolean;
+  pendingAsk?: PendingAsk;
+};
+
+type Internal = WidgetSession & {
+  frame: HTMLDivElement;
+  slot: HTMLElement | null;
+  raf: number | undefined;
+  stop: () => void;
+};
+
+/** The floating window's geometry (FloatingWidget draws its title bar above). */
+export const FLOATING_WIDGET = { right: 16, bottom: 96, width: 360, height: 240, bar: 36 };
+
+const DOCKED_Z = 600; // just above the side panel (500 on phones), below popovers/modals
+
+const sessions = new Map<string, Internal>();
+const listeners = new Set<() => void>();
+let version = 0;
+const notify = () => {
+  version += 1;
+  listeners.forEach((l) => l());
+};
+export const subscribeWidgetSessions = (l: () => void): (() => void) => {
+  listeners.add(l);
+  return () => listeners.delete(l);
+};
+export const widgetSessionsVersion = (): number => version;
+
+export const widgetSessionKey = (roomId: string, widgetId: string): string =>
+  `${roomId}|${widgetId}`;
+
+export const getWidgetSession = (key: string): WidgetSession | undefined => sessions.get(key);
+
+export const floatingWidgetSessions = (): WidgetSession[] =>
+  [...sessions.values()].filter((s) => s.floating);
+
+let layerEl: HTMLDivElement | undefined;
+const layer = (): HTMLDivElement => {
+  if (!layerEl || !layerEl.isConnected) {
+    layerEl = document.createElement('div');
+    layerEl.id = 'lotus-widget-layer';
+    // The layer itself is click-through; only the frames inside take input.
+    Object.assign(layerEl.style, { position: 'fixed', inset: '0', pointerEvents: 'none' });
+    document.body.append(layerEl);
+  }
+  return layerEl;
+};
+
+const hideFrame = (s: Internal) => {
+  s.frame.style.visibility = 'hidden';
+};
+
+const placeDocked = (s: Internal) => {
+  const slot = s.slot;
+  if (!slot) return;
+  const r = slot.getBoundingClientRect();
+  if (r.width === 0 || r.height === 0) {
+    hideFrame(s);
+  } else {
+    Object.assign(s.frame.style, {
+      visibility: 'visible',
+      left: `${r.left}px`,
+      top: `${r.top}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`,
+      right: '',
+      bottom: '',
+      borderRadius: '0',
+      boxShadow: 'none',
+      zIndex: String(DOCKED_Z),
+    });
+  }
+  s.raf = requestAnimationFrame(() => placeDocked(s));
+};
+
+const placeFloating = (s: Internal) => {
+  const f = FLOATING_WIDGET;
+  Object.assign(s.frame.style, {
+    visibility: 'visible',
+    left: '',
+    top: '',
+    right: `${f.right}px`,
+    bottom: `${f.bottom}px`,
+    width: `${f.width}px`,
+    height: `${f.height}px`,
+    borderRadius: '0 0 8px 8px',
+    boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+    zIndex: String(zIndices.floatingWidget),
+  });
+};
+
+const stopPlacing = (s: Internal) => {
+  if (s.raf !== undefined) cancelAnimationFrame(s.raf);
+  s.raf = undefined;
+};
+
+export const destroyWidgetSession = (key: string): void => {
+  const s = sessions.get(key);
+  if (!s) return;
+  sessions.delete(key);
+  stopPlacing(s);
+  s.stop();
+  s.frame.remove();
+  notify();
+};
+
+export const destroyAllWidgetSessions = (): void => {
+  [...sessions.keys()].forEach(destroyWidgetSession);
+};
+
+/** Start (or reuse) the widget's session and dock its frame over `slot`. */
+export function attachWidgetSession(
+  mx: MatrixClient,
+  room: Room,
+  widget: Widget,
+  slot: HTMLElement,
+): WidgetSession {
+  const key = widgetSessionKey(room.roomId, widget.id);
+  let s = sessions.get(key);
+  if (s && s.templateUrl !== widget.templateUrl) {
+    destroyWidgetSession(key);
+    s = undefined;
+  }
+  if (!s) s = startSession(mx, room, widget, key);
+  stopPlacing(s);
+  s.slot = slot;
+  s.floating = false;
+  if (!s.blocked) placeDocked(s);
+  notify();
+  return s;
+}
+
+/** The panel stopped showing the widget: float it, or tear it down. */
+export function detachWidgetSession(key: string, slot: HTMLElement): void {
+  const s = sessions.get(key);
+  if (!s || s.slot !== slot) return;
+  s.slot = null;
+  stopPlacing(s);
+  if (!s.alwaysOnScreen || s.blocked) {
+    destroyWidgetSession(key);
+    return;
+  }
+  // One floating widget at a time: a newer one replaces an older one.
+  floatingWidgetSessions()
+    .filter((o) => o.key !== key)
+    .forEach((o) => destroyWidgetSession(o.key));
+  // Nobody is there to answer a permission prompt any more.
+  s.pendingAsk?.resolve(new Set(), false);
+  s.floating = true;
+  placeFloating(s);
+  notify();
+}
+
+function startSession(mx: MatrixClient, room: Room, widget: Widget, key: string): Internal {
+  const frame = document.createElement('div');
+  Object.assign(frame.style, {
+    position: 'fixed',
+    pointerEvents: 'auto',
+    overflow: 'hidden',
+    visibility: 'hidden',
+  });
+
+  const completeUrl = widgetCompleteUrl(widget, mx, room.roomId);
+  const blocked = !isWidgetUrlSafe(completeUrl, window.location.origin);
+  const s: Internal = {
+    key,
+    roomId: room.roomId,
+    widgetId: widget.id,
+    name: widget.name || 'Widget',
+    templateUrl: widget.templateUrl,
+    blocked,
+    alwaysOnScreen: false,
+    floating: false,
+    frame,
+    slot: null,
+    raf: undefined,
+    stop: () => undefined,
+  };
+  sessions.set(key, s);
+  if (blocked) return s;
+
+  // 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).
+  const iframe = document.createElement('iframe');
+  iframe.title = widget.name || 'Widget';
+  iframe.sandbox.value = 'allow-forms allow-scripts allow-same-origin allow-popups allow-downloads';
+  iframe.allow = 'autoplay; clipboard-write;';
+  iframe.src = completeUrl;
+  Object.assign(iframe.style, { width: '100%', height: '100%', border: 'none' });
+  frame.append(iframe);
+  layer().append(frame);
+
+  let origin = completeUrl;
+  try {
+    origin = new URL(completeUrl).host;
+  } catch {
+    // isWidgetUrlSafe already rejected unparsable URLs
+  }
+  let cancelAsk: (() => void) | undefined;
+  const driver = new GeneralWidgetDriver(
+    mx,
+    room.roomId,
+    { id: widget.id, url: widget.templateUrl },
+    (requests) =>
+      new Promise((resolve) => {
+        let settled = false;
+        const done = (allowed: Set<Capability>, remember: boolean) => {
+          if (settled) return;
+          settled = true;
+          cancelAsk = undefined;
+          s.pendingAsk = undefined;
+          notify();
+          resolve({ allowed, remember });
+        };
+        cancelAsk = () => done(new Set(), false);
+        // A floating widget has nobody to ask: grant nothing extra.
+        if (s.floating) {
+          done(new Set(), false);
+          return;
+        }
+        s.pendingAsk = { requests, origin, resolve: done };
+        notify();
+      }),
+  );
+  const clientApi = new ClientWidgetApi(widget, iframe, driver);
+  // Only messages from this widget's own frame and origin are handled, so a
+  // widget can't impersonate another one (or the call).
+  restrictWidgetMessages(clientApi, iframe, widget.origin);
+  clientApi.setViewedRoomId(room.roomId);
+
+  // MSC2931: the widget asks to stay visible when the user navigates away.
+  const onAlwaysOnScreen = (ev: CustomEvent<IWidgetApiRequest>) => {
+    ev.preventDefault();
+    if (!clientApi.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
+      clientApi.transport.reply(ev.detail, {
+        error: { message: 'Missing capability' },
+      });
+      return;
+    }
+    const value = (ev.detail.data as { value?: unknown } | undefined)?.value === true;
+    s.alwaysOnScreen = value;
+    clientApi.transport.reply(ev.detail, {});
+    // Floating only because it asked: once it no longer needs to be, go.
+    if (!value && s.floating) destroyWidgetSession(key);
+    else notify();
+  };
+  clientApi.on(`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, onAlwaysOnScreen);
+
+  // Live room events for widgets that were allowed to see them
+  // (ClientWidgetApi drops anything the widget has no capability for).
+  const feed = (ev: MatrixEvent) => {
+    if (ev.getRoomId() !== room.roomId) return;
+    if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
+    clientApi.feedEvent(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
+  };
+  const onTimeline: RoomEventHandlerMap[RoomEvent.Timeline] = (ev, r, toStart, removed, data) => {
+    if (toStart || removed || !data?.liveEvent) return;
+    if (isFromFilteredTimelineSet(data)) return; // [Gitea #259] don't feed widgets each event twice
+    if (ev.isBeingDecrypted()) ev.once(MatrixEventEvent.Decrypted, feed);
+    else feed(ev);
+  };
+  const onState = (ev: MatrixEvent) => {
+    if (ev.getRoomId() !== room.roomId) return;
+    // The widget was removed from the room while it was floating.
+    if (
+      s.floating &&
+      (ev.getType() === 'im.vector.modular.widgets' || ev.getType() === 'm.widget') &&
+      ev.getStateKey() === widget.id &&
+      !ev.getContent()?.url
+    ) {
+      destroyWidgetSession(key);
+      return;
+    }
+    clientApi.feedStateUpdate(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
+  };
+  mx.on(RoomEvent.Timeline, onTimeline);
+  mx.on(RoomStateEvent.Events, onState);
+
+  s.stop = () => {
+    mx.off(RoomEvent.Timeline, onTimeline);
+    mx.off(RoomStateEvent.Events, onState);
+    clientApi.off(`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, onAlwaysOnScreen);
+    cancelAsk?.();
+    clientApi.stop();
+  };
+  return s;
+}

src/app/features/room/widgets/widgetUtils.test.ts

@@ -8,6 +8,7 @@ import {
   generateWidgetId,
   classifyWidgetCapabilities,
   loadWidgetConsent,
+  widgetPopoutUrl,
 } from './widgetUtils';
 
 const APP = 'https://chat.lotusguild.org';
@@ -106,3 +107,33 @@ test('classifyWidgetCapabilities: reading protected state is fine, changing unpr
 test('loadWidgetConsent tolerates missing storage', () => {
   assert.equal(loadWidgetConsent('!r:x', 'w', 'https://w.example'), undefined);
 });
+
+test('[#266] space structure, call membership and Lotus room policy can never be granted', () => {
+  const { auto, ask } = classifyWidgetCapabilities(
+    [
+      'm.space.child',
+      'm.space.parent',
+      'org.matrix.msc3401.call',
+      'org.matrix.msc3401.call.member',
+      'm.call.member',
+      'io.lotus.voice_limit',
+      'io.lotus.room_quality',
+    ].map((t) => `org.matrix.msc2762.send.state_event:${t}`),
+  );
+  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);
+});

src/app/features/room/widgets/widgetUtils.ts

@@ -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)}`;
 
@@ -67,6 +92,16 @@ export const PROTECTED_STATE_TYPES: ReadonlySet<string> = new Set([
   'm.room.third_party_invite',
   'im.vector.modular.widgets',
   'm.widget',
+  // [Gitea #266] Space structure, call membership and Lotus room policy: a
+  // widget could restructure a space, fake call membership or lift the
+  // voice-channel limit, so these can't be granted even with consent.
+  'm.space.child',
+  'm.space.parent',
+  'org.matrix.msc3401.call',
+  'org.matrix.msc3401.call.member',
+  'm.call.member',
+  'io.lotus.voice_limit',
+  'io.lotus.room_quality',
 ]);
 
 export type WidgetPermissionRequest = {
@@ -137,8 +172,11 @@ export const classifyWidgetCapabilities = (
  */
 export type StoredWidgetConsent = { url: string; allowed: Capability[]; denied: Capability[] };
 
+// [Gitea #266] Swept on logout by clearPlaintextCaches, so one account's
+// approvals never apply to the next account on the same device.
+export const WIDGET_CONSENT_PREFIX = 'lotus.widgetConsent.';
 export const widgetConsentKey = (roomId: string, widgetId: string): string =>
-  `lotus.widgetConsent.${roomId}.${widgetId}`;
+  `${WIDGET_CONSENT_PREFIX}${roomId}.${widgetId}`;
 
 export const loadWidgetConsent = (
   roomId: string,

src/app/features/settings/about/About.tsx

@@ -8,6 +8,7 @@ import { getOriginBaseUrl, withOriginBaseUrl } from '../../../pages/pathUtils';
 import pkg from '../../../../../package.json';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { tauriInvoke } from '../../../hooks/useTauri';
 
 const LotusLogo = withOriginBaseUrl(getOriginBaseUrl(), '/public/res/lotus-logo.png');
 
@@ -78,6 +79,51 @@ function useServerSupport(): { support: MSC1929Support | null; loading: boolean
 type AboutProps = {
   requestClose: () => void;
 };
+/**
+ * [Gitea #276] Which build someone is on: the web deploy's commit and build
+ * date (stamped in by vite.config.js), plus the desktop app's own version from
+ * Tauri, the number a desktop or updater bug report needs.
+ */
+function BuildInfo() {
+  const [desktopVersion, setDesktopVersion] = useState<string>();
+  useEffect(() => {
+    tauriInvoke()?.('plugin:app|version')
+      .then((v) => {
+        if (typeof v === 'string') setDesktopVersion(v);
+      })
+      .catch(() => undefined);
+  }, []);
+  const commit = __LOTUS_BUILD_COMMIT__;
+  const built = new Date(__LOTUS_BUILD_DATE__);
+  const builtText = Number.isNaN(built.getTime())
+    ? undefined
+    : built.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+  return (
+    <Box direction="Column" gap="0">
+      {desktopVersion && (
+        <Text size="T200" priority="300">
+          Desktop {desktopVersion}
+        </Text>
+      )}
+      <Text size="T200" priority="300">
+        Web build{' '}
+        {commit !== 'unknown' ? (
+          <a
+            href={`https://code.lotusguild.org/LotusGuild/cinny/commit/${commit}`}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {commit}
+          </a>
+        ) : (
+          commit
+        )}
+        {builtText && ` · built ${builtText}`}
+      </Text>
+    </Box>
+  );
+}
+
 export function About({ requestClose }: AboutProps) {
   const mx = useMatrixClient();
   const { support: serverSupport, loading: supportLoading } = useServerSupport();
@@ -117,6 +163,7 @@ export function About({ requestClose }: AboutProps) {
                       <Text size="T200">v{pkg.version}</Text>
                     </Box>
                     <Text>A Matrix client for Lotus Guild.</Text>
+                    <BuildInfo />
                   </Box>
 
                   <Box gap="200" wrap="Wrap">

src/app/features/settings/account/ProfileDecoration.tsx

@@ -1,7 +1,12 @@
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
+import { Avatar, Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useUserProfile } from '../../../hooks/useUserProfile';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { nameInitials } from '../../../utils/common';
+import { UserAvatar } from '../../../components/user-avatar';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SettingTile } from '../../../components/setting-tile';
 import {
@@ -14,6 +19,8 @@ import { invalidateDecorationCache } from '../../../hooks/useAvatarDecoration';
 
 const PROFILE_FIELD = 'io.lotus.avatar_decoration';
 const CELL_SIZE = 72;
+// Matches AvatarDecoration's default inset, so the preview looks like the timeline.
+const PREVIEW_INSET = 8;
 
 function DecorationPreviewCell({
   slug,
@@ -86,6 +93,12 @@ function categoryOf(slug: string | null): string {
 export function ProfileDecoration() {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
+  const useAuthentication = useMediaAuthentication();
+  const profile = useUserProfile(userId);
+  const myName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const myAvatarUrl = profile.avatarUrl
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined;
 
   const [current, setCurrent] = useState<string | null>(null);
   const [selected, setSelected] = useState<string | null>(null);
@@ -198,6 +211,10 @@ export function ProfileDecoration() {
       <Box direction="Column" gap="300">
         {/* Current selection preview */}
         <Box alignItems="Center" gap="300">
+          {/* [Gitea #272] Your own avatar with the decoration overlaid, as the
+              timeline draws it (AvatarDecoration: the image is the avatar plus
+              an 8px margin on every side). With no decoration the circle gets
+              a visible dashed outline instead of vanishing into the card. */}
           <div
             style={{
               position: 'relative',
@@ -205,10 +222,29 @@ export function ProfileDecoration() {
               height: CELL_SIZE,
               flexShrink: 0,
               borderRadius: '50%',
-              background: color.SurfaceVariant.Container,
-              overflow: 'hidden',
+              boxSizing: 'border-box',
+              border: selected
+                ? 'none'
+                : `2px dashed color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 45%, transparent)`,
             }}
           >
+            <Avatar
+              size="500"
+              radii="Pill"
+              style={{
+                position: 'absolute',
+                inset: PREVIEW_INSET,
+                width: CELL_SIZE - PREVIEW_INSET * 2,
+                height: CELL_SIZE - PREVIEW_INSET * 2,
+              }}
+            >
+              <UserAvatar
+                userId={userId}
+                src={myAvatarUrl}
+                alt=""
+                renderFallback={() => <Text size="H5">{nameInitials(myName)}</Text>}
+              />
+            </Avatar>
             {selected && (
               <img
                 src={decorationUrl(selected)}
@@ -220,6 +256,7 @@ export function ProfileDecoration() {
                   height: '100%',
                   objectFit: 'contain',
                   pointerEvents: 'none',
+                  zIndex: 1,
                 }}
               />
             )}

src/app/features/settings/general/General.tsx

@@ -111,7 +111,8 @@ import {
   translationUnavailableText,
 } from '../../../utils/translation/langUtils';
 import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle, SettingTileGroup } from '../styles.css';
+import { ScreenSize, useScreenSize } from '../../../hooks/useScreenSize';
 import { UpdateProgress, useTauriUpdater } from '../../../hooks/useTauriUpdater';
 import {
   describeUpdateError,
@@ -1598,6 +1599,7 @@ function Privacy() {
 // [Gitea #104] Sync toggle + the two manual actions. The toggle is itself
 // device-local (never synced) so switching it off here sticks.
 function SettingsSyncSection() {
+  const isMobile = useScreenSize() === ScreenSize.Mobile;
   const [settingsSync, setSettingsSync] = useSetting(settingsAtom, 'settingsSync');
   const { pushNow, clearRemote } = useSettingsSyncActions();
   const [busy, setBusy] = useState<'push' | 'clear' | null>(null);
@@ -1621,6 +1623,34 @@ function SettingsSyncSection() {
     }
   };
 
+  const syncButtons = (
+    <Box gap="200">
+      <Button
+        size="300"
+        variant="Secondary"
+        fill="Soft"
+        outlined
+        radii="300"
+        disabled={busy !== null}
+        before={busy === 'push' ? <Spinner size="100" variant="Secondary" /> : undefined}
+        onClick={() => run('push')}
+      >
+        <Text size="B300">Push now</Text>
+      </Button>
+      <Button
+        size="300"
+        variant="Critical"
+        fill="None"
+        radii="300"
+        disabled={busy !== null}
+        before={busy === 'clear' ? <Spinner size="100" variant="Critical" /> : undefined}
+        onClick={() => run('clear')}
+      >
+        <Text size="B300">Clear synced copy</Text>
+      </Button>
+    </Box>
+  );
+
   return (
     <Box direction="Column" gap="100">
       <Text size="L400">Sync</Text>
@@ -1636,34 +1666,12 @@ function SettingsSyncSection() {
           <SettingTile
             title="Use This Device's Settings Everywhere"
             description="Push this device's current preferences so every other device adopts them, even ones that changed something more recently."
-            after={
-              <Box gap="200">
-                <Button
-                  size="300"
-                  variant="Secondary"
-                  fill="Soft"
-                  outlined
-                  radii="300"
-                  disabled={busy !== null}
-                  before={busy === 'push' ? <Spinner size="100" variant="Secondary" /> : undefined}
-                  onClick={() => run('push')}
-                >
-                  <Text size="B300">Push now</Text>
-                </Button>
-                <Button
-                  size="300"
-                  variant="Critical"
-                  fill="None"
-                  radii="300"
-                  disabled={busy !== null}
-                  before={busy === 'clear' ? <Spinner size="100" variant="Critical" /> : undefined}
-                  onClick={() => run('clear')}
-                >
-                  <Text size="B300">Clear synced copy</Text>
-                </Button>
-              </Box>
-            }
-          />
+            // [Gitea #273] On phones the two buttons squeezed the text into a
+            // narrow column; put them under the description there.
+            after={isMobile ? undefined : syncButtons}
+          >
+            {isMobile && <Box style={{ paddingTop: config.space.S100 }}>{syncButtons}</Box>}
+          </SettingTile>
           {note && (
             <Text
               size="T200"
@@ -1741,6 +1749,7 @@ 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');
@@ -1800,7 +1809,8 @@ function Calls() {
           title="Noise Suppression"
           description={
             <Box direction="Column" gap="200">
-              <Text>
+              {/* [Gitea #271] T200 like every other setting description. */}
+              <Text size="T200">
                 Filter background noise from your mic during calls. Browser-native uses the built-in
                 WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger removal.
               </Text>
@@ -2033,7 +2043,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={SequenceCardStyle}
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2053,6 +2063,13 @@ 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"
@@ -2089,7 +2106,12 @@ function Calls() {
           description={
             deafenBind.error ??
             (deafenHotkey
-              ? `Press ${keyLabel(deafenKey)} during a call to mute your speakers. Press Escape to cancel rebind.${
+              ? `${
+                  // [Gitea #279] The Escape hint only applies while rebinding.
+                  deafenBind.listening
+                    ? 'Press a key to bind it, or Escape to cancel.'
+                    : `Press ${keyLabel(deafenKey)} during a call to mute your speakers.`
+                }${
                   !isSafeGlobalToggleKey(deafenKey)
                     ? ` A letter, digit or Space only works in the call view — on a chat screen typing takes priority${
                         isTauriEnv() && globalCallHotkeys ? ' and other apps are never watched' : ''
@@ -2130,7 +2152,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={SequenceCardStyle}
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2264,7 +2286,11 @@ function Calls() {
         />
       </SequenceCard>
 
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SequenceCard
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        variant="SurfaceVariant"
+        direction="Column"
+      >
         <SettingTile
           title="Soundboard"
           description="Show a soundboard button in the call bar. Upload short audio clips (like custom emojis) to play them into the call. Clips sync across your devices."
@@ -2751,7 +2777,11 @@ function Messages() {
           }
         />
       </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SequenceCard
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        variant="SurfaceVariant"
+        direction="Column"
+      >
         <SettingTile
           title="Translate Messages Into"
           description={

src/app/features/settings/notifications/NotificationModeSwitcher.tsx

@@ -98,7 +98,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod
                     key={mode}
                     size="300"
                     variant="Surface"
-                    aria-selected={mode === selectedMode}
+                    aria-pressed={mode === selectedMode}
                     radii="300"
                     onClick={() => handleSelect(mode)}
                   >

src/app/features/settings/styles.css.ts

@@ -1,6 +1,18 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
 
 export const SequenceCardStyle = style({
   padding: config.space.S300,
 });
+
+/**
+ * [Gitea #273] Several settings share one card; without a separator the next
+ * tile's title read like part of the previous description. A thin line goes
+ * between tiles only (not between a tile and its own slider or note).
+ */
+export const SettingTileGroup = style({});
+// globalStyle: vanilla-extract's `selectors` may only target the element itself.
+globalStyle(`${SettingTileGroup} > [data-setting-tile] ~ [data-setting-tile]`, {
+  borderTop: `1px solid color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 14%, transparent)`,
+  paddingTop: config.space.S400,
+});

src/app/features/space-settings/SpaceSettingsRenderer.tsx

@@ -21,7 +21,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   if (!room) return null;
 
   return (
-    <Modal500 requestClose={closeSettings}>
+    <Modal500 requestClose={closeSettings} label={`${room.name} space settings`}>
       <SpaceProvider value={space ?? null}>
         <RoomProvider value={room}>
           <SpaceSettings initialPage={page} requestClose={closeSettings} />

src/app/features/toast/LotusToastContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, CSSProperties } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { color, config, Icon, IconButton, Icons } from 'folds';
+import { Button, color, config, Icon, IconButton, Icons, Text } from 'folds';
 import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { toastQueueAtom, dismissToastAtom, ToastNotif } from '../../state/toast';
 import { useSetting } from '../../state/hooks/settings';
@@ -43,13 +43,17 @@ function ToastCard({ toast }: ToastCardProps) {
 
   useEffect(() => {
     if (toast.sticky) return;
-    timerRef.current = setTimeout(() => {
-      dismiss(toast.id);
-    }, 4000);
+    timerRef.current = setTimeout(
+      () => {
+        dismiss(toast.id);
+      },
+      // [Gitea #253] A toast with a button stays long enough to use it.
+      toast.actionLabel ? 10_000 : 4000,
+    );
     return () => {
       if (timerRef.current !== null) clearTimeout(timerRef.current);
     };
-  }, [dismiss, toast.id, toast.sticky]);
+  }, [dismiss, toast.id, toast.sticky, toast.actionLabel]);
 
   const handleCardClick = () => {
     if (toast.onClick) {
@@ -212,6 +216,24 @@ 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>
   );
 }

src/app/hooks/useAuthFlows.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { IAuthData, MatrixError } from 'matrix-js-sdk';
+import { IAuthData, MatrixError, ValidatedAuthMetadata } from 'matrix-js-sdk';
 import { ILoginFlowsResponse } from 'matrix-js-sdk/lib/@types/auth';
 
 export enum RegisterFlowStatus {
@@ -44,6 +44,13 @@ export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsRes
 export type AuthFlows = {
   loginFlows: ILoginFlowsResponse;
   registerFlows: RegisterFlowsResponse;
+  /**
+   * The homeserver's OAuth 2.0 metadata (`/_matrix/client/v1/auth_metadata`),
+   * when it uses native OAuth (MSC3861, e.g. matrix.org via MAS). The same
+   * source the SDK uses to refresh tokens, so sign-in is only offered when
+   * refresh will work too.
+   */
+  authMetadata?: ValidatedAuthMetadata;
 };
 
 const AuthFlowsContext = createContext<AuthFlows | null>(null);

src/app/hooks/useCallEndedToast.ts

@@ -3,7 +3,10 @@ import { useSetAtom } from 'jotai';
 import { CallEmbed } from '../plugins/call';
 import { useCallHangupEvent } from './useCallEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { describeCallEnd } from '../utils/callSummary';
+import { describeCallDetails, describeCallEnd } from '../utils/callSummary';
+import { callSummaryViewAtom } from '../state/callSummary';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
 
 // 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.
@@ -16,6 +19,8 @@ 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(() => {
@@ -25,14 +30,25 @@ 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: embed.room.name ?? 'Voice call',
+        roomName,
         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);

src/app/hooks/useLongPress.ts

@@ -17,22 +17,37 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
   const timer = useRef<number | undefined>(undefined);
   const start = useRef<{ x: number; y: number } | null>(null);
   const fired = useRef(false);
+  // [Gitea #199] The element being pressed carries `data-pressing` (set on the
+  // DOM directly, no re-render) so iOS can't start a text selection under
+  // the finger; see `[data-touch-actions]` in room/message/styles.css.ts.
+  const pressed = useRef<HTMLElement | null>(null);
 
-  const clear = useCallback(() => {
+  const stopTimer = useCallback(() => {
     if (timer.current !== undefined) window.clearTimeout(timer.current);
     timer.current = undefined;
     start.current = null;
   }, []);
 
+  // The finger is up (or the gesture was cancelled): only now drop
+  // `data-pressing`, so the system selection can't start under a finger that
+  // is still down after the sheet opened.
+  const clear = useCallback(() => {
+    stopTimer();
+    pressed.current?.removeAttribute('data-pressing');
+    pressed.current = null;
+  }, [stopTimer]);
+
   const onTouchStart = useCallback(
     (evt: React.TouchEvent) => {
       if (!coarse || evt.touches.length !== 1) return;
       const t = evt.touches[0];
       start.current = { x: t.clientX, y: t.clientY };
       fired.current = false;
+      pressed.current = evt.currentTarget as HTMLElement;
+      pressed.current.setAttribute('data-pressing', '');
       timer.current = window.setTimeout(() => {
         const s = start.current;
-        clear();
+        stopTimer();
         if (!s) return;
         fired.current = true;
         window.setTimeout(() => {
@@ -41,7 +56,7 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
         onLongPress(s.x, s.y);
       }, LONG_PRESS_MS);
     },
-    [coarse, clear, onLongPress],
+    [coarse, stopTimer, onLongPress],
   );
 
   const onTouchMove = useCallback(
@@ -72,7 +87,16 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
 
   return {
     coarse,
-    handlers: coarse ? { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: clear } : {},
+    handlers: coarse
+      ? {
+          // [Gitea #199] Marks the element for the iOS hardening CSS.
+          'data-touch-actions': '',
+          onTouchStart,
+          onTouchMove,
+          onTouchEnd,
+          onTouchCancel: clear,
+        }
+      : {},
     /** True for ~1 s after a long-press fired (drop the Android contextmenu echo). */
     suppressContextMenu: fired,
   };

src/app/hooks/usePowerLevels.ts

@@ -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[key] = DEFAULT_POWER_LEVELS[key] as any;
+        (draftPl as Record<string, unknown>)[key] = DEFAULT_POWER_LEVELS[key];
       }
     });
     if (draftPl.notifications && typeof draftPl.notifications.room !== 'number') {

src/app/pages/App.tsx

@@ -25,6 +25,7 @@ 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';
@@ -248,6 +249,7 @@ function App() {
                             <SeasonalEffect />
                             <NightLightOverlay />
                             <LotusToastContainer />
+                            <CallSummaryDialog />
                           </JotaiProvider>
                           <ReactQueryDevtools initialIsOpen={false} />
                         </QueryClientProvider>

src/app/pages/KeychainUnavailable.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Box, Button, Text, config } from 'folds';
+import { removeFallbackSession } from '../state/sessions';
+import type { KeychainBootResult } from '../state/keychainSession';
+import type { KeychainInvoke } from '../state/keychainMirror';
+
+/**
+ * [Gitea #105] Shown instead of the app when the desktop app's sign-in is kept
+ * in the OS keychain but couldn't be read this time. Never a silent logout:
+ * Retry boots again; signing in again is an explicit choice.
+ */
+export function KeychainUnavailable({
+  boot,
+  invoke,
+}: {
+  boot: KeychainBootResult;
+  invoke: KeychainInvoke | undefined;
+}) {
+  const [busy, setBusy] = useState(false);
+  const missing = boot.mode === 'missing';
+  const signInAgain = async () => {
+    setBusy(true);
+    removeFallbackSession();
+    await invoke?.('secure_session_clear').catch(() => undefined);
+    window.location.reload();
+  };
+  return (
+    <Box
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="400"
+      style={{ minHeight: '100vh', padding: config.space.S700, textAlign: 'center' }}
+    >
+      <Text size="H3">Couldn&apos;t read your sign-in</Text>
+      <Text size="T300" style={{ maxWidth: 460 }}>
+        {missing
+          ? 'Lotus Chat keeps your sign-in in Windows Credential Manager, but the entry is missing. If you removed it, sign in again.'
+          : 'Lotus Chat keeps your sign-in in Windows Credential Manager and couldn’t read it just now. This is usually temporary.'}
+      </Text>
+      {boot.mode === 'error' && (
+        <Text size="T200" priority="300">
+          {boot.error}
+        </Text>
+      )}
+      <Box gap="200">
+        <Button
+          variant="Primary"
+          size="400"
+          radii="300"
+          disabled={busy}
+          onClick={() => window.location.reload()}
+        >
+          <Text size="B400">Retry</Text>
+        </Button>
+        <Button
+          variant="Secondary"
+          fill="Soft"
+          size="400"
+          radii="300"
+          disabled={busy}
+          onClick={signInAgain}
+        >
+          <Text size="B400">Sign in again</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}

src/app/pages/Router.tsx

@@ -68,6 +68,7 @@ import { SHARE_PAGE_PATH } from '../../swShare';
 import { RouteError } from './RouteError';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
+import { FloatingWidget } from '../features/room/widgets/FloatingWidget';
 
 const Share = React.lazy(() => import('./client/share/Share').then((m) => ({ default: m.Share })));
 
@@ -197,6 +198,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                           <Outlet />
                         </ClientLayout>
                         <CallStatusRenderer />
+                        <FloatingWidget />
                       </CallEmbedProvider>
                       <React.Suspense fallback={null}>
                         <SearchModalRenderer />

src/app/pages/auth/login/Login.tsx

@@ -10,7 +10,6 @@ import { SSOLogin } from '../SSOLogin';
 import { TokenLogin } from './TokenLogin';
 import { OidcLogin } from './OidcLogin';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
-import { getOidcIssuer } from '../../../cs-api';
 import { OrDivider } from '../OrDivider';
 import { getLoginPath, getRegisterPath, withSearchParam } from '../../pathUtils';
 import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
@@ -41,7 +40,7 @@ export function Login() {
   const server = useAuthServer();
   const discovery = useAutoDiscoveryInfo();
   const { hashRouter } = useClientConfig();
-  const { loginFlows } = useAuthFlows();
+  const { loginFlows, authMetadata } = useAuthFlows();
   const [searchParams] = useSearchParams();
   const loginSearchParams = useLoginSearchParams(searchParams);
   const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
@@ -58,21 +57,19 @@ export function Login() {
 
   const parsedFlows = useParsedLoginFlows(loginFlows.flows);
 
-  // Next-gen auth (MSC3861/MSC2965): when the server advertises an OIDC issuer in
-  // its `.well-known` discovery, use the native OIDC flow and suppress the
-  // password / legacy-SSO forms (those servers, e.g. MAS, reject `m.login.password`).
-  const oidc = getOidcIssuer(discovery);
-  if (oidc.issuer) {
+  // Next-gen auth (MSC3861): when the homeserver serves OAuth metadata
+  // (`/auth_metadata`, e.g. matrix.org via MAS), use the native OAuth flow and
+  // suppress the password / legacy-SSO forms, as Element does. Detected the way
+  // the SDK finds the auth server for refresh; the old `.well-known`
+  // `m.authentication` key is gone from matrix.org. A legacy SSO `loginToken`
+  // coming back from a redirect still completes below.
+  if (authMetadata && !loginSearchParams.loginToken) {
     return (
       <Box direction="Column" gap="500">
         <Text as="h1" size="H2" priority="400">
           Login
         </Text>
-        <OidcLogin
-          issuer={oidc.issuer}
-          homeserverBaseUrl={discovery['m.homeserver'].base_url}
-          serverName={server}
-        />
+        <OidcLogin homeserverBaseUrl={discovery['m.homeserver'].base_url} serverName={server} />
         <span data-spacing-node />
         <Text align="Center">
           Do not have an account? <Link to={getRegisterPath(server)}>Register</Link>

src/app/pages/auth/login/OidcLogin.tsx

@@ -4,7 +4,8 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { startOidcLogin } from '../oidc/oidcLoginUtil';
 
 type OidcLoginProps = {
-  issuer: string;
+  /** Register: open the auth server's sign-up page. */
+  register?: boolean;
   homeserverBaseUrl: string;
   serverName: string;
 };
@@ -13,7 +14,7 @@ type OidcLoginProps = {
  * with the homeserver's OIDC provider and redirects to it. Mirrors `SSOLogin`'s
  * single-button styling.
  */
-export function OidcLogin({ issuer, homeserverBaseUrl, serverName }: OidcLoginProps) {
+export function OidcLogin({ homeserverBaseUrl, serverName, register }: OidcLoginProps) {
   const [state, startLogin] = useAsyncCallback<void, unknown, Parameters<typeof startOidcLogin>>(
     useCallback(startOidcLogin, []),
   );
@@ -26,7 +27,9 @@ export function OidcLogin({ issuer, homeserverBaseUrl, serverName }: OidcLoginPr
     <Box direction="Column" gap="300">
       {state.status === AsyncStatus.Error && (
         <Text size="T200" align="Center" style={{ color: color.Critical.Main }}>
-          Failed to start single sign-on. Please try again.
+          {register
+            ? 'Failed to open sign-up. Please try again.'
+            : 'Failed to start single sign-on. Please try again.'}
         </Text>
       )}
       <Button
@@ -35,7 +38,7 @@ export function OidcLogin({ issuer, homeserverBaseUrl, serverName }: OidcLoginPr
         variant="Secondary"
         fill="Soft"
         outlined
-        onClick={() => startLogin(issuer, homeserverBaseUrl)}
+        onClick={() => startLogin(homeserverBaseUrl, register ? 'create' : undefined)}
         disabled={ongoing}
         before={ongoing ? <Spinner size="200" variant="Secondary" /> : undefined}
       >

src/app/pages/auth/oidc/OidcCallback.tsx

@@ -1,43 +1,45 @@
 import { Box, Button, Icon, Icons, Spinner, Text, color, config } from 'folds';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { createClient } from 'matrix-js-sdk';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { setFallbackSession } from '../../../state/sessions';
-import { completeAuthorizationCodeGrant } from './oidcLoginUtil';
-import { getOidcCallbackUrl } from './oidcConfig';
+import { completeOidcCodeGrant } from './oidcLoginUtil';
 import {
   invalidateCachedClient,
   isStaleClientError,
   parseOidcCallbackParams,
   readStoredOidcIssuer,
+  takePendingOidcLogin,
 } from './oidcState';
 
 /**
- * Exchange the authorization code for a Matrix session and persist it. The SDK
- * (oidc-client-ts) reads the transient PKCE/state it stored in sessionStorage
- * before the redirect and validates `state` (CSRF). `redirectUri` is the
- * deterministic callback URL, recomputed here.
+ * Exchange the authorization code for a Matrix session and persist it. The
+ * pending sign-in saved before the redirect must exist for this `state`
+ * (CSRF check) and is consumed here.
  */
 const completeOidcLogin = async (code: string, state: string): Promise<void> => {
-  const { tokenResponse, homeserverUrl, oidcClientSettings, idTokenClaims } =
-    await completeAuthorizationCodeGrant(code, state);
+  const pending = takePendingOidcLogin(state);
+  if (!pending) throw new Error('No pending sign-in for this state.');
+  const tokenResponse = await completeOidcCodeGrant(code, pending);
 
   // Derive Matrix user_id + device_id from the freshly-issued access token (the
   // device is owned by the authentication service under MSC3861).
-  const tmp = createClient({ baseUrl: homeserverUrl, accessToken: tokenResponse.access_token });
+  const tmp = createClient({
+    baseUrl: pending.homeserverUrl,
+    accessToken: tokenResponse.access_token,
+  });
   const { user_id: userId, device_id: deviceId } = await tmp.whoami();
   if (!userId || !deviceId) {
     throw new Error('Homeserver did not return a user/device for the OIDC session.');
   }
 
-  setFallbackSession(tokenResponse.access_token, deviceId, userId, homeserverUrl, {
+  setFallbackSession(tokenResponse.access_token, deviceId, userId, pending.homeserverUrl, {
     refreshToken: tokenResponse.refresh_token,
     expiresInMs: tokenResponse.expires_in ? tokenResponse.expires_in * 1000 : undefined,
     oidc: {
-      issuer: oidcClientSettings.issuer,
-      clientId: oidcClientSettings.clientId,
-      redirectUri: getOidcCallbackUrl(),
-      idTokenClaims: idTokenClaims as unknown as Record<string, unknown>,
+      issuer: pending.issuer,
+      clientId: pending.clientId,
+      redirectUri: pending.redirectUri,
     },
   });
 };
@@ -71,14 +73,19 @@ function CallbackError({ message }: { message: string }) {
  * router, since the redirect_uri must be a real non-hash path).
  */
 export function OidcCallback() {
-  const params = parseOidcCallbackParams(window.location.search);
+  // Parsed once: a fresh object per render would re-run the effects below on
+  // every state change, and the code (and its pending sign-in) is single-use.
+  const params = useMemo(() => parseOidcCallbackParams(window.location.search), []);
+  const redeemed = useRef(false);
 
   const [state, complete] = useAsyncCallback<void, unknown, [string, string]>(
     useCallback(completeOidcLogin, []),
   );
 
   useEffect(() => {
-    if (params.kind === 'success') complete(params.code, params.state);
+    if (params.kind !== 'success' || redeemed.current) return;
+    redeemed.current = true;
+    complete(params.code, params.state);
   }, [params, complete]);
 
   useEffect(() => {

src/app/pages/auth/oidc/oidcConfig.ts

@@ -1,4 +1,4 @@
-import type { OidcRegistrationClientMetadata } from 'matrix-js-sdk';
+import type { OAuthRegistrationRequest } from 'matrix-js-sdk';
 import { OIDC_CALLBACK_PATH } from '../../paths';
 import { getOriginBaseUrl, withOriginBaseUrl } from '../../pathUtils';
 
@@ -17,22 +17,21 @@ export const getOidcCallbackUrl = (): string =>
   withOriginBaseUrl(getOriginBaseUrl(), OIDC_CALLBACK_PATH);
 
 /**
- * Client metadata sent during MSC2966 dynamic client registration.
+ * Client metadata sent during dynamic client registration.
  *
- * `registerOidcClient` drops any URI that doesn't share `clientUri` as a common
- * base, so every URI here lives under our origin base.
+ * The SDK drops any URI that doesn't share `client_uri` as a common base, so
+ * every URI here lives under our origin base.
  */
-export const getOidcClientMetadata = (): OidcRegistrationClientMetadata => {
+export const getOidcClientMetadata = (): OAuthRegistrationRequest => {
   // `${origin}${BASE_URL}` (with trailing slash) — the common base for all URIs.
   const clientUri = getOriginBaseUrl();
   return {
-    clientName: 'Lotus Chat',
-    clientUri,
-    logoUri: new URL(LotusLogo, window.location.origin).href,
-    applicationType: 'web',
-    contacts: ['support@lotusguild.org'],
-    tosUri: clientUri,
-    policyUri: clientUri,
-    redirectUris: [getOidcCallbackUrl()],
+    client_name: 'Lotus Chat',
+    client_uri: clientUri,
+    logo_uri: new URL(LotusLogo, window.location.origin).href,
+    application_type: 'web',
+    tos_uri: clientUri,
+    policy_uri: clientUri,
+    redirect_uris: [getOidcCallbackUrl()],
   };
 };

src/app/pages/auth/oidc/oidcLoginUtil.ts

@@ -1,57 +1,88 @@
-import {
-  completeAuthorizationCodeGrant,
-  discoverAndValidateOIDCIssuerWellKnown,
-  generateOidcAuthorizationUrl,
-  OidcClientConfig,
-  registerOidcClient,
-} from 'matrix-js-sdk';
+import { createClient, OAuth2, ValidatedAuthMetadata } from 'matrix-js-sdk';
 import { getOidcCallbackUrl, getOidcClientMetadata } from './oidcConfig';
 import {
   cacheClientId,
   getCachedClientId,
   invalidateCachedClient,
   isStaleClientError,
+  PendingOidcLogin,
+  savePendingOidcLogin,
 } from './oidcState';
 
-export { completeAuthorizationCodeGrant };
+/**
+ * The homeserver's OAuth 2.0 metadata (`GET /_matrix/client/v1/auth_metadata`).
+ * This is also how the SDK finds the auth server for token refresh and logout,
+ * so login uses the same source.
+ */
+export const discoverAuthMetadata = (homeserverBaseUrl: string): Promise<ValidatedAuthMetadata> =>
+  createClient({ baseUrl: homeserverBaseUrl }).getAuthMetadata();
 
 export const getOrRegisterClientId = async (
-  config: OidcClientConfig,
-  issuer: string,
+  metadata: ValidatedAuthMetadata,
   redirectUri: string,
 ): Promise<string> => {
-  const cached = getCachedClientId(issuer, redirectUri);
+  const cached = getCachedClientId(metadata.issuer, redirectUri);
   if (cached) return cached;
-  const clientId = await registerOidcClient(config, getOidcClientMetadata());
-  cacheClientId(issuer, clientId, redirectUri);
+  const clientId = await OAuth2.registerClient(metadata, getOidcClientMetadata());
+  cacheClientId(metadata.issuer, clientId, redirectUri);
   return clientId;
 };
 
 /**
- * Begin the OIDC authorization-code flow: discover + validate the issuer,
- * (re)register a client, build the PKCE authorization URL (oidc-client-ts
- * persists the transient code_verifier/state/nonce/homeserverUrl into
- * sessionStorage for the callback), then redirect.
+ * Begin the OAuth authorization-code flow: discover the auth server through
+ * the homeserver, (re)register a client, remember the PKCE verifier + device
+ * under a fresh `state` (oidcState), then redirect. `prompt: 'create'` opens
+ * the auth server's sign-up page instead, where supported. The callback reads the
+ * result from the query string (`response_mode=query`).
  */
-export const startOidcLogin = async (issuer: string, homeserverBaseUrl: string): Promise<void> => {
+export const startOidcLogin = async (
+  homeserverBaseUrl: string,
+  prompt?: 'create',
+): Promise<void> => {
   const redirectUri = getOidcCallbackUrl();
+  let issuer: string | undefined;
   try {
-    const config = await discoverAndValidateOIDCIssuerWellKnown(issuer);
-    const clientId = await getOrRegisterClientId(config, issuer, redirectUri);
-    const url = await generateOidcAuthorizationUrl({
-      metadata: config,
-      redirectUri,
+    const metadata = await discoverAuthMetadata(homeserverBaseUrl);
+    issuer = metadata.issuer;
+    const clientId = await getOrRegisterClientId(metadata, redirectUri);
+    const oauth = new OAuth2(metadata, { clientId });
+    const state = crypto.randomUUID();
+    const pending: PendingOidcLogin = {
+      issuer,
       clientId,
+      deviceId: oauth.context.deviceId,
+      codeVerifier: oauth.context.codeVerifier,
       homeserverUrl: homeserverBaseUrl,
-      nonce: crypto.randomUUID(),
-    });
-    window.location.assign(url);
+      redirectUri,
+    };
+    savePendingOidcLogin(state, pending);
+    // `prompt=create` asks the auth server for its sign-up page (Register),
+    // only where it says it supports that.
+    const usePrompt =
+      prompt && metadata.prompt_values_supported?.includes(prompt) ? prompt : undefined;
+    window.location.assign(
+      await oauth.generateAuthorizationCodeGrantUrl(state, redirectUri, 'query', usePrompt),
+    );
   } catch (e) {
     // #67 — drop the cached client so the next attempt re-registers, but ONLY
     // when the failure says the client id itself was rejected. Network and
     // discovery failures keep the cache, otherwise each retry would register
     // yet another throwaway dynamic client at the provider.
-    if (isStaleClientError(e)) invalidateCachedClient(issuer);
+    if (issuer && isStaleClientError(e)) invalidateCachedClient(issuer);
     throw e;
   }
 };
+
+/**
+ * Exchange the authorization code using the pending sign-in saved before the
+ * redirect. The metadata is fetched again (it isn't stored).
+ */
+export const completeOidcCodeGrant = async (code: string, pending: PendingOidcLogin) => {
+  const metadata = await discoverAuthMetadata(pending.homeserverUrl);
+  const oauth = new OAuth2(metadata, {
+    clientId: pending.clientId,
+    deviceId: pending.deviceId,
+    codeVerifier: pending.codeVerifier,
+  });
+  return oauth.completeAuthorizationCodeGrant(code, pending.redirectUri);
+};

src/app/pages/auth/oidc/oidcState.test.ts

@@ -7,6 +7,8 @@ import {
   parseOidcCallbackParams,
   isStaleClientError,
   readStoredOidcIssuer,
+  savePendingOidcLogin,
+  takePendingOidcLogin,
 } from './oidcState';
 
 const installStorage = (): Map<string, string> => {
@@ -131,21 +133,29 @@ test('isStaleClientError: also recognises the OidcCallback error-redirect shape
   );
 });
 
-test('readStoredOidcIssuer reads the issuer persisted by generateOidcAuthorizationUrl', () => {
-  const store = installSessionStorage();
+const pending = {
+  issuer: 'https://issuer.example/',
+  clientId: 'client1',
+  deviceId: 'DEVICEABCD',
+  codeVerifier: 'v'.repeat(96),
+  homeserverUrl: 'https://hs.example',
+  redirectUri: 'https://app.example/oidc/callback',
+};
+
+test('pending sign-in: saved by state, read for the issuer, consumed once', () => {
+  installSessionStorage();
   assert.equal(readStoredOidcIssuer('xyz'), undefined); // nothing stored yet
-  store.set(
-    'mx_oidc_xyz',
-    JSON.stringify({ authority: 'https://issuer.example', client_id: 'abc' }),
-  );
-  assert.equal(readStoredOidcIssuer('xyz'), 'https://issuer.example');
+  savePendingOidcLogin('xyz', pending);
+  assert.equal(readStoredOidcIssuer('xyz'), 'https://issuer.example/');
   assert.equal(readStoredOidcIssuer('other-state'), undefined); // different state = miss
+  assert.deepEqual(takePendingOidcLogin('xyz'), pending);
+  assert.equal(takePendingOidcLogin('xyz'), undefined, 'single use');
 });
 
-test('readStoredOidcIssuer tolerates corrupt or missing storage', () => {
+test('pending sign-in tolerates corrupt or incomplete storage', () => {
   const store = installSessionStorage();
-  store.set('mx_oidc_bad', '{ not json');
+  store.set('lotus_oidc_pending_bad', '{ not json');
   assert.equal(readStoredOidcIssuer('bad'), undefined);
-  store.set('mx_oidc_noauth', JSON.stringify({ client_id: 'abc' }));
-  assert.equal(readStoredOidcIssuer('noauth'), undefined);
+  store.set('lotus_oidc_pending_partial', JSON.stringify({ ...pending, codeVerifier: '' }));
+  assert.equal(takePendingOidcLogin('partial'), undefined);
 });

src/app/pages/auth/oidc/oidcState.ts

@@ -97,23 +97,60 @@ export const parseOidcCallbackParams = (search: string): OidcCallbackParams => {
 };
 
 /**
- * #102 — the issuer for a pending sign-in isn't available on the callback's
- * error branch (we bail out before `completeAuthorizationCodeGrant`, which is
- * what would otherwise surface it). oidc-client-ts's `generateOidcAuthorizationUrl`
- * persists the pending sign-in's `SigninState` (including `authority` and
- * `client_id`) into sessionStorage before redirecting, keyed by
- * `mx_oidc_<state>` (WebStorageStateStore prefix `mx_oidc_`, keyed by the same
- * `state` value the provider echoes back on redirect). Read it directly so a
- * genuinely stale cached client id (`invalid_client`) can be evicted even when
- * the callback errors before a token exchange is attempted.
+ * [Gitea #201, SDK 44] The app keeps a pending OAuth sign-in itself (the SDK's
+ * OAuth2 class no longer persists anything). Saved in sessionStorage right
+ * before the redirect, keyed by the `state` we send, which the provider echoes
+ * back: a callback whose state has no entry is rejected (CSRF), and an entry is
+ * used once. Holds the PKCE code verifier, so it never goes to localStorage.
  */
-export const readStoredOidcIssuer = (state: string): string | undefined => {
+export type PendingOidcLogin = {
+  issuer: string;
+  clientId: string;
+  deviceId: string;
+  codeVerifier: string;
+  homeserverUrl: string;
+  redirectUri: string;
+};
+const PENDING_PREFIX = 'lotus_oidc_pending_';
+
+const isPending = (v: unknown): v is PendingOidcLogin => {
+  if (!v || typeof v !== 'object') return false;
+  const p = v as Record<string, unknown>;
+  return ['issuer', 'clientId', 'deviceId', 'codeVerifier', 'homeserverUrl', 'redirectUri'].every(
+    (k) => typeof p[k] === 'string' && (p[k] as string).length > 0,
+  );
+};
+
+export const savePendingOidcLogin = (state: string, pending: PendingOidcLogin): void => {
+  sessionStorage.setItem(`${PENDING_PREFIX}${state}`, JSON.stringify(pending));
+};
+
+/** Read the pending sign-in for `state` without consuming it. */
+export const readPendingOidcLogin = (state: string): PendingOidcLogin | undefined => {
   try {
-    const raw = sessionStorage.getItem(`mx_oidc_${state}`);
+    const raw = sessionStorage.getItem(`${PENDING_PREFIX}${state}`);
     if (!raw) return undefined;
-    const { authority } = JSON.parse(raw) as { authority?: unknown };
-    return typeof authority === 'string' ? authority : undefined;
+    const parsed: unknown = JSON.parse(raw);
+    return isPending(parsed) ? parsed : undefined;
   } catch {
     return undefined;
   }
 };
+
+/** Read and remove: an authorization code can only be redeemed once anyway. */
+export const takePendingOidcLogin = (state: string): PendingOidcLogin | undefined => {
+  const pending = readPendingOidcLogin(state);
+  try {
+    sessionStorage.removeItem(`${PENDING_PREFIX}${state}`);
+  } catch {
+    // storage unavailable — nothing to clean up
+  }
+  return pending;
+};
+
+/**
+ * #102 — on the callback's error branch, the pending sign-in's issuer tells
+ * us whose cached client id to evict when the provider rejected it.
+ */
+export const readStoredOidcIssuer = (state: string): string | undefined =>
+  readPendingOidcLogin(state)?.issuer;

src/app/pages/auth/register/Register.tsx

@@ -12,6 +12,8 @@ import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLo
 import { getLoginPath } from '../../pathUtils';
 import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
 import { RegisterPathSearchParams } from '../../paths';
+import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
+import { OidcLogin } from '../login/OidcLogin';
 
 const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
   useMemo(
@@ -25,7 +27,8 @@ const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSea
 
 export function Register() {
   const server = useAuthServer();
-  const { loginFlows, registerFlows } = useAuthFlows();
+  const { loginFlows, registerFlows, authMetadata } = useAuthFlows();
+  const discovery = useAutoDiscoveryInfo();
   const [searchParams] = useSearchParams();
   const registerSearchParams = useRegisterSearchParams(searchParams);
   const { sso } = useParsedLoginFlows(loginFlows.flows);
@@ -33,6 +36,27 @@ export function Register() {
   // redirect to /login because only that path handle m.login.token
   const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
 
+  // Native OAuth servers (e.g. matrix.org via MAS) create accounts at the auth
+  // server; /register here would only offer the legacy forms. Mirrors Login.
+  if (authMetadata) {
+    return (
+      <Box direction="Column" gap="500">
+        <Text as="h2" size="H2" priority="400">
+          Register
+        </Text>
+        <OidcLogin
+          register
+          homeserverBaseUrl={discovery['m.homeserver'].base_url}
+          serverName={server}
+        />
+        <span data-spacing-node />
+        <Text align="Center">
+          Already have an account? <Link to={getLoginPath(server)}>Login</Link>
+        </Text>
+      </Box>
+    );
+  }
+
   return (
     <Box direction="Column" gap="500">
       <Text as="h2" size="H2" priority="400">

src/app/pages/client/ClientRoot.tsx

@@ -33,6 +33,8 @@ import {
 } from '../../../client/initMatrix';
 import { deleteSearchCacheDatabase } from '../../utils/searchCache';
 import { clearPlaintextCaches } from '../../state/plaintextCaches';
+import { clearSoundboardClipCache } from '../../utils/soundboardClips';
+import { clearSharedPayload } from '../../../swShare';
 import { SplashScreen } from '../../components/splash-screen';
 import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
@@ -44,6 +46,7 @@ import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { ClockSkewBanner } from './ClockSkewBanner';
+import { KeyUploadBanner } from './KeyUploadBanner';
 import {
   ServerStatusBanner,
   ServerStatusFeature,
@@ -52,7 +55,6 @@ import { SecurityBanner } from '../../features/security-nudge/SecurityBanner';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
 import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
 import { pushSessionToSW } from '../../../sw-session';
-import { revokeOidcTokens } from '../../../client/oidcLogout';
 import { useSessionSync } from '../../hooks/useSessionSync';
 import { installCryptoDiagLog } from '../../utils/cryptoDiagLog';
 import { AutoDiscovery } from './AutoDiscovery';
@@ -156,11 +158,11 @@ const useLogoutListener = (mx?: MatrixClient) => {
       pushSessionToSW();
       mx?.stopClient();
       // Best-effort issuer revocation for OIDC sessions (the token is already
-      // server-revoked here, but revoke the refresh token too). Before we drop
-      // the stored session below.
-      const loggedOutSession = getFallbackSession();
-      if (loggedOutSession?.oidc) {
-        await revokeOidcTokens(loggedOutSession).catch(() => undefined);
+      // server-revoked here, but revoke the refresh token too). For an OAuth
+      // session the SDK's logout() only revokes at the auth server (no /logout
+      // call). Before we drop the stored session below.
+      if (getFallbackSession()?.oidc) {
+        await mx?.logout().catch(() => undefined);
       }
       await mx?.clearStores();
       // The opt-in local search index holds DECRYPTED message plaintext. Wipe it
@@ -172,6 +174,10 @@ const useLogoutListener = (mx?: MatrixClient) => {
       // (translation, scheduled messages, recent searches/forwards/gifs/
       // stickers, nav paths) — wipe them on server-forced logout too.
       clearPlaintextCaches(mx?.getUserId() ?? undefined);
+      // [Gitea #57] As on manual logout: no decrypted clip bytes via blob: URLs.
+      clearSoundboardClipCache();
+      // [Gitea #267] As on manual logout: drop files stashed by the share target.
+      await clearSharedPayload().catch(() => undefined);
       // Remove only the session credential keys — NOT settings, drafts, and
       // other preferences (N98). The SDK's IndexedDB stores are cleared above;
       // window.localStorage.clear() is reserved for the explicit reset path.
@@ -254,6 +260,12 @@ export function ClientRoot({ children }: ClientRootProps) {
         {mx && !syncError && <ServerStatusBanner />}
         {mx && !syncError && <SyncStatus mx={mx} />}
         {mx && !syncError && <ClockSkewBanner />}
+        {mx && !syncError && (
+          // The fix opens LogoutDialog, which reads the client from context.
+          <MatrixClientProvider value={mx}>
+            <KeyUploadBanner />
+          </MatrixClientProvider>
+        )}
         {loading && <ClientRootOptions mx={mx} />}
         {(loadState.status === AsyncStatus.Error ||
           startState.status === AsyncStatus.Error ||

src/app/pages/client/KeyUploadBanner.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useSyncExternalStore } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { Box, Button, config, Line, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { getKeyUploadWatch, subscribeKeyUploadWatch } from '../../utils/keyUploadWatch';
+import { LogoutDialog } from '../../components/LogoutDialog';
+import { stopPropagation } from '../../utils/keyboard';
+
+/**
+ * [Gitea #201 KE-1] "Encryption on this device is out of sync." Shown while
+ * the server keeps rejecting this device's key uploads (keyUploadWatch). The
+ * fix is a fresh login, so the action opens the normal logout dialog, which
+ * already warns if the device isn't verified / backed up. Hideable for this
+ * session only: the problem doesn't go away by itself.
+ */
+export function KeyUploadBanner() {
+  const { stuck, lastError } = useSyncExternalStore(subscribeKeyUploadWatch, getKeyUploadWatch);
+  const [hidden, setHidden] = useState(false);
+  const [details, setDetails] = useState(false);
+  const [logout, setLogout] = useState(false);
+
+  if (!stuck || hidden) return null;
+
+  return (
+    <Box direction="Column" shrink="No">
+      <Box
+        className={ContainerColor({ variant: 'Critical' })}
+        style={{ padding: `${config.space.S100} ${config.space.S300}` }}
+        direction="Column"
+        alignItems="Center"
+        gap="100"
+        role="alert"
+      >
+        <Box alignItems="Center" gap="300" wrap="Wrap" justifyContent="Center">
+          <Text size="L400" align="Center">
+            Encryption on this device is out of sync with the server. New encrypted messages and
+            calls may fail until you sign out and back in.
+          </Text>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="Solid"
+            radii="300"
+            onClick={() => setLogout(true)}
+          >
+            <Text size="B300">Fix: sign out…</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="Soft"
+            radii="300"
+            onClick={() => setDetails((v) => !v)}
+            aria-expanded={details}
+          >
+            <Text size="B300">Details</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="None"
+            radii="300"
+            onClick={() => setHidden(true)}
+          >
+            <Text size="B300">Hide</Text>
+          </Button>
+        </Box>
+        {details && (
+          <Box direction="Column" gap="100" style={{ maxWidth: 640 }}>
+            <Text size="T200" align="Center">
+              The server already has encryption keys this device thinks it hasn&apos;t sent, so it
+              rejects every new upload and other people can&apos;t start fresh encrypted sessions
+              with you. This usually happens after the browser cleared this site&apos;s storage
+              while you stayed signed in. Before signing out, make sure this device is verified or
+              key backup is on (Settings → Devices), so your message history comes back when you
+              sign in again.
+            </Text>
+            {lastError && (
+              <Text size="T200" align="Center" priority="300" style={{ wordBreak: 'break-word' }}>
+                Server said: {lastError}
+              </Text>
+            )}
+          </Box>
+        )}
+      </Box>
+      <Line variant="Critical" size="300" />
+      {logout && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                onDeactivate: () => setLogout(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <LogoutDialog handleClose={() => setLogout(false)} />
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </Box>
+  );
+}

src/app/pages/client/SyncStatus.tsx

@@ -65,12 +65,12 @@ export function SyncStatus({ mx }: SyncStatusProps) {
     );
   }
 
-  if (
-    (stateData.current === SyncState.Prepared ||
-      stateData.current === SyncState.Syncing ||
-      stateData.current === SyncState.Catchup) &&
-    stateData.previous !== SyncState.Syncing
-  ) {
+  // [Gitea #274] Only while catching up after a drop. Upstream also showed it
+  // for PREPARED and for the first SYNCING after PREPARED/RECONNECTING, i.e.
+  // until the NEXT /sync returned: on a quiet account that long-polls ~30 s
+  // while the app already works (a SYNCING means a sync just succeeded).
+  // A real failure still surfaces as Reconnecting / Connection lost.
+  if (stateData.current === SyncState.Catchup) {
     return (
       <Box direction="Column" shrink="No">
         <Box

src/app/pages/client/inbox/Invites.tsx

@@ -369,7 +369,7 @@ function InviteFilters({
     <Box gap="200">
       <Chip
         variant={isKnown ? 'Success' : 'Surface'}
-        aria-selected={isKnown}
+        aria-pressed={isKnown}
         outlined={!isKnown}
         onClick={() => onFilter(InviteFilter.Known)}
         before={isKnown && <Icon size="100" src={Icons.Check} />}
@@ -385,7 +385,7 @@ function InviteFilters({
       </Chip>
       <Chip
         variant={isUnknown ? 'Warning' : 'Surface'}
-        aria-selected={isUnknown}
+        aria-pressed={isUnknown}
         outlined={!isUnknown}
         onClick={() => onFilter(InviteFilter.Unknown)}
         before={isUnknown && <Icon size="100" src={Icons.Check} />}
@@ -401,7 +401,7 @@ function InviteFilters({
       </Chip>
       <Chip
         variant={isSpam ? 'Critical' : 'Surface'}
-        aria-selected={isSpam}
+        aria-pressed={isSpam}
         outlined={!isSpam}
         onClick={() => onFilter(InviteFilter.Spam)}
         before={isSpam && <Icon size="100" src={Icons.Check} />}

src/app/pages/client/share/Share.tsx

@@ -145,6 +145,11 @@ export function Share() {
               <Box direction="Column" gap="400">
                 <Box direction="Column" gap="200">
                   <Text size="L400">Shared</Text>
+                  {/* [Gitea #267] Not everything that arrives here came from the
+                      user's share sheet; say so before they pick a room. */}
+                  <Text size="T200" priority="300">
+                    This came from another app or website. Check it before you send it.
+                  </Text>
                   {shared.files.map((f) => (
                     <Box key={f.name} alignItems="Center" gap="200">
                       <Icon

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -217,7 +217,7 @@ export function SettingsTab() {
       </SidebarItemTooltip>
       <PresencePicker />
       {settingsOpen && (
-        <Modal500 requestClose={() => setSettingsOpen(false)}>
+        <Modal500 requestClose={() => setSettingsOpen(false)} label="Settings">
           <Settings initialPage={initialPage} requestClose={() => setSettingsOpen(false)} />
         </Modal500>
       )}

src/app/pages/client/sidebar/UnverifiedTab.tsx

@@ -82,7 +82,7 @@ function UnverifiedIndicator() {
         </SidebarItem>
       )}
       {settings && (
-        <Modal500 requestClose={closeSettings}>
+        <Modal500 requestClose={closeSettings} label="Settings">
           <Settings initialPage={SettingsPages.DevicesPage} requestClose={closeSettings} />
         </Modal500>
       )}

src/app/plugins/call/CallControl.ts

@@ -57,6 +57,15 @@ export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
 
 export const CALL_ERROR_CHANGED = 'call_error_changed';
 
+export const SCREENSHARE_AUDIO_STATE = 'screenshare_audio_state';
+
+/** Pure: parse the fork's `io.lotus.screenshare_audio_state` (#277). */
+export function parseScreenshareAudioState(data: unknown): boolean | undefined {
+  if (typeof data !== 'object' || data === null) return undefined;
+  const { present } = data as { present?: unknown };
+  return typeof present === 'boolean' ? present : undefined;
+}
+
 export type AudioOutputOption = { id: string; label: string };
 export const AUDIO_OUTPUT_STATE = 'audio_output_state';
 
@@ -252,6 +261,11 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.emit(CALL_ERROR_CHANGED);
   }
 
+  /** [Gitea #121] Answer the fork's expected-device check: join or not. */
+  public sendDeviceDecision(join: boolean): void {
+    this.call.transport.send('io.lotus.device_decision', { join }).catch(() => undefined);
+  }
+
   /** Press the fork's Reconnect / Try again. */
   public reconnect(): void {
     this.call.transport.send('io.lotus.reconnect', {}).catch(() => undefined);
@@ -281,6 +295,22 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.emit(AUDIO_OUTPUT_STATE);
   }
 
+  // [Gitea #277] Whether a remote screenshare's audio is being received (the
+  // fork's `io.lotus.screenshare_audio_state`), so the call bar only offers
+  // "Mute Screenshare Audio" when there is something to mute.
+  private _remoteScreenshareAudio = false;
+
+  public get remoteScreenshareAudio(): boolean {
+    return this._remoteScreenshareAudio;
+  }
+
+  public onScreenshareAudioState(data: unknown) {
+    const present = parseScreenshareAudioState(data);
+    if (present === undefined || present === this._remoteScreenshareAudio) return;
+    this._remoteScreenshareAudio = present;
+    this.emit(SCREENSHARE_AUDIO_STATE);
+  }
+
   private sendAudioOutput(deviceId: string): void {
     if (!this.joined) return;
     this.call.transport.send('io.lotus.set_audio_output', { deviceId }).catch(() => undefined);

src/app/plugins/call/CallEmbed.ts

@@ -15,6 +15,7 @@ import {
   WidgetApiFromWidgetAction,
   WidgetApiToWidgetAction,
   WidgetDriver,
+  IWidgetApiRequest,
 } from 'matrix-widget-api';
 import { CallWidgetDriver } from './CallWidgetDriver';
 import { trimTrailingSlash } from '../../utils/common';
@@ -25,13 +26,14 @@ import {
   ElementMediaStateDetail,
   ElementWidgetActions,
 } from './types';
-import { CallControl } from './CallControl';
+import { CallControl, CallControlEvent } 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
@@ -58,6 +60,8 @@ 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 {
@@ -77,6 +81,25 @@ 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;
@@ -234,6 +257,9 @@ export class CallEmbed {
       // sends io.lotus.inject_audio (only on an explicit user click), so
       // arming it for every call is safe.
       lotusAudioInject: 'true',
+      // [Gitea #121] Before joining, the fork checks that the mic / output the
+      // user last picked are plugged in, and asks us (ExpectedDevicesPrompt).
+      lotusDeviceCheck: 'true',
     });
 
     if (denoiseMode === 'ml') {
@@ -338,6 +364,8 @@ 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');
@@ -433,6 +461,7 @@ export class CallEmbed {
             reconnects: data.reconnects ?? 0,
             poorMs: data.poorMs ?? 0,
             verdict: data.verdict ?? 'unknown',
+            details: parseCallSummaryDetails((data as { details?: unknown }).details),
           };
         }
       }),
@@ -465,6 +494,12 @@ export class CallEmbed {
         this.control.onAudioOutputState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
+    // [Gitea #277] Remote screenshare audio being received, or not.
+    this.disposables.push(
+      this.listenAction('io.lotus.screenshare_audio_state', (evt) => {
+        this.control.onScreenshareAudioState((evt.detail as { data?: unknown } | undefined)?.data);
+      }),
+    );
     // [Gitea #43] PTT / deafen keys pressed while focus is inside the frame.
     this.disposables.push(
       this.listenAction('io.lotus.hotkey', (evt) => {
@@ -616,6 +651,7 @@ 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);
   }
@@ -790,7 +826,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 any, {});
+      this.call.transport.reply(ev.detail as unknown as IWidgetApiRequest, {});
       callback(ev);
     };
     return this.listenEvent(`action:${type}`, wrapped);

src/app/plugins/call/expectedDevices.test.ts

@@ -0,0 +1,60 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+const store = new Map<string, string>();
+(globalThis as { sessionStorage?: unknown }).sessionStorage = {
+  getItem: (k: string) => store.get(k) ?? null,
+  setItem: (k: string, v: string) => {
+    store.set(k, v);
+  },
+  removeItem: (k: string) => {
+    store.delete(k);
+  },
+};
+const m = await import('./expectedDevices');
+
+test('[#121] parses the fork messages defensively', () => {
+  assert.deepEqual(
+    m.parseDeviceMissing({
+      missing: [
+        { kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' },
+        { kind: 'audiooutput', expected: 'Arctis 7', fallback: null },
+        { kind: 'videoinput', expected: 'Cam' },
+        { kind: 'audioinput' },
+      ],
+    }),
+    [
+      { kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' },
+      { kind: 'audiooutput', expected: 'Arctis 7', fallback: null },
+    ],
+  );
+  assert.deepEqual(m.parseDeviceMissing(undefined), []);
+  assert.deepEqual(m.parseDeviceMissing({ missing: 'x' }), []);
+  assert.equal(m.parseDeviceLost({ kind: 'nope' }), undefined);
+});
+
+test('[#121] wording', () => {
+  assert.deepEqual(
+    m.describeMissing({ kind: 'audioinput', expected: 'Arctis 7', fallback: 'Laptop Mic' }),
+    {
+      title: "Your usual microphone isn't connected",
+      expected: 'Arctis 7',
+      fallback: 'Laptop Mic',
+    },
+  );
+  assert.equal(
+    m.describeLost({ kind: 'audiooutput', expected: 'Arctis 7', fallback: null }),
+    'Arctis 7 disconnected — now using the default output.',
+  );
+});
+
+test('[#121] "Join anyway" is remembered for the session, per device set', () => {
+  store.clear();
+  const a = [{ kind: 'audioinput' as const, expected: 'Arctis 7', fallback: 'Laptop Mic' }];
+  const b = [{ kind: 'audiooutput' as const, expected: 'Arctis 7', fallback: null }];
+  assert.equal(m.isAcceptedThisSession(a), false);
+  m.acceptForSession(a);
+  assert.equal(m.isAcceptedThisSession(a), true);
+  assert.equal(m.isAcceptedThisSession(b), false, 'a different device still asks');
+  assert.equal(m.isAcceptedThisSession([...a, ...b]), false, 'more missing still asks');
+});

src/app/plugins/call/expectedDevices.ts

@@ -0,0 +1,74 @@
+/**
+ * [Gitea #121] The fork's expected-device check. Before joining, EC reports
+ * the user's usual mic / output (the one they last picked) as missing; we ask
+ * "Join anyway" or "Cancel". In a call, losing it is a toast. Pure helpers.
+ */
+
+export type DeviceKind = 'audioinput' | 'audiooutput';
+export type MissingDevice = { kind: DeviceKind; expected: string; fallback: string | null };
+
+const isKind = (k: unknown): k is DeviceKind => k === 'audioinput' || k === 'audiooutput';
+
+const parseOne = (v: unknown): MissingDevice | undefined => {
+  if (!v || typeof v !== 'object') return undefined;
+  const { kind, expected, fallback } = v as Record<string, unknown>;
+  if (!isKind(kind) || typeof expected !== 'string' || !expected) return undefined;
+  return { kind, expected, fallback: typeof fallback === 'string' && fallback ? fallback : null };
+};
+
+/** `io.lotus.device_missing` → the missing devices (empty if malformed). */
+export const parseDeviceMissing = (data: unknown): MissingDevice[] => {
+  const list = (data as { missing?: unknown } | undefined)?.missing;
+  if (!Array.isArray(list)) return [];
+  return list.map(parseOne).filter((d): d is MissingDevice => !!d);
+};
+
+/** `io.lotus.device_lost` → the device that went away. */
+export const parseDeviceLost = (data: unknown): MissingDevice | undefined => parseOne(data);
+
+const what = (kind: DeviceKind): string => (kind === 'audioinput' ? 'microphone' : 'audio output');
+
+/** "Your usual microphone **Arctis 7** isn't connected." lines + the fallback. */
+export const describeMissing = (
+  d: MissingDevice,
+): { title: string; expected: string; fallback: string } => ({
+  title: `Your usual ${what(d.kind)} isn't connected`,
+  expected: d.expected,
+  fallback:
+    d.fallback ?? (d.kind === 'audioinput' ? 'the default microphone' : 'the default output'),
+});
+
+export const describeLost = (d: MissingDevice): string =>
+  `${d.expected} disconnected — now using ${
+    d.fallback ?? (d.kind === 'audioinput' ? 'the default microphone' : 'the default output')
+  }.`;
+
+// "Join anyway" holds for the rest of the session for the same device(s).
+const ACCEPTED_KEY = 'lotus-device-check-accepted';
+const keyOf = (missing: MissingDevice[]): string =>
+  missing
+    .map((d) => `${d.kind}:${d.expected}`)
+    .sort()
+    .join('|');
+
+const readAccepted = (): string[] => {
+  try {
+    const v: unknown = JSON.parse(sessionStorage.getItem(ACCEPTED_KEY) ?? '[]');
+    return Array.isArray(v) ? v.filter((x): x is string => typeof x === 'string') : [];
+  } catch {
+    return [];
+  }
+};
+
+export const isAcceptedThisSession = (missing: MissingDevice[]): boolean =>
+  readAccepted().includes(keyOf(missing));
+
+export const acceptForSession = (missing: MissingDevice[]): void => {
+  try {
+    const list = readAccepted();
+    const k = keyOf(missing);
+    if (!list.includes(k)) sessionStorage.setItem(ACCEPTED_KEY, JSON.stringify([...list, k]));
+  } catch {
+    // storage unavailable: ask again next time
+  }
+};

src/app/plugins/call/screenshareAudioState.test.ts

@@ -0,0 +1,12 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseScreenshareAudioState } from './CallControl';
+
+test('parseScreenshareAudioState: reads present, ignores anything else (#277)', () => {
+  assert.equal(parseScreenshareAudioState({ present: true }), true);
+  assert.equal(parseScreenshareAudioState({ present: false }), false);
+  assert.equal(parseScreenshareAudioState({ present: 'yes' }), undefined);
+  assert.equal(parseScreenshareAudioState({}), undefined);
+  assert.equal(parseScreenshareAudioState(null), undefined);
+  assert.equal(parseScreenshareAudioState('present'), undefined);
+});

src/app/state/callSummary.ts

@@ -0,0 +1,6 @@
+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);

src/app/state/keychainMirror.ts

@@ -1,14 +1,19 @@
 import { useEffect, useState } from 'react';
-import { getFallbackSession, onSessionPersisted, Session } from './sessions';
+import {
+  getFallbackSession,
+  onSessionPersisted,
+  Session,
+  stripTokensFromStorage,
+} from './sessions';
 
 /**
- * [Gitea #105] Desktop, step 1: mirror the login tokens into the OS keychain.
+ * [Gitea #105] Desktop: keep the login tokens in the OS keychain.
  *
- * The session is still read from localStorage exactly as before; this only
- * keeps a copy in the keychain (Windows Credential Manager) and checks it by
- * reading it back, so real installs prove the keychain works before step 2
- * switches reads over to it. Nothing here can log anyone out: every failure
- * just records a status for Settings.
+ * Step 1 mirrored them here and verified by reading back. Step 2 (sessions.ts,
+ * keychainSession.ts) reads them from here at boot; once a write is verified,
+ * the tokens are dropped from localStorage. Nothing here can log anyone out:
+ * a failure keeps the tokens in localStorage and records a status for
+ * Settings.
  *
  * Writes are serialized (a token rotation right after login must not race
  * the login's write) and time out, so a hung credential store can't pile up.
@@ -122,7 +127,13 @@ export const startKeychainMirror = (invoke: KeychainInvoke | undefined): void =>
   started = true;
   let chain: Promise<unknown> = Promise.resolve();
   const enqueue = (session: Session | null) => {
-    chain = chain.then(async () => setStatus(await syncKeychain(invoke, session)));
+    chain = chain.then(async () => {
+      const result = await syncKeychain(invoke, session);
+      setStatus(result);
+      // [Gitea #105] step 2: the keychain verifiably holds these tokens, so
+      // localStorage can drop them (only if they're still the current ones).
+      if (result.state === 'ok' && session) stripTokensFromStorage(tokensOf(session));
+    });
   };
   enqueue(getFallbackSession() ?? null);
   onSessionPersisted((session) => enqueue(session));

src/app/state/keychainSession.test.ts

@@ -0,0 +1,183 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+// localStorage stand-in (these modules read it at call time).
+const store = new Map<string, string>();
+(globalThis as { localStorage?: unknown }).localStorage = {
+  getItem: (k: string) => store.get(k) ?? null,
+  setItem: (k: string, v: string) => {
+    store.set(k, v);
+  },
+  removeItem: (k: string) => {
+    store.delete(k);
+  },
+};
+
+const sessions = await import('./sessions');
+const { bootKeychainSession } = await import('./keychainSession');
+const { syncKeychain, tokensOf } = await import('./keychainMirror');
+
+type Invoke = (cmd: string, args?: Record<string, unknown>) => Promise<unknown>;
+const keychain = (opts: { getThrows?: boolean; setThrows?: boolean } = {}) => {
+  let stored: unknown = null;
+  const invoke: Invoke = async (cmd, args) => {
+    if (cmd === 'secure_session_supported') return true;
+    if (cmd === 'secure_session_get') {
+      if (opts.getThrows) throw new Error('Element not found.');
+      return stored;
+    }
+    if (cmd === 'secure_session_set') {
+      if (opts.setThrows) throw new Error('Access is denied.');
+      stored = args?.tokens;
+      return null;
+    }
+    if (cmd === 'secure_session_clear') {
+      stored = null;
+      return null;
+    }
+    throw new Error(cmd);
+  };
+  return {
+    invoke,
+    get: () => stored,
+    set: (v: unknown) => {
+      stored = v;
+    },
+  };
+};
+const blob = () => JSON.parse(store.get('cinny_session_v1') ?? 'null');
+const tokensOnDisk = () =>
+  [...store.entries()].some(([, v]) => v.includes('syt_') || v.includes('mar_'));
+const login = (access: string, refresh?: string) =>
+  sessions.setFallbackSession(access, 'DEV1', '@alice:example.org', 'https://hs.example', {
+    refreshToken: refresh,
+    expiresInMs: 300_000,
+  });
+/** A fresh page load: drop the in-memory state, keep storage and keychain. */
+const reload = () => sessions.leaveKeychainMode();
+/** What the mirror does after a write: verify in the keychain, then strip. */
+const mirror = async (invoke: Invoke) => {
+  const s = sessions.getFallbackSession() ?? null;
+  const r = await syncKeychain(invoke, s);
+  if (r.state === 'ok' && s) sessions.stripTokensFromStorage(tokensOf(s));
+  return r;
+};
+
+test('[#105] web / no keychain: localStorage stays authoritative', async () => {
+  store.clear();
+  reload();
+  login('syt_web', 'mar_web');
+  assert.deepEqual(await bootKeychainSession(undefined), { mode: 'off' });
+  assert.equal(sessions.getFallbackSession()?.accessToken, 'syt_web');
+  assert.equal(blob().accessToken, 'syt_web');
+});
+
+test('[#105] migration: existing install moves its tokens to the keychain, then off disk', async () => {
+  store.clear();
+  reload();
+  login('syt_old', 'mar_old'); // a pre-step-2 install
+  const kc = keychain();
+  const boot = await bootKeychainSession(kc.invoke);
+  assert.equal(boot.mode, 'keychain');
+  assert.equal(sessions.getFallbackSession()?.accessToken, 'syt_old');
+  assert.equal(tokensOnDisk(), true, 'not stripped before the keychain is verified');
+  assert.equal((await mirror(kc.invoke)).state, 'ok');
+  assert.equal(tokensOnDisk(), false, 'tokens gone from localStorage');
+  assert.equal(blob().tokensIn, 'keychain');
+  assert.equal(store.get('cinny_access_token'), undefined);
+  assert.equal(sessions.getFallbackSession()?.accessToken, 'syt_old', 'still signed in');
+
+  // Next launch: shell + keychain -> the same session.
+  reload();
+  const again = await bootKeychainSession(kc.invoke);
+  assert.equal(again.mode, 'keychain');
+  const s = sessions.getFallbackSession();
+  assert.equal(s?.accessToken, 'syt_old');
+  assert.equal(s?.refreshToken, 'mar_old');
+  assert.equal(s?.baseUrl, 'https://hs.example');
+  assert.ok((s?.expiresInMs ?? 0) > 0, 'expiry kept in the shell');
+});
+
+test('[#105] token refresh: written in full first, stripped once the keychain has it', async () => {
+  // continues from the previous state: keychain mode, shell on disk
+  const kc = keychain();
+  kc.set({
+    userId: '@alice:example.org',
+    deviceId: 'DEV1',
+    accessToken: 'syt_old',
+    refreshToken: 'mar_old',
+  });
+  login('syt_new', 'mar_new');
+  assert.equal(blob().accessToken, 'syt_new', 'durable on disk until the keychain confirms');
+  assert.equal(sessions.getFallbackSession()?.accessToken, 'syt_new');
+  await mirror(kc.invoke);
+  assert.equal(tokensOnDisk(), false);
+  assert.equal((kc.get() as { accessToken: string }).accessToken, 'syt_new');
+});
+
+test('[#105] a failing keychain write keeps the tokens in localStorage', async () => {
+  store.clear();
+  reload();
+  login('syt_keep', 'mar_keep');
+  const kc = keychain({ setThrows: true });
+  await bootKeychainSession(kc.invoke);
+  assert.equal((await mirror(kc.invoke)).state, 'error');
+  assert.equal(blob().accessToken, 'syt_keep', 'nothing stripped');
+  reload();
+  await bootKeychainSession(kc.invoke);
+  assert.equal(
+    sessions.getFallbackSession()?.accessToken,
+    'syt_keep',
+    'still signed in after a restart',
+  );
+});
+
+test('[#105] shell but no keychain entry: "missing", never a silent logout', async () => {
+  store.clear();
+  reload();
+  login('syt_x');
+  const kc = keychain();
+  await bootKeychainSession(kc.invoke);
+  await mirror(kc.invoke);
+  kc.set(null); // someone deleted the Credential Manager entry
+  reload();
+  const boot = await bootKeychainSession(kc.invoke);
+  assert.deepEqual(boot, { mode: 'missing', userId: '@alice:example.org' });
+  assert.equal(blob().tokensIn, 'keychain', 'shell kept for Retry');
+});
+
+test('[#105] shell but the keychain read fails: "error", shell kept', async () => {
+  // continues: shell on disk
+  reload();
+  const boot = await bootKeychainSession(keychain({ getThrows: true }).invoke);
+  assert.equal(boot.mode, 'error');
+  assert.equal(blob().tokensIn, 'keychain');
+});
+
+test('[#105] a shell for another device never pairs with the keychain', async () => {
+  store.clear();
+  reload();
+  login('syt_a');
+  const kc = keychain();
+  await bootKeychainSession(kc.invoke);
+  await mirror(kc.invoke);
+  kc.set({ userId: '@alice:example.org', deviceId: 'OTHER', accessToken: 'syt_b' });
+  reload();
+  assert.equal((await bootKeychainSession(kc.invoke)).mode, 'missing');
+});
+
+test('[#105] logout clears memory, disk and (via the mirror) the keychain', async () => {
+  store.clear();
+  reload();
+  login('syt_bye', 'mar_bye');
+  const kc = keychain();
+  await bootKeychainSession(kc.invoke);
+  await mirror(kc.invoke);
+  sessions.removeFallbackSession();
+  assert.equal(sessions.getFallbackSession(), undefined);
+  assert.equal(store.size, 0);
+  await mirror(kc.invoke);
+  assert.equal(kc.get(), null);
+  reload();
+  assert.deepEqual(await bootKeychainSession(kc.invoke), { mode: 'keychain', session: undefined });
+});

src/app/state/keychainSession.ts

@@ -0,0 +1,76 @@
+import {
+  enterKeychainMode,
+  hasKeychainShell,
+  KeychainBoot,
+  KeychainSessionTokens,
+} from './sessions';
+import { KEYCHAIN_TIMEOUT_MS, KeychainInvoke } from './keychainMirror';
+
+/**
+ * [Gitea #105] Desktop, step 2: at boot, before the app renders, read the login
+ * tokens from the OS keychain into memory (see sessions.ts). Returns:
+ * - `off`: not the desktop app, or no keychain here (Linux, older builds) —
+ *   localStorage stays authoritative, exactly as before;
+ * - a KeychainBoot from enterKeychainMode: `keychain` (go on), or `missing`
+ *   (localStorage says the tokens are in the keychain but they can't be read;
+ *   the caller shows Retry / Sign in again and must NOT start the mirror,
+ *   which would clear the keychain entry it couldn't read).
+ */
+export type KeychainBootResult = { mode: 'off' } | KeychainBoot | { mode: 'error'; error: string };
+
+const withTimeout = <T>(p: Promise<T>, ms: number): Promise<T> =>
+  new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('keychain timed out')), ms);
+    p.then(
+      (v) => {
+        clearTimeout(timer);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(timer);
+        reject(e);
+      },
+    );
+  });
+
+const asTokens = (v: unknown): KeychainSessionTokens | null => {
+  if (!v || typeof v !== 'object') return null;
+  const t = v as Partial<KeychainSessionTokens>;
+  if (typeof t.userId !== 'string' || typeof t.deviceId !== 'string') return null;
+  if (typeof t.accessToken !== 'string') return null;
+  return {
+    userId: t.userId,
+    deviceId: t.deviceId,
+    accessToken: t.accessToken,
+    ...(typeof t.refreshToken === 'string' ? { refreshToken: t.refreshToken } : {}),
+  };
+};
+
+export async function bootKeychainSession(
+  invoke: KeychainInvoke | undefined,
+  timeoutMs = KEYCHAIN_TIMEOUT_MS,
+): Promise<KeychainBootResult> {
+  if (!invoke) return { mode: 'off' };
+  let supported: unknown;
+  try {
+    supported = await withTimeout(invoke('secure_session_supported'), timeoutMs);
+  } catch {
+    supported = false;
+  }
+  if (supported !== true) {
+    // A shell without a keychain to read from can only mean the store went
+    // away (e.g. a downgrade of the desktop build): say so, don't log out.
+    return hasKeychainShell()
+      ? { mode: 'error', error: 'keychain not available' }
+      : { mode: 'off' };
+  }
+  let stored: unknown;
+  try {
+    stored = await withTimeout(invoke('secure_session_get'), timeoutMs);
+  } catch (e) {
+    if (hasKeychainShell())
+      return { mode: 'error', error: (e instanceof Error ? e.message : String(e)).slice(0, 200) };
+    return { mode: 'off' };
+  }
+  return enterKeychainMode(asTokens(stored));
+}

src/app/state/plaintextCaches.test.ts

@@ -26,7 +26,10 @@ const api = {
       : Object.getOwnPropertyDescriptor(target, key),
 });
 
-const { clearPlaintextCaches, plaintextCachesWiped } = await import('./plaintextCaches');
+const { clearPlaintextCaches, plaintextCachesWiped, WIDGET_CONSENT_KEY_PREFIX } =
+  await import('./plaintextCaches');
+const { WIDGET_CONSENT_PREFIX, widgetConsentKey } =
+  await import('../features/room/widgets/widgetUtils');
 
 test('clearPlaintextCaches removes every plaintext/PII localStorage key', () => {
   store.clear();
@@ -104,3 +107,17 @@ test('clearPlaintextCaches clears the encrypted-search opt-in and flags the wipe
   assert.equal(store.has('mxjssdk_memory_filter_FILTER_SYNC_@me:server'), false);
   assert.equal(plaintextCachesWiped(), true, 'draft writes stop until the page reloads');
 });
+
+test('[#266] clearPlaintextCaches sweeps remembered widget approvals', () => {
+  assert.equal(WIDGET_CONSENT_KEY_PREFIX, WIDGET_CONSENT_PREFIX, 'prefix kept in sync');
+  store.clear();
+  const consent = widgetConsentKey('!room:server', 'widget-1');
+  store.set(consent, '{"url":"https://pad.example","allowed":[],"denied":[]}');
+  store.set('lotus.widgetConsentNotAKey', 'kept');
+  removed.length = 0;
+
+  clearPlaintextCaches('@me:server');
+
+  assert.ok(removed.includes(consent), 'consent cleared');
+  assert.ok(store.has('lotus.widgetConsentNotAKey'), 'unrelated key kept');
+});

src/app/state/plaintextCaches.ts

@@ -139,6 +139,31 @@ const clearAccountScopedFlags = (userId?: string): void => {
   });
 };
 
+/**
+ * [Gitea #266] Remembered widget approvals (`lotus.widgetConsent.<room>.<widget>`,
+ * widgetUtils.ts) would otherwise apply silently to the next account on this
+ * device, and their keys list the previous account's rooms. Kept as a string
+ * here so logout doesn't pull the widget code into the entry chunk; a test
+ * checks it matches WIDGET_CONSENT_PREFIX.
+ */
+export const WIDGET_CONSENT_KEY_PREFIX = 'lotus.widgetConsent.';
+const clearWidgetConsents = (): void => {
+  let keys: string[];
+  try {
+    keys = Object.keys(localStorage);
+  } catch {
+    return;
+  }
+  keys.forEach((key) => {
+    if (!key.startsWith(WIDGET_CONSENT_KEY_PREFIX)) return;
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      // best-effort
+    }
+  });
+};
+
 export const clearPlaintextCaches = (userId?: string): void => {
   wiped = true;
   clearTranslationCache();
@@ -153,5 +178,6 @@ export const clearPlaintextCaches = (userId?: string): void => {
   clearStatusMessage();
   clearCallVolumesAndSyncMeta(userId);
   clearAccountScopedFlags(userId);
+  clearWidgetConsents();
   if (userId) clearNavToActivePathStore(userId);
 };

src/app/state/room/markedUnread.ts

@@ -2,6 +2,7 @@ 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
@@ -25,11 +26,9 @@ export const setMarkedUnread = (
   unread: boolean,
 ): Promise<unknown> =>
   Promise.all([
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mx.setRoomAccountData(roomId, AccountDataEvent.MarkedUnread as any, { unread }),
+    setRoomAccountData(mx, roomId, AccountDataEvent.MarkedUnread, { unread }),
     // Best-effort mirror for older servers; never fail the primary write on it.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mx.setRoomAccountData(roomId, UNSTABLE_MARKED_UNREAD as any, { unread }).catch(() => undefined),
+    setRoomAccountData(mx, roomId, UNSTABLE_MARKED_UNREAD, { unread }).catch(() => undefined),
   ]);
 
 export const receiptIsMine = (event: MatrixEvent, userId: string): boolean => {

src/app/state/sessions.ts

@@ -5,9 +5,9 @@
 //   setLocalStorageItem,
 // } from './utils/atomWithLocalStorage';
 
-// OIDC/next-gen-auth (MSC3861) metadata needed to refresh + revoke tokens. Kept
-// as a generic claims object so this core module stays decoupled from
-// oidc-client-ts (the refresher casts idTokenClaims to IdTokenClaims).
+// OIDC/next-gen-auth (MSC3861) metadata needed to refresh + revoke tokens. Since
+// matrix-js-sdk 43 only `clientId` is used (the SDK finds the auth server via
+// /auth_metadata); `idTokenClaims` is kept for sessions saved by older builds.
 export type OidcSessionMeta = {
   issuer: string;
   clientId: string;
@@ -51,6 +51,21 @@ const OIDC_KEYS = {
 // `_v1` suffix.
 const SESSION_BLOB_KEY = 'cinny_session_v1';
 
+// [Gitea #105] Desktop, step 2: the login tokens live in the OS keychain.
+// localStorage then holds a SHELL blob (everything but the tokens, marked
+// `tokensIn: 'keychain'`), and the full session is kept in memory, filled at
+// boot (bootKeychainSession) before the app renders, so every reader of
+// getFallbackSession stays synchronous. A new session is written to
+// localStorage in full first; the tokens are stripped only once the keychain
+// write was read back (stripTokensFromStorage), so at every instant one durable
+// store holds the newest tokens (a token refresh invalidates the old ones).
+let keychainMode = false;
+let memorySession: PersistedSession | undefined;
+
+type ShellSession = Omit<PersistedSession, 'accessToken' | 'refreshToken'> & {
+  tokensIn: 'keychain';
+};
+
 // The exact shape stored inside SESSION_BLOB_KEY. Note it stores an ABSOLUTE
 // `expiresAt` (ms since epoch) rather than a relative lifetime — identical to
 // the legacy `cinny_expires_at` semantics — so reads stay drift-free.
@@ -266,6 +281,7 @@ export function setFallbackSession(
   extra?: FallbackSessionExtra,
 ) {
   const persisted = buildPersisted(accessToken, deviceId, userId, baseUrl, extra);
+  if (keychainMode) memorySession = persisted;
   // ONE setItem — the blob can never be observed half-written.
   localStorage.setItem(SESSION_BLOB_KEY, JSON.stringify(persisted));
   // Dual-write the legacy keys (removal of this half is a future release).
@@ -276,6 +292,7 @@ export function setFallbackSession(
 // Clear BOTH the atomic blob and every legacy key so no reader (blob-preferring
 // or legacy-fallback) can resurrect a logged-out session.
 export const removeFallbackSession = () => {
+  memorySession = undefined;
   localStorage.removeItem(SESSION_BLOB_KEY);
   Object.values(LEGACY_KEYS).forEach((key) => localStorage.removeItem(key));
   Object.values(OIDC_KEYS).forEach((key) => localStorage.removeItem(key));
@@ -286,7 +303,23 @@ export const removeFallbackSession = () => {
 // corrupt/partial we transparently assemble from the legacy keys (migration);
 // the next setFallbackSession then persists the blob. When both exist the blob
 // wins by construction.
+// The stored session with its tokens, choosing blob vs legacy as below.
+const readStoredPersisted = (): PersistedSession | undefined => {
+  const blob = readSessionBlob();
+  const legacy = readLegacyKeys();
+  if (
+    blob &&
+    legacy &&
+    typeof legacy.expiresAt === 'number' &&
+    (typeof blob.expiresAt !== 'number' || legacy.expiresAt > blob.expiresAt)
+  ) {
+    return legacy;
+  }
+  return blob ?? legacy;
+};
+
 export const getFallbackSession = (): Session | undefined => {
+  if (keychainMode) return memorySession ? sessionFromPersisted(memorySession) : undefined;
   const blob = readSessionBlob();
   const legacy = readLegacyKeys();
   // Prefer the atomic blob, EXCEPT when the legacy keys carry a later expiry: a
@@ -305,6 +338,112 @@ export const getFallbackSession = (): Session | undefined => {
   if (!persisted) return undefined;
   return sessionFromPersisted(persisted);
 };
+// --- [Gitea #105] desktop keychain session -----------------------------------
+
+export type KeychainSessionTokens = {
+  userId: string;
+  deviceId: string;
+  accessToken: string;
+  refreshToken?: string;
+};
+
+/** The shell blob written while the tokens are in the keychain, if any. */
+const readShell = (): Omit<ShellSession, 'tokensIn'> | undefined => {
+  const raw = localStorage.getItem(SESSION_BLOB_KEY);
+  if (!raw) return undefined;
+  try {
+    const p = JSON.parse(raw) as Partial<ShellSession>;
+    if (
+      p?.tokensIn !== 'keychain' ||
+      typeof p.deviceId !== 'string' ||
+      typeof p.userId !== 'string' ||
+      typeof p.baseUrl !== 'string'
+    )
+      return undefined;
+    const { tokensIn: _drop, ...rest } = p as ShellSession;
+    return rest;
+  } catch {
+    return undefined;
+  }
+};
+
+/** A session in localStorage that still carries its tokens (blob or legacy). */
+export const readStoredSessionWithTokens = (): Session | undefined => {
+  const persisted = readStoredPersisted();
+  return persisted ? sessionFromPersisted(persisted) : undefined;
+};
+
+/** Whether localStorage holds a token-less shell (tokens are in the keychain). */
+export const hasKeychainShell = (): boolean => readShell() !== undefined;
+
+export type KeychainBoot =
+  /** Use the keychain: memory holds `session` (or none = signed out). */
+  | { mode: 'keychain'; session: Session | undefined }
+  /** A shell says the tokens are in the keychain, but they can't be read. */
+  | { mode: 'missing'; userId: string };
+
+/**
+ * Decide the boot session from the keychain's tokens and localStorage, and
+ * switch this tab to keychain mode. `tokens` is what the keychain returned
+ * (null = no entry). Pure apart from reading localStorage and setting the
+ * in-memory state.
+ */
+export const enterKeychainMode = (tokens: KeychainSessionTokens | null): KeychainBoot => {
+  const withTokens = readStoredPersisted();
+  const shell = readShell();
+  keychainMode = true;
+  if (withTokens) {
+    // Pre-step-2 install, or a write not yet confirmed: localStorage has the
+    // full session and stays authoritative until the mirror verifies it.
+    memorySession = withTokens;
+    return { mode: 'keychain', session: sessionFromPersisted(withTokens) };
+  }
+  if (shell) {
+    if (tokens && tokens.userId === shell.userId && tokens.deviceId === shell.deviceId) {
+      memorySession = {
+        ...shell,
+        accessToken: tokens.accessToken,
+        ...(tokens.refreshToken ? { refreshToken: tokens.refreshToken } : {}),
+      };
+      return { mode: 'keychain', session: sessionFromPersisted(memorySession) };
+    }
+    // Never treat this as a logout: the shell stays, the caller offers Retry.
+    memorySession = undefined;
+    return { mode: 'missing', userId: shell.userId };
+  }
+  memorySession = undefined;
+  return { mode: 'keychain', session: undefined };
+};
+
+/** Leave keychain mode (the keychain failed): localStorage is authoritative again. */
+export const leaveKeychainMode = (): void => {
+  keychainMode = false;
+  memorySession = undefined;
+};
+
+/**
+ * The keychain now verifiably holds `tokens`: if they're still the current
+ * session's, drop the tokens from localStorage (shell blob, no legacy keys).
+ */
+export const stripTokensFromStorage = (tokens: KeychainSessionTokens): boolean => {
+  const m = memorySession;
+  if (
+    !keychainMode ||
+    !m ||
+    m.userId !== tokens.userId ||
+    m.deviceId !== tokens.deviceId ||
+    m.accessToken !== tokens.accessToken ||
+    (m.refreshToken ?? undefined) !== (tokens.refreshToken ?? undefined)
+  )
+    return false;
+  const { accessToken: _a, refreshToken: _r, ...rest } = m;
+  const shell: ShellSession = { ...rest, tokensIn: 'keychain' };
+  localStorage.setItem(SESSION_BLOB_KEY, JSON.stringify(shell));
+  Object.values(LEGACY_KEYS).forEach((key) => localStorage.removeItem(key));
+  Object.values(OIDC_KEYS).forEach((key) => localStorage.removeItem(key));
+  return true;
+};
+
 /**
  * End of migration code for old session
  */

src/app/state/settings.ts

@@ -310,6 +310,8 @@ 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;
@@ -429,6 +431,7 @@ const defaultSettings: Settings = {
   screenshareBitrate: 'auto',
   screenshareFramerate: 'auto',
   soundboardEnabled: true,
+  callSummaryToast: true,
   soundboardVolume: 80,
 
   seasonalThemeOverride: 'auto',

src/app/state/toast.ts

@@ -13,6 +13,8 @@ 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
 };
 

src/app/state/widgetsPanel.ts

@@ -2,3 +2,7 @@ import { atom } from 'jotai';
 
 // Whether the room's Widgets side-panel is open (mirrors mediaGalleryAtom).
 export const widgetsPanelAtom = atom<boolean>(false);
+
+// [Gitea #205] Which widget the panel is showing, per room, so a floating
+// widget's "Back to room" can open the panel on it.
+export const widgetViewingAtom = atom<Record<string, string | null>>({});

src/app/styles/zIndex.ts

@@ -5,6 +5,8 @@
  * z-index values and is intentionally not listed here.
  */
 export const zIndices = {
+  /** [Gitea #205] A room widget kept on screen after leaving its room. */
+  floatingWidget: 9980,
   /** In-call incoming-call banner — below seasonal/night-light/modals. */
   inCallBanner: 9990,
   /** Seasonal particle effect — below the night-light tint so particles tint. */

src/app/utils/accountData.ts

@@ -18,6 +18,17 @@ 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,

src/app/utils/callSummary.test.ts

@@ -1,6 +1,11 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert/strict';
-import { describeCallDuration, describeCallEnd } from './callSummary';
+import {
+  describeCallDuration,
+  describeCallEnd,
+  describeCallDetails,
+  parseCallSummaryDetails,
+} from './callSummary';
 
 describe('describeCallDuration', () => {
   it('picks the unit', () => {
@@ -65,3 +70,97 @@ 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']);
+});

src/app/utils/callSummary.ts

@@ -32,3 +32,123 @@ 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;
+}

src/app/utils/keyUploadWatch.test.ts

@@ -0,0 +1,86 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  getKeyUploadWatch,
+  isKeyUploadUrl,
+  isOtkConflict,
+  recordKeyUpload,
+  resetKeyUploadWatch,
+  STUCK_AFTER,
+  subscribeKeyUploadWatch,
+  WINDOW_MS,
+  watchKeyUploads,
+} from './keyUploadWatch';
+
+const CONFLICT = JSON.stringify({
+  errcode: 'M_UNKNOWN',
+  error:
+    'One time key signed_curve25519:AAAAAAAAAA0 already exists. Old key: {...}; new key: {...}',
+});
+
+test('[#201] recognises the upload endpoint and the conflict body', () => {
+  assert.equal(isKeyUploadUrl('https://hs.example/_matrix/client/v3/keys/upload'), true);
+  assert.equal(isKeyUploadUrl('https://hs.example/_matrix/client/v3/keys/upload/'), true);
+  assert.equal(isKeyUploadUrl('https://hs.example/_matrix/client/v3/keys/query'), false);
+  assert.equal(isKeyUploadUrl('https://hs.example/_matrix/client/v3/room_keys/keys'), false);
+  assert.equal(isOtkConflict(400, CONFLICT), true);
+  assert.equal(isOtkConflict(400, '{"errcode":"M_BAD_JSON"}'), false);
+  assert.equal(isOtkConflict(500, CONFLICT), false);
+});
+
+test('[#201] stuck only after repeated conflicts inside the window', () => {
+  resetKeyUploadWatch();
+  const t0 = 1_000_000;
+  for (let i = 0; i < STUCK_AFTER - 1; i += 1) recordKeyUpload(400, CONFLICT, t0 + i * 1000);
+  assert.equal(getKeyUploadWatch().stuck, false, 'a couple of races is not divergence');
+  recordKeyUpload(400, CONFLICT, t0 + 5000);
+  assert.equal(getKeyUploadWatch().stuck, true);
+  assert.match(getKeyUploadWatch().lastError ?? '', /already exists/);
+});
+
+test('[#201] old conflicts age out; other 400s are ignored', () => {
+  resetKeyUploadWatch();
+  recordKeyUpload(400, CONFLICT, 0);
+  recordKeyUpload(400, CONFLICT, 1000);
+  recordKeyUpload(400, CONFLICT, WINDOW_MS + 60_000);
+  assert.equal(getKeyUploadWatch().stuck, false);
+  recordKeyUpload(400, '{"errcode":"M_BAD_JSON"}', WINDOW_MS + 61_000);
+  assert.equal(getKeyUploadWatch().conflicts, 1);
+});
+
+test('[#201] a successful upload clears it and notifies', () => {
+  resetKeyUploadWatch();
+  let calls = 0;
+  const off = subscribeKeyUploadWatch(() => {
+    calls += 1;
+  });
+  for (let i = 0; i < STUCK_AFTER; i += 1) recordKeyUpload(400, CONFLICT, i);
+  assert.equal(getKeyUploadWatch().stuck, true);
+  recordKeyUpload(200, '');
+  assert.equal(getKeyUploadWatch().stuck, false);
+  assert.ok(calls >= 2);
+  off();
+});
+
+test('[#201] the fetch wrapper observes without changing the response', async () => {
+  resetKeyUploadWatch();
+  const fake: typeof fetch = async (input) =>
+    String(input).endsWith('/keys/upload')
+      ? new Response(CONFLICT, { status: 400 })
+      : new Response('{}', { status: 200 });
+  const f = watchKeyUploads(fake);
+  const responses = await Promise.all(
+    Array.from({ length: STUCK_AFTER }, () =>
+      f('https://hs.example/_matrix/client/v3/keys/upload', { method: 'POST' }),
+    ),
+  );
+  const bodies = await Promise.all(responses.map((res) => res.text()));
+  responses.forEach((res) => assert.equal(res.status, 400));
+  bodies.forEach((b) => assert.match(b, /already exists/, 'the SDK can still read the body'));
+  await new Promise((r) => {
+    setTimeout(r, 10);
+  });
+  assert.equal(getKeyUploadWatch().stuck, true);
+  await f('https://hs.example/_matrix/client/v3/sync');
+  assert.equal(getKeyUploadWatch().stuck, true, 'unrelated requests change nothing');
+});

src/app/utils/keyUploadWatch.ts

@@ -0,0 +1,102 @@
+/**
+ * [Gitea #201 KE-1] Notice when this device's encryption store has diverged
+ * from the server: every POST /keys/upload answers 400 "One time key ...
+ * already exists", and the SDK retries forever (matrix-rust-sdk#5200, open),
+ * so new encrypted messages and calls quietly degrade. The server saw 474k of
+ * these between May 30 and Jul 8 2026. The only fix is a fresh login on that
+ * device, so we tell the user (KeyUploadBanner) instead of looping silently.
+ *
+ * Watched at the fetch layer (MatrixClient `fetchFn`), so it doesn't depend on
+ * SDK log wording. Pure state + a tiny subscribe API; no network I/O of its own.
+ */
+
+/** Conflicts needed before we call the device stuck. The SDK retries within
+ * seconds, so a real divergence crosses this quickly; a one-off race doesn't. */
+export const STUCK_AFTER = 3;
+/** Conflicts older than this don't count (a long-ago blip isn't "now"). */
+export const WINDOW_MS = 15 * 60 * 1000;
+
+export type KeyUploadWatchState = { stuck: boolean; conflicts: number; lastError?: string };
+
+let conflictTimes: number[] = [];
+let lastError: string | undefined;
+let state: KeyUploadWatchState = { stuck: false, conflicts: 0 };
+const listeners = new Set<() => void>();
+
+const publish = (next: KeyUploadWatchState) => {
+  if (next.stuck === state.stuck && next.conflicts === state.conflicts) return;
+  state = next;
+  listeners.forEach((l) => l());
+};
+
+export const isKeyUploadUrl = (url: string): boolean => {
+  try {
+    return /\/_matrix\/client\/[^/]+\/keys\/upload\/?$/.test(new URL(url, 'http://x').pathname);
+  } catch {
+    return false;
+  }
+};
+
+/** The 400 body that marks a diverged one-time-key store. */
+export const isOtkConflict = (status: number, body: string): boolean =>
+  status === 400 && /one time key .*already exists/i.test(body);
+
+/** Feed one /keys/upload response. `now` is injectable for tests. */
+export const recordKeyUpload = (status: number, body: string, now = Date.now()): void => {
+  if (status >= 200 && status < 300) {
+    // A successful upload means the stores agree again.
+    conflictTimes = [];
+    lastError = undefined;
+    publish({ stuck: false, conflicts: 0 });
+    return;
+  }
+  if (!isOtkConflict(status, body)) return;
+  conflictTimes = [...conflictTimes, now].filter((t) => now - t <= WINDOW_MS);
+  lastError = body.slice(0, 300);
+  publish({
+    stuck: conflictTimes.length >= STUCK_AFTER,
+    conflicts: conflictTimes.length,
+    lastError,
+  });
+};
+
+export const getKeyUploadWatch = (): KeyUploadWatchState => state;
+
+export const subscribeKeyUploadWatch = (cb: () => void): (() => void) => {
+  listeners.add(cb);
+  return () => listeners.delete(cb);
+};
+
+/** Test/logout helper: forget everything (a new session starts clean). */
+export const resetKeyUploadWatch = (): void => {
+  conflictTimes = [];
+  lastError = undefined;
+  publish({ stuck: false, conflicts: 0 });
+};
+
+const urlOf = (input: RequestInfo | URL): string =>
+  typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+
+/**
+ * Wrap a fetch so /keys/upload responses are observed. The response the SDK
+ * gets is untouched; a clone is read in the background, never awaited.
+ */
+export const watchKeyUploads =
+  (inner: typeof fetch): typeof fetch =>
+  async (input, init) => {
+    const res = await inner(input, init);
+    try {
+      if (isKeyUploadUrl(urlOf(input))) {
+        if (res.ok) recordKeyUpload(res.status, '');
+        else if (res.status === 400)
+          res
+            .clone()
+            .text()
+            .then((body) => recordKeyUpload(res.status, body))
+            .catch(() => undefined);
+      }
+    } catch {
+      // observation must never break the request
+    }
+    return res;
+  };

src/app/utils/room.ts

@@ -60,7 +60,7 @@ export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[]
 export function sendStateEvent<T extends object>(
   mx: MatrixClient,
   roomId: string,
-  eventType: StateEvent,
+  eventType: StateEvent | string,
   content: T,
   stateKey = '',
 ): Promise<ISendEventResponse> {

src/app/utils/scheduledMessages.test.ts

@@ -179,3 +179,15 @@ test('groupScheduledByRoom: groups and sorts by sendAt', () => {
   );
   assert.equal(g.get('!2')?.length, 1);
 });
+
+test('[#275] the server limit maps to friendly text; other errors keep theirs', async () => {
+  const { describeScheduleError, SCHEDULE_TOO_FAR_TEXT, MAX_SCHEDULE_AHEAD_MS } =
+    await import('./scheduledMessages');
+  assert.equal(MAX_SCHEDULE_AHEAD_MS, 86_400_000);
+  const tooLarge = Object.assign(new Error('The requested delay (172800000ms) exceeds…'), {
+    errcode: 'ORG.MATRIX.MSC4140_DELAY_TOO_LARGE',
+  });
+  assert.equal(describeScheduleError(tooLarge), SCHEDULE_TOO_FAR_TEXT);
+  assert.equal(describeScheduleError(new Error('Boom')), 'Boom');
+  assert.equal(describeScheduleError('nope'), 'Failed to schedule message.');
+});

src/app/utils/scheduledMessages.ts

@@ -1,6 +1,22 @@
 import { IContent, MatrixClient, Method } from 'matrix-js-sdk';
 import type { ScheduledMessage } from '../state/scheduledMessages';
 
+/**
+ * [Gitea #275] Production Synapse caps delayed events at
+ * `max_event_delay_duration: 24h`; a later time is rejected with
+ * ORG.MATRIX.MSC4140_DELAY_TOO_LARGE. The dialog enforces the same limit and
+ * the server's error maps to the same text, in case the limit changes.
+ */
+export const MAX_SCHEDULE_AHEAD_MS = 24 * 60 * 60 * 1000;
+export const SCHEDULE_TOO_FAR_TEXT = 'You can schedule up to 24 hours ahead.';
+
+/** A user-facing sentence for a failed schedule. */
+export const describeScheduleError = (err: unknown): string => {
+  const errcode = (err as { errcode?: unknown } | null)?.errcode;
+  if (errcode === 'ORG.MATRIX.MSC4140_DELAY_TOO_LARGE') return SCHEDULE_TOO_FAR_TEXT;
+  return err instanceof Error ? err.message : 'Failed to schedule message.';
+};
+
 /**
  * Schedule a message via MSC4140 (delayed messages).
  * Synapse implementation: pass org.matrix.msc4140.delay on the standard

src/app/utils/serverAcl.test.ts

@@ -1,6 +1,11 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { isValidServerPattern, globToRegExp, matchesAnyGlob } from './serverAcl';
+import {
+  isValidServerPattern,
+  globToRegExp,
+  matchesAnyGlob,
+  normalizeServerAcl,
+} from './serverAcl';
 
 test('isValidServerPattern: accepts hostnames, IPs, and globs', () => {
   for (const v of [
@@ -42,3 +47,35 @@ test('matchesAnyGlob: true if any glob matches (self-ban detection)', () => {
   assert.equal(matchesAnyGlob('lotusguild.org', ['*.evil.com']), false);
   assert.equal(matchesAnyGlob('lotusguild.org', []), false);
 });
+
+test('no ACL event: every server allowed, IP literals allowed (#261)', () => {
+  assert.deepEqual(normalizeServerAcl(undefined), {
+    allow: ['*'],
+    deny: [],
+    allow_ip_literals: true,
+  });
+});
+
+test('a missing allow_ip_literals defaults to true, per the spec (#261)', () => {
+  assert.equal(normalizeServerAcl({ allow: ['*'], deny: ['bad.example'] }).allow_ip_literals, true);
+});
+
+test('an explicit allow_ip_literals is kept', () => {
+  assert.equal(
+    normalizeServerAcl({ allow: ['*'], allow_ip_literals: false }).allow_ip_literals,
+    false,
+  );
+  assert.equal(
+    normalizeServerAcl({ allow: ['*'], allow_ip_literals: true }).allow_ip_literals,
+    true,
+  );
+});
+
+test('missing or malformed lists become empty, non-strings are dropped', () => {
+  assert.deepEqual(normalizeServerAcl({ allow: ['a.example', 3, null] }), {
+    allow: ['a.example'],
+    deny: [],
+    allow_ip_literals: true,
+  });
+  assert.deepEqual(normalizeServerAcl({ allow: 'a.example', deny: {} }).allow, []);
+});

src/app/utils/serverAcl.ts

@@ -50,3 +50,29 @@ export function matchesAnyGlob(domain: string, globs: string[]): boolean {
     }
   });
 }
+
+/**
+ * `m.room.server_acl` content with the spec's defaults filled in (#261).
+ * `allow_ip_literals` defaults to **true** when absent; `allow` and `deny`
+ * default to empty lists, but with no ACL event at all every server is allowed,
+ * so the editor starts from `allow: ['*']` in that case.
+ * https://spec.matrix.org/v1.12/client-server-api/#mroomserver_acl
+ */
+export type ServerAclContent = {
+  allow: string[];
+  deny: string[];
+  allow_ip_literals: boolean;
+};
+
+const stringList = (value: unknown): string[] | undefined =>
+  Array.isArray(value) ? value.filter((v): v is string => typeof v === 'string') : undefined;
+
+export function normalizeServerAcl(content: Record<string, unknown> | undefined): ServerAclContent {
+  if (!content) return { allow: ['*'], deny: [], allow_ip_literals: true };
+  return {
+    allow: stringList(content.allow) ?? [],
+    deny: stringList(content.deny) ?? [],
+    allow_ip_literals:
+      typeof content.allow_ip_literals === 'boolean' ? content.allow_ip_literals : true,
+  };
+}