@scoutmesh/viewer 0.2.0

package/dist/public/app.js

@@ -0,0 +1,1157 @@
+import { unlockViewer } from "./auth.js";
+import {
+  addedRecordIds,
+  pageOf,
+  isObject,
+  readView,
+  readSummaries,
+} from "./data.js";
+
+/** @typedef {import('../types.ts').View} View */
+/** @typedef {import('../types.ts').Candidate} Candidate */
+/** @typedef {import('../types.ts').Selection} Selection */
+
+/** @template {keyof HTMLElementTagNameMap} K @param {K} tag - Input value. @param {string} [text] - Input value. @param {string} [className] - Input value. */
+function element(tag, text = "", className = "") {
+  const node = document.createElement(tag);
+  node.textContent = text;
+  node.className = className;
+  return node;
+}
+
+/** @param {string} id - Input value. */
+function byId(id) {
+  const node = document.querySelector(`#${id}`);
+  if (!(node instanceof HTMLElement)) {
+    throw new Error(`Missing viewer element: ${id}`);
+  }
+  return node;
+}
+
+function getDialog() {
+  const node = byId("profile");
+  if (!(node instanceof HTMLDialogElement)) {
+    throw new Error("Invalid profile dialog.");
+  }
+  return node;
+}
+const dialog = getDialog();
+const viewId = new URLSearchParams(location.search).get("view");
+const base = `/api/views/${encodeURIComponent(viewId ?? "")}`;
+/** @type {View | null} */
+let view = null;
+/** @type {Selection} */
+let state = {
+  filter: "",
+  maybeIds: [],
+  removedIds: [],
+  selectedIds: [],
+  sortBy: "name",
+  sortDirection: "asc",
+};
+let focusedId = "";
+let profileOpenerId = "";
+let stateVersion = 0;
+let savedStateVersion = 0;
+let fetchSequence = 0;
+let pendingSave = Promise.resolve();
+let activeList = "unreviewed";
+let profileTab = "overview";
+/** @type {Map<string, number>} */
+const pages = new Map();
+/** @type {Set<string>} */
+const pendingIds = new Set();
+/** @type {Set<string>} */
+let batchIds = new Set();
+let returnScroll = 0;
+/** @type {{id: string, name: string, shortlisted: boolean, maybe: boolean} | null} */
+let lastRemoval = null;
+const emailIds = new Set();
+const sourceIds = new Set();
+
+/** @param {string} path - Input value. @param {RequestInit} [options] - Input value. */
+async function api(path, options = {}) {
+  const response = await fetch(path, {
+    ...options,
+    headers: new Headers(
+      options.headers ?? { "Content-Type": "application/json" }
+    ),
+  });
+  /** @type {unknown} */
+  const result = await response.json();
+  if (!response.ok) {
+    throw new Error(
+      isObject(result) && typeof result.error === "string"
+        ? result.error
+        : "The local viewer could not complete this request."
+    );
+  }
+  return result;
+}
+
+/** @param {unknown} error - Input value. */
+function showError(error) {
+  byId("error").hidden = false;
+  byId("error").textContent =
+    error instanceof Error ? error.message : "An unexpected error occurred.";
+}
+
+function saveState() {
+  stateVersion += 1;
+  const version = stateVersion;
+  const snapshot = structuredClone(state);
+  const previous = pendingSave;
+  async function persist() {
+    try {
+      await previous;
+      if (version !== stateVersion) {
+        return;
+      }
+      await api(`${base}/state`, {
+        body: JSON.stringify(snapshot),
+        method: "PUT",
+      });
+      savedStateVersion = version;
+    } catch (error) {
+      if (version === stateVersion) {
+        savedStateVersion = version;
+        await refresh();
+      }
+      showError(error);
+    }
+  }
+  pendingSave = persist();
+}
+
+/** @param {unknown} value - Field value to format. @returns {string} */
+function display(value) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => display(item)).join(", ");
+  }
+  return typeof value === "string" ? value : (JSON.stringify(value) ?? "—");
+}
+
+/** @param {string} key - Input value. */
+function fieldName(key) {
+  return key
+    .replaceAll(/(?<lower>[a-z])(?<upper>[A-Z])/gu, "$<lower> $<upper>")
+    .replaceAll("_", " ")
+    .replace(/^./u, (letter) => letter.toUpperCase());
+}
+
+/** @param {unknown} value - Field value. */
+function hasValue(value) {
+  return (
+    value !== null &&
+    value !== undefined &&
+    value !== "" &&
+    (!Array.isArray(value) || value.length > 0)
+  );
+}
+
+/** @param {unknown} value - Possible URL. */
+function webUrl(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  try {
+    const url = new URL(value);
+    return ["http:", "https:"].includes(url.protocol) ? url : null;
+  } catch {
+    return null;
+  }
+}
+
+/** @param {string} url - Web link to open in the system browser. */
+async function openExternalLink(url) {
+  try {
+    await api("/api/open-external", {
+      body: JSON.stringify({ url }),
+      method: "POST",
+    });
+  } catch (error) {
+    showError(error);
+  }
+}
+
+/** @param {HTMLElement} target - Destination. @param {unknown} value - Field value. @param {string} [label] - Link label. */
+function fillValue(target, value, label = "Source") {
+  if (Array.isArray(value)) {
+    const list = element("ul");
+    for (const item of value) {
+      const entry = element("li");
+      fillValue(entry, item, label);
+      list.append(entry);
+    }
+    target.append(list);
+    return;
+  }
+  const text = display(value);
+  const url = webUrl(value);
+  if (url) {
+    const link = element("a", `${label} ↗`);
+    link.href = url.href;
+    link.target = "_blank";
+    link.rel = "external noopener noreferrer";
+    link.setAttribute("aria-label", `${label} (opens in external browser)`);
+    link.title = "Open in your default browser";
+    link.addEventListener("click", (event) => {
+      event.preventDefault();
+      void openExternalLink(url.href);
+    });
+    link.addEventListener("auxclick", (event) => {
+      if (event.button === 1) {
+        event.preventDefault();
+        void openExternalLink(url.href);
+      }
+    });
+    target.append(link);
+  } else {
+    target.textContent = text;
+  }
+}
+
+/** @param {Candidate} record - Candidate to review. @param {string} action - Review decision. */
+function reviewCandidate(record, action) {
+  const shortlisted = state.selectedIds.includes(record.id);
+  const maybe = state.maybeIds.includes(record.id);
+  state.selectedIds = state.selectedIds.filter((id) => id !== record.id);
+  state.maybeIds = state.maybeIds.filter((id) => id !== record.id);
+  state.removedIds = state.removedIds.filter((id) => id !== record.id);
+  if (action === "shortlist" && !shortlisted) {
+    state.selectedIds.push(record.id);
+  } else if (action === "maybe" && !maybe) {
+    state.maybeIds.push(record.id);
+  } else if (action === "remove") {
+    lastRemoval = { id: record.id, maybe, name: record.name, shortlisted };
+    state.removedIds.push(record.id);
+    byId("removal-message").textContent = `${record.name} marked No.`;
+    byId("undo-removal").hidden = false;
+  } else if (action === "undo" && lastRemoval?.id === record.id) {
+    if (lastRemoval.shortlisted) {
+      state.selectedIds.push(record.id);
+    } else if (lastRemoval.maybe) {
+      state.maybeIds.push(record.id);
+    }
+  }
+  if (action !== "remove" && lastRemoval?.id === record.id) {
+    lastRemoval = null;
+    byId("undo-removal").hidden = true;
+  }
+  saveState();
+  renderResults(true);
+  if (dialog.open) {
+    renderProfile();
+    if (document.activeElement === document.body) {
+      byId("close-profile").focus({ preventScroll: true });
+    }
+  } else if (document.activeElement === document.body) {
+    byId(`list-${activeList === "new" ? "candidates" : activeList}`).focus({
+      preventScroll: true,
+    });
+  }
+}
+
+/** @param {Candidate} record - Candidate to review. @param {boolean} [profile] - Dialog action placement. */
+function reviewActions(record, profile = false) {
+  const actions = element("div", "", "review-actions");
+  const removed = state.removedIds.includes(record.id);
+  const shortlisted = state.selectedIds.includes(record.id);
+  const maybe = state.maybeIds.includes(record.id);
+  /** @type {[string, string][]} */
+  const choices = removed
+    ? [["restore", "Undo No"]]
+    : [
+        ["shortlist", shortlisted ? "Yes ✓" : "Yes"],
+        ["maybe", maybe ? "Maybe ✓" : "Maybe"],
+        ["remove", "No"],
+      ];
+  for (const [action, label] of choices) {
+    const button = element(
+      "button",
+      label,
+      action === "remove"
+        ? "text-button remove-button"
+        : "button shortlist-button"
+    );
+    button.type = "button";
+    button.id = `${profile ? "dialog" : "card"}-${action}-${encodeURIComponent(record.id)}`;
+    button.setAttribute(
+      "aria-label",
+      `${action === "shortlist" && shortlisted ? "Undo Yes for" : label} ${record.name}`
+    );
+    if (action === "maybe") {
+      button.className = "button maybe-button";
+      button.setAttribute("aria-pressed", String(maybe));
+      button.setAttribute(
+        "aria-label",
+        `${maybe ? "Undo maybe for" : "Maybe"} ${record.name}`
+      );
+      button.title = maybe ? "Move to unreviewed" : "Keep for further review";
+    }
+    if (action === "shortlist") {
+      button.setAttribute("aria-pressed", String(shortlisted));
+      button.title = shortlisted ? "Move to Unreviewed" : "Mark Yes";
+    }
+    button.addEventListener("click", () => {
+      reviewCandidate(record, action);
+    });
+    actions.append(button);
+  }
+  return actions;
+}
+
+function renderReviewLists() {
+  const removed = state.removedIds.length;
+  for (const [list, label, count] of [
+    ["candidates", "All", view?.records.length ?? 0],
+    [
+      "unreviewed",
+      "Unreviewed",
+      (view?.records.length ?? 0) -
+        removed -
+        state.selectedIds.length -
+        state.maybeIds.length,
+    ],
+    ["shortlist", "Yes", state.selectedIds.length],
+    ["maybe", "Maybe", state.maybeIds.length],
+    ["removed", "No", removed],
+  ]) {
+    const button = byId(`list-${list}`);
+    button.textContent = `${label} (${count})`;
+    button.setAttribute("aria-pressed", String(activeList === list));
+  }
+  byId("review-feedback").textContent =
+    state.selectedIds.length > 0
+      ? `${state.selectedIds.length} marked Yes · Ask the agent to work with these candidates.`
+      : "Yes for strong matches. Maybe if unsure. No to set aside.";
+}
+
+/** @param {Candidate} record - Candidate. @param {string[]} keys - Fields. @param {string} title - Section heading. */
+function detailSection(record, keys, title) {
+  const fields = keys.filter((key) => hasValue(record[key]));
+  if (fields.length === 0) {
+    return null;
+  }
+  const section = element("section", "", "detail-section");
+  section.append(element("h3", title));
+  const list = element("dl");
+  for (const key of fields) {
+    const item = element("div", "", "detail");
+    const value = element("dd");
+    fillValue(value, record[key], fieldName(key));
+    if (fields.length > 1) {
+      item.append(element("dt", fieldName(key)));
+    }
+    item.append(value);
+    list.append(item);
+  }
+  section.append(list);
+  return section;
+}
+
+/** @param {Candidate} record - Supplied fit assessment. */
+function candidateOverview(record) {
+  const overview = element("dl", "", "candidate-overview");
+  const fit = [
+    record.fitSummary,
+    record.justification,
+    record.summary,
+    record.evidence,
+    record.fit,
+  ];
+  const unknowns = [record.unconfirmed, record.gaps];
+  const hasAssessment =
+    hasValue(record.fitSummary) || hasValue(record.justification);
+  for (const [label, value, className] of [
+    [
+      hasAssessment ? "Why they may fit" : "Profile summary",
+      fit.find(hasValue),
+      "fit-overview",
+    ],
+    [
+      "Needs confirmation",
+      unknowns.find(hasValue) ?? "Not assessed yet.",
+      "unknown-overview",
+    ],
+  ]) {
+    if (!hasValue(value)) {
+      continue;
+    }
+    const row = element("div", "", display(className));
+    row.append(element("dt", display(label)), element("dd", display(value)));
+    overview.append(row);
+  }
+  return overview;
+}
+
+/** @param {URL} url - Source to label with its actual identity. */
+function sourceLabel(url) {
+  const host = url.hostname.replace(/^www\./u, "");
+  const path = url.pathname.split("/").filter(Boolean);
+  if (host === "linkedin.com") {
+    return "LinkedIn profile";
+  }
+  if (host === "github.com") {
+    return path.length > 1
+      ? `Code: ${path.slice(0, 2).join("/")}`
+      : "GitHub profile";
+  }
+  return host;
+}
+
+/** @param {Candidate} record - Candidate source fields. @param {string[]} keys - Source URL fields. */
+function sourceLinks(record, keys) {
+  const links = element("div", "", "source-links");
+  const seen = new Set();
+  for (const key of keys) {
+    const url = webUrl(record[key]);
+    if (!url || seen.has(url.href.replace(/\/$/u, ""))) {
+      continue;
+    }
+    seen.add(url.href.replace(/\/$/u, ""));
+    const link = element("span");
+    fillValue(link, url.href, sourceLabel(url));
+    links.append(link);
+  }
+  return links;
+}
+
+const careerFields = [
+  "workHistory",
+  "experience",
+  "education",
+  "skills",
+  "technicalEvidence",
+  "leadershipEvidence",
+];
+const contactFields = [
+  "email",
+  "emailStatus",
+  "emailSource",
+  "phone",
+  "phoneNumber",
+  "linkedin",
+  "github",
+  "website",
+  "draftSubject",
+  "draftEmail",
+];
+
+/** @param {Candidate} record - Candidate to inspect. */
+function profileTabs(record) {
+  return [
+    { id: "overview", label: "Overview", visible: true },
+    {
+      id: "career",
+      label: "Career",
+      visible: careerFields.some((key) => hasValue(record[key])),
+    },
+    {
+      id: "contact",
+      label: "Contact",
+      visible: contactFields.some((key) => hasValue(record[key])),
+    },
+  ].filter((tab) => tab.visible);
+}
+
+/** @param {string} id - Profile section. */
+function switchProfileTab(id) {
+  profileTab = id;
+  renderProfile();
+  byId("profile-content").scrollTop = 0;
+  byId(`profile-tab-${id}`).focus({ preventScroll: true });
+}
+
+/** @param {Candidate} record - Candidate with available sections. */
+function renderProfileTabs(record) {
+  const tabs = profileTabs(record);
+  if (!tabs.some((tab) => tab.id === profileTab)) {
+    profileTab = "overview";
+  }
+  const navigation = byId("profile-tabs");
+  navigation.replaceChildren();
+  for (const [index, tab] of tabs.entries()) {
+    const button = element("button", tab.label);
+    button.id = `profile-tab-${tab.id}`;
+    button.type = "button";
+    button.setAttribute("role", "tab");
+    button.setAttribute("aria-selected", String(tab.id === profileTab));
+    button.setAttribute("aria-controls", "profile-content");
+    button.tabIndex = tab.id === profileTab ? 0 : -1;
+    button.addEventListener("click", () => {
+      switchProfileTab(tab.id);
+    });
+    button.addEventListener("keydown", (event) => {
+      const offsets = new Map([
+        ["ArrowRight", 1],
+        ["ArrowLeft", -1],
+        ["Home", -index],
+        ["End", tabs.length - 1 - index],
+      ]);
+      const offset = offsets.get(event.key);
+      if (offset === undefined) {
+        return;
+      }
+      event.preventDefault();
+      const target = tabs[(index + offset + tabs.length) % tabs.length];
+      if (target) {
+        switchProfileTab(target.id);
+      }
+    });
+    navigation.append(button);
+  }
+  byId("profile-content").setAttribute(
+    "aria-labelledby",
+    `profile-tab-${profileTab}`
+  );
+}
+
+/** @param {Candidate} record - Candidate to inspect. */
+function detailsContent(record) {
+  const content = element("div");
+  if (profileTab !== "overview") {
+    const section = detailSection(
+      record,
+      profileTab === "career" ? careerFields : contactFields,
+      profileTab === "career" ? "Career" : "Contact and drafts"
+    );
+    if (section) {
+      content.append(section);
+    }
+    return content;
+  }
+  content.append(candidateOverview(record));
+  const assessment = detailSection(
+    record,
+    ["justification", "gaps", "evidence"].filter(
+      (key) =>
+        record[key] !== record.fitSummary && record[key] !== record.unconfirmed
+    ),
+    "Supporting details"
+  );
+  if (assessment) {
+    const disclosure = element("details", "", "more-information");
+    disclosure.append(element("summary", "Read full assessment"), assessment);
+    content.append(disclosure);
+  }
+  const links = sourceLinks(record, [
+    "linkedin",
+    "github",
+    "repository",
+    "additionalRepository",
+    "evidenceLink",
+    "website",
+  ]);
+  if (links.childElementCount > 0) {
+    const section = element("section", "", "detail-section");
+    section.append(element("h3", "Sources"), links);
+    content.append(section);
+  }
+  const used = new Set([
+    "id",
+    "name",
+    "role",
+    "company",
+    "location",
+    "photoUrl",
+    "summary",
+    "fit",
+    "fitSummary",
+    "justification",
+    "evidence",
+    "gaps",
+    "unconfirmed",
+    "repository",
+    "additionalRepository",
+    "evidenceLink",
+    "batchId",
+    ...careerFields,
+    ...contactFields,
+  ]);
+  const extra = detailSection(
+    record,
+    Object.keys(record).filter((key) => !used.has(key)),
+    "More information"
+  );
+  if (extra) {
+    const disclosure = element("details", "", "more-information");
+    disclosure.open = sourceIds.has(record.id);
+    disclosure.append(element("summary", "More information"));
+    extra.querySelector("h3")?.remove();
+    disclosure.append(extra);
+    disclosure.addEventListener("toggle", () => {
+      if (disclosure.open) {
+        sourceIds.add(record.id);
+      } else {
+        sourceIds.delete(record.id);
+      }
+    });
+    content.append(disclosure);
+  }
+  return content;
+}
+
+/** @param {Candidate} record - Candidate identity. */
+function identity(record) {
+  return [record.role, record.company, record.location]
+    .filter(hasValue)
+    .map(display)
+    .join(" · ");
+}
+
+/** @param {Candidate} record - Candidate contact. */
+function emailPanel(record) {
+  const address = record.email;
+  if (
+    typeof address !== "string" ||
+    !/^[^\s@<>?]+@[^\s@<>?]+\.[^\s@<>?]+$/u.test(address)
+  ) {
+    return null;
+  }
+  const panel = element("div", "", "email-panel");
+  panel.id = `email-${encodeURIComponent(record.id)}`;
+  panel.hidden = !emailIds.has(record.id);
+  const top = element("div", "", "email-top");
+  const link = element("a", address);
+  link.href = `mailto:${encodeURIComponent(address)}`;
+  const copy = element("button", "Copy email", "text-button");
+  copy.type = "button";
+  copy.id = `copy-email-${encodeURIComponent(record.id)}`;
+  const feedback = element("p", "", "muted");
+  feedback.setAttribute("role", "status");
+  const email = address;
+  async function copyAddress() {
+    try {
+      await navigator.clipboard.writeText(email);
+      feedback.textContent = "Email copied.";
+    } catch {
+      feedback.textContent =
+        "Could not copy. Select and copy the address above.";
+    }
+  }
+  copy.addEventListener("click", () => {
+    void copyAddress();
+  });
+  top.append(link, copy);
+  panel.append(top);
+  if (hasValue(record.emailStatus)) {
+    panel.append(element("p", display(record.emailStatus), "muted"));
+  }
+  panel.append(feedback);
+  return panel;
+}
+
+/** @param {Candidate} record - Candidate whose supplied photo or initials to show. */
+function candidateAvatar(record) {
+  const avatar = element("span", "", "candidate-avatar");
+  const parts = record.name
+    .replaceAll(/\([^)]*\)/gu, "")
+    .trim()
+    .split(/\s+/u);
+  const initials = [parts[0], ...(parts.length > 1 ? [parts.at(-1)] : [])]
+    .map((part) => part?.match(/^./u)?.[0] ?? "")
+    .join("")
+    .toLocaleUpperCase();
+  avatar.append(element("span", initials));
+  avatar.setAttribute("aria-hidden", "true");
+  const url = webUrl(record.photoUrl);
+  if (url?.protocol === "https:" && !url.username && !url.password) {
+    const photo = element("img");
+    photo.alt = "";
+    photo.width = 64;
+    photo.height = 64;
+    photo.loading = "lazy";
+    photo.decoding = "async";
+    photo.referrerPolicy = "no-referrer";
+    photo.addEventListener(
+      "error",
+      () => {
+        photo.remove();
+      },
+      { once: true }
+    );
+    photo.src = url.href;
+    avatar.append(photo);
+  }
+  return avatar;
+}
+
+/** @param {Candidate} record - Candidate identity and image. @param {boolean} [profile] - Whether this is the open profile. */
+function candidateHeading(record, profile = false) {
+  const heading = element("div", "", "candidate-heading");
+  const text = element("div", "", "candidate-heading-text");
+  const name = element("h2", record.name);
+  if (profile) {
+    name.id = "profile-name";
+  }
+  text.append(name, element("p", identity(record), "identity"));
+  heading.append(candidateAvatar(record), text);
+  return heading;
+}
+
+/** @param {Candidate} record - Candidate card. */
+function candidateCard(record) {
+  const card = element("article", "", "candidate-card");
+  card.dataset.candidateId = record.id;
+  card.classList.toggle("selected", state.selectedIds.includes(record.id));
+  card.classList.toggle("maybe", state.maybeIds.includes(record.id));
+  card.classList.toggle("removed", state.removedIds.includes(record.id));
+  card.append(candidateHeading(record));
+  card.append(candidateOverview(record));
+  const actions = element("div", "", "card-actions");
+  actions.append(profileButton(record, "View details", "details-button"));
+  if (webUrl(record.linkedin)) {
+    const link = element("span");
+    fillValue(link, record.linkedin, "LinkedIn");
+    actions.append(link);
+  }
+  const contact = emailPanel(record);
+  if (contact) {
+    const button = element("button", "Email", "text-button");
+    button.id = `email-toggle-${encodeURIComponent(record.id)}`;
+    button.type = "button";
+    button.setAttribute("aria-label", `Email for ${record.name}`);
+    button.setAttribute("aria-controls", contact.id);
+    button.setAttribute("aria-expanded", String(!contact.hidden));
+    button.addEventListener("click", () => {
+      contact.hidden = !contact.hidden;
+      if (contact.hidden) {
+        emailIds.delete(record.id);
+      } else {
+        emailIds.add(record.id);
+      }
+      button.setAttribute("aria-expanded", String(!contact.hidden));
+    });
+    actions.append(button);
+  }
+  actions.append(reviewActions(record));
+  card.append(actions);
+  if (contact) {
+    card.append(contact);
+  }
+  return card;
+}
+
+/** @param {Candidate} record - Candidate to open. @param {string} [label] - Button text. @param {string} [className] - Button style. */
+function profileButton(
+  record,
+  label = record.name,
+  className = "profile-link"
+) {
+  const button = element("button", label, className);
+  button.id = `profile-${encodeURIComponent(record.id)}`;
+  button.setAttribute("aria-label", `View details for ${record.name}`);
+  button.setAttribute("aria-haspopup", "dialog");
+  button.setAttribute("aria-controls", "profile");
+  button.type = "button";
+  button.addEventListener("click", () => {
+    focusedId = record.id;
+    profileOpenerId = record.id;
+    profileTab = "overview";
+    renderProfile();
+    dialog.showModal();
+    byId("profile-content").scrollTop = 0;
+    byId("close-profile").focus({ preventScroll: true });
+  });
+  return button;
+}
+
+/** @param {boolean} [includeFocused] - Keep the open profile navigable after a decision changes its list membership. */
+function reviewRecords(includeFocused = false) {
+  return (view?.records ?? []).filter((record) => {
+    if (includeFocused && record.id === focusedId) {
+      return true;
+    }
+    const removed = state.removedIds.includes(record.id);
+    if (activeList === "candidates") {
+      return true;
+    }
+    if (activeList === "unreviewed") {
+      return (
+        !removed &&
+        !state.selectedIds.includes(record.id) &&
+        !state.maybeIds.includes(record.id)
+      );
+    }
+    if (activeList === "removed") {
+      return removed;
+    }
+    return (
+      !removed &&
+      (activeList !== "shortlist" || state.selectedIds.includes(record.id)) &&
+      (activeList !== "maybe" || state.maybeIds.includes(record.id)) &&
+      (activeList !== "new" || batchIds.has(record.id))
+    );
+  });
+}
+
+function renderProfileNavigation() {
+  const records = reviewRecords(true);
+  const index = records.findIndex((record) => record.id === focusedId);
+  byId("profile-position").textContent = `${index + 1} of ${records.length}`;
+  const previous = byId("profile-previous");
+  const next = byId("profile-next");
+  if (
+    previous instanceof HTMLButtonElement &&
+    next instanceof HTMLButtonElement
+  ) {
+    previous.disabled = index <= 0;
+    next.disabled = index === -1 || index === records.length - 1;
+    if (
+      document.activeElement === previous &&
+      previous.disabled &&
+      !next.disabled
+    ) {
+      next.focus({ preventScroll: true });
+    } else if (
+      document.activeElement === next &&
+      next.disabled &&
+      !previous.disabled
+    ) {
+      previous.focus({ preventScroll: true });
+    }
+  }
+}
+
+/** @param {number} offset - Direction within the current review list. */
+function moveProfile(offset) {
+  const records = reviewRecords(true);
+  const index = records.findIndex((record) => record.id === focusedId);
+  const record = index === -1 ? undefined : records[index + offset];
+  if (!record) {
+    return;
+  }
+  focusedId = record.id;
+  profileTab = "overview";
+  renderProfile();
+  byId("profile-content").scrollTop = 0;
+}
+
+function renderProfile() {
+  const record = view?.records.find((record) => record.id === focusedId);
+  if (!record) {
+    dialog.close();
+    return;
+  }
+  renderProfileNavigation();
+  const content = byId("profile-content");
+  const { scrollTop } = content;
+  const focusedAction = dialog.contains(document.activeElement)
+    ? document.activeElement?.id
+    : "";
+  byId("profile-identity").replaceChildren(candidateHeading(record, true));
+  renderProfileTabs(record);
+  content.replaceChildren(detailsContent(record));
+  let status = "Unreviewed";
+  if (state.removedIds.includes(record.id)) {
+    status = "No";
+  } else if (state.selectedIds.includes(record.id)) {
+    status = "Yes";
+  } else if (state.maybeIds.includes(record.id)) {
+    status = "Maybe";
+  }
+  const decision = element("span", status, "decision-status");
+  decision.setAttribute("role", "status");
+  byId("profile-actions").replaceChildren(
+    decision,
+    reviewActions(record, true)
+  );
+  if (focusedAction) {
+    const action = document.querySelector(`#${CSS.escape(focusedAction)}`);
+    if (action instanceof HTMLElement) {
+      action.focus({ preventScroll: true });
+    }
+  }
+  content.scrollTop = scrollTop;
+}
+
+/** @param {HTMLElement} container - Results container. */
+function readingPosition(container) {
+  const focused = document.activeElement;
+  const focusId =
+    focused instanceof HTMLElement && container.contains(focused)
+      ? focused.id
+      : "";
+  const anchor = [
+    ...container.querySelectorAll("article[data-candidate-id]"),
+  ].find((card) => card.getBoundingClientRect().bottom > 0);
+  return {
+    anchorId:
+      anchor instanceof HTMLElement ? anchor.dataset.candidateId : undefined,
+    anchorTop: anchor?.getBoundingClientRect().top,
+    focusId,
+    scroll: container.scrollLeft,
+  };
+}
+
+/** @param {HTMLElement} container - Results container. @param {ReturnType<typeof readingPosition>} position - Previous position. @param {boolean} preservePosition - Whether results changed externally. */
+function restorePosition(container, position, preservePosition) {
+  const { anchorId, anchorTop, focusId, scroll } = position;
+  container.scrollLeft = scroll;
+  if (preservePosition && anchorId && anchorTop !== undefined) {
+    const nextAnchor = [
+      ...container.querySelectorAll("article[data-candidate-id]"),
+    ].find(
+      (card) =>
+        card instanceof HTMLElement && card.dataset.candidateId === anchorId
+    );
+    if (nextAnchor) {
+      window.scrollBy(0, nextAnchor.getBoundingClientRect().top - anchorTop);
+    }
+  }
+  if (focusId) {
+    const focused = document.querySelector(`#${CSS.escape(focusId)}`);
+    if (focused instanceof HTMLElement) {
+      focused.focus({ preventScroll: true });
+    }
+  }
+}
+
+function renderBatchNotice() {
+  const available = [...pendingIds].filter(
+    (id) => !state.removedIds.includes(id)
+  );
+  byId("new-batch").hidden = available.length === 0;
+  byId("new-batch-count").textContent =
+    `${available.length} new candidates added`;
+  byId("batch-context").hidden = activeList !== "new";
+}
+
+/** @param {ReturnType<typeof pageOf<Candidate>>} page - Current page. */
+function renderPagination(page) {
+  pages.set(activeList, page.page);
+  for (const position of ["top", "bottom"]) {
+    byId(`pagination-${position}`).hidden = page.total <= 20;
+    byId(`page-range-${position}`).textContent =
+      `${page.start}–${page.end} of ${page.total}`;
+    const previous = byId(`previous-${position}`);
+    const next = byId(`next-${position}`);
+    if (
+      previous instanceof HTMLButtonElement &&
+      next instanceof HTMLButtonElement
+    ) {
+      previous.disabled = page.page === 0;
+      next.disabled = page.page === page.pages - 1;
+    }
+  }
+}
+
+/** @param {boolean} [preservePosition] - Keep the reading position on live updates. */
+function renderResults(preservePosition = false) {
+  if (!view) {
+    return;
+  }
+  const records = reviewRecords();
+  const page = pageOf(records, pages.get(activeList) ?? 0);
+  const container = byId("results");
+  const position = readingPosition(container);
+  container.replaceChildren();
+  renderReviewLists();
+  renderPagination(page);
+  renderBatchNotice();
+  if (records.length === 0) {
+    const messages = new Map([
+      [
+        "unreviewed",
+        "You have reviewed every candidate. Check Yes or Maybe, or ask your agent for more.",
+      ],
+      [
+        "maybe",
+        "No candidates marked Maybe. Use Maybe when you need more information.",
+      ],
+      [
+        "shortlist",
+        "No candidates marked Yes yet. Choose Yes on a candidate card.",
+      ],
+      ["removed", "No candidates marked No. You can undo a No decision here."],
+    ]);
+    const message =
+      messages.get(activeList) ??
+      "No candidates to review. Your agent can send another batch.";
+    container.append(element("p", message, "empty"));
+  } else {
+    const grid = element("div", "", "cards");
+    for (const record of page.records) {
+      grid.append(candidateCard(record));
+    }
+    container.append(grid);
+  }
+  restorePosition(container, position, preservePosition);
+}
+
+async function refresh() {
+  fetchSequence += 1;
+  const sequence = fetchSequence;
+  try {
+    const next = readView(await api(base));
+    if (sequence !== fetchSequence) {
+      return;
+    }
+    if (view) {
+      for (const id of addedRecordIds(view.records, next.records)) {
+        pendingIds.add(id);
+      }
+    }
+    const previousRevision = view?.revision;
+    const previousState = JSON.stringify(state);
+    if (!view || savedStateVersion === stateVersion) {
+      ({ state } = next);
+    }
+    const ids = new Set(next.records.map((record) => record.id));
+    for (const id of pendingIds) {
+      if (!ids.has(id)) {
+        pendingIds.delete(id);
+      }
+    }
+    state.selectedIds = state.selectedIds.filter((id) => ids.has(id));
+    state.removedIds = state.removedIds.filter((id) => ids.has(id));
+    state.maybeIds = state.maybeIds.filter((id) => ids.has(id));
+    view = next;
+    byId("welcome").hidden = true;
+    byId("workspace").hidden = false;
+    byId("error").hidden = true;
+    byId("view-title").textContent = view.title;
+    document.title = `${view.title} · Scout Mesh`;
+    if (
+      previousRevision !== view.revision ||
+      previousState !== JSON.stringify(state)
+    ) {
+      renderResults(true);
+    }
+    if (
+      dialog.open &&
+      (previousRevision !== view.revision ||
+        previousState !== JSON.stringify(state))
+    ) {
+      renderProfile();
+    }
+  } catch (error) {
+    showError(error);
+  }
+}
+
+/** @param {string} position - Pagination bar location. @param {string} direction - Page direction. @param {number} offset - Page increment. */
+function bindPageButton(position, direction, offset) {
+  byId(`${direction}-${position}`).addEventListener("click", () => {
+    pages.set(activeList, (pages.get(activeList) ?? 0) + offset);
+    renderResults();
+    byId("results").scrollIntoView({ block: "start" });
+    byId(`page-range-top`).focus({ preventScroll: true });
+  });
+}
+for (const position of ["top", "bottom"]) {
+  bindPageButton(position, "previous", -1);
+  bindPageButton(position, "next", 1);
+}
+byId("view-new").addEventListener("click", () => {
+  returnScroll = window.scrollY;
+  batchIds = new Set(pendingIds);
+  pendingIds.clear();
+  activeList = "new";
+  pages.set("new", 0);
+  renderResults();
+  byId("batch-context").scrollIntoView({ block: "start" });
+  byId("back-to-candidates").focus({ preventScroll: true });
+});
+byId("back-to-candidates").addEventListener("click", () => {
+  activeList = "candidates";
+  renderResults();
+  window.scrollTo(0, returnScroll);
+  byId("list-candidates").focus({ preventScroll: true });
+});
+
+/** @param {string} list - Candidate list to show. */
+function bindReviewList(list) {
+  byId(`list-${list}`).addEventListener("click", () => {
+    activeList = list;
+    renderResults();
+  });
+}
+for (const list of [
+  "candidates",
+  "unreviewed",
+  "shortlist",
+  "maybe",
+  "removed",
+]) {
+  bindReviewList(list);
+}
+byId("undo-button").addEventListener("click", () => {
+  if (!lastRemoval) {
+    return;
+  }
+  const record = view?.records.find((record) => record.id === lastRemoval?.id);
+  if (record) {
+    reviewCandidate(record, "undo");
+  }
+  lastRemoval = null;
+  byId("undo-removal").hidden = true;
+});
+byId("profile-previous").addEventListener("click", () => {
+  moveProfile(-1);
+});
+byId("profile-next").addEventListener("click", () => {
+  moveProfile(1);
+});
+byId("close-profile").addEventListener("click", () => {
+  dialog.close();
+});
+dialog.addEventListener("close", () => {
+  const opener = document.querySelector(
+    `#${CSS.escape(`profile-${encodeURIComponent(profileOpenerId)}`)}`
+  );
+  if (opener instanceof HTMLElement) {
+    opener.focus({ preventScroll: true });
+  } else {
+    byId(`list-${activeList === "new" ? "candidates" : activeList}`).focus({
+      preventScroll: true,
+    });
+  }
+});
+async function refreshViews() {
+  try {
+    const views = readSummaries(await api("/api/views"));
+    byId("views").replaceChildren(
+      ...views.map((view) => {
+        const link = element("a", "", "view-link");
+        link.href = `/?view=${encodeURIComponent(view.id)}`;
+        link.append(
+          element("strong", view.title),
+          element("span", `${view.count} candidates →`)
+        );
+        return link;
+      })
+    );
+    byId("error").hidden = true;
+  } catch (error) {
+    showError(error);
+  }
+}
+
+await unlockViewer();
+
+if (viewId) {
+  await refresh();
+  const events = new EventSource(`${base}/events`);
+  events.addEventListener("open", () => {
+    byId("connection-warning").hidden = true;
+  });
+  events.addEventListener("message", () => {
+    void refresh();
+  });
+  events.addEventListener("error", () => {
+    byId("connection-warning").hidden = false;
+  });
+  window.addEventListener("pagehide", () => {
+    events.close();
+  });
+} else {
+  await refreshViews();
+  setInterval(() => {
+    void refreshViews();
+  }, 3000);
+}