Surface OEM AUTO_START blocks in UnifiedPush settings status.

TCL App Boot can drop NEW_ENDPOINT; show a clear allow-auto-start hint when detected.
Fail UnifiedPush reset when no endpoint arrives and surface lastFailure.
2026-07-28 02:39:35 +10:00 · 2026-07-28 01:38:01 +10:00 · 2026-07-28 00:40:02 +10:00 · 2026-07-28 00:18:28 +10:00 · 2026-07-25 20:09:22 +10:00 · 2026-07-24 16:52:34 +10:00
12 changed files with 336 additions and 73 deletions
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -39,12 +39,14 @@ import { AvatarPresence, PresenceBadge } from '../../../components/presence';
 import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
 import colorMXID, { getColorMXIDValue } from '../../../../util/colorMXID';
 import {
-  extractMetadataFromImage,
  embedMetadataInImage,
  detectImageFormat,
  getMimeType,
  getExtension,
  ImageMetadata,
+  needsPngForMetadata,
+  convertImageDataToPng,
+  uint8ArrayToBlob,
 } from '../../../utils/imageMetadata';
 import { getCurrentAccessToken } from '../../../utils/auth';

@@ -473,7 +475,35 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
      setSaving(true);
      setError(undefined);
      try {
-        // Fetch the raw uploaded image so we can embed existing banner/color metadata
+        // Re-embed existing banner/color/style into the new avatar when present
+        const metadata: ImageMetadata = {
+          banner: userBanner,
+          color: userColor,
+          avatarBorderColor: profileStyle.avatarBorderColor,
+          gradient: profileStyle.gradient,
+        };
+        const hasMetadata = Boolean(
+          metadata.color ||
+            metadata.banner ||
+            metadata.avatarBorderColor ||
+            metadata.gradient
+        );
+
+        // Nothing to re-embed — use the already-uploaded MXC directly
+        if (!hasMetadata) {
+          await mx.setAvatarUrl(upload.mxc);
+          const userId = mx.getUserId();
+          if (userId) {
+            const user = mx.getUser(userId);
+            if (user && user.avatarUrl !== upload.mxc) {
+              user.setAvatarUrl(upload.mxc);
+            }
+          }
+          setAvatarFile(undefined);
+          await syncUserAvatar();
+          return;
+        }
+
        const httpUrl = mxcUrlToHttp(mx, upload.mxc, useAuthentication);
        if (!httpUrl) throw new Error('Could not resolve uploaded avatar URL');

@@ -482,30 +512,33 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
        let response = await fetch(httpUrl, {
          headers: accessToken && useAuthentication ? { Authorization: `Bearer ${accessToken}` } : undefined,
        });
-        
+
        // If we got a 401 and we tried with auth, fallback to unauthenticated request
        if (!response.ok && response.status === 401 && accessToken && useAuthentication) {
          console.warn('[Profile] Auth failed (401), attempting unauthenticated fallback for avatar fetch');
          response = await fetch(httpUrl);
        }
-        
-        if (!response.ok) throw new Error('Failed to fetch uploaded avatar');
-        const avatarData = await response.arrayBuffer();

-        const format = detectImageFormat(avatarData);
+        if (!response.ok) throw new Error('Failed to fetch uploaded avatar');
+        let avatarData: ArrayBuffer | Uint8Array = await response.arrayBuffer();
+
+        let format = detectImageFormat(avatarData);
        if (format === 'unknown') throw new Error('Unsupported avatar image format');

-        // Re-embed the existing banner URL and profile color into the new avatar
-        const metadata: ImageMetadata = {
-          banner: userBanner,
-          color: userColor,
-        };
+        // Banner / border / gradient only live in PNG tEXt — convert JPEG/WebP/GIF first
+        if (format !== 'png' && needsPngForMetadata(metadata)) {
+          const pngData = await convertImageDataToPng(avatarData);
+          if (!pngData) throw new Error('Failed to convert avatar to PNG for metadata');
+          avatarData = pngData;
+          format = 'png';
+        }
+
        const modifiedData = embedMetadataInImage(avatarData, metadata);
        if (!modifiedData) throw new Error('Failed to embed metadata in avatar');

        const mimeType = getMimeType(format);
        const extension = getExtension(format);
-        const blob = new Blob([modifiedData], { type: mimeType });
+        const blob = uint8ArrayToBlob(modifiedData, mimeType);
        const uploadResponse = await mx.uploadContent(blob, { name: `avatar.${extension}`, type: mimeType });

        await mx.setAvatarUrl(uploadResponse.content_uri);
@@ -525,7 +558,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
      }
      setSaving(false);
    },
