thursday-agent 0.11.0 → 0.13.0

package/seed-skills/docs/documents/scripts/lib/browser.mjs

@@ -0,0 +1,259 @@
+// The browser the shell's session already has, used as a typesetter: HTML in, PDF or
+// PNG out. Driven only through the shipped browser skill's session.mjs; a file is
+// served from its own folder on a port the system picks, so two jobs never meet.
+import { execFileSync } from "node:child_process";
+import {
+  copyFileSync,
+  createReadStream,
+  existsSync,
+  readFileSync,
+  statSync,
+  writeFileSync,
+} from "node:fs";
+import { createServer } from "node:http";
+import { basename, dirname, extname, join, resolve, sep } from "node:path";
+import { kitFile, Stop, shippedSkill } from "./kit.mjs";
+
+const TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css",
+  ".js": "text/javascript",
+  ".mjs": "text/javascript",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".pdf": "application/pdf",
+};
+
+/** Where the kit's own files are served, beside the document's folder. */
+const KIT_ROUTE = "/__docs-kit/";
+
+let session = null;
+async function sessionScripts() {
+  if (!session) {
+    session = await import(
+      shippedSkill("browser", "scripts", "session.mjs")
+    ).catch(() => {
+      throw new Stop(
+        "The shipped browser skill's session.mjs is missing; this command prints through the browser.",
+      );
+    });
+    // A job that has not opened its browser yet gets a headless one; an open one is left as it is
+    try {
+      execFileSync("playwright-cli", ["--raw", "eval", "1"], {
+        stdio: "ignore",
+      });
+    } catch {
+      try {
+        execFileSync("playwright-cli", ["open"], { stdio: "ignore" });
+      } catch {
+        throw new Stop(
+          "No browser could be opened (`playwright-cli open` failed): the browser skill's Install section.",
+        );
+      }
+    }
+  }
+  return session;
+}
+
+/** Serves `root` and the kit on a free port; resolves to its base url and a stop. */
+async function serve(root) {
+  const kitRoot = kitFile();
+  const server = createServer((req, res) => {
+    const path = decodeURIComponent(new URL(req.url, "http://x").pathname);
+    const [base, rel] = path.startsWith(KIT_ROUTE)
+      ? [kitRoot, path.slice(KIT_ROUTE.length)]
+      : [root, path];
+    const full = resolve(base, `.${sep}${rel}`);
+    if (
+      !full.startsWith(base + sep) ||
+      !existsSync(full) ||
+      statSync(full).isDirectory()
+    ) {
+      res.writeHead(404).end();
+      return;
+    }
+    res.writeHead(200, {
+      "content-type":
+        TYPES[extname(full).toLowerCase()] ?? "application/octet-stream",
+    });
+    createReadStream(full).pipe(res);
+  });
+  await new Promise((ok) => server.listen(0, "127.0.0.1", ok));
+  return {
+    base: `http://127.0.0.1:${server.address().port}`,
+    close: () => server.close(),
+  };
+}
+
+/**
+ * Inter for Latin, Greek and Cyrillic, served from the kit, so a document prints the same on
+ * every machine; everything else falls through to the system's fonts.
+ */
+function fontCss() {
+  const css = readFileSync(
+    kitFile("@fontsource-variable", "inter", "wght.css"),
+    "utf8",
+  );
+  const italic = readFileSync(
+    kitFile("@fontsource-variable", "inter", "wght-italic.css"),
+    "utf8",
+  );
+  return `${css}\n${italic}`.replaceAll(
+    "url(./files/",
+    `url(${KIT_ROUTE}@fontsource-variable/inter/files/`,
+  );
+}
+
+/**
+ * Opens `file` in a tab of its own, with the kit's fonts, and runs `work(tab, args)` in the
+ * session's VM (not Node: see session.mjs). Resolves to what `work` returned.
+ */
+export async function inTab(file, work, args = {}, { viewport } = {}) {
+  const { inPage, orFail } = await sessionScripts();
+  const server = await serve(dirname(file));
+  try {
+    return orFail(
+      await inPage(
+        async (page, a, h) => {
+          const tab = await page.context().newPage();
+          try {
+            if (a.viewport) await tab.setViewportSize(a.viewport);
+            await tab.goto(a.url, { waitUntil: "load" });
+            await tab.addStyleTag({ content: a.fonts });
+            await tab.evaluate(async () => {
+              await document.fonts.ready;
+              await Promise.all(
+                [...document.images].map((i) => i.decode().catch(() => {})),
+              );
+            });
+            const broken = await tab.evaluate(() =>
+              [...document.images]
+                .filter((i) => !i.naturalWidth)
+                .map((i) => i.getAttribute("src")),
+            );
+            const result = await h.work(tab, a.args);
+            return { result, broken };
+          } catch (error) {
+            return { error: String(error?.message ?? error).slice(0, 800) };
+          } finally {
+            await tab.close();
+          }
+        },
+        {
+          url: `${server.base}/${encodeURIComponent(basename(file))}`,
+          fonts: fontCss(),
+          args,
+          viewport,
+        },
+        { work },
+      ),
+    );
+  } finally {
+    server.close();
+  }
+}
+
+/**
+ * Prints an HTML file to PDF. The page size and margins are the file's own `@page` rule.
+ * Resolves to the pictures that did not load and what overflows the page's width.
+ */
+export async function printPdf(file, out) {
+  const done = await inTab(
+    file,
+    async (tab, { out }) => {
+      await tab.emulateMedia({ media: "print" });
+      // Lay the page out at the printed width, from its own @page rule, to find what
+      // sticks out sideways: print cuts it rather than wrapping it
+      const page = await tab.evaluate(() => {
+        for (const sheet of document.styleSheets)
+          for (const rule of sheet.cssRules ?? [])
+            if (rule instanceof CSSPageRule && !rule.selectorText)
+              return {
+                size: rule.style.getPropertyValue("size"),
+                left: rule.style.getPropertyValue("margin-left"),
+                right: rule.style.getPropertyValue("margin-right"),
+              };
+        return null;
+      });
+      const PX = { mm: 96 / 25.4, cm: 96 / 2.54, in: 96, pt: 96 / 72, px: 1 };
+      const length = (v) => {
+        const m = /^([\d.]+)(mm|cm|in|pt|px)$/.exec(String(v).trim());
+        return m ? Number(m[1]) * PX[m[2]] : null;
+      };
+      const NAMED = {
+        a4: 793.7,
+        a5: 559.4,
+        a3: 1122.5,
+        letter: 816,
+        legal: 816,
+      };
+      const words = String(page?.size ?? "")
+        .toLowerCase()
+        .split(/\s+/);
+      const named = words.find((w) => w in NAMED);
+      let width = named ? NAMED[named] : (length(words[0]) ?? NAMED.letter);
+      if (words.includes("landscape"))
+        width =
+          { a4: 1122.5, a5: 793.7, a3: 1587.4, letter: 1056, legal: 1344 }[
+            named
+          ] ?? width;
+      width -= (length(page?.left) ?? 0) + (length(page?.right) ?? 0);
+      await tab.setViewportSize({ width: Math.round(width), height: 1000 });
+      const wide = await tab.evaluate(() => {
+        const limit = document.documentElement.clientWidth + 1;
+        const found = [];
+        for (const el of document.body.querySelectorAll("*")) {
+          const box = el.getBoundingClientRect();
+          if (box.width && box.right > limit && found.length < 5)
+            found.push(
+              `<${el.tagName.toLowerCase()}${el.className ? ` class="${el.className}"` : ""}> ${(el.textContent ?? "").trim().slice(0, 40)}`,
+            );
+        }
+        return found;
+      });
+      await tab.pdf({
+        path: out,
+        preferCSSPageSize: true,
+        printBackground: true,
+      });
+      return { wide };
+    },
+    { out },
+  );
+  return { broken: done.broken, wide: done.result.wide };
+}
+
+/**
+ * A picture PowerPoint and Word cannot take (WebP, AVIF, GIF, SVG) redrawn as a PNG in `dir`,
+ * by the browser, which reads them all.
+ */
+export async function asPng(file, dir) {
+  const name = basename(file);
+  const out = join(dir, `${name.replace(/\.[^.]+$/, "")}.png`);
+  copyFileSync(file, join(dir, name));
+  const page = join(dir, "picture.html");
+  writeFileSync(
+    page,
+    `<!doctype html><style>html,body{margin:0;background:transparent}img{display:block;max-width:2400px}</style><img src="${encodeURIComponent(name)}">`,
+  );
+  const done = await inTab(
+    page,
+    async (tab, { out }) => {
+      await tab.locator("img").screenshot({ path: out, omitBackground: true });
+    },
+    { out },
+    { viewport: { width: 2400, height: 1600 } },
+  );
+  if (done.broken.length)
+    throw new Stop(`${name} is not a picture the browser can open.`);
+  return out;
+}

