feat: machine translation saves lines as they finish and shows progress at once

Total shown right away, lines saved per poll, retry reasons in the card; layout fix of the options row.

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

frontend/tests/translator-run.test.mjs

@@ -174,3 +174,25 @@ test("checkpoints say which page is out and when it is handled", async () => {
   await run(fakeTranslator(), fakeServer(["a", "b", "c"]), { pageSize: 2, onCheckpoint: (c) => marks.push([c.jobId ? "sent" : "done", c.keys.length, c.skip]) });
   assert.deepEqual(marks, [["sent", 2, 0], ["done", 0, 0], ["sent", 1, 0], ["done", 0, 0]]);
 });
+
+test("a slow page is saved line by line while it is still running", async () => {
+  const server = fakeServer(["a", "b", "c"]);
+  const saves = [];
+  const save = server.save;
+  server.save = async (r) => { saves.push(r.map((x) => x.key)); await save(r); };
+  // the translator finishes one more line on every poll
+  let polls = 0;
+  const lines = ["a", "b", "c"];
+  const make = () => ({
+    id: "j", status: polls >= 3 ? "completed" : "running", model: "m", error: null,
+    items: lines.map((text, i) => i < polls
+      ? { id: String(i), source: text, translation: `RU ${text}`, status: "completed", error: null }
+      : { id: String(i), source: text, translation: null, status: "pending", error: null }),
+  });
+  const client = { createJob: async () => make(), job: async () => { polls++; return make(); }, cancel: async () => make() };
+  const seen = [];
+  await run(client, server, { pageSize: 3, onProgress: (p) => seen.push(p.done) });
+  assert.deepEqual(saves, [["k0"], ["k1"], ["k2"]]);
+  assert.ok(seen.includes(1) && seen.includes(2), "progress is reported before the page ends");
+  assert.equal(seen.at(-1), 3);
+});