-    [mx, useAuthentication, userBanner, userColor, syncUserAvatar]
+    [mx, useAuthentication, userBanner, userColor, profileStyle, syncUserAvatar]
  );

  const handleRemoveBanner = async () => {
--- a/src/app/features/settings/notifications/SystemNotification.tsx
+++ b/src/app/features/settings/notifications/SystemNotification.tsx
@@ -170,22 +170,34 @@ type PushStatus = {
  registered: boolean;
  distributor: string;
  endpoint: string;
+  distributors: string[];
+  lastFailure: string;
+  autoStartBlocked: boolean;
 };

 /** Android-only section showing UnifiedPush registration status and controls. */
 function AndroidPushNotifications() {
  const [status, setStatus] = useState<PushStatus | undefined>(undefined);
  const [loading, setLoading] = useState(true);
+  const [lastError, setLastError] = useState<string | undefined>(undefined);

  const refresh = useCallback(async () => {
    setLoading(true);
    const s = await getBackgroundSyncStatus();
+    const distributors = Array.isArray(s?.distributors)
+      ? s.distributors
+      : typeof s?.distributors === 'string' && s.distributors && s.distributors !== '[]'
+        ? [s.distributors]
+        : [];
    setStatus(
      s
        ? {
            registered: s.registered,
            distributor: s.distributor || '',
            endpoint: s.endpoint || '',
+            distributors,
+            lastFailure: s.lastFailure || '',
+            autoStartBlocked: Boolean(s.autoStartBlocked),
          }
        : undefined
    );
@@ -198,8 +210,14 @@ function AndroidPushNotifications() {

  const [resetState, reset] = useAsyncCallback(
    useCallback(async () => {
-      await requestResetPushRegistration();
+      setLastError(undefined);
+      const result = await requestResetPushRegistration();
      await refresh();
+      if (!result.success) {
+        setLastError(
+          'Selected distributor but did not get a push endpoint. In ntfy: enable UnifiedPush, allow unrestricted battery, then try Reset again.'
+        );
+      }
    }, [refresh])
  );

@@ -214,6 +232,50 @@ function AndroidPushNotifications() {
    resetState.status === AsyncStatus.Loading ||
    pingState.status === AsyncStatus.Loading;

+  const statusDescription = (() => {
+    if (loading) return 'Loading status…';
+    if (status === undefined) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          Failed to read push status.
+        </Text>
+      );
+    }
+    if (status.registered) {
+      return (
+        <Text as="span" size="T200">
+          {`Distributor: ${status.distributor || 'unknown'}`}
+        </Text>
+      );
+    }
+    if (status.lastFailure === 'AUTO_START_BLOCKED' || status.autoStartBlocked) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          Phone is blocking auto-start for Paarrot. Open App Boot / Auto-start settings, allow Paarrot (and ntfy), then tap Reset.
+        </Text>
+      );
+    }
+    if (status.lastFailure) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          {`Registration failed (${status.lastFailure}). Tap Reset and pick ntfy again.`}
+        </Text>
+      );
+    }
+    if (status.distributors.length === 0) {
+      return (
+        <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+          No UnifiedPush distributor found. Install ntfy from Play Store/F-Droid and enable UnifiedPush in ntfy settings.
+        </Text>
+      );
+    }
+    return (
+      <Text as="span" style={{ color: color.Warning?.Main ?? color.Critical.Main }} size="T200">
+        {`Found ${status.distributors.join(', ')} but not registered yet. Tap Reset and pick ntfy.`}
+      </Text>
+    );
+  })();
+
  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Android Push (UnifiedPush)</Text>
