Name the browser in the encoder diagnostics and offer a container switch

The optimizer now shows which browser is running (e.g. "Firefox 141")
next to the encoder probe results, explains the common Firefox case
("Firefox does not implement H.264/HEVC encoding"), and offers a
one-click switch to the container that has working encoders.

frontend/src/features/optimize/OptimizeModal.tsx

@@ -9,7 +9,7 @@ import { formatBytes } from "@/lib/format";
 import type { MediaItem } from "@/lib/types";
 
 import { estimateVideoBitrate, VIDEO_CODEC_CANDIDATES } from "./bitrate";
-import { probeVideoEncoders, workingCodecs } from "./detect";
+import { browserLabel, probeVideoEncoders, workingCodecs } from "./detect";
 import { deleteStoredFile } from "./opfs";
 import {
   DEFAULT_OPTIONS,
@@ -196,6 +196,7 @@ export function OptimizeModal({
         : "mp4"
       : options.container;
   const usableCodecs = workingCodecs(probes, container);
+  const isFirefox = browserLabel().startsWith("Firefox");
 
   const applyMutation = useMutation({
     mutationFn: async () => {
@@ -667,14 +668,31 @@ export function OptimizeModal({
                     work here…
                   </p>
                 ) : usableCodecs.length === 0 ? (
-                  <p className="rounded-md border border-ctp-red/40 bg-ctp-red/10 px-2 py-1.5 text-[11px] leading-relaxed text-ctp-red">
-                    This browser cannot produce {container.toUpperCase()} video
-                    samples — switch the container to{" "}
-                    {container === "mp4" ? "WebM" : "MP4"}.
-                  </p>
+                  <div className="rounded-md border border-ctp-red/40 bg-ctp-red/10 px-2 py-1.5 text-[11px] leading-relaxed text-ctp-red">
+                    <p>
+                      {browserLabel()} cannot produce{" "}
+                      {container.toUpperCase()} video samples
+                      {container === "mp4" && isFirefox
+                        ? " — Firefox does not implement H.264/HEVC encoding"
+                        : ""}
+                      .
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setOptions((current) => ({
+                          ...current,
+                          container: container === "mp4" ? "webm" : "mp4",
+                        }))
+                      }
+                      className="mt-1 font-medium text-ctp-blue underline"
+                    >
+                      Switch to {container === "mp4" ? "WebM" : "MP4"}
+                    </button>
+                  </div>
                 ) : (
                   <p className="text-[11px] leading-relaxed text-ctp-overlay0">
-                    Encoders:{" "}
+                    {browserLabel()} · encoders:{" "}
                     {probes
                       .map(
                         (probe) =>