fix: use Windows-safe screenshot filenames

vhs/capture.js

@@ -1,4 +1,3 @@
-const { chromium } = require('playwright');
 const fs = require('fs');
 
 const URLS = [
@@ -14,7 +13,19 @@ const URLS = [
   "http://localhost:5287/services/list"
 ];
 
-(async () => {
+function screenshotFilename(url) {
+  const parsed = new URL(url);
+  const path = parsed.pathname === "/"
+    ? ""
+    : parsed.pathname.replace(/^\/+|\/+$/g, "").replace(/\//g, "_");
+  const port = parsed.port ? `_${parsed.port}` : "";
+  const name = `${parsed.hostname}${port}${path ? `_${path}` : ""}`;
+
+  return `${name.replace(/[^a-zA-Z0-9._-]/g, "_")}.png`;
+}
+
+async function capture() {
+  const { chromium } = require('playwright');
   const browser = await chromium.launch();
   const page = await browser.newPage({
     viewport: { width: 1366, height: 768 }
@@ -24,7 +35,7 @@ const URLS = [
     fs.mkdirSync("./webui_screenshots");
 
   for (const url of URLS) {
-    const filename = url.replace(/^https?:\/\//, '').replace(/\//g, '_') + ".png";
+    const filename = screenshotFilename(url);
     console.log("Capturing", url);
 
     // Diagram routes are taller than the standard viewport; stretch it so
@@ -71,4 +82,13 @@ const URLS = [
   }
 
   await browser.close();
-})();
+}
+
+if (require.main === module) {
+  capture().catch(error => {
+    console.error(error);
+    process.exitCode = 1;
+  });
+}
+
+module.exports = { capture, screenshotFilename };

vhs/capture.test.js

@@ -0,0 +1,28 @@
+const assert = require("node:assert/strict");
+const test = require("node:test");
+
+const { screenshotFilename } = require("./capture");
+
+test("generates a Windows-safe filename for the root URL", () => {
+  assert.equal(screenshotFilename("http://localhost:5287"), "localhost_5287.png");
+});
+
+test("preserves the route in the screenshot filename", () => {
+  assert.equal(
+    screenshotFilename("http://localhost:5287/visualise/topology"),
+    "localhost_5287_visualise_topology.png"
+  );
+});
+
+test("omits the default HTTPS port", () => {
+  assert.equal(
+    screenshotFilename("https://example.com:443/a/b"),
+    "example.com_a_b.png"
+  );
+});
+
+test("removes filesystem-unsafe characters", () => {
+  const filename = screenshotFilename("http://[::1]:5287/a?b=c");
+  assert.equal(filename, "___1__5287_a.png");
+  assert.doesNotMatch(filename, /[\\/:*?"<>|]/);
+});

vhs/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node --test capture.test.js"
   },
   "keywords": [],
   "author": "",