thursday-agent 0.9.0 → 0.11.0

package/skills/browser/scripts/sheet.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+/**
+ * Many pictures as one image, each with a label under it, so one look sees them all:
+ * a page's photos, rendered slides, a feed's covers. Pictures are fetched by the
+ * session's browser (it carries its cookies) and inlined, so the sheet needs no server.
+ *
+ *   node sheet.mjs --out sheet.png <image url | file>... [--cols 4]
+ */
+import { existsSync, readFileSync } from "node:fs";
+import { extname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { fail, inPage, orFail, parseArgs } from "./session.mjs";
+
+const MIME = {
+  ".png": "image/png",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+};
+
+/**
+ * Draws `items` — `{ src }` an http(s) url, `{ file }` a local path, or `{ data }` a data
+ * URL, each with a `label` — into one PNG at `out`. Resolves to `{ out, missing }`.
+ */
+export async function makeSheet(items, out, cols = 4) {
+  const lost = items.find((it) => it.file && !existsSync(it.file));
+  if (lost) fail(`No such file: ${lost.file}`);
+  const cells = items.map(({ file, ...it }) =>
+    file
+      ? {
+          ...it,
+          data: `data:${MIME[extname(file).toLowerCase()] ?? "image/jpeg"};base64,${readFileSync(file).toString("base64")}`,
+        }
+      : it,
+  );
+  return orFail(
+    await inPage(
+      async (page, { items, out, cols }) => {
+        const cells = [];
+        for (const it of items) {
+          let src = it.data ?? "";
+          if (!src && it.src)
+            try {
+              const r = await page.request.get(it.src, { timeout: 30000 });
+              if (r.ok())
+                src = `data:${r.headers()["content-type"] ?? "image/jpeg"};base64,${(await r.body()).toString("base64")}`;
+            } catch {}
+          cells.push({ src, label: it.label });
+        }
+        const esc = (s) =>
+          String(s).replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+        const html = `<!doctype html><meta charset="utf-8"><style>
+          body{margin:0;background:#fff;font:13px/1.35 system-ui,sans-serif;color:#111}
+          .grid{display:grid;grid-template-columns:repeat(${cols},240px);gap:10px;padding:10px}
+          .cell img,.cell .none{width:240px;height:300px;object-fit:contain;background:#e8e8e8;display:block}
+          .cell div{padding:3px 2px;height:36px;overflow:hidden}</style>
+          <div class="grid">${cells
+            .map(
+              (c) =>
+                `<div class="cell">${c.src ? `<img src="${c.src}">` : `<div class="none"></div>`}<div>${esc(c.label)}</div></div>`,
+            )
+            .join("")}</div>`;
+        const tab = await page.context().newPage();
+        try {
+          await tab.setViewportSize({ width: cols * 250 + 10, height: 400 });
+          await tab.setContent(html, { waitUntil: "load" });
+          await tab.screenshot({ path: out, fullPage: true, scale: "css" });
+        } finally {
+          await tab.close();
+        }
+        return { out, missing: cells.filter((c) => !c.src).length };
+      },
+      { items: cells, out: resolve(out), cols },
+    ),
+  );
+}
+
+/** Command-line pictures as items: a url stays a url, anything else is a file. */
+export const pictures = (args) =>
+  args.map((x, i) =>
+    /^https?:/.test(x)
+      ? { src: x, label: `${i + 1}` }
+      : { file: x, label: `${i + 1} ${x.split("/").pop()}` },
+  );
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const opts = parseArgs();
+  if (!opts.out || !opts._.length)
+    fail(
+      "usage: node sheet.mjs --out sheet.png <image url | file>... [--cols 4]",
+    );
+  const items = pictures(opts._);
+  const made = await makeSheet(items, opts.out, Number(opts.cols ?? 4));
+  console.log(
+    `${made.out} — ${items.length} pictures${made.missing ? `, ${made.missing} did not load` : ""}`,
+  );
+}

package/skills/browser/scripts/webimage.mjs

