@scoutmesh/viewer 0.2.0

package/dist/public/auth.js

@@ -0,0 +1,55 @@
+import { isObject } from "./data.js";
+
+/** Unlock the page without putting credentials in its URL or browser storage. */
+export async function unlockViewer() {
+  const response = await fetch("/api/session");
+  /** @type {unknown} */
+  const session = await response.json();
+  if (isObject(session) && session.authorized) {
+    return;
+  }
+  const panel = document.querySelector("#unlock");
+  const form = document.querySelector("#unlock-form");
+  const input = document.querySelector("#access-token");
+  const errorElement = document.querySelector("#unlock-error");
+  const welcome = document.querySelector("#welcome");
+  if (
+    !(panel instanceof HTMLElement) ||
+    !(form instanceof HTMLFormElement) ||
+    !(input instanceof HTMLInputElement) ||
+    !(errorElement instanceof HTMLElement) ||
+    !(welcome instanceof HTMLElement)
+  ) {
+    throw new Error("Missing unlock form.");
+  }
+  welcome.hidden = true;
+  panel.hidden = false;
+  input.focus();
+  /** @type {PromiseWithResolvers<void>} */
+  const { promise, resolve } = Promise.withResolvers();
+  /** @param {Event} event - Browser submit event. */
+  const submit = async (event) => {
+    event.preventDefault();
+    try {
+      const result = await fetch("/api/session", {
+        body: JSON.stringify({ token: input.value.trim() }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!result.ok) {
+        throw new Error("The access token did not match. Try again.");
+      }
+      input.value = "";
+      panel.hidden = true;
+      welcome.hidden = false;
+      resolve();
+    } catch (error) {
+      errorElement.textContent =
+        error instanceof Error ? error.message : "Could not unlock viewer.";
+    }
+  };
+  form.addEventListener("submit", (event) => {
+    void submit(event);
+  });
+  await promise;
+}

package/dist/public/data.js

@@ -0,0 +1,105 @@
+/** @param {unknown} value - JSON value to inspect. @returns {value is Record<string, unknown>} */
+export function isObject(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+
+/** @param {unknown} value - JSON value to inspect. @returns {value is string[]} */
+function isStrings(value) {
+  return (
+    Array.isArray(value) && value.every((item) => typeof item === "string")
+  );
+}
+
+/** @param {unknown} value - Candidate field to inspect. @returns {value is import('../types.ts').Cell} */
+function isCell(value) {
+  return (
+    value === null ||
+    typeof value === "string" ||
+    typeof value === "boolean" ||
+    (typeof value === "number" && Number.isFinite(value)) ||
+    isStrings(value)
+  );
+}
+
+/** @param {unknown} value - Candidate to inspect. @returns {value is import('../types.ts').Candidate} */
+function isCandidate(value) {
+  return (
+    isObject(value) &&
+    typeof value.id === "string" &&
+    typeof value.name === "string" &&
+    Object.values(value).every(isCell)
+  );
+}
+
+/** @param {unknown} value - API response to inspect. @returns {value is import('../types.ts').View} */
+function isView(value) {
+  if (!isObject(value) || !isObject(value.layout) || !isObject(value.state)) {
+    return false;
+  }
+  const { layout, state } = value;
+  return (
+    typeof value.id === "string" &&
+    typeof value.title === "string" &&
+    typeof value.revision === "number" &&
+    typeof value.updatedAt === "string" &&
+    Array.isArray(value.records) &&
+    value.records.every(isCandidate) &&
+    (layout.type === "table" || layout.type === "cards") &&
+    isStrings(layout.columns) &&
+    typeof state.filter === "string" &&
+    isStrings(state.selectedIds) &&
+    isStrings(state.removedIds) &&
+    isStrings(state.maybeIds) &&
+    typeof state.sortBy === "string" &&
+    (state.sortDirection === "asc" || state.sortDirection === "desc")
+  );
+}
+
+/** @param {unknown} value - Complete view response from the local API. */
+export function readView(value) {
+  if (!isView(value)) {
+    throw new Error("The local server returned an invalid view.");
+  }
+  return value;
+}
+
+/** @param {unknown} value - List entry from the local API. @returns {value is {id: string, title: string, count: number}} */
+function isSummary(value) {
+  return (
+    isObject(value) &&
+    typeof value.id === "string" &&
+    typeof value.title === "string" &&
+    typeof value.count === "number"
+  );
+}
+
+/** @param {unknown} value - List response from the local API. */
+export function readSummaries(value) {
+  if (!Array.isArray(value) || !value.every(isSummary)) {
+    throw new Error("The local server returned an invalid view list.");
+  }
+  return value;
+}
+
+/** @template T @param {T[]} records - Filtered records in their existing order. @param {number} requestedPage - Zero-based page. */
+export function pageOf(records, requestedPage) {
+  const size = 20;
+  const pages = Math.max(1, Math.ceil(records.length / size));
+  const page = Math.max(0, Math.min(requestedPage, pages - 1));
+  return {
+    end: Math.min((page + 1) * size, records.length),
+    page,
+    pages,
+    records: records.slice(page * size, (page + 1) * size),
+    start: records.length === 0 ? 0 : page * size + 1,
+    total: records.length,
+  };
+}
+
+/** @param {import('../types.ts').Candidate[]} previous - Previous snapshot. @param {import('../types.ts').Candidate[]} next - Incoming snapshot. */
+export function addedRecordIds(previous, next) {
+  const known = new Set(previous.map((record) => record.id));
+  return next
+    .filter((record) => !known.has(record.id))
+    .map((record) => record.id);
+}

package/dist/public/index.html

@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Scout Mesh · Local viewer</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <script type="module" src="/app.js"></script>
+  </head>
+  <body>
+    <main>
+      <section id="unlock" class="welcome" hidden>
+        <h1>Unlock your candidate workspace</h1>
+        <p>Your agent can unlock this page using the local viewer token.</p>
+        <form id="unlock-form">
+          <label for="access-token">Local access token</label>
+          <input
+            id="access-token"
+            type="password"
+            autocomplete="off"
+            required
+          />
+          <button class="button" type="submit">Unlock workspace</button>
+          <p id="unlock-error" role="alert"></p>
+        </form>
+        <small
+          >On this computer, run <code>scoutmesh-viewer token</code> to get the
+          token.</small
+        >
+      </section>
+      <section id="welcome" class="welcome">
+        <a class="brand" href="/">scout<span>mesh</span></a>
+        <h1>Your results, beyond the chat.</h1>
+        <p>
+          Ask your agent to send candidates to this viewer. Browse profiles here
+          while you keep the conversation going.
+        </p>
+        <div id="views" class="view-list"></div>
+        <div class="setup-note">
+          <span>Waiting for your first results?</span
+          ><code>npm run viewer:demo</code
+          ><small>Results and review decisions stay on this computer.</small>
+        </div>
+      </section>
+      <section id="workspace" hidden>
+        <h1 id="view-title"></h1>
+        <nav class="review-tabs" aria-label="Candidate lists">
+          <button id="list-candidates" type="button" aria-pressed="false">
+            All
+          </button>
+          <button id="list-unreviewed" type="button" aria-pressed="true">
+            Unreviewed
+          </button>
+          <button id="list-shortlist" type="button" aria-pressed="false">
+            Yes
+          </button>
+          <button id="list-maybe" type="button" aria-pressed="false">
+            Maybe
+          </button>
+          <button id="list-removed" type="button" aria-pressed="false">
+            No
+          </button>
+        </nav>
+        <p id="review-feedback" class="muted" role="status"></p>
+        <div id="undo-removal" class="undo-removal" hidden>
+          <span id="removal-message"></span>
+          <button id="undo-button" type="button" class="text-button">
+            Undo
+          </button>
+        </div>
+        <p
+          id="connection-warning"
+          class="connection-warning"
+          role="status"
+          hidden
+        >
+          Connection lost. Reconnecting…
+        </p>
+        <div id="new-batch" class="new-batch" hidden>
+          <span id="new-batch-count" role="status"></span>
+          <button id="view-new" class="button" type="button">View new</button>
+        </div>
+        <div id="batch-context" class="batch-context" hidden>
+          <strong>New candidates</strong>
+          <button id="back-to-candidates" class="text-button" type="button">
+            Back to candidates
+          </button>
+        </div>
+        <nav
+          id="pagination-top"
+          class="pagination"
+          aria-label="Candidate pages (top)"
+          hidden
+        >
+          <button id="previous-top" class="button" type="button">
+            Previous
+          </button>
+          <span id="page-range-top" tabindex="-1" role="status"></span>
+          <button id="next-top" class="button" type="button">Next</button>
+        </nav>
+        <div id="results" class="results"></div>
+        <nav
+          id="pagination-bottom"
+          class="pagination"
+          aria-label="Candidate pages (bottom)"
+          hidden
+        >
+          <button id="previous-bottom" class="button" type="button">
+            Previous
+          </button>
+          <span id="page-range-bottom" tabindex="-1" role="status"></span>
+          <button id="next-bottom" class="button" type="button">Next</button>
+        </nav>
+      </section>
+      <p id="error" role="alert" hidden></p>
+    </main>
+    <dialog id="profile" aria-labelledby="profile-name">
+      <div class="profile-top">
+        <nav class="profile-navigation" aria-label="Candidate navigation">
+          <button
+            id="profile-previous"
+            class="button quiet"
+            type="button"
+            aria-label="Previous candidate"
+          >
+            Previous
+          </button>
+          <span
+            id="profile-position"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          ></span>
+          <button
+            id="profile-next"
+            class="button quiet"
+            type="button"
+            aria-label="Next candidate"
+          >
+            Next
+          </button>
+        </nav>
+        <button id="close-profile" class="button quiet" type="button">
+          Close
+        </button>
+      </div>
+      <div id="profile-identity"></div>
+      <div id="profile-tabs" role="tablist" aria-label="Profile sections"></div>
+      <div id="profile-content" role="tabpanel" tabindex="0"></div>
+      <footer id="profile-actions" aria-label="Review decision"></footer>
+    </dialog>
+  </body>
+</html>