malice

public

Star0

Fork 0

Watch0

105 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `d8772d4eb408`

tarball

atagen <boss@atagen.co>2026-10-26 04:43 UTC

26 files changed+680-474

web: make malice an installable PWA with an update prompt

The hosted build now gets a service worker too, built from the same sw.ts with the media bridge compiled out so it never intercepts /api. skipWaiting on install could swap code under a running tab, so a waiting worker now raises an update banner and applies on click or on the next cold start. The manifest is served no-store like index.html so installs never pin a stale one.

Modified file: crates/malice-static/src/lib.rs+1−1

@@ -102,7 +102,7 @@ async fn missing_frontend() -> Response {

102102 }

103103

104104 fn is_no_cache_path(path: &str) -> bool {

105- matches!(path, "/" | "/index.html" | "/sw.js")

105+ matches!(path, "/" | "/index.html" | "/sw.js" | "/manifest.webmanifest")

106106 }

107107

108108 fn is_immutable_path(path: &str) -> bool {

Modified file: crates/malice-static/tests/static_only.rs+16 additions@@ -77,6 +77,7 @@ async fn static_only_serves_the_bundle_and_exits_when_idle() {
         .expect("write index.html");
     std::fs::write(web_dir.path().join("sw.js"), "// service worker").expect("write sw.js");
     std::fs::write(web_dir.path().join("style.css"), "body {}").expect("write style.css");
+    std::fs::write(web_dir.path().join("manifest.webmanifest"), "{}").expect("write manifest");
     std::fs::create_dir(web_dir.path().join("assets")).expect("create assets");
     std::fs::write(web_dir.path().join("assets/app-abc.wasm"), "wasm").expect("write wasm");
     std::fs::write(web_dir.path().join("assets/app-abc.wasm.br"), "brotli").expect("write br");
@@ -102,6 +103,21 @@ async fn static_only_serves_the_bundle_and_exits_when_idle() {
     assert!(sw.headers().get(header::LAST_MODIFIED).is_none());
     assert!(sw.headers().get(header::ETAG).is_none());
 
+    let manifest = client
+        .get(format!("{base}/manifest.webmanifest"))
+        .send()
+        .await
+        .unwrap();
+    assert_eq!(manifest.status(), StatusCode::OK);
+    assert_eq!(
+        manifest.headers().get(header::CONTENT_TYPE).unwrap(),
+        "application/manifest+json"
+    );
+    assert_eq!(
+        manifest.headers().get(header::CACHE_CONTROL).unwrap(),
+        "no-store"
+    );
+
     for path in ["/", "/sw.js"] {
         let conditional = client
             .get(format!("{base}{path}"))

Added file: web/icons/mark-maskable.svg+5

@@ -0,0 +1,5 @@

1+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

2+ <rect width="512" height="512" fill="#5865f2"/>

3+ <path d="M256 119 393 256 256 393 119 256Z" fill="none" stroke="#f4f5fb" stroke-width="22" stroke-linejoin="miter"/>

4+ <path d="M256 198 314 256 256 314 198 256Z" fill="#f4f5fb"/>

5+</svg>

Added file: web/icons/mark.svg+5

@@ -0,0 +1,5 @@

1+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

2+ <rect width="512" height="512" fill="#5865f2"/>

3+ <path d="M256 66 446 256 256 446 66 256Z" fill="none" stroke="#f4f5fb" stroke-width="30" stroke-linejoin="miter"/>

4+ <path d="M256 176 336 256 256 336 176 256Z" fill="#f4f5fb"/>

5+</svg>

Modified file: web/index.html+10 additions−1 deletions@@ -2,7 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content" />
+    <meta name="theme-color" content="#0c0d11" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Malice" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <title>Malice</title>
   </head>
   <body>

Binary file: web/public/apple-touch-icon.pngbinary

Binary file not shown.

Binary file: web/public/favicon-32.pngbinary

Binary file not shown.

Added file: web/public/favicon.svg+5

@@ -0,0 +1,5 @@

1+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

2+ <rect width="512" height="512" fill="#5865f2"/>

3+ <path d="M256 66 446 256 256 446 66 256Z" fill="none" stroke="#f4f5fb" stroke-width="30" stroke-linejoin="miter"/>

4+ <path d="M256 176 336 256 256 336 176 256Z" fill="#f4f5fb"/>

5+</svg>

Binary file: web/public/icon-192.pngbinary

Binary file not shown.

Binary file: web/public/icon-512.pngbinary

Binary file not shown.

Binary file: web/public/icon-maskable-512.pngbinary

Binary file not shown.

Added file: web/public/manifest.webmanifest+21 additions@@ -0,0 +1,21 @@
+{
+  "name": "Malice",
+  "short_name": "Malice",
+  "id": "/",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#111218",
+  "theme_color": "#0c0d11",
+  "launch_handler": { "client_mode": ["navigate-existing", "auto"] },
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
+    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ],
+  "shortcuts": [
+    { "name": "Mentions", "url": "/?view=mentions", "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }] },
+    { "name": "Search", "url": "/?view=search", "icons": [{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }] }
+  ]
+}

Added file: web/scripts/icons.nu+11 additions@@ -0,0 +1,11 @@
+# Regenerates web/public icons from web/icons/*.svg. Run from web/ with `nix shell nixpkgs#resvg -c nu scripts/icons.nu`.
+def render [src: string, out: string, size: int] {
+  ^resvg -w $size -h $size $"icons/($src)" $"public/($out)"
+}
+
+cp icons/mark.svg public/favicon.svg
+render mark.svg icon-192.png 192
+render mark.svg icon-512.png 512
+render mark-maskable.svg icon-maskable-512.png 512
+render mark.svg apple-touch-icon.png 180
+render mark.svg favicon-32.png 32

Modified file: web/src/App.svelte+28 additions−3 deletions@@ -28,6 +28,9 @@
   import ImageLightbox from './lib/ImageLightbox.svelte';
   import { lightbox } from './lib/lightbox';
   import SecurityPanel from './lib/SecurityPanel.svelte';
+  import StorageBanner from './lib/StorageBanner.svelte';
+  import { canDismissRecovery, recoveryPrompt } from './lib/protection-model';
+  import { dismissRecoveryPrompt, installContext, loadDismissals, protectStorage, recoveryDismissed } from './lib/protection';
   import {
     closeRoom,
     createRoom,
@@ -54,6 +57,7 @@
     editMessage
   } from './lib/api';
   import EmojiText from './lib/EmojiText.svelte';
+  import UpdateBanner from './lib/UpdateBanner.svelte';
   import { customEmotes, resolveEmotes } from './lib/emotes';
   import { isKnownCommand, parseCommand, splitTarget, unescapeCommand } from './lib/commands';
   import type { ParsedCommand } from './lib/commands';
@@ -92,6 +96,7 @@
   import type { Mention } from './lib/mentions';
   import { loadQuickReactions, quickReactions, saveQuickReactions } from './lib/quick-reactions';
   import { loadKeywords } from './lib/keywords';
+  import { startNotifications } from './lib/notifications';
   import {
     linkPreviews,
     loadUrlPreviewSettings,
@@ -227,7 +232,11 @@
   $: groupRooms = pinnedFirst(visibleRooms.filter((r) => !r.direct && !r.space && r.membership !== 'Invited'));
   $: spaceList = pinnedFirst(visibleRooms.filter((r) => r.space && r.membership !== 'Invited'));
   $: channelRooms = baseRooms.filter((r) => !r.space && r.membership !== 'Invited');
-  $: recoveryBanner = $encryption && ($encryption.recovery === 'Disabled' || $encryption.recovery === 'Incomplete') ? $encryption : null;
+  $: if ($sessionUser) {
+    loadDismissals($sessionUser);
+    void protectStorage($sessionUser);
+  }
+  $: recoveryBanner = recoveryPrompt($encryption, installContext(), $recoveryDismissed);
   $: verificationBanner = $verification && $verification.kind !== 'Done' ? $verification : null;
   $: items = $selectedRoomId ? ($timelines[$selectedRoomId] ?? []) : [];
   $: currentStaged = $selectedRoomId ? (staged[$selectedRoomId] ?? []) : [];
@@ -306,8 +315,14 @@
     window.addEventListener('keydown', hidePointer, true);
     window.addEventListener('pointermove', movePointer);
     window.addEventListener('pointerdown', showPointer);
+    const stopNotifications = startNotifications((roomId) => {
+      selectedSpaceId = null;
+      spaceChildIds = null;
+      void selectRoom(roomId);
+    });
     void boot();
     return () => {
+      stopNotifications();
       window.removeEventListener('popstate', onPopState);
       window.removeEventListener('focus', onAttention);
       document.removeEventListener('visibilitychange', onAttention);
@@ -2383,6 +2398,7 @@
             {/each}
           </div>
         {/if}
+        <UpdateBanner />
       {#key mentionsOpen ? 'mentions' : searchOpen ? 'search' : $selectedRoomId ?? 'home'}
       <div class="chat-view">
       {#if mentionsOpen && $sessionUser}
@@ -2448,10 +2464,19 @@
         {/if}
         {#if recoveryBanner}
           <div class="sec-banner warn" role="status">
-            <span>Message history is locked</span>
-            <button type="button" on:click={() => (dialog = 'security')}>Recover</button>
+            {#if recoveryBanner === 'recover'}
+              <span>Message history is locked</span>
+              <button type="button" on:click={() => (dialog = 'security')}>Recover</button>
+            {:else}
+              <span>Message keys are not backed up</span>
+              <button type="button" on:click={() => (dialog = 'security')}>Set up</button>
+              {#if canDismissRecovery(installContext())}
+                <button type="button" aria-label="Dismiss" on:click={() => $sessionUser && dismissRecoveryPrompt($sessionUser)}>✕</button>
+              {/if}
+            {/if}
           </div>
         {/if}
+        <StorageBanner on:open={() => (dialog = 'security')} />
         {#if verificationBanner}
           <div class="sec-banner" role="status">
             {#if verificationBanner.kind === 'Incoming'}

Modified file: web/src/app.css+15 additions@@ -323,6 +323,7 @@ input, textarea { font: inherit; }
   padding: 3px 10px;
   font-size: 12.5px;
 }
+.sec-banner button + button { margin-left: 0; }
 .head-room { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .head-room-text { min-width: 0; flex: 1; }
 .conn-banner.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
@@ -1152,3 +1153,17 @@ input, textarea { font: inherit; }
 .pinned-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
 .pinned-strip .icon-btn { width: 26px; height: 26px; }
 .history-gap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; padding: 10px; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--muted); font-size: 12px; }
+
+/* ——— Safe areas ——— */
+.app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
+.chat-head { height: calc(50px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
+.composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
+.account { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
+@media (max-width: 1100px) {
+  .app > .sidebar, .app > .members, .app > .thread { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
+  .account { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+}
+@media (max-width: 640px) {
+  .chat-head { padding-top: calc(8px + env(safe-area-inset-top)); }
+  .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+}

Added file: web/src/lib/UpdateBanner.svelte+10 additions@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { applyUpdate, updateReady } from './sw-register';
+</script>
+
+{#if $updateReady}
+  <div class="sec-banner" role="status">
+    <span>Update ready</span>
+    <button type="button" on:click={applyUpdate}>Reload</button>
+  </div>
+{/if}

Modified file: web/src/lib/appearance.ts+3 additions@@ -78,6 +78,7 @@ export const accent = persisted<string | null>('malice.accent', null, isAccent);
 if (typeof document !== 'undefined') {
   const root = document.documentElement;
   const prefersLight = window.matchMedia('(prefers-color-scheme: light)');
+  const themeColor = document.querySelector('meta[name="theme-color"]');
   const apply = () => {
     const current = get(theme);
     const custom = get(themePreview) ?? get(customThemes).find((t) => t.id === current);
@@ -96,6 +97,8 @@ if (typeof document !== 'undefined') {
     }
     const override = get(accent);
     if (override && !get(themePreview)) root.style.setProperty('--accent', override);
+    const bar = getComputedStyle(root).getPropertyValue('--rail-bg').trim();
+    if (bar) themeColor?.setAttribute('content', bar);
   };
   theme.subscribe(apply);
   customThemes.subscribe(apply);

Added file: web/src/lib/sw-register.ts+61 additions@@ -0,0 +1,61 @@
+import { writable } from 'svelte/store';
+
+const SW_RELOAD_GUARD = 'malice-sw-reload';
+
+export const updateReady = writable(false);
+
+let waiting: ServiceWorker | null = null;
+
+export function applyUpdate(): void {
+  waiting?.postMessage({ type: 'SKIP_WAITING' });
+}
+
+function watchForUpdates(registration: ServiceWorkerRegistration): void {
+  const check = () => {
+    if (registration.waiting && navigator.serviceWorker.controller) {
+      waiting = registration.waiting;
+      updateReady.set(true);
+    }
+  };
+  check();
+  registration.addEventListener('updatefound', () => {
+    registration.installing?.addEventListener('statechange', check);
+  });
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') void registration.update().catch(() => undefined);
+  });
+}
+
+/**
+ * The device build needs the page controlled to reach its media bridge, so a shift-reload that
+ * leaves it uncontrolled is recovered with a single guarded reload.
+ */
+function recoverUncontrolled(): void {
+  if (navigator.serviceWorker.controller) {
+    sessionStorage.removeItem(SW_RELOAD_GUARD);
+    return;
+  }
+  if (sessionStorage.getItem(SW_RELOAD_GUARD)) return;
+  sessionStorage.setItem(SW_RELOAD_GUARD, '1');
+  window.location.reload();
+}
+
+export function registerServiceWorker(): void {
+  if (!('serviceWorker' in navigator) || !import.meta.env.PROD) return;
+  let controlled = navigator.serviceWorker.controller !== null;
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (!controlled) {
+      controlled = true;
+      return;
+    }
+    window.location.reload();
+  });
+  void navigator.serviceWorker
+    .register('/sw.js', { type: 'module', updateViaCache: 'none' })
+    .then((registration) => {
+      watchForUpdates(registration);
+      if (!__MALICE_DEVICE__) return;
+      return navigator.serviceWorker.ready.then(recoverUncontrolled);
+    })
+    .catch(() => undefined);
+}

Modified file: web/src/lib/transport-worker.ts−21 deletions@@ -8,26 +8,6 @@ function toApiError(error: { kind: string; message: string }): ApiError {
   return new ApiError(statusForKind(error.kind), error.message);
 }
 
-const SW_RELOAD_GUARD = 'malice-sw-reload';
-
-/** Registers the service worker and recovers from a shift-reload leaving the page uncontrolled. */
-function registerServiceWorker(): void {
-  if (!('serviceWorker' in navigator)) return;
-  void navigator.serviceWorker
-    .register('/sw.js', { type: 'module', updateViaCache: 'none' })
-    .then(() => navigator.serviceWorker.ready)
-    .then(() => {
-      if (navigator.serviceWorker.controller) {
-        sessionStorage.removeItem(SW_RELOAD_GUARD);
-        return;
-      }
-      if (sessionStorage.getItem(SW_RELOAD_GUARD)) return;
-      sessionStorage.setItem(SW_RELOAD_GUARD, '1');
-      window.location.reload();
-    })
-    .catch(() => undefined);
-}
-
 type Pending = { resolve: (value: unknown) => void; reject: (error: unknown) => void };
 
 /**
@@ -46,7 +26,6 @@ class WorkerClient {
   private subscribed = new Set<string>();
 
   constructor() {
-    registerServiceWorker();
     window.addEventListener('pagehide', () => {
       if (this.port) this.post({ kind: 'bye' });
     });

Modified file: web/src/main.ts+2 additions@@ -1,9 +1,11 @@
 import './app.css';
 import { mount } from 'svelte';
 import App from './App.svelte';
+import { registerServiceWorker } from './lib/sw-register';
 
 const target = document.getElementById('app');
 if (!target) throw new Error('#app element missing');
+registerServiceWorker();
 const app = mount(App, { target });
 
 export default app;

Added file: web/src/sw-media.ts+443 additions@@ -0,0 +1,443 @@
+import { statusForKind } from './lib/wire-status';
+import { decodeAttachmentIv, importAttachmentKey, RangeDecryptor } from './lib/media-decrypt';
+import { attachmentContentType } from './lib/media-sniff';
+import { createAvatarLoader } from './lib/avatar-cache';
+
+export const AVATAR_CACHE = 'malice-avatars-v3';
+
+interface MediaReply {
+  bytes?: Uint8Array<ArrayBuffer>;
+  content_type?: string | null;
+  error?: { kind: string; message: string };
+}
+
+interface AttachmentEncryptionWire {
+  key: string;
+  iv: string;
+  sha256: string;
+}
+
+interface MediaFileWire {
+  url: string;
+  mimetype: string | null;
+  declared_size: number | null;
+  encryption: AttachmentEncryptionWire | null;
+}
+
+type MediaLocationWire = { File: MediaFileWire } | { ServerThumbnail: { url: string; fallback: MediaFileWire } } | 'Local';
+
+interface LocateReply {
+  location?: MediaLocationWire;
+  token?: string | null;
+  error?: { kind: string; message: string };
+}
+
+const MEDIA_TIMEOUT_MS = 30000;
+const pendingMedia = new Map<string, (reply: MediaReply & LocateReply) => void>();
+let nextMediaRequestId = 0;
+let mediaChannel: BroadcastChannel | undefined;
+
+function channel(): BroadcastChannel {
+  if (!mediaChannel) {
+    mediaChannel = new BroadcastChannel('malice-media');
+    mediaChannel.onmessage = (ev: MessageEvent) => {
+      const msg = ev.data as MediaReply & LocateReply & { id: string };
+      const resolve = pendingMedia.get(msg.id);
+      if (!resolve) return;
+      pendingMedia.delete(msg.id);
+      resolve(msg);
+    };
+  }
+  return mediaChannel;
+}
+
+function requestMedia(kind: 'avatar' | 'media', fields: Record<string, string>): Promise<MediaReply | null> {
+  const id = `${Date.now()}-${nextMediaRequestId++}`;
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      pendingMedia.delete(id);
+      resolve(null);
+    }, MEDIA_TIMEOUT_MS);
+    pendingMedia.set(id, (reply) => {
+      clearTimeout(timer);
+      resolve(reply);
+    });
+    channel().postMessage({ id, kind, ...fields });
+  });
+}
+
+interface LocateEntry {
+  location: MediaLocationWire;
+  token: string | null;
+  expiresAt: number;
+}
+
+const LOCATE_TTL_MS = 5 * 60 * 1000;
+const locateCache = new Map<string, LocateEntry>();
+const sniffCache = new Map<string, { contentType: string | null; expiresAt: number }>();
+
+function requestLocate(mediaId: string, size: string): Promise<{ location: MediaLocationWire; token: string | null } | null> {
+  const id = `${Date.now()}-${nextMediaRequestId++}`;
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      pendingMedia.delete(id);
+      resolve(null);
+    }, MEDIA_TIMEOUT_MS);
+    pendingMedia.set(id, (reply) => {
+      clearTimeout(timer);
+      resolve(reply.error || !reply.location ? null : { location: reply.location, token: reply.token ?? null });
+    });
+    channel().postMessage({ id, kind: 'locate', media_id: mediaId, size });
+  });
+}
+
+/** In-memory only: the access token never touches Cache Storage or IndexedDB, and expires with the entry. */
+async function locate(mediaId: string, size: string, force: boolean): Promise<LocateEntry | null> {
+  if (!force) {
+    const cached = locateCache.get(mediaId);
+    if (cached && cached.expiresAt > Date.now()) return cached;
+  }
+  const reply = await requestLocate(mediaId, size);
+  if (!reply) return null;
+  const entry: LocateEntry = { ...reply, expiresAt: Date.now() + LOCATE_TTL_MS };
+  locateCache.set(mediaId, entry);
+  return entry;
+}
+
+interface RangeSlice {
+  body: Uint8Array<ArrayBuffer>;
+  status: number;
+  contentRange?: string;
+}
+
+/** The engine hands back the whole attachment at once, so seeking in <video>/<audio> needs this SW to slice it. */
+function sliceForRange(bytes: Uint8Array<ArrayBuffer>, rangeHeader: string | null): RangeSlice {
+  const match = rangeHeader ? /^bytes=(\d*)-(\d*)$/.exec(rangeHeader) : null;
+  if (!match) return { body: bytes, status: 200 };
+  const total = bytes.byteLength;
+  let start = match[1] ? parseInt(match[1], 10) : undefined;
+  let end = match[2] ? parseInt(match[2], 10) : undefined;
+  if (start === undefined && end !== undefined) {
+    start = Math.max(total - end, 0);
+    end = total - 1;
+  } else if (end === undefined) {
+    end = total - 1;
+  }
+  if (start === undefined || start > end || start >= total) return { body: bytes, status: 200 };
+  end = Math.min(end, total - 1);
+  return { body: bytes.subarray(start, end + 1), status: 206, contentRange: `bytes ${start}-${end}/${total}` };
+}
+
+function mediaResponse(reply: MediaReply | null, rangeHeader: string | null, attachment: boolean): Response {
+  if (!reply) return new Response(null, { status: 504 });
+  if (reply.error) return new Response(reply.error.message, { status: statusForKind(reply.error.kind) });
+  const bytes = reply.bytes ?? new Uint8Array();
+  const { body, status, contentRange } = sliceForRange(bytes, rangeHeader);
+  const headers = new Headers({
+    'Content-Type': reply.content_type ?? 'application/octet-stream',
+    'Cache-Control': attachment ? 'private, max-age=3600' : 'private, max-age=31536000, immutable',
+    'X-Content-Type-Options': 'nosniff'
+  });
+  if (attachment) {
+    headers.set('Content-Disposition', reply.content_type ? 'inline' : 'attachment');
+    headers.set('Content-Security-Policy', 'sandbox');
+  }
+  if (contentRange) {
+    headers.set('Content-Range', contentRange);
+    headers.set('Accept-Ranges', 'bytes');
+  }
+  return new Response(body, { status, headers });
+}
+
+interface ByteRange {
+  start: number;
+  end: number;
+}
+
+/** Unlike sliceForRange, the total comes from the server's declared_size, not a buffer already in hand. */
+function parseByteRange(rangeHeader: string | null, total: number): ByteRange | null {
+  const match = rangeHeader ? /^bytes=(\d*)-(\d*)$/.exec(rangeHeader) : null;
+  if (!match) return null;
+  let start = match[1] ? parseInt(match[1], 10) : undefined;
+  let end = match[2] ? parseInt(match[2], 10) : undefined;
+  if (start === undefined && end !== undefined) {
+    start = Math.max(total - end, 0);
+    end = total - 1;
+  } else if (end === undefined) {
+    start = start ?? 0;
+    end = total - 1;
+  }
+  if (start === undefined || start > end || start >= total) return null;
+  return { start, end: Math.min(end, total - 1) };
+}
+
+function attachmentHeaders(contentType: string | null): Headers {
+  return new Headers({
+    'Content-Type': contentType ?? 'application/octet-stream',
+    'Cache-Control': 'private, max-age=3600',
+    'X-Content-Type-Options': 'nosniff',
+    'Content-Disposition': contentType ? 'inline' : 'attachment',
+    'Content-Security-Policy': 'sandbox'
+  });
+}
+
+/**
+ * The Authorization header carries the account's access token, so it's only worth the risk on the
+ * exact authenticated media endpoints, and only when the URL being fetched is the one `locate` named
+ * (never a redirect target, should a future caller pass one through).
+ */
+function shouldAuthorize(fetchUrl: string, locatedUrl: string): boolean {
+  try {
+    const target = new URL(fetchUrl);
+    const located = new URL(locatedUrl);
+    if (target.origin !== located.origin) return false;
+    return target.pathname.startsWith('/_matrix/client/v1/media/') || target.pathname.startsWith('/_matrix/media/');
+  } catch {
+    return false;
+  }
+}
+
+function concatChunks(parts: Uint8Array[]): Uint8Array<ArrayBuffer> {
+  const total = parts.reduce((sum, part) => sum + part.byteLength, 0);
+  const out = new Uint8Array(total);
+  let offset = 0;
+  for (const part of parts) {
+    out.set(part, offset);
+    offset += part.byteLength;
+  }
+  return out;
+}
+
+async function readUpTo(
+  reader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>,
+  limit: number
+): Promise<Uint8Array<ArrayBuffer>> {
+  const chunks: Uint8Array[] = [];
+  let total = 0;
+  while (total < limit) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    total += value.byteLength;
+  }
+  reader.cancel().catch(() => undefined);
+  return concatChunks(chunks).subarray(0, Math.min(limit, total));
+}
+
+/**
+ * Ciphertext in, plaintext out: skips the bytes the upstream sent but the caller didn't ask for
+ * (only nonzero when the upstream ignored the Range request), decrypts, drops the sub-16-byte
+ * alignment prefix from the very first output, and stops once `limit` bytes have been produced.
+ */
+async function* decryptedChunks(
+  reader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>,
+  decryptor: RangeDecryptor | null,
+  skipBytes: number,
+  dropPrefix: number,
+  limit: number
+): AsyncGenerator<Uint8Array> {
+  let toSkip = skipBytes;
+  let toDrop = dropPrefix;
+  let remaining = limit;
+  while (remaining > 0) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    let chunk = value;
+    if (toSkip > 0) {
+      if (chunk.byteLength <= toSkip) {
+        toSkip -= chunk.byteLength;
+        continue;
+      }
+      chunk = chunk.subarray(toSkip);
+      toSkip = 0;
+    }
+    const plain = decryptor ? await decryptor.push(chunk) : chunk;
+    if (plain.byteLength === 0) continue;
+    const emitted = emit(plain);
+    if (emitted) yield emitted;
+  }
+  if (remaining > 0 && decryptor) {
+    const emitted = emit(await decryptor.finish());
+    if (emitted) yield emitted;
+  }
+  reader.cancel().catch(() => undefined);
+
+  function emit(chunk: Uint8Array): Uint8Array | null {
+    let out = chunk;
+    if (toDrop > 0) {
+      if (out.byteLength <= toDrop) {
+        toDrop -= out.byteLength;
+        return null;
+      }
+      out = out.subarray(toDrop);
+      toDrop = 0;
+    }
+    if (out.byteLength > remaining) out = out.subarray(0, remaining);
+    remaining -= out.byteLength;
+    return out.byteLength > 0 ? out : null;
+  }
+}
+
+async function headSniff(mediaId: string, file: MediaFileWire, token: string | null, retried: boolean): Promise<string | null> {
+  const cached = sniffCache.get(mediaId);
+  if (cached && cached.expiresAt > Date.now()) return cached.contentType;
+  const headers = new Headers({ Range: 'bytes=0-79' });
+  if (shouldAuthorize(file.url, file.url) && token) headers.set('Authorization', `Bearer ${token}`);
+  let upstream: Response;
+  try {
+    upstream = await fetch(file.url, { headers });
+  } catch {
+    return null;
+  }
+  if (upstream.status === 401 && !retried) {
+    const fresh = await locate(mediaId, 'Full', true);
+    if (fresh && typeof fresh.location === 'object' && 'File' in fresh.location) {
+      return headSniff(mediaId, fresh.location.File, fresh.token, true);
+    }
+  }
+  if (!upstream.body || (!upstream.ok && upstream.status !== 206)) return null;
+  const head = await readUpTo(upstream.body.getReader(), 80);
+  let contentType: string | null;
+  if (file.encryption) {
+    const key = await importAttachmentKey(file.encryption.key);
+    const iv = decodeAttachmentIv(file.encryption.iv);
+    const decryptor = new RangeDecryptor(key, iv, 0);
+    contentType = attachmentContentType(concatChunks([await decryptor.push(head), await decryptor.finish()]).subarray(0, 64));
+  } else {
+    contentType = attachmentContentType(head.subarray(0, 64));
+  }
+  sniffCache.set(mediaId, { contentType, expiresAt: Date.now() + LOCATE_TTL_MS });
+  return contentType;
+}
+
+function wholeFileFallback(mediaId: string, rangeHeader: string | null): Promise<Response> {
+  return requestMedia('media', { media_id: mediaId, size: 'Full' }).then((reply) => mediaResponse(reply, rangeHeader, true));
+}
+
+async function streamFullMedia(mediaId: string, rangeHeader: string | null, entry?: LocateEntry, retried = false): Promise<Response> {
+  const located = entry ?? (await locate(mediaId, 'Full', false));
+  if (!located) return wholeFileFallback(mediaId, rangeHeader);
+  if (typeof located.location !== 'object' || !('File' in located.location)) return wholeFileFallback(mediaId, rangeHeader);
+  const file = located.location.File;
+  const total = file.declared_size;
+  if (total == null) return wholeFileFallback(mediaId, rangeHeader);
+
+  const requested = parseByteRange(rangeHeader, total);
+  const start = requested?.start ?? 0;
+  const end = requested?.end ?? total - 1;
+  const alignedStart = start - (start % 16);
+
+  const headers = new Headers({ Range: `bytes=${alignedStart}-${end}` });
+  if (shouldAuthorize(file.url, file.url) && located.token) headers.set('Authorization', `Bearer ${located.token}`);
+
+  let upstream: Response;
+  try {
+    upstream = await fetch(file.url, { headers });
+  } catch {
+    return new Response('media upstream unreachable', { status: 502 });
+  }
+  if (upstream.status === 401 && !retried) {
+    const fresh = await locate(mediaId, 'Full', true);
+    if (fresh) return streamFullMedia(mediaId, rangeHeader, fresh, true);
+  }
+  if (!upstream.body || (!upstream.ok && upstream.status !== 206)) {
+    return new Response('media upstream error', { status: 502 });
+  }
+
+  const decryptor = file.encryption
+    ? new RangeDecryptor(await importAttachmentKey(file.encryption.key), decodeAttachmentIv(file.encryption.iv), alignedStart / 16)
+    : null;
+  const skipBytes = upstream.status === 206 ? 0 : alignedStart;
+  const dropPrefix = start - alignedStart;
+  const limit = end - start + 1;
+
+  const reader = upstream.body.getReader();
+  const chunks = decryptedChunks(reader, decryptor, skipBytes, dropPrefix, limit);
+
+  const prefetched: Uint8Array[] = [];
+  let prefetchedLen = 0;
+  let chunksDone = false;
+  let contentType: string | null;
+
+  if (alignedStart === 0) {
+    while (prefetchedLen < 64) {
+      const step = await chunks.next();
+      if (step.done) {
+        chunksDone = true;
+        break;
+      }
+      prefetched.push(step.value);
+      prefetchedLen += step.value.byteLength;
+    }
+    contentType = attachmentContentType(concatChunks(prefetched).subarray(0, Math.min(64, prefetchedLen)));
+    sniffCache.set(mediaId, { contentType, expiresAt: Date.now() + LOCATE_TTL_MS });
+  } else {
+    contentType = await headSniff(mediaId, file, located.token, retried);
+  }
+
+  const body = new ReadableStream<Uint8Array>({
+    async pull(controller) {
+      const next = prefetched.shift();
+      if (next) {
+        controller.enqueue(next);
+        return;
+      }
+      if (chunksDone) {
+        controller.close();
+        return;
+      }
+      const step = await chunks.next();
+      if (step.done) controller.close();
+      else controller.enqueue(step.value);
+    },
+    cancel() {
+      reader.cancel().catch(() => undefined);
+    }
+  });
+
+  const responseHeaders = attachmentHeaders(contentType);
+  responseHeaders.set('Accept-Ranges', 'bytes');
+  if (requested) {
+    responseHeaders.set('Content-Range', `bytes ${start}-${end}/${total}`);
+    return new Response(body, { status: 206, headers: responseHeaders });
+  }
+  return new Response(body, { status: 200, headers: responseHeaders });
+}
+
+/** Keyed by the request URL, which names image and size, so cached bytes outlive the access token and survive restarts. */
+let avatarLoader: ReturnType<typeof createAvatarLoader> | undefined;
+
+function cachedAvatar(url: string, query: string): Promise<Response> {
+  avatarLoader ??= createAvatarLoader(
+    async () => caches.open(AVATAR_CACHE),
+    async (q) => mediaResponse(await requestMedia('avatar', Object.fromEntries(new URLSearchParams(q))), null, false)
+  );
+  return avatarLoader(url, query);
+}
+
+export function handleMediaFetch(event: FetchEvent): boolean {
+  const url = new URL(event.request.url);
+  const range = event.request.headers.get('Range');
+
+  if (url.pathname === '/api/media') {
+    const mxc = url.searchParams.get('mxc');
+    if (mxc) {
+      const size = url.searchParams.get('size') ?? '256';
+      event.respondWith(cachedAvatar(event.request.url, new URLSearchParams({ mxc, size }).toString()));
+      return true;
+    }
+  }
+  if (url.pathname === '/api/message-media') {
+    const mediaId = url.searchParams.get('media_id');
+    const size = url.searchParams.get('size');
+    if (mediaId && size === 'Full') {
+      event.respondWith(streamFullMedia(mediaId, range));
+      return true;
+    }
+    if (mediaId && size) {
+      event.respondWith(requestMedia('media', { media_id: mediaId, size }).then((reply) => mediaResponse(reply, range, true)));
+      return true;
+    }
+  }
+  return false;
+}

Modified file: web/src/sw.ts+27 additions−428 deletions@@ -1,14 +1,12 @@
-import { statusForKind } from './lib/wire-status';
-import { decodeAttachmentIv, importAttachmentKey, RangeDecryptor } from './lib/media-decrypt';
-import { attachmentContentType } from './lib/media-sniff';
-import { createAvatarLoader } from './lib/avatar-cache';
+import { AVATAR_CACHE, handleMediaFetch } from './sw-media';
+
+declare const __MALICE_DEVICE__: boolean;
 
 // Prepended by vite.config.ts's precacheManifestPlugin: every emitted chunk,
 // asset, and the wasm, as root-relative URLs.
 const sw = self as unknown as ServiceWorkerGlobalScope & { __MALICE_PRECACHE__: string[] };
 
 const CACHE_NAME = 'malice-shell-v1';
-const AVATAR_CACHE = 'malice-avatars-v3';
 
 sw.addEventListener('install', (event) => {
   event.waitUntil(
@@ -17,7 +15,10 @@ sw.addEventListener('install', (event) => {
       await cache.addAll(['/', '/index.html', ...sw.__MALICE_PRECACHE__]);
     })()
   );
-  void sw.skipWaiting();
+});
+
+sw.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') void sw.skipWaiting();
 });
 
 sw.addEventListener('activate', (event) => {
@@ -36,399 +37,6 @@ sw.addEventListener('activate', (event) => {
   );
 });
 
-interface MediaReply {
-  bytes?: Uint8Array<ArrayBuffer>;
-  content_type?: string | null;
-  error?: { kind: string; message: string };
-}
-
-interface AttachmentEncryptionWire {
-  key: string;
-  iv: string;
-  sha256: string;
-}
-
-interface MediaFileWire {
-  url: string;
-  mimetype: string | null;
-  declared_size: number | null;
-  encryption: AttachmentEncryptionWire | null;
-}
-
-type MediaLocationWire = { File: MediaFileWire } | { ServerThumbnail: { url: string; fallback: MediaFileWire } } | 'Local';
-
-interface LocateReply {
-  location?: MediaLocationWire;
-  token?: string | null;
-  error?: { kind: string; message: string };
-}
-
-const MEDIA_TIMEOUT_MS = 30000;
-const mediaChannel = new BroadcastChannel('malice-media');
-const pendingMedia = new Map<string, (reply: MediaReply & LocateReply) => void>();
-let nextMediaRequestId = 0;
-
-mediaChannel.onmessage = (ev: MessageEvent) => {
-  const msg = ev.data as MediaReply & LocateReply & { id: string };
-  const resolve = pendingMedia.get(msg.id);
-  if (!resolve) return;
-  pendingMedia.delete(msg.id);
-  resolve(msg);
-};
-
-function requestMedia(kind: 'avatar' | 'media', fields: Record<string, string>): Promise<MediaReply | null> {
-  const id = `${Date.now()}-${nextMediaRequestId++}`;
-  return new Promise((resolve) => {
-    const timer = setTimeout(() => {
-      pendingMedia.delete(id);
-      resolve(null);
-    }, MEDIA_TIMEOUT_MS);
-    pendingMedia.set(id, (reply) => {
-      clearTimeout(timer);
-      resolve(reply);
-    });
-    mediaChannel.postMessage({ id, kind, ...fields });
-  });
-}
-
-interface LocateEntry {
-  location: MediaLocationWire;
-  token: string | null;
-  expiresAt: number;
-}
-
-const LOCATE_TTL_MS = 5 * 60 * 1000;
-const locateCache = new Map<string, LocateEntry>();
-const sniffCache = new Map<string, { contentType: string | null; expiresAt: number }>();
-
-function requestLocate(mediaId: string, size: string): Promise<{ location: MediaLocationWire; token: string | null } | null> {
-  const id = `${Date.now()}-${nextMediaRequestId++}`;
-  return new Promise((resolve) => {
-    const timer = setTimeout(() => {
-      pendingMedia.delete(id);
-      resolve(null);
-    }, MEDIA_TIMEOUT_MS);
-    pendingMedia.set(id, (reply) => {
-      clearTimeout(timer);
-      resolve(reply.error || !reply.location ? null : { location: reply.location, token: reply.token ?? null });
-    });
-    mediaChannel.postMessage({ id, kind: 'locate', media_id: mediaId, size });
-  });
-}
-
-/** In-memory only: the access token never touches Cache Storage or IndexedDB, and expires with the entry. */
-async function locate(mediaId: string, size: string, force: boolean): Promise<LocateEntry | null> {
-  if (!force) {
-    const cached = locateCache.get(mediaId);
-    if (cached && cached.expiresAt > Date.now()) return cached;
-  }
-  const reply = await requestLocate(mediaId, size);
-  if (!reply) return null;
-  const entry: LocateEntry = { ...reply, expiresAt: Date.now() + LOCATE_TTL_MS };
-  locateCache.set(mediaId, entry);
-  return entry;
-}
-
-interface RangeSlice {
-  body: Uint8Array<ArrayBuffer>;
-  status: number;
-  contentRange?: string;
-}
-
-/** The engine hands back the whole attachment at once, so seeking in <video>/<audio> needs this SW to slice it. */
-function sliceForRange(bytes: Uint8Array<ArrayBuffer>, rangeHeader: string | null): RangeSlice {
-  const match = rangeHeader ? /^bytes=(\d*)-(\d*)$/.exec(rangeHeader) : null;
-  if (!match) return { body: bytes, status: 200 };
-  const total = bytes.byteLength;
-  let start = match[1] ? parseInt(match[1], 10) : undefined;
-  let end = match[2] ? parseInt(match[2], 10) : undefined;
-  if (start === undefined && end !== undefined) {
-    start = Math.max(total - end, 0);
-    end = total - 1;
-  } else if (end === undefined) {
-    end = total - 1;
-  }
-  if (start === undefined || start > end || start >= total) return { body: bytes, status: 200 };
-  end = Math.min(end, total - 1);
-  return { body: bytes.subarray(start, end + 1), status: 206, contentRange: `bytes ${start}-${end}/${total}` };
-}
-
-function mediaResponse(reply: MediaReply | null, rangeHeader: string | null, attachment: boolean): Response {
-  if (!reply) return new Response(null, { status: 504 });
-  if (reply.error) return new Response(reply.error.message, { status: statusForKind(reply.error.kind) });
-  const bytes = reply.bytes ?? new Uint8Array();
-  const { body, status, contentRange } = sliceForRange(bytes, rangeHeader);
-  const headers = new Headers({
-    'Content-Type': reply.content_type ?? 'application/octet-stream',
-    'Cache-Control': attachment ? 'private, max-age=3600' : 'private, max-age=31536000, immutable',
-    'X-Content-Type-Options': 'nosniff'
-  });
-  if (attachment) {
-    headers.set('Content-Disposition', reply.content_type ? 'inline' : 'attachment');
-    headers.set('Content-Security-Policy', 'sandbox');
-  }
-  if (contentRange) {
-    headers.set('Content-Range', contentRange);
-    headers.set('Accept-Ranges', 'bytes');
-  }
-  return new Response(body, { status, headers });
-}
-
-interface ByteRange {
-  start: number;
-  end: number;
-}
-
-/** Unlike sliceForRange, the total comes from the server's declared_size, not a buffer already in hand. */
-function parseByteRange(rangeHeader: string | null, total: number): ByteRange | null {
-  const match = rangeHeader ? /^bytes=(\d*)-(\d*)$/.exec(rangeHeader) : null;
-  if (!match) return null;
-  let start = match[1] ? parseInt(match[1], 10) : undefined;
-  let end = match[2] ? parseInt(match[2], 10) : undefined;
-  if (start === undefined && end !== undefined) {
-    start = Math.max(total - end, 0);
-    end = total - 1;
-  } else if (end === undefined) {
-    start = start ?? 0;
-    end = total - 1;
-  }
-  if (start === undefined || start > end || start >= total) return null;
-  return { start, end: Math.min(end, total - 1) };
-}
-
-function attachmentHeaders(contentType: string | null): Headers {
-  return new Headers({
-    'Content-Type': contentType ?? 'application/octet-stream',
-    'Cache-Control': 'private, max-age=3600',
-    'X-Content-Type-Options': 'nosniff',
-    'Content-Disposition': contentType ? 'inline' : 'attachment',
-    'Content-Security-Policy': 'sandbox'
-  });
-}
-
-/**
- * The Authorization header carries the account's access token, so it's only worth the risk on the
- * exact authenticated media endpoints, and only when the URL being fetched is the one `locate` named
- * (never a redirect target, should a future caller pass one through).
- */
-function shouldAuthorize(fetchUrl: string, locatedUrl: string): boolean {
-  try {
-    const target = new URL(fetchUrl);
-    const located = new URL(locatedUrl);
-    if (target.origin !== located.origin) return false;
-    return target.pathname.startsWith('/_matrix/client/v1/media/') || target.pathname.startsWith('/_matrix/media/');
-  } catch {
-    return false;
-  }
-}
-
-function concatChunks(parts: Uint8Array[]): Uint8Array<ArrayBuffer> {
-  const total = parts.reduce((sum, part) => sum + part.byteLength, 0);
-  const out = new Uint8Array(total);
-  let offset = 0;
-  for (const part of parts) {
-    out.set(part, offset);
-    offset += part.byteLength;
-  }
-  return out;
-}
-
-async function readUpTo(
-  reader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>,
-  limit: number
-): Promise<Uint8Array<ArrayBuffer>> {
-  const chunks: Uint8Array[] = [];
-  let total = 0;
-  while (total < limit) {
-    const { value, done } = await reader.read();
-    if (done) break;
-    chunks.push(value);
-    total += value.byteLength;
-  }
-  reader.cancel().catch(() => undefined);
-  return concatChunks(chunks).subarray(0, Math.min(limit, total));
-}
-
-/**
- * Ciphertext in, plaintext out: skips the bytes the upstream sent but the caller didn't ask for
- * (only nonzero when the upstream ignored the Range request), decrypts, drops the sub-16-byte
- * alignment prefix from the very first output, and stops once `limit` bytes have been produced.
- */
-async function* decryptedChunks(
-  reader: ReadableStreamDefaultReader<Uint8Array<ArrayBuffer>>,
-  decryptor: RangeDecryptor | null,
-  skipBytes: number,
-  dropPrefix: number,
-  limit: number
-): AsyncGenerator<Uint8Array> {
-  let toSkip = skipBytes;
-  let toDrop = dropPrefix;
-  let remaining = limit;
-  while (remaining > 0) {
-    const { value, done } = await reader.read();
-    if (done) break;
-    let chunk = value;
-    if (toSkip > 0) {
-      if (chunk.byteLength <= toSkip) {
-        toSkip -= chunk.byteLength;
-        continue;
-      }
-      chunk = chunk.subarray(toSkip);
-      toSkip = 0;
-    }
-    const plain = decryptor ? await decryptor.push(chunk) : chunk;
-    if (plain.byteLength === 0) continue;
-    const emitted = emit(plain);
-    if (emitted) yield emitted;
-  }
-  if (remaining > 0 && decryptor) {
-    const emitted = emit(await decryptor.finish());
-    if (emitted) yield emitted;
-  }
-  reader.cancel().catch(() => undefined);
-
-  function emit(chunk: Uint8Array): Uint8Array | null {
-    let out = chunk;
-    if (toDrop > 0) {
-      if (out.byteLength <= toDrop) {
-        toDrop -= out.byteLength;
-        return null;
-      }
-      out = out.subarray(toDrop);
-      toDrop = 0;
-    }
-    if (out.byteLength > remaining) out = out.subarray(0, remaining);
-    remaining -= out.byteLength;
-    return out.byteLength > 0 ? out : null;
-  }
-}
-
-async function headSniff(mediaId: string, file: MediaFileWire, token: string | null, retried: boolean): Promise<string | null> {
-  const cached = sniffCache.get(mediaId);
-  if (cached && cached.expiresAt > Date.now()) return cached.contentType;
-  const headers = new Headers({ Range: 'bytes=0-79' });
-  if (shouldAuthorize(file.url, file.url) && token) headers.set('Authorization', `Bearer ${token}`);
-  let upstream: Response;
-  try {
-    upstream = await fetch(file.url, { headers });
-  } catch {
-    return null;
-  }
-  if (upstream.status === 401 && !retried) {
-    const fresh = await locate(mediaId, 'Full', true);
-    if (fresh && typeof fresh.location === 'object' && 'File' in fresh.location) {
-      return headSniff(mediaId, fresh.location.File, fresh.token, true);
-    }
-  }
-  if (!upstream.body || (!upstream.ok && upstream.status !== 206)) return null;
-  const head = await readUpTo(upstream.body.getReader(), 80);
-  let contentType: string | null;
-  if (file.encryption) {
-    const key = await importAttachmentKey(file.encryption.key);
-    const iv = decodeAttachmentIv(file.encryption.iv);
-    const decryptor = new RangeDecryptor(key, iv, 0);
-    contentType = attachmentContentType(concatChunks([await decryptor.push(head), await decryptor.finish()]).subarray(0, 64));
-  } else {
-    contentType = attachmentContentType(head.subarray(0, 64));
-  }
-  sniffCache.set(mediaId, { contentType, expiresAt: Date.now() + LOCATE_TTL_MS });
-  return contentType;
-}
-
-function wholeFileFallback(mediaId: string, rangeHeader: string | null): Promise<Response> {
-  return requestMedia('media', { media_id: mediaId, size: 'Full' }).then((reply) => mediaResponse(reply, rangeHeader, true));
-}
-
-async function streamFullMedia(mediaId: string, rangeHeader: string | null, entry?: LocateEntry, retried = false): Promise<Response> {
-  const located = entry ?? (await locate(mediaId, 'Full', false));
-  if (!located) return wholeFileFallback(mediaId, rangeHeader);
-  if (typeof located.location !== 'object' || !('File' in located.location)) return wholeFileFallback(mediaId, rangeHeader);
-  const file = located.location.File;
-  const total = file.declared_size;
-  if (total == null) return wholeFileFallback(mediaId, rangeHeader);
-
-  const requested = parseByteRange(rangeHeader, total);
-  const start = requested?.start ?? 0;
-  const end = requested?.end ?? total - 1;
-  const alignedStart = start - (start % 16);
-
-  const headers = new Headers({ Range: `bytes=${alignedStart}-${end}` });
-  if (shouldAuthorize(file.url, file.url) && located.token) headers.set('Authorization', `Bearer ${located.token}`);
-
-  let upstream: Response;
-  try {
-    upstream = await fetch(file.url, { headers });
-  } catch {
-    return new Response('media upstream unreachable', { status: 502 });
-  }
-  if (upstream.status === 401 && !retried) {
-    const fresh = await locate(mediaId, 'Full', true);
-    if (fresh) return streamFullMedia(mediaId, rangeHeader, fresh, true);
-  }
-  if (!upstream.body || (!upstream.ok && upstream.status !== 206)) {
-    return new Response('media upstream error', { status: 502 });
-  }
-
-  const decryptor = file.encryption
-    ? new RangeDecryptor(await importAttachmentKey(file.encryption.key), decodeAttachmentIv(file.encryption.iv), alignedStart / 16)
-    : null;
-  const skipBytes = upstream.status === 206 ? 0 : alignedStart;
-  const dropPrefix = start - alignedStart;
-  const limit = end - start + 1;
-
-  const reader = upstream.body.getReader();
-  const chunks = decryptedChunks(reader, decryptor, skipBytes, dropPrefix, limit);
-
-  const prefetched: Uint8Array[] = [];
-  let prefetchedLen = 0;
-  let chunksDone = false;
-  let contentType: string | null;
-
-  if (alignedStart === 0) {
-    while (prefetchedLen < 64) {
-      const step = await chunks.next();
-      if (step.done) {
-        chunksDone = true;
-        break;
-      }
-      prefetched.push(step.value);
-      prefetchedLen += step.value.byteLength;
-    }
-    contentType = attachmentContentType(concatChunks(prefetched).subarray(0, Math.min(64, prefetchedLen)));
-    sniffCache.set(mediaId, { contentType, expiresAt: Date.now() + LOCATE_TTL_MS });
-  } else {
-    contentType = await headSniff(mediaId, file, located.token, retried);
-  }
-
-  const body = new ReadableStream<Uint8Array>({
-    async pull(controller) {
-      const next = prefetched.shift();
-      if (next) {
-        controller.enqueue(next);
-        return;
-      }
-      if (chunksDone) {
-        controller.close();
-        return;
-      }
-      const step = await chunks.next();
-      if (step.done) controller.close();
-      else controller.enqueue(step.value);
-    },
-    cancel() {
-      reader.cancel().catch(() => undefined);
-    }
-  });
-
-  const responseHeaders = attachmentHeaders(contentType);
-  responseHeaders.set('Accept-Ranges', 'bytes');
-  if (requested) {
-    responseHeaders.set('Content-Range', `bytes ${start}-${end}/${total}`);
-    return new Response(body, { status: 206, headers: responseHeaders });
-  }
-  return new Response(body, { status: 200, headers: responseHeaders });
-}
-
 async function cacheFirst(request: Request): Promise<Response> {
   const cached = await caches.match(request);
   if (cached) return cached;
@@ -440,12 +48,6 @@ async function cacheFirst(request: Request): Promise<Response> {
   return response;
 }
 
-/** Keyed by the request URL, which names image and size, so cached bytes outlive the access token and survive restarts. */
-const cachedAvatar = createAvatarLoader(
-  async () => caches.open(AVATAR_CACHE),
-  async (query) => mediaResponse(await requestMedia('avatar', Object.fromEntries(new URLSearchParams(query))), null, false)
-);
-
 async function networkFirstNavigation(request: Request): Promise<Response> {
   try {
     return await fetch(request);
@@ -458,30 +60,9 @@ async function networkFirstNavigation(request: Request): Promise<Response> {
 
 sw.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url);
-  const range = event.request.headers.get('Range');
 
-  if (url.pathname === '/api/media') {
-    const mxc = url.searchParams.get('mxc');
-    if (mxc) {
-      const size = url.searchParams.get('size') ?? '256';
-      event.respondWith(cachedAvatar(event.request.url, new URLSearchParams({ mxc, size }).toString()));
-      return;
-    }
-  }
-  if (url.pathname === '/api/message-media') {
-    const mediaId = url.searchParams.get('media_id');
-    const size = url.searchParams.get('size');
-    if (mediaId && size === 'Full') {
-      event.respondWith(streamFullMedia(mediaId, range));
-      return;
-    }
-    if (mediaId && size) {
-      event.respondWith(
-        requestMedia('media', { media_id: mediaId, size }).then((reply) => mediaResponse(reply, range, true))
-      );
-      return;
-    }
-  }
+  if (__MALICE_DEVICE__ && handleMediaFetch(event)) return;
+  if (url.pathname.startsWith('/api/')) return;
   if (url.pathname.startsWith('/assets/') || url.pathname.startsWith('/twemoji/')) {
     event.respondWith(cacheFirst(event.request));
     return;
@@ -490,3 +71,21 @@ sw.addEventListener('fetch', (event) => {
     event.respondWith(networkFirstNavigation(event.request));
   }
 });
+
+sw.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const roomId = (event.notification.data as { roomId?: unknown } | null)?.roomId;
+  if (typeof roomId !== 'string') return;
+  event.waitUntil(
+    (async () => {
+      const windows = await sw.clients.matchAll({ type: 'window', includeUncontrolled: true });
+      const existing = windows.find((client) => client.visibilityState === 'visible') ?? windows[0];
+      if (!existing) {
+        await sw.clients.openWindow(`/?room=${encodeURIComponent(roomId)}`);
+        return;
+      }
+      existing.postMessage({ type: 'malice-open-room', roomId });
+      await existing.focus();
+    })()
+  );
+});

Modified file: web/src/vite-env.d.ts+1

@@ -1 +1,2 @@

11 /// <reference types="vite/client" />

2+declare const __MALICE_DEVICE__: boolean;

Modified file: web/tsconfig.json+1−1

@@ -10,5 +10,5 @@

1010 "types": ["vite/client", "node"]

1111 },

1212 "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"],

13- "exclude": ["src/worker/**", "src/sw.ts"]

13+ "exclude": ["src/worker/**", "src/sw.ts", "src/sw-media.ts"]

1414 }

Modified file: web/tsconfig.worker.json+1−1

@@ -11,5 +11,5 @@

1111 "types": ["vite/client"],

1212 "noEmit": true

1313 },

14- "include": ["src/worker/**/*.ts", "src/sw.ts", "src/lib/wire-status.ts", "src/lib/guards.ts"]

+  "include": ["src/worker/**/*.ts", "src/sw.ts", "src/sw-media.ts", "src/lib/media-decrypt.ts", "src/lib/media-sniff.ts", "src/lib/avatar-cache.ts", "src/lib/wire-status.ts", "src/lib/guards.ts"]

1515 }

Modified file: web/vite.config.ts+14 additions−18 deletions@@ -57,7 +57,8 @@ function twemojiPlugin(): import('vite').Plugin {
 export default defineConfig(({ mode }) => {
   const device = mode === 'device';
   return {
-    plugins: [svelte(), twemojiPlugin(), ...(device ? [precacheManifestPlugin()] : [])],
+    plugins: [svelte(), twemojiPlugin(), precacheManifestPlugin()],
+    define: { __MALICE_DEVICE__: JSON.stringify(device) },
     assetsInclude: ['**/*.wasm'],
     resolve: {
       alias: {
@@ -78,23 +79,18 @@ export default defineConfig(({ mode }) => {
         '/api': 'http://localhost:3000'
       }
     },
-    build: device
-      ? {
-          outDir: 'dist-device',
-          emptyOutDir: true,
-          rollupOptions: {
-            input: {
-              main: 'index.html',
-              sw: 'src/sw.ts'
-            },
-            output: {
-              entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')
-            }
-          }
-        }
-      : {
-          outDir: 'dist',
-          emptyOutDir: true
+    build: {
+      outDir: device ? 'dist-device' : 'dist',
+      emptyOutDir: true,
+      rollupOptions: {
+        input: {
+          main: 'index.html',
+          sw: 'src/sw.ts'
+        },
+        output: {
+          entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')
         }
+      }
+    }
   };
 });

malice

Commit d8772d4eb408

Commit `d8772d4eb408`