Download selected interview reports

Let candidates save multiple attempts without repetitive downloads.

Author: yucheng922003

tests/browser/lobby.test.js

@@ -3732,6 +3732,218 @@ for (const storage of ["account", "device"]) {
   );
 }
 
+/// Names every report the page asks the browser to save, at the moment it
+/// asks, so a test can say exactly which files one click produced rather than
+/// waiting for download events that may still be on their way.
+const recordDownloadNames = (page) =>
+  page.addInitScript(() => {
+    window.downloadNames = [];
+    const click = HTMLAnchorElement.prototype.click;
+    HTMLAnchorElement.prototype.click = function () {
+      if (this.download) window.downloadNames.push(this.download);
+      return click.call(this);
+    };
+  });
+const takeDownloadNames = (page) =>
+  page.evaluate(() => window.downloadNames.splice(0).sort());
+
+for (const storage of ["account", "device"]) {
+  lobbyTest(
+    `saved ${storage} reports download the ticked ones as their own markdown`,
+    async (page) => {
+      const reportsSaved = [
+        { decision: "HIRE", codingScore: 81 },
+        { decision: "NO_HIRE", codingScore: 42 },
+        { incomplete: true, decision: "HIRE" },
+      ];
+      const entries = reportsSaved.map((report, index) => ({
+        problemId: EASY[0],
+        problemTitle: "Saved report",
+        date: `2026-01-01T${17 + index}:30:00Z`,
+        language: "python",
+        report: { ...report, summary: `Stored summary ${index}` },
+      }));
+      if (storage === "account") {
+        reports = entries.map((payload) => ({ payload }));
+      } else {
+        session = { signedIn: false };
+        await page.addInitScript((entries) => {
+          localStorage.setItem("codetrial_history", JSON.stringify(entries));
+        }, entries);
+      }
+      await recordDownloadNames(page);
+      await lobby(page);
+      const history = page.locator("#attempt-history");
+      const boxes = history.getByRole("checkbox");
+      const toggle = page.locator("#attempt-select-all");
+      const downloadSelected = page.locator("#attempt-download-selected");
+      const note = page.locator("#attempt-download-note");
+      const when = (index) => `Jan 2, 2026, ${index + 1}:30 AM`;
+      const box = (index) =>
+        history.getByRole("checkbox", { name: `${when(index)} · ` });
+      const filename = (index) =>
+        `interview-report-${EASY[0]}-2026-01-02-0${index + 1}3000.md`;
+      const text = async (download) => {
+        const chunks = [];
+        for await (const chunk of await download.createReadStream())
+          chunks.push(chunk);
+        return Buffer.concat(chunks).toString("utf8");
+      };
+
+      assert.equal(await boxes.count(), reportsSaved.length);
+      for (const box of await boxes.all()) assert.ok(await box.isChecked());
+      assert.equal(await toggle.textContent(), "Deselect all");
+      assert.equal(
+        await downloadSelected.textContent(),
+        "Download selected (3)",
+      );
+
+      // The description is the checkbox's label, so clicking the text toggles.
+      await history.locator("label", { hasText: when(1) }).click();
+      assert.equal(await box(1).isChecked(), false);
+      assert.equal(await toggle.textContent(), "Select all");
+      assert.equal(
+        await downloadSelected.textContent(),
+        "Download selected (2)",
+      );
+
+      const batch = new Map();
+      let onDownload;
+      let timer;
+      const arrived = new Promise((resolve, reject) => {
+        onDownload = (download) => {
+          batch.set(download.suggestedFilename(), download);
+          if (batch.size === 2) resolve();
+        };
+        // node:test has no default timeout, so a download that never starts
+        // fails here with what did arrive instead of hanging the suite.
+        timer = setTimeout(() => {
+          const names = [...batch.keys()].join(", ") || "none";
+          reject(new Error(`only these downloads arrived: ${names}`));
+        }, 10_000);
+      });
+      page.on("download", onDownload);
+      try {
+        await downloadSelected.click();
+        assert.deepEqual(await takeDownloadNames(page), [
+          filename(0),
+          filename(2),
+        ]);
+        assert.equal(
+          await note.textContent(),
+          "Your browser may ask to allow multiple downloads from this page. If only the first file arrived, allow automatic downloads for this site in the browser's site settings and try again.",
+        );
+        await arrived;
+      } finally {
+        clearTimeout(timer);
+        page.off("download", onDownload);
+      }
+
+      // The batch reuses the row's own download, so each file it writes is the
+      // one that row's button writes, an incomplete report included.
+      for (const index of [0, 2]) {
+        const downloading = page.waitForEvent("download");
+        await history
+          .getByRole("button", {
+            name: `Download report (.md) for Saved report, ${when(index)}`,
+            exact: true,
+          })
+          .click();
+        const single = await downloading;
+        assert.equal(single.suggestedFilename(), filename(index));
+        const markdown = await text(single);
+        assert.ok(markdown.includes(`Stored summary ${index}`));
+        assert.equal(await text(batch.get(filename(index))), markdown);
+      }
+      await takeDownloadNames(page);
+
+      await toggle.click();
+      for (const box of await boxes.all()) assert.ok(await box.isChecked());
+      assert.equal(await toggle.textContent(), "Deselect all");
+      assert.equal(
+        await downloadSelected.textContent(),
+        "Download selected (3)",
+      );
+
+      await toggle.click();
+      for (const box of await boxes.all())
+        assert.equal(await box.isChecked(), false);
+      assert.equal(await toggle.textContent(), "Select all");
+      assert.equal(
+        await downloadSelected.textContent(),
+        "Download selected (0)",
+      );
+      assert.equal(await downloadSelected.isDisabled(), true);
+    },
+    { timezoneId: "Asia/Taipei", locale: "en-US", acceptDownloads: true },
+  );
+}
+
+lobbyTest(
+  "a filtered attempt list keeps its ticks and downloads only what it shows",
+  async (page) => {
+    const attempt = (id, language, day) => ({
+      id,
+      problemId: EASY[0],
+      payload: {
+        id,
+        problemId: EASY[0],
+        problemTitle: `Attempt ${id}`,
+        language,
+        date: `2026-01-0${day}T00:00:00Z`,
+        report: { decision: "HIRE" },
+      },
+    });
+    reports = [
+      attempt("a", "python", 1),
+      attempt("b", "cpp", 2),
+      attempt("c", "python", 3),
+    ];
+    await recordDownloadNames(page);
+    await lobby(page);
+    const box = (id) =>
+      page.getByRole("checkbox", { name: ` · Attempt ${id} · ` });
+    const toggle = page.locator("#attempt-select-all");
+    const downloadSelected = page.locator("#attempt-download-selected");
+    const note = page.locator("#attempt-download-note");
+    const filename = (day) =>
+      `interview-report-${EASY[0]}-2026-01-0${day}-080000.md`;
+
+    await box("a").uncheck();
+    await page.selectOption("#progress-language", "python");
+    assert.equal(await box("a").isChecked(), false);
+    assert.equal(await box("c").isChecked(), true);
+    assert.equal(await toggle.textContent(), "Select all");
+    assert.equal(await downloadSelected.textContent(), "Download selected (1)");
+    await downloadSelected.click();
+    assert.deepEqual(await takeDownloadNames(page), [filename(3)]);
+    // One file is one download, which no browser asks about.
+    assert.equal(await note.textContent(), "");
+
+    await page.selectOption("#progress-language", "cpp");
+    assert.equal(await box("b").isChecked(), true);
+    assert.equal(await toggle.textContent(), "Deselect all");
+    await downloadSelected.click();
+    assert.deepEqual(await takeDownloadNames(page), [filename(2)]);
+    await toggle.click();
+    assert.equal(await box("b").isChecked(), false);
+    assert.equal(await downloadSelected.isDisabled(), true);
+
+    await page.selectOption("#progress-language", "all");
+    assert.equal(await box("a").isChecked(), false);
+    assert.equal(await box("b").isChecked(), false);
+    assert.equal(await box("c").isChecked(), true);
+    assert.equal(await toggle.textContent(), "Select all");
+    assert.equal(await downloadSelected.textContent(), "Download selected (1)");
+    // Some ticked is not all ticked, so the toggle ticks the rest.
+    await toggle.click();
+    for (const id of ["a", "b", "c"])
+      assert.equal(await box(id).isChecked(), true);
+    assert.equal(await downloadSelected.textContent(), "Download selected (3)");
+  },
+  { timezoneId: "Asia/Taipei", locale: "en-US" },
+);
+
 lobbyTest(
   "try again selects a problem without escaping an active title search",
   async (page) => {

web/app.js

@@ -130,6 +130,10 @@ const nodes = {
   ),
   progressSummary: document.querySelector("#progress-summary"),
   attemptHistory: document.querySelector("#attempt-history"),
+  attemptSelection: document.querySelector("#attempt-selection"),
+  attemptSelectAll: document.querySelector("#attempt-select-all"),
+  attemptDownloadSelected: document.querySelector("#attempt-download-selected"),
+  attemptDownloadNote: document.querySelector("#attempt-download-note"),
   progressTrends: document.querySelector("#progress-trends"),
   progressWeaknesses: document.querySelector("#progress-weaknesses"),
   progressTopics: document.querySelector("#progress-topics"),
@@ -487,6 +491,12 @@ nodes.groundingClear.addEventListener("click", clearGrounding);
 
 let progressNormalized = [];
 let progressSuffix = "saved";
+/// The rows of `progressNormalized` unticked for "Download selected". Keyed on
+/// the row objects: a filter change reuses them, so it keeps every choice, and
+/// a reload builds new ones that were never unticked, so it starts all ticked.
+const unselectedAttempts = new WeakSet();
+/// What the attempt list draws now: the only reports a batch download takes.
+let shownAttempts = [];
 const selectedProgressPhases = new Map();
 /// Whether the history on screen came from an account: null until /api/session
 /// answers, and never assumed false, because a browser that cannot ask is not a
@@ -501,6 +511,29 @@ for (const filter of [
   filter.addEventListener("change", renderProgress);
 }
 nodes.deleteReports.addEventListener("click", deleteSavedReports);
+nodes.attemptSelectAll.addEventListener("click", () => {
+  const select = !allAttemptsSelected();
+  for (const attempt of shownAttempts) {
+    if (select) unselectedAttempts.delete(attempt);
+    else unselectedAttempts.add(attempt);
+  }
+  for (const box of nodes.attemptHistory.querySelectorAll(
+    "[data-attempt-select]",
+  ))
+    box.checked = select;
+  syncAttemptSelection();
+});
+nodes.attemptDownloadSelected.addEventListener("click", () => {
+  const selected = selectedAttempts();
+  for (const attempt of selected) downloadSavedReport(attempt);
+  // Chrome saves the first file of one click and asks before the rest, or
+  // drops them silently once the site is blocked. Neither reaches the page, so
+  // the note says how to recover rather than what happened.
+  nodes.attemptDownloadNote.textContent =
+    selected.length > 1
+      ? "Your browser may ask to allow multiple downloads from this page. If only the first file arrived, allow automatic downloads for this site in the browser's site settings and try again."
+      : "";
+});
 
 const durations = [...document.querySelectorAll("[data-duration]")];
 for (const button of durations) {
@@ -1528,6 +1561,7 @@ function showProgressError(message) {
   // history it had last managed to load.
   reports = [];
   progressNormalized = [];
+  shownAttempts = [];
   renderPracticeFocus();
   hideRecentPerformance();
   nodes.historyHeader.hidden = false;
@@ -1537,6 +1571,7 @@ function showProgressError(message) {
   nodes.progressWeaknesses.replaceChildren();
   nodes.progressTopics.replaceChildren();
   nodes.attemptHistory.replaceChildren();
+  syncAttemptSelection();
 }
 
 function showProgress(entries, suffix) {
@@ -1681,6 +1716,7 @@ function renderRecentPerformance() {
 /// and it cost one more sanitizing pass over every stored report.
 function renderAttemptHistory(attempts) {
   nodes.attemptHistory.replaceChildren();
+  shownAttempts = attempts;
   for (const attempt of [...attempts].reverse()) {
     const item = document.createElement("li");
     const when = new Date(attempt.at).toLocaleString(undefined, {
@@ -1690,8 +1726,22 @@ function renderAttemptHistory(attempts) {
     const verdict = attempt.report.incomplete
       ? "INCOMPLETE"
       : (attempt.report.decision ?? "UNSCORED");
-    const label = document.createElement("p");
-    label.textContent = `${when} · ${attempt.problemTitle} · ${attempt.difficulty ?? "Difficulty not recorded"} · ${languageLabel(attempt.language ?? "not recorded")} · ${verdict}`;
+    const select = document.createElement("input");
+    select.type = "checkbox";
+    select.dataset.attemptSelect = "";
+    select.checked = !unselectedAttempts.has(attempt);
+    select.addEventListener("change", () => {
+      if (select.checked) unselectedAttempts.delete(attempt);
+      else unselectedAttempts.add(attempt);
+      syncAttemptSelection();
+    });
+    const label = document.createElement("label");
+    label.append(
+      select,
+      `${when} · ${attempt.problemTitle} · ${attempt.difficulty ?? "Difficulty not recorded"} · ${languageLabel(attempt.language ?? "not recorded")} · ${verdict}`,
+    );
+    const line = document.createElement("p");
+    line.append(label);
     const open = document.createElement("button");
     open.type = "button";
     open.textContent = "Open report";
@@ -1756,7 +1806,7 @@ function renderAttemptHistory(attempts) {
           : "";
       nodes.recommendation.textContent = `Selected problem: ${title(card)}.${adjustment}`;
     });
-    item.append(label, open, download, retry);
+    item.append(line, open, download, retry);
     // A row with no id has nothing both stores and the account agree on, and
     // deleting by anything weaker could take a different report than this one.
     if (attempt.id) {
@@ -1777,6 +1827,29 @@ function renderAttemptHistory(attempts) {
     item.append(report);
     nodes.attemptHistory.append(item);
   }
+  syncAttemptSelection();
+}
+
+function selectedAttempts() {
+  return shownAttempts.filter((attempt) => !unselectedAttempts.has(attempt));
+}
+
+function allAttemptsSelected() {
+  return selectedAttempts().length === shownAttempts.length;
+}
+
+function syncAttemptSelection() {
+  nodes.attemptDownloadNote.textContent = "";
+  nodes.attemptSelection.hidden = shownAttempts.length === 0;
+  // With nothing listed, a count here would be the lobby speaking before any
+  // history arrived; the labels are written when there is something to count.
+  if (nodes.attemptSelection.hidden) return;
+  const selected = selectedAttempts().length;
+  nodes.attemptSelectAll.textContent = allAttemptsSelected()
+    ? "Deselect all"
+    : "Select all";
+  nodes.attemptDownloadSelected.textContent = `Download selected (${selected})`;
+  nodes.attemptDownloadSelected.disabled = selected === 0;
 }
 
 function downloadSavedReport(attempt) {

web/index.html

@@ -1990,6 +1990,13 @@ <h2 id="progress-title">Interview progress</h2>
         <p id="progress-summary" aria-live="polite"></p>
         <section aria-labelledby="attempt-history-title">
           <h3 id="attempt-history-title">Past attempts</h3>
+          <div id="attempt-selection" class="attempt-selection" hidden>
+            <button id="attempt-select-all" type="button">Deselect all</button>
+            <button id="attempt-download-selected" type="button">
+              Download selected (0)
+            </button>
+          </div>
+          <p id="attempt-download-note" class="small" role="status"></p>
           <ol id="attempt-history"></ol>
         </section>
         <div id="progress-trends" class="progress-trends"></div>