@@ -226,29 +288,20 @@ function AndroidPushNotifications() {
        <SettingTile
          title="Background Notifications"
          description={
-            loading ? (
-              'Loading status…'
-            ) : status === undefined ? (
-              <Text as="span" style={{ color: color.Critical.Main }} size="T200">
-                Failed to read push status.
-              </Text>
-            ) : status.registered ? (
-              <>
-                <Text as="span" size="T200">
-                  {`Distributor: ${status.distributor || 'unknown'}`}
+            <>
+              {statusDescription}
+              {lastError ? (
+                <Text as="span" style={{ color: color.Critical.Main, display: 'block' }} size="T200">
+                  {lastError}
                </Text>
-              </>
-            ) : (
-              <Text as="span" style={{ color: color.Warning?.Main ?? color.Critical.Main }} size="T200">
-                Not registered. Tap &quot;Reset&quot; to choose a distributor app.
-              </Text>
-            )
+              ) : null}
+            </>
          }
          after={loading ? <Spinner variant="Secondary" /> : undefined}
        />
        <SettingTile
          title="Change Distributor"
-          description="Re-open the UnifiedPush distributor selection dialog."
+          description="Shows a list of installed UnifiedPush apps (ntfy, etc.) and registers the one you pick."
          after={
            <Button
              size="300"
--- a/src/app/hooks/useRoomNavigate.ts
+++ b/src/app/hooks/useRoomNavigate.ts
@@ -56,6 +56,19 @@ export const useRoomNavigate = () => {
      }

      const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
+
+      // Prefer Direct for m.direct rooms unless we are already browsing a parent space
+      // of this room (keep space chrome). Opening via space while roomToParents is still
+      // catching up used to hit JoinBeforeNavigate even though the DM was listed.
+      if (mDirects.has(roomId)) {
+        const stayInSelectedSpace =
+          Boolean(spaceSelectedId) && orphanParents.includes(spaceSelectedId!);
+        if (!stayInSelectedSpace) {
+          navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts);
+          return;
+        }
+      }
+
      if (orphanParents.length > 0) {
        let parentSpace: string;
        if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) {
@@ -73,11 +86,6 @@ export const useRoomNavigate = () => {
        return;
      }

-      if (mDirects.has(roomId)) {
-        navigate(getDirectRoomPath(roomIdOrAlias, eventId), opts);
-        return;
-      }
-
      navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
    },
    [
--- a/src/app/hooks/useUserBanner.ts
+++ b/src/app/hooks/useUserBanner.ts
@@ -12,6 +12,8 @@ import {
  getMimeType,
  getExtension,
  ImageMetadata,
+  convertImageDataToPng,
+  uint8ArrayToBlob,
 } from '../utils/imageMetadata';

 /**
@@ -137,27 +139,39 @@ export function useUserBanner(): [
      throw new Error('Failed to fetch current avatar');
    }

-    // Detect image format
-    const format = detectImageFormat(avatarData);
-    
+    // Detect image format — banner lives in PNG tEXt, so convert other formats first
+    let workingData: ArrayBuffer | Uint8Array = avatarData;
+    let format = detectImageFormat(workingData);
+
    if (format === 'unknown') {
      throw new Error('Unsupported avatar image format');
    }

+    if (format !== 'png') {
+      console.log('[updateBanner] Converting', format, 'avatar to PNG for banner metadata');
+      const pngData = await convertImageDataToPng(workingData);
+      if (!pngData) {
+        throw new Error('Failed to convert avatar to PNG for banner metadata');
+      }
+      workingData = pngData;
+      format = 'png';
+    }
+
    // Get existing metadata to preserve
-    const existingMetadata = extractMetadataFromImage(avatarData);
+    const existingMetadata = extractMetadataFromImage(workingData);
    console.log('[updateBanner] Existing metadata:', existingMetadata);
-    
-    // Modify image metadata with new banner, preserving color
+
+    // Modify image metadata with new banner, preserving color.
+    // Empty string clears banner (PNG embed drops falsy fields after stripping old chunks).
    const newMetadata: ImageMetadata = {
      color: existingMetadata.color,
-      banner: newBanner,
+      banner: newBanner ?? '',
      avatarBorderColor: existingMetadata.avatarBorderColor,
      gradient: existingMetadata.gradient,
    };
    console.log('[updateBanner] New metadata to embed:', newMetadata);
-    
-    const newAvatarData = embedMetadataInImage(avatarData, newMetadata);
+
+    const newAvatarData = embedMetadataInImage(workingData, newMetadata);

    if (!newAvatarData) {
      throw new Error('Failed to embed banner in avatar metadata');
@@ -166,8 +180,8 @@ export function useUserBanner(): [
    // Verify the banner was embedded correctly before uploading
    const verifyMetadata = extractMetadataFromImage(newAvatarData);
    console.log('[updateBanner] Verification - extracted metadata from new avatar:', verifyMetadata);
-    
-    if (newBanner && verifyMetadata.banner !== newBanner) {
+
+    if ((newBanner || undefined) !== verifyMetadata.banner) {
      console.error('[updateBanner] Banner verification FAILED!', 'Expected:', newBanner, 'Got:', verifyMetadata.banner);
      throw new Error('Banner verification failed');
    }
@@ -176,8 +190,8 @@ export function useUserBanner(): [
    // Upload modified avatar with correct MIME type
    const mimeType = getMimeType(format);
    const extension = getExtension(format);
-    const blob = new Blob([newAvatarData], { type: mimeType });
-    
+    const blob = uint8ArrayToBlob(newAvatarData, mimeType);
+
    const uploadResponse = await mx.uploadContent(blob, {
      name: `avatar.${extension}`,
      type: mimeType,
--- a/src/app/hooks/useUserColor.ts
+++ b/src/app/hooks/useUserColor.ts
@@ -12,6 +12,7 @@ import {
  detectImageFormat,
  getMimeType,
  getExtension,
+  uint8ArrayToBlob,
 } from '../utils/imageMetadata';

 /**
@@ -176,7 +177,7 @@ export function useUserColor(): [
      // Upload modified avatar with correct MIME type
      const mimeType = getMimeType(format);
      const extension = getExtension(format);
-      const blob = new Blob([newAvatarData], { type: mimeType });
+      const blob = uint8ArrayToBlob(newAvatarData, mimeType);
      const uploadResponse = await mx.uploadContent(blob, {
        name: `avatar.${extension}`,
        type: mimeType,
--- a/src/app/hooks/useUserProfileStyle.ts
+++ b/src/app/hooks/useUserProfileStyle.ts
@@ -11,6 +11,8 @@ import { mxcUrlToHttp } from '../utils/matrix';import { getCurrentAccessToken }
  getExtension,
  ImageMetadata,
  ProfileGradient,
+  convertImageDataToPng,
+  uint8ArrayToBlob,
 } from '../utils/imageMetadata';

 /**
@@ -142,14 +144,24 @@ export function useUserProfileStyle(): [
        throw new Error('Failed to fetch current avatar');
      }

-      // Detect image format
-      const format = detectImageFormat(avatarData);
+      // Border/gradient live in PNG tEXt — convert other formats first
+      let workingData: ArrayBuffer | Uint8Array = avatarData;
+      let format = detectImageFormat(workingData);
      if (format === 'unknown') {
        throw new Error('Unsupported avatar image format');
      }

+      if (format !== 'png') {
+        const pngData = await convertImageDataToPng(workingData);
+        if (!pngData) {
+          throw new Error('Failed to convert avatar to PNG for style metadata');
+        }
+        workingData = pngData;
+        format = 'png';
+      }
+
      // Get existing metadata to preserve
-      const existingMetadata = extractMetadataFromImage(avatarData);
+      const existingMetadata = extractMetadataFromImage(workingData);

      // Merge with new style
      const newMetadata: ImageMetadata = {
@@ -159,7 +171,7 @@ export function useUserProfileStyle(): [
      };

      // Embed updated metadata
-      const newAvatarData = embedMetadataInImage(avatarData, newMetadata);
+      const newAvatarData = embedMetadataInImage(workingData, newMetadata);
      if (!newAvatarData) {
        throw new Error('Failed to embed style in avatar metadata');
      }
@@ -167,7 +179,7 @@ export function useUserProfileStyle(): [
      // Upload modified avatar with correct MIME type
      const mimeType = getMimeType(format);
      const extension = getExtension(format);
-      const blob = new Blob([newAvatarData], { type: mimeType });
+      const blob = uint8ArrayToBlob(newAvatarData, mimeType);

      const uploadResponse = await mx.uploadContent(blob, {
        name: `avatar.${extension}`,
--- a/src/app/pages/client/direct/RoomProvider.tsx
+++ b/src/app/pages/client/direct/RoomProvider.tsx
@@ -1,15 +1,19 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
+import { useAtomValue } from 'jotai';
 import { decodeRouteParam } from '../../pathUtils';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useDirectRooms } from './useDirectRooms';
+import { mDirectAtom } from '../../../state/mDirectList';
+import { Membership } from '../../../../types/matrix/room';

 export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
  const mx = useMatrixClient();
  const rooms = useDirectRooms();
+  const mDirects = useAtomValue(mDirectAtom);

  const { roomIdOrAlias: rawRoomIdOrAlias, eventId: rawEventId } = useParams();
  const roomIdOrAlias = decodeRouteParam(rawRoomIdOrAlias);
@@ -17,7 +21,13 @@ export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
  const roomId = useSelectedRoom();
  const room = mx.getRoom(roomId);

-  if (!room || !rooms.includes(room.roomId)) {
+  // useDirectRooms can lag m.direct / allRooms during catch-up; allow joined m.direct rooms.
+  const isJoinedDirect =
+    Boolean(room) &&
+    room!.getMyMembership() === Membership.Join &&
+    (rooms.includes(room!.roomId) || mDirects.has(room!.roomId));
+
+  if (!room || !isJoinedDirect) {
    return (
      <JoinBeforeNavigate
        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
--- a/src/app/pages/client/space/RoomProvider.tsx
+++ b/src/app/pages/client/space/RoomProvider.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
 import { decodeRouteParam } from '../../pathUtils';
@@ -30,7 +30,31 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
  const roomId = useSelectedRoom();
  const room = mx.getRoom(roomId);

-  if (!room || !allRooms.includes(room.roomId)) {
+  const isJoined = Boolean(room && allRooms.includes(room.roomId));
+  const isSpaceChild = Boolean(room && getSpaceChildren(space).includes(room.roomId));
+  const hasParentMapping = Boolean(
+    room && getAllParents(roomToParents, room.roomId).has(space.roomId)
+  );
+
+  // roomToParents can lag behind live space state during catch-up sync.
+  // If the room is clearly a child of this space, backfill the map and open it.
+  useEffect(() => {
+    if (!room || !isJoined || hasParentMapping || !isSpaceChild) return;
+    setRoomToParents({
+      type: 'PUT',
+      parent: space.roomId,
+      children: [room.roomId],
+    });
+  }, [
+    room,
+    isJoined,
+    hasParentMapping,
+    isSpaceChild,
+    space.roomId,
+    setRoomToParents,
+  ]);
+
+  if (!room || !isJoined) {
    // room is not joined
    return (
      <JoinBeforeNavigate
@@ -50,16 +74,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
    );
  }

-  if (!getAllParents(roomToParents, room.roomId).has(space.roomId)) {
-    if (getSpaceChildren(space).includes(room.roomId)) {
-      // fill missing roomToParent mapping
-      setRoomToParents({
-        type: 'PUT',
-        parent: space.roomId,
-        children: [room.roomId],
-      });
-    }
-
+  if (!hasParentMapping && !isSpaceChild) {
    return (
      <JoinBeforeNavigate
        roomIdOrAlias={roomIdOrAlias ?? rawRoomIdOrAlias!}
--- a/src/app/state/room/roomToParents.ts
+++ b/src/app/state/room/roomToParents.ts
@@ -103,6 +103,23 @@ export const useBindRoomToParentsAtom = (
            setRoomToParents({ type: 'DELETE', roomId: childId });
          }
        }
+        return;
+      }
+
+      // Create type can arrive after the room is already in the store. Without this,
+      // spaces are skipped on INITIALIZE (isSpace false) and children stay unmapped
+      // until an unrelated SpaceChild event fires — DMs/channels look listed but
+      // SpaceRouteRoomProvider blocks on missing roomToParents.
+      if (mEvent.getType() === StateEvent.RoomCreate) {
+        const roomId = mEvent.getRoomId();
+        const room = roomId ? mx.getRoom(roomId) : null;
+        if (room && isSpace(room) && room.getMyMembership() !== Membership.Invite) {
+          setRoomToParents({
+            type: 'PUT',
+            parent: room.roomId,
+            children: getSpaceChildren(room),
+          });
+        }
      }
    };

--- a/src/app/utils/backgroundSync.ts
+++ b/src/app/utils/backgroundSync.ts
@@ -15,6 +15,9 @@ type UnifiedPushStatus = {
  registered: boolean;
  distributor: string;
  distributors: string[] | string;
+  lastFailure?: string;
+  /** OEM App Boot / AUTO_START is blocking distributor broadcasts (e.g. TCL). */
+  autoStartBlocked?: boolean;
 };

 type UnifiedPushEndpointEvent = {
@@ -55,6 +58,8 @@ interface MatrixBackgroundSyncPlugin {
  setAppForeground(options: { foreground: boolean }): Promise<void>;
  /** Returns fetch state and current UnifiedPush registration details. */
  getStatus(): Promise<UnifiedPushStatus>;
+  /** Native Matrix gateway discovery for a UnifiedPush endpoint (avoids WebView CORS). */
+  resolveUnifiedPushGateway(options: { endpoint: string }): Promise<{ gatewayUrl: string }>;
  addListener(
    eventName: 'unifiedPushNewEndpoint',
    listenerFunc: (event: UnifiedPushEndpointEvent) => void
@@ -141,6 +146,17 @@ const normalizeDistributors = (raw: UnifiedPushStatus['distributors']): string[]
 };

 const resolveUnifiedPushGateway = async (endpoint: string): Promise<string> => {
+  // Prefer native HTTP — ntfy/Matrix gateway responses omit CORS headers, so
+  // WebView fetch fails with TypeError: Failed to fetch and wrongly falls back.
+  try {
+    const { registerPlugin } = await loadCapacitorCore();
+    const MatrixBackgroundSync = registerPlugin<MatrixBackgroundSyncPlugin>('MatrixBackgroundSync');
+    const result = await MatrixBackgroundSync.resolveUnifiedPushGateway({ endpoint });
+    if (result?.gatewayUrl) return result.gatewayUrl;
+  } catch (err) {
+    console.warn('[BackgroundSync] Native UnifiedPush gateway discovery failed:', err);
+  }
+
  try {
    const discoveryUrl = new URL(endpoint);
    discoveryUrl.pathname = '/_matrix/push/v1/notify';
@@ -529,7 +545,23 @@ export const requestResetPushRegistration = async (): Promise<{ success: boolean
    const MatrixBackgroundSync = registerPlugin<MatrixBackgroundSyncPlugin>('MatrixBackgroundSync');
    const result = await MatrixBackgroundSync.requestDistributorSetup();
    console.log('[BackgroundSync] requestDistributorSetup completed:', result);
-    return result ?? { success: false };
+    if (!result?.success) return { success: false };
+
+    // Endpoint arrives asynchronously from the distributor after register().
+    for (let i = 0; i < 40; i += 1) {
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      const status = await getBackgroundSyncStatus();
+      if (status?.registered && status.endpoint) {
+        return { success: true };
+      }
+      if (status?.lastFailure) {
+        console.warn('[BackgroundSync] Registration failed while waiting:', status.lastFailure);
+        return { success: false };
+      }
+    }
+
+    console.warn('[BackgroundSync] Distributor selected but no endpoint received in time');
+    return { success: false };
  } catch (err) {
    console.error('[BackgroundSync] requestDistributorSetup failed:', err);
    return { success: false };
--- a/src/app/utils/imageMetadata.ts
+++ b/src/app/utils/imageMetadata.ts
@@ -258,6 +258,59 @@ export function embedColorInImage(imageData: ArrayBuffer | Uint8Array, color: st
  }
 }

+/**
+ * True when metadata includes fields that only PNG tEXt chunks can store.
+ */
+export function needsPngForMetadata(metadata: ImageMetadata): boolean {
+  return Boolean(metadata.banner || metadata.avatarBorderColor || metadata.gradient);
+}
+
+/**
+ * Convert image data to PNG via canvas (needed for banner/border/gradient metadata).
+ */
+export async function convertImageDataToPng(
+  imageData: ArrayBuffer | Uint8Array
+): Promise<Uint8Array | null> {
+  const bytes = imageData instanceof Uint8Array ? imageData : new Uint8Array(imageData);
+  const format = detectImageFormat(bytes);
+  if (format === 'png') return bytes;
+  if (format === 'unknown') return null;
+
+  try {
+    const blob = uint8ArrayToBlob(bytes, getMimeType(format));
+    const bitmap = await createImageBitmap(blob);
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = bitmap.width;
+      canvas.height = bitmap.height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return null;
+      ctx.drawImage(bitmap, 0, 0);
+
+      const pngBlob = await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob(resolve, 'image/png');
+      });
+      if (!pngBlob) return null;
+      return new Uint8Array(await pngBlob.arrayBuffer());
+    } finally {
+      bitmap.close();
+    }
+  } catch (error) {
+    console.error('[convertImageDataToPng] Conversion failed:', error);
+    return null;
+  }
+}
+
+/**
+ * Build a Blob from Uint8Array without relying on BufferSource/BlobPart quirks
+ * across TS DOM lib / Electron versions (avoids SharedArrayBuffer typing issues).
+ */
+export function uint8ArrayToBlob(data: Uint8Array, type: string): Blob {
+  const copy = new ArrayBuffer(data.byteLength);
+  new Uint8Array(copy).set(data);
+  return new Blob([copy], { type });
+}
+
 /**
 * Embed paarrot metadata (color and/or banner) into image data
 * Preserves existing metadata that is not being updated
@@ -270,18 +323,27 @@ export function embedMetadataInImage(
  metadata: ImageMetadata
 ): Uint8Array | null {
  const format = detectImageFormat(imageData);
-  
+  const bytes = imageData instanceof Uint8Array ? imageData : new Uint8Array(imageData);
+
  switch (format) {
    case 'png':
      return embedMetadataInPNG(imageData, metadata);
-    // For other formats, only embed color for now
+    // Non-PNG: color via format-specific chunks; banner/border/gradient need PNG (convert first)
    case 'webp':
    case 'jpeg':
    case 'gif':
+      if (needsPngForMetadata(metadata)) {
+        console.warn(
+          '[embedMetadataInImage] Banner/border/gradient require PNG; convert with convertImageDataToPng first. Got:',
+          format
+        );
+        return null;
+      }
      if (metadata.color) {
        return embedColorInImage(imageData, metadata.color);
      }
-      return null;
+      // Supported format with nothing to embed — succeed as a no-op so avatar upload isn't blocked
+      return bytes;
    default:
      console.warn('[embedMetadataInImage] Unknown image format, cannot embed metadata');
      return null;
--- a/src/index.css
+++ b/src/index.css
@@ -887,6 +887,12 @@ body.stationery-dark-theme {
  width: calc(100% + 25px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
+  /* Gutter is only for post-it overflow paint — do not steal clicks from page-nav */
+  pointer-events: none;
+}
+
+.stationery [data-sidebar-scroll] > * {
+  pointer-events: auto;
 }

 .stationery [data-sidebar] > *,
Author	SHA1	Message	Date
litruv	ea7642f0bb	Surface OEM AUTO_START blocks in UnifiedPush settings status. TCL App Boot can drop NEW_ENDPOINT; show a clear allow-auto-start hint when detected.	2026-07-28 02:39:35 +10:00
litruv	0fb3da20b9	Fail UnifiedPush reset when no endpoint arrives and surface lastFailure.	2026-07-28 01:38:01 +10:00
litruv	e460dbd34e	Improve UnifiedPush reset UX: poll for endpoint and clearer status.	2026-07-28 00:40:02 +10:00
litruv	0de2fd942f	Prefer native UnifiedPush gateway discovery to avoid WebView CORS failures.	2026-07-28 00:18:28 +10:00
litruv	2603ca8e5c	Fix avatar upload failing on JPEG/WebP/GIF without a profile color. embedMetadataInImage returned null for non-PNG when there was nothing to embed, which blocked plain avatar saves after format/library churn.	2026-07-25 20:09:22 +10:00
litruv	99a294791e	Open DMs during sync catch-up instead of blocking on parent maps. Prefer the direct route for m.direct rooms and allow joined space children before roomToParents finishes backfilling.	2026-07-24 16:52:34 +10:00