package/seed-skills/docs/documents/scripts/lib/deck-chart.mjs

@@ -0,0 +1,150 @@
+// A chart in the deck's PDF twin, drawn as SVG in the deck's colours. The .pptx carries
+// PowerPoint's own chart of the same numbers, which stays editable there.
+import { escapeHtml as esc } from "./kit.mjs";
+
+const PX = 96;
+
+/** The value as the chart labels it: its prefix and unit around a short number. */
+const chartLabel = (c, v) =>
+  `${c.prefix ?? ""}${new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(v)}${v === 0 ? "" : (c.unit ?? "")}`;
+
+export function chartSvg(s, t) {
+  const c = s.chart;
+  const w = s.w * PX;
+  const h = s.h * PX;
+  const kind = c.type ?? "bar";
+  const colors = t.series;
+  const series = c.series.map((one) => ({
+    name: String(one.name ?? ""),
+    values: one.values.map(Number),
+  }));
+  const fmt = (v) => chartLabel(c, v);
+  const legend = series.length > 1 && kind !== "pie" && kind !== "doughnut";
+  const font = `font-family="${esc(t.font)}, sans-serif"`;
+  if (kind === "pie" || kind === "doughnut") {
+    const values = series[0].values;
+    const total = values.reduce((a, b) => a + b, 0) || 1;
+    const r = Math.min(h * 0.42, w * 0.25);
+    const cx = r + 20;
+    const cy = h / 2;
+    let a0 = -Math.PI / 2;
+    const arcs = values
+      .map((v, i) => {
+        const a1 = a0 + (v / total) * Math.PI * 2;
+        const large = a1 - a0 > Math.PI ? 1 : 0;
+        const p = (a) => `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`;
+        const d = `M${cx},${cy} L${p(a0)} A${r},${r} 0 ${large} 1 ${p(a1)} Z`;
+        a0 = a1;
+        return `<path d="${d}" fill="#${colors[i % colors.length]}" stroke="#fff" stroke-width="2"/>`;
+      })
+      .join("");
+    const hole =
+      kind === "doughnut"
+        ? `<circle cx="${cx}" cy="${cy}" r="${r * 0.55}" fill="#${t.bg}"/>`
+        : "";
+    const keys = c.labels
+      .map(
+        (label, i) =>
+          `<rect x="${cx + r + 40}" y="${cy - (c.labels.length * 30) / 2 + i * 30}" width="14" height="14" rx="3" fill="#${colors[i % colors.length]}"/><text x="${cx + r + 64}" y="${cy - (c.labels.length * 30) / 2 + i * 30 + 12}" font-size="16" fill="#${t.ink}" ${font}>${esc(label)} <tspan fill="#${t.soft}">${c.unit === "%" ? "" : `${fmt(values[i])} · `}${Math.round((values[i] / total) * 100)}%</tspan></text>`,
+      )
+      .join("");
+    return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${arcs}${hole}${keys}</svg>`;
+  }
+  const horizontal = kind === "bar" && c.horizontal;
+  const all = series.flatMap((one) => one.values);
+  const max = Math.max(0, ...all);
+  const min = Math.min(0, ...all);
+  const step = niceStep((max - min) / 5);
+  const top = Math.ceil(max / step) * step || step;
+  const bottom = Math.floor(min / step) * step;
+  const padL = horizontal ? 150 : 64;
+  const padB = legend ? 70 : 40;
+  const padT = 14;
+  const plotW = w - padL - 16;
+  const plotH = h - padB - padT;
+  const ticks = [];
+  for (let v = bottom; v <= top + step / 2; v += step) ticks.push(v);
+  const n = c.labels.length;
+  const out = [];
+  if (horizontal) {
+    const sx = (v) => padL + ((v - bottom) / (top - bottom)) * plotW;
+    for (const v of ticks)
+      out.push(
+        `<line x1="${sx(v)}" x2="${sx(v)}" y1="${padT}" y2="${padT + plotH}" stroke="#${t.rule}"/><text x="${sx(v)}" y="${padT + plotH + 22}" font-size="13" text-anchor="middle" fill="#${t.soft}" ${font}>${fmt(v)}</text>`,
+      );
+    const band = plotH / n;
+    const bh = (band * 0.7) / series.length;
+    c.labels.forEach((label, i) => {
+      out.push(
+        `<text x="${padL - 10}" y="${padT + band * i + band / 2 + 5}" font-size="14" text-anchor="end" fill="#${t.ink}" ${font}>${esc(label)}</text>`,
+      );
+      series.forEach((one, k) => {
+        const y = padT + band * i + band * 0.15 + bh * k;
+        out.push(
+          `<rect x="${sx(Math.min(0, one.values[i]))}" y="${y}" width="${Math.abs(sx(one.values[i]) - sx(0))}" height="${bh - 2}" fill="#${colors[k % colors.length]}"/>`,
+        );
+        if (c.values !== false && series.length === 1)
+          out.push(
+            `<text x="${sx(one.values[i]) + 6}" y="${y + bh / 2 + 4}" font-size="13" fill="#${t.ink}" ${font}>${fmt(one.values[i])}</text>`,
+          );
+      });
+    });
+  } else {
+    const sy = (v) => padT + plotH - ((v - bottom) / (top - bottom)) * plotH;
+    for (const v of ticks)
+      out.push(
+        `<line x1="${padL}" x2="${padL + plotW}" y1="${sy(v)}" y2="${sy(v)}" stroke="#${t.rule}"/><text x="${padL - 10}" y="${sy(v) + 4}" font-size="13" text-anchor="end" fill="#${t.soft}" ${font}>${fmt(v)}</text>`,
+      );
+    const band = plotW / n;
+    c.labels.forEach((label, i) => {
+      out.push(
+        `<text x="${padL + band * i + band / 2}" y="${padT + plotH + 22}" font-size="14" text-anchor="middle" fill="#${t.ink}" ${font}>${esc(label)}</text>`,
+      );
+    });
+    if (kind === "line") {
+      series.forEach((one, k) => {
+        const pts = one.values.map(
+          (v, i) => `${padL + band * i + band / 2},${sy(v)}`,
+        );
+        out.push(
+          `<polyline points="${pts.join(" ")}" fill="none" stroke="#${colors[k % colors.length]}" stroke-width="3.5" stroke-linejoin="round"/>`,
+        );
+        one.values.forEach((v, i) =>
+          out.push(
+            `<circle cx="${padL + band * i + band / 2}" cy="${sy(v)}" r="4.5" fill="#${colors[k % colors.length]}"/>`,
+          ),
+        );
+      });
+    } else {
+      const bw = (band * 0.66) / series.length;
+      c.labels.forEach((_, i) => {
+        series.forEach((one, k) => {
+          const x = padL + band * i + band * 0.17 + bw * k;
+          const v = one.values[i];
+          out.push(
+            `<rect x="${x}" y="${Math.min(sy(v), sy(0))}" width="${bw - 3}" height="${Math.abs(sy(v) - sy(0))}" fill="#${colors[k % colors.length]}"/>`,
+          );
+          if (c.values !== false && series.length === 1)
+            out.push(
+              `<text x="${x + (bw - 3) / 2}" y="${sy(v) - 8}" font-size="13" text-anchor="middle" fill="#${t.ink}" ${font}>${fmt(v)}</text>`,
+            );
+        });
+      });
+    }
+  }
+  if (legend)
+    series.forEach((one, k) => {
+      const x = padL + k * 180;
+      out.push(
+        `<rect x="${x}" y="${h - 24}" width="14" height="14" rx="3" fill="#${colors[k % colors.length]}"/><text x="${x + 22}" y="${h - 12}" font-size="14" fill="#${t.ink}" ${font}>${esc(one.name)}</text>`,
+      );
+    });
+  return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${out.join("")}</svg>`;
+}
+
+function niceStep(raw) {
+  if (!(raw > 0)) return 1;
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const f = raw / mag;
+  return (f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10) * mag;
+}