thursday-agent 0.16.0 → 0.17.0

package/skills/artifact/runtime/document/markdown.mjs

@@ -17,9 +17,12 @@
 //   - [x] done / - [ ] next      a checklist the reader can tick
 //   ![What it shows](photo.jpg) alone in its paragraph: a picture with its caption
 //   | Item | Value |             a column aligned right (---:) is read as numbers
+//   a claim.[^1]                 a footnote, numbered as it is first cited, its line
+//   [^1]: Where it comes from     anywhere, gathered at the end of the document
 //
 // HTML written inside the Markdown passes through untouched, for tabs, a chip, a figure a
 // chart is drawn into. Comments are dropped: the outlines' guidance never reaches the page.
+import { markSvg } from "../shell/wear.mjs";
 import { Marked, Tokenizer } from "../vendor/marked.mjs";
 
 const escape = (text) =>
@@ -157,6 +160,52 @@ const markdown = new Marked({
   },
 });
 
+/** A footnote's own line, `[^id]: what it says`, and a citation of one in the text. */
+const NOTE_LINE = /^\[\^([^\]\s]+)\]:\s*(.+)$/;
+const CITE = /\[\^([^\]\s]+)\](?!:)/g;
+const FENCE = /^\s*(```|~~~)/;
+
+/**
+ * `[^id]` citations and `[^id]: …` lines as the document's own footnotes (quick.css): each
+ * citation a numbered link, in the order first cited, and the notes gathered at the end.
+ * Code is left as written; a citation with no note, or a note never cited, stays as text.
+ */
+function footnotes(text) {
+  const notes = new Map();
+  const kept = [];
+  let fenced = false;
+  for (const line of text.split("\n")) {
+    if (FENCE.test(line)) fenced = !fenced;
+    const note = fenced ? null : NOTE_LINE.exec(line);
+    if (note) notes.set(note[1], note[2]);
+    else kept.push(line);
+  }
+  if (!notes.size) return { text, notes: "" };
+  const order = [];
+  const anchor = (id) => `fn-${id.replace(/[^\p{L}\p{N}_-]/gu, "-")}`;
+  fenced = false;
+  const cited = kept.map((line) => {
+    if (FENCE.test(line)) fenced = !fenced;
+    if (fenced) return line;
+    return line.replace(CITE, (whole, id) => {
+      if (!notes.has(id)) return whole;
+      if (!order.includes(id)) order.push(id);
+      const n = order.indexOf(id) + 1;
+      return `<sup class="fn"><a href="#${anchor(id)}" id="${anchor(id)}-ref">${n}</a></sup>`;
+    });
+  });
+  const items = order.map(
+    (id) =>
+      `<li id="${anchor(id)}">${markdown.parseInline(notes.get(id))} <a class="fn-back" href="#${anchor(id)}-ref" aria-label="Back to the text">↩</a></li>`,
+  );
+  return {
+    text: cited.join("\n"),
+    notes: items.length
+      ? `\n<ol class="footnotes">\n${items.join("\n")}\n</ol>\n`
+      : "",
+  };
+}
+
 /** The keys the line over and under the title is made of. */
 const KEY_LINE = /^(kicker|date|by|status|tone)\s*:\s*\S/i;
 
@@ -189,14 +238,21 @@ function frontMatter(text) {
 /** The document's body, as the page's put writes it, from a Markdown text. */
 export function documentBody(text) {
   const { meta, rest } = frontMatter(text.replace(/<!--[\s\S]*?-->/g, ""));
-  let html = markdown.parse(rest);
+  const cited = footnotes(rest);
+  let html = markdown.parse(cited.text) + cited.notes;
 
   // `by` may name several, split by commas: who a memo is from and for, who attended
   const who = (meta.by ?? "")
     .split(",")
     .map((one) => one.trim())
     .filter(Boolean)
-    .map((one) => `<span class="chip who">${escape(one)}</span>`);
+    .map((one) =>
+      // The bot writing now wears its own face, as the page's head does
+      one.toLowerCase() === process.env.THURSDAY_BOT?.trim().toLowerCase() &&
+      markSvg(14)
+        ? `<span class="chip who bot">${markSvg(14)}${escape(one)}</span>`
+        : `<span class="chip who">${escape(one)}</span>`,
+    );
   const tone = ["good", "warn", "bad"].includes(meta.tone)
     ? ` ${meta.tone}`
     : "";

package/skills/artifact/runtime/document/quick.css

@@ -296,6 +296,31 @@ body.pg-toc-shut .pg-toc {
 :where(.pg-paper) .chip.who::before {
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
 }
+:where(.pg-paper) .chip.who.bot::before {
+  display: none;
+}
+/* The bot that wrote it, by its face (shell/wear.mjs markSvg) */
+:where(.pg-paper) .chip .sh-mark {
+  margin-right: 0.3rem;
+  vertical-align: -0.15em;
+}
+/* How long it takes to read, worked out as it opens (quick.js); never kept in the file */
+:where(.pg-paper) .chip.read::before {
+  content: "";
+  display: inline-block;
+  width: 0.85em;
+  height: 0.85em;
+  margin-right: 0.3rem;
+  vertical-align: -0.1em;
+  background: currentColor;
+  opacity: 0.7;
+  mask:
+    center / contain no-repeat
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
+}
+:where(.pg-paper) .chip.read {
+  color: var(--muted);
+}
 :where(.pg-paper) .chip.status::after {
   content: "";
   display: inline-block;
@@ -369,6 +394,47 @@ body.pg-toc-shut .pg-toc {
 :where(.pg-paper) sup {
   line-height: 0;
 }
+:where(.pg-paper) sup.fn a {
+  padding: 0 0.15em;
+  font-weight: 600;
+  text-decoration: none;
+}
+:where(.pg-paper) .fn-back {
+  text-decoration: none;
+}
+/* A footnote read where it is cited: the note, shown beside the number (quick.js) */
+#fn-card {
+  position: absolute;
+  z-index: 30;
+  max-width: 22rem;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+#fn-card .fn-back {
+  display: none;
+}
+/* A table's column put in order by a press on its heading, while reading (quick.js) */
+body:not(.pg-editing) :where(.pg-paper) th[data-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+body:not(.pg-editing) :where(.pg-paper) th[data-sort]:hover {
+  color: var(--fg);
+}
+:where(.pg-paper) th[aria-sort]::after {
+  content: "↑";
+  margin-left: 0.3rem;
+  color: var(--accent, currentColor);
+}
+:where(.pg-paper) th[aria-sort="descending"]::after {
+  content: "↓";
+}
 :where(.pg-paper) ol.footnotes {
   margin-top: 2.4rem;
   padding: 1rem 0 0 1.3rem;

package/skills/artifact/runtime/document/quick.html

@@ -34,6 +34,7 @@
   <details class="sh-menu">
     {{shell.export}}
     <div class="sh-list">
+      <button type="button" class="sh-item" data-docx>Word file<small>.docx</small></button>
       <button type="button" class="sh-item" data-export="print">Print<small>PDF</small></button>
       {{shell.download}}
     </div>

package/skills/artifact/runtime/document/quick.js

@@ -160,6 +160,130 @@
   contents();
   spy();
 
+  /* ── reading: a column in order, a footnote in place, the time it takes ──── */
+
+  // Each table's rows in the order they were written: a sort is a view of the page, and
+  // the file keeps that order (shell.clean puts it back in the copy it keeps)
+  const written = new WeakMap();
+  const collator = new Intl.Collator(undefined, { numeric: true });
+  const numberIn = (text) => {
+    const n = Number.parseFloat(text.replace(/[^\d.-]/g, ""));
+    return Number.isFinite(n) ? n : null;
+  };
+  const tables = () =>
+    [...paper.querySelectorAll("table")].filter(
+      (table) => table.tHead?.rows[0] && table.tBodies[0]?.rows.length > 1,
+    );
+  for (const table of tables()) {
+    [...table.tBodies[0].rows].forEach((row, at) => {
+      written.set(row, at);
+    });
+    for (const th of table.tHead.rows[0].cells) {
+      th.dataset.sort = "";
+      th.tabIndex = 0;
+    }
+  }
+  /** Every table back in its written order, its headings unmarked. */
+  const unsort = () => {
+    for (const table of tables()) {
+      const rows = [...table.tBodies[0].rows];
+      rows.sort((a, b) => (written.get(a) ?? 0) - (written.get(b) ?? 0));
+      table.tBodies[0].append(...rows);
+      for (const th of table.tHead.rows[0].cells)
+        th.removeAttribute("aria-sort");
+    }
+  };
+  /** Up, down, then as written: one heading's column at a time. */
+  const sortBy = (th) => {
+    const table = th.closest("table");
+    const body = table.tBodies[0];
+    const at = th.cellIndex;
+    const was = th.getAttribute("aria-sort");
+    const next = was === "ascending" ? "descending" : was ? null : "ascending";
+    for (const one of table.tHead.rows[0].cells)
+      one.removeAttribute("aria-sort");
+    const rows = [...body.rows];
+    const key = (row) => row.cells[at]?.textContent.trim() ?? "";
+    const numeric =
+      th.classList.contains("num") ||
+      rows.every((row) => numberIn(key(row)) !== null);
+    if (next) {
+      th.setAttribute("aria-sort", next);
+      const sign = next === "ascending" ? 1 : -1;
+      rows.sort(
+        (a, b) =>
+          sign *
+          (numeric
+            ? numberIn(key(a)) - numberIn(key(b))
+            : collator.compare(key(a), key(b))),
+      );
+    } else rows.sort((a, b) => (written.get(a) ?? 0) - (written.get(b) ?? 0));
+    body.append(...rows);
+  };
+  const browsing = () => !document.body.classList.contains("pg-editing");
+  paper.addEventListener("click", (event) => {
+    const th = event.target.closest?.("th[data-sort]");
+    if (th && browsing()) sortBy(th);
+  });
+  paper.addEventListener("keydown", (event) => {
+    const th = event.target.closest?.("th[data-sort]");
+    if (!th || !browsing() || (event.key !== "Enter" && event.key !== " "))
+      return;
+    event.preventDefault();
+    sortBy(th);
+  });
+
+  // A footnote's note, beside the number that cites it, while the pointer or focus is there
+  let card = null;
+  const hideNote = () => card?.remove();
+  const showNote = (link) => {
+    const note = document.getElementById(
+      decodeURIComponent(link.hash.slice(1)),
+    );
+    if (!note) return;
+    card ??= Object.assign(document.createElement("div"), { id: "fn-card" });
+    card.setAttribute("role", "tooltip");
+    card.innerHTML = note.innerHTML;
+    document.body.append(card);
+    const box = link.getBoundingClientRect();
+    const left = Math.min(
+      box.left + scrollX,
+      scrollX + document.documentElement.clientWidth - card.offsetWidth - 12,
+    );
+    card.style.left = `${Math.max(scrollX + 12, left)}px`;
+    card.style.top = `${box.bottom + scrollY + 6}px`;
+  };
+  paper.addEventListener("mouseover", (event) => {
+    const link = event.target.closest?.("sup.fn a");
+    if (link && browsing()) showNote(link);
+  });
+  paper.addEventListener("mouseout", (event) => {
+    if (event.target.closest?.("sup.fn a")) hideNote();
+  });
+  paper.addEventListener("focusin", (event) => {
+    const link = event.target.closest?.("sup.fn a");
+    if (link && browsing()) showNote(link);
+    else hideNote();
+  });
+  addEventListener("scroll", hideNote, { passive: true });
+
+  // How long it reads, beside the other facts under the title, in the reader's language
+  const byline = paper.querySelector(".byline");
+  if (byline && typeof Intl.Segmenter === "function") {
+    let words = 0;
+    const segmenter = new Intl.Segmenter(undefined, { granularity: "word" });
+    for (const piece of segmenter.segment(paper.textContent))
+      if (piece.isWordLike) words++;
+    const minutes = Math.max(1, Math.round(words / 200));
+    const chip = document.createElement("span");
+    chip.className = "chip read";
+    chip.textContent = new Intl.NumberFormat(
+      document.documentElement.lang || undefined,
+      { style: "unit", unit: "minute", unitDisplay: "short" },
+    ).format(minutes);
+    byline.append(" ", chip);
+  }
+
   /* ── keeping it (shell.edits) ────────────────────────────────────────────── */
 
   const changed = () => shell.edits.changed();
@@ -203,6 +327,30 @@
     }
     for (const el of copy.querySelectorAll(".pg-hot"))
       el.classList.remove("pg-hot");
+    // What reading put on the page: a column's order, the time it takes, a note shown
+    const live = [...paper.querySelectorAll("table")];
+    copy.querySelectorAll("#paper table").forEach((table, at) => {
+      const body = table.tBodies[0];
+      const order = [...(live[at]?.tBodies[0]?.rows ?? [])].map((row) =>
+        written.get(row),
+      );
+      if (
+        body &&
+        order.length === body.rows.length &&
+        order.every((n) => n !== undefined)
+      ) {
+        const rows = [...body.rows];
+        body.append(
+          ...order.map((_, i) => rows[order.indexOf(i)]).filter(Boolean),
+        );
+      }
+      for (const th of table.querySelectorAll("th")) {
+        th.removeAttribute("aria-sort");
+        th.removeAttribute("data-sort");
+        th.removeAttribute("tabindex");
+      }
+    });
+    for (const el of copy.querySelectorAll(".chip.read, #fn-card")) el.remove();
     for (const tabs of copy.querySelectorAll(".tabs")) {
       tabs.querySelector('[role="tablist"]')?.remove();
       for (const panel of tabs.querySelectorAll("[role=tabpanel]")) {
@@ -264,6 +412,12 @@
   };
 
   shell.edits.onToggle((on) => {
+    // Edits are made on the page as written: no column in order, no reading time among the chips
+    if (on) {
+      unsort();
+      hideNote();
+      for (const chip of paper.querySelectorAll(".chip.read")) chip.remove();
+    }
     document.body.classList.toggle("pg-editing", on);
     paper.contentEditable = on ? "true" : "false";
     seal();

package/skills/artifact/runtime/document/word.mjs

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+/**
+ * A document's page as a Word file: the page opened in a headless browser of its own and
+ * turned into a .docx there by the page's own converter (docx.js), as Export › Word file does
+ * for someone reading it — the kit's converter as it is now, over the copy the page was made
+ * with, so a page made before a fix to it gets the fix. Prints the file written, and the
+ * pictures that could not be put in.
+ *
+ *   node word.mjs <page.html> --out <file.docx>
+ */
+import { readFileSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { serveFolder } from "../../../browser/scripts/serve.mjs";
+import {
+  fail,
+  inPageApart,
+  orFail,
+  parseArgs,
+} from "../../../browser/scripts/session.mjs";
+
+const opts = parseArgs();
+const file = opts._[0] && resolve(opts._[0]);
+if (!file || typeof opts.out !== "string")
+  fail("usage: node word.mjs <page.html> --out <file.docx>");
+const converter = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), "docx.js"),
+  "utf8",
+);
+
+// The page's folder, so pictures beside it load
+const served = await serveFolder(dirname(file));
+try {
+  const done = orFail(
+    await inPageApart(
+      async (page, { url, converter }) => {
+        const tab = await page.context().newPage();
+        try {
+          await tab.setViewportSize({ width: 1024, height: 1400 });
+          await tab.goto(url, { waitUntil: "load" });
+          await tab.evaluate(() => document.fonts.ready);
+          await tab.addScriptTag({ content: converter });
+          return await tab.evaluate(async () => {
+            if (!window.shell?.docx)
+              return { error: "this page is not a document: no #paper in it" };
+            const { bytes, missed } = await window.shell.docx();
+            let text = "";
+            for (let i = 0; i < bytes.length; i += 0x8000)
+              text += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+            return { data: btoa(text), missed };
+          });
+        } finally {
+          await tab.close();
+        }
+      },
+      { url: served.url(basename(file)), converter },
+    ),
+  );
+  writeFileSync(opts.out, Buffer.from(done.data, "base64"));
+  console.log(
+    JSON.stringify({ file: resolve(opts.out), missed: done.missed ?? [] }),
+  );
+} finally {
+  served.close();
+}