Add the Translate transcript panel with its own exports

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tests/translatePanel.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import { renderToStaticMarkup } from "react-dom/server";
+import { TranslatePanel, translateStatusText } from "../src/components/TranslatePanel";
+
+// D-WS4b: the panel's copy, before any worker exists (static render).
+const danish = { text: "Det er ikke noget med at vi skal på ferie.", chunks: [] };
+
+function render(downloaded: string[] = [], hint?: string) {
+  return renderToStaticMarkup(
+    <TranslatePanel
+      result={danish}
+      sourceLanguageHint={hint}
+      downloaded={new Set(downloaded)}
+      onModelCached={() => {}}
+      exportName="talk.m4a"
+      disabled={false}
+    />,
+  );
+}
+
+describe("TranslatePanel", () => {
+  test("is a secondary disclosure named in plain words", () => {
+    const html = render();
+    expect(html).toContain("<details");
+    expect(html).toContain("Translate transcript…");
+  });
+
+  test("states the one-time download size before anything downloads (D-020)", () => {
+    const html = render();
+    expect(html).toContain("Downloads a translation model once (~113 MB)");
+    expect(html).toContain("never leaves");
+  });
+
+  test("says it works offline once the model is cached", () => {
+    expect(render(["Xenova/opus-mt-da-en"])).toContain("Translation model downloaded — works offline");
+  });
+
+  test("defaults the direction from the transcript's language", () => {
+    expect(render()).toMatch(/<option value="Xenova\/opus-mt-da-en" selected="">/);
+    expect(render([], "en")).toMatch(/<option value="Xenova\/opus-mt-en-da" selected="">/);
+  });
+});
+
+describe("translateStatusText", () => {
+  test("idle says nothing", () => {
+    expect(translateStatusText({ kind: "idle" }, false)).toBeNull();
+  });
+
+  test("never claims a download for a cached model (D-033 spirit)", () => {
+    expect(translateStatusText({ kind: "starting" }, true)).toBe("Loading the translation model…");
+    expect(translateStatusText({ kind: "starting" }, false)).toBe("Starting the download…");
+  });
+
+  test("download percent and sentence counts", () => {
+    expect(translateStatusText({ kind: "downloading", loaded: 40, total: 100 }, false)).toBe(
+      "Downloading the translation model… 40%",
+    );
+    expect(translateStatusText({ kind: "translating", done: 12, total: 80 }, true)).toBe(
+      "Translating… 12 of 80 sentences",
+    );
+    expect(translateStatusText({ kind: "translating", done: 0, total: 1 }, true)).toBe(
+      "Translating… 0 of 1 sentence",
+    );
+  });
+});