Web frontend: perf panel, cover warmup, incremental browse rendering

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/components/Cover.tsx

@@ -9,9 +9,9 @@
 
 import type { CSSProperties } from "react";
 
-import { coverUrl } from "../api/client";
+import { THUMB_MAX_SIZE, coverUrl } from "../api/client";
 import type { Album } from "../api/types";
-import { aspectOf, coverBackground, isBook } from "../lib/covers";
+import { aspectOf, coverBackground, coverUnderlay, isBook } from "../lib/covers";
 
 interface Props {
   album: Album;
@@ -47,7 +47,11 @@ export function Cover({ album, size, fit = "width", radius, className, style, la
         flex: "none",
         borderRadius: radius ?? defaultRadius,
         overflow: "hidden",
-        background: coverBackground(album, Math.max(6, Math.round(size / 13))),
+        // Real art is opaque: paint the cheap flat underlay, not the stripes/spine.
+        background:
+          album.has_cover && !locked
+            ? coverUnderlay(album)
+            : coverBackground(album, Math.max(6, Math.round(size / 13))),
         ...box,
         ...style,
       }}
@@ -90,9 +94,13 @@ export function Cover({ album, size, fit = "width", radius, className, style, la
           )}
           {album.has_cover && (
             <img
-              src={coverUrl(album.id)}
+              src={coverUrl(album.id, {
+                size: size <= THUMB_MAX_SIZE ? "thumb" : "full",
+                version: album.cover_v,
+              })}
               alt=""
               loading="lazy"
+              decoding="async"
               style={{
                 position: "absolute",
                 inset: 0,