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/detect.ts

@@ -137,3 +137,23 @@ export function workingCodecs(
     .map((probe) => probe.codec)
     .filter((codec) => candidates.includes(codec));
 }
+
+/** Human-readable browser + platform, for the encoder diagnostics line. */
+export function browserLabel(): string {
+  const ua = navigator.userAgent;
+  const patterns: [RegExp, string][] = [
+    [/(Firefox|FxiOS)\/([\d.]+)/, "Firefox"],
+    [/(Edg|EdgA|EdgiOS)\/([\d.]+)/, "Edge"],
+    [/(OPR)\/([\d.]+)/, "Opera"],
+    [/(Chrome|CriOS)\/([\d.]+)/, "Chrome"],
+    [/(Version)\/([\d.]+)[^)]*Safari/, "Safari"],
+  ];
+  for (const [pattern, name] of patterns) {
+    const match = pattern.exec(ua);
+    if (match) {
+      const version = match[2]?.split(".")[0] ?? "";
+      return `${name}${version ? ` ${version}` : ""}`;
+    }
+  }
+  return "unknown browser";
+}