@@ -0,0 +1,105 @@
+#!/usr/bin/env node
+/**
+ * Saves the picture a web page shares itself with (og:image, else twitter:image),
+ * and with --all the large pictures in its body too, through the session's browser
+ * so a site that refuses curl still answers. Prints each file with its size and
+ * the credit line to put on the slide.
+ *
+ *   node webimage.mjs <page url> --out <dir> [--all] [--min 600]
+ */
+import { mkdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { imageSize } from "./image-size.mjs";
+import { fail, inPage, orFail, parseArgs } from "./session.mjs";
+
+const opts = parseArgs();
+const url = opts._[0];
+if (!url || !opts.out)
+  fail("usage: node webimage.mjs <page url> --out <dir> [--all] [--min 600]");
+const out = resolve(opts.out);
+mkdirSync(out, { recursive: true });
+
+const got = orFail(
+  await inPage(
+    async (page, { url, all, min }) => {
+      const res = await page.request.get(url, { timeout: 30000 });
+      const html = await res.text();
+      const meta = (key) => {
+        const tag = html.match(
+          new RegExp(`<meta[^>]+(?:property|name)=["']${key}["'][^>]*>`, "i"),
+        )?.[0];
+        return tag?.match(/content=["']([^"']+)["']/i)?.[1] ?? null;
+      };
+      const decode = (s) => s?.replace(/&amp;/g, "&").replace(/&#x2F;/g, "/");
+      // The VM has no URL class
+      const origin = url.match(/^https?:\/\/[^/]+/)[0];
+      const absolute = (src) =>
+        src.startsWith("//")
+          ? `https:${src}`
+          : src.startsWith("/")
+            ? origin + src
+            : src;
+      const site =
+        decode(meta("og:site_name")) ?? origin.replace(/^https?:\/\//, "");
+      const title =
+        decode(meta("og:title")) ?? html.match(/<title>([^<]*)/i)?.[1] ?? "";
+      const wanted = [decode(meta("og:image")) ?? decode(meta("twitter:image"))]
+        .filter(Boolean)
+        .map((src) => ({ src: absolute(src), alt: "og:image" }));
+      if (all) {
+        const tab = await page.context().newPage();
+        try {
+          await tab.goto(url, { waitUntil: "load", timeout: 45000 });
+          await tab.waitForTimeout(1500);
+          const found = await tab.evaluate(
+            (min) =>
+              [...document.images]
+                .filter((i) => i.naturalWidth >= min)
+                .map((i) => ({ src: i.currentSrc || i.src, alt: i.alt || "" })),
+            min,
+          );
+          for (const f of found)
+            if (!wanted.some((w) => w.src === f.src)) wanted.push(f);
+        } finally {
+          await tab.close();
+        }
+      }
+      const files = [];
+      for (const w of wanted.slice(0, 8)) {
+        try {
+          const r = await page.request.get(w.src, {
+            headers: { referer: url },
+            timeout: 30000,
+          });
+          if (!r.ok()) continue;
+          const type = r.headers()["content-type"] ?? "";
+          if (!type.startsWith("image/")) continue;
+          files.push({ ...w, type, data: (await r.body()).toString("base64") });
+        } catch {}
+      }
+      return { site, title, files, status: res.status() };
+    },
+    { url, all: Boolean(opts.all), min: Number(opts.min ?? 600) },
+  ),
+);
+
+if (!got.files.length)
+  fail(
+    `No picture came back from ${url} (page answered ${got.status}). Open it in the browser and take one from the page, or try --all.`,
+  );
+const ext = (type) =>
+  ({
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif",
+    "image/avif": "avif",
+  })[type.split(";")[0]] ?? "jpg";
+got.files.forEach((f, i) => {
+  const path = `${out}/web-${String(i + 1).padStart(2, "0")}.${ext(f.type)}`;
+  writeFileSync(path, Buffer.from(f.data, "base64"));
+  const size = imageSize(path);
+  console.log(
+    `${path} ${size ? `${size.w}x${size.h}` : f.type} ${f.alt ? `(${f.alt.slice(0, 60)})` : ""}`,
+  );
+});
+console.log(`Credit: ${got.site} — ${got.title.trim().slice(0, 100)}`);

package/skills/interactive-page/SKILL.md

@@ -9,7 +9,7 @@ license: Complete terms in LICENSE.txt
 ## Diagrams and charts
 
 - A diagram — how something is built, how a process flows, calls in order, where data goes, the states it moves through — is drawn by the archify engine in `scripts/archify`, not as a mermaid block: it checks the layout, so a crossing edge or a clipped label never reaches the user. Read `references/diagram.md` first. It is a page of its own; when a report needs one, name both files as you hand back.
-- A chart of numbers in a report is a `mermaid` block in the `.md`, which the app draws. Candlesticks, hover and zoom need a page.
+- A chart of numbers is drawn from a CSV into a quick page by `node <skill dir>/scripts/chart.mjs <page.html> <figure id> <data.csv>` — a cited inline SVG with its rows; with no arguments it lists its options. Never hand-write chart SVG. A report that stays a `.md` takes a `mermaid` block, which the app draws; candlesticks and zoom need the kit.
 
 ## A quick page
 
@@ -58,8 +58,9 @@ every page can import it from then on. Keep what one page needs in its own
 folder rather than in the kit's `src/`: an app update replaces those shared files.
 
 To look at it yourself, the `browser` skill: it refuses `file:` URLs, so serve the
-folder first (`python3 -m http.server 48800 --bind 127.0.0.1 --directory <dir> &`),
-`goto http://127.0.0.1:48800/<name>.html`, and kill the server after. Do it only
+folder on a port nobody else holds (`python3 -u -m http.server 0 --bind 127.0.0.1
+--directory <dir> > <scratch>/serve.log &`, the port is in the log), `goto` it, and kill the
+server after. Do it only
 when asked or when something looks wrong: testing upfront adds latency between
 the request and the finished file.