@jrpool/kilotest 60.1.0 → 60.1.2

package/.htmlhintrc

@@ -0,0 +1,29 @@
+{
+  "doctype-first": true,
+  "doctype-html5": true,
+  "title-require": true,
+  "tagname-lowercase": true,
+  "tag-pair": true,
+  "tags-check": false,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "attr-no-duplication": true,
+  "attr-unsafe-chars": true,
+  "attr-whitespace": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "spec-char-escape": true,
+  "alt-require": true,
+  "space-tab-mixed-disabled": "space",
+  "attr-value-not-empty": false,
+  "tag-self-close": false,
+  "head-script-disabled": false,
+  "script-disabled": false,
+  "style-disabled": false,
+  "inline-style-disabled": false,
+  "inline-script-disabled": false,
+  "href-abs-or-rel": false,
+  "attr-sorted": false,
+  "id-class-ad-disabled": false,
+  "id-class-value": false
+}

package/error.html

@@ -1,13 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Error | Kilotest</title>
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>

package/index.test.ts

@@ -326,10 +326,16 @@ test('GET /style.css serves the stylesheet as CSS', async () => {
   assert.ok(res.headers['content-type'].includes('text/css'));
 });
 
-test('GET /favicon.ico serves the favicon as an icon', async () => {
+test('GET /favicon.ico serves the logo as SVG', async () => {
   const res = await request('GET', '/favicon.ico');
   assert.equal(res.statusCode, 200);
-  assert.ok(res.headers['content-type'].includes('image/x-icon'));
+  assert.ok(res.headers['content-type'].includes('image/svg+xml'));
+});
+
+test('GET /favicon.svg serves the logo as SVG', async () => {
+  const res = await request('GET', '/favicon.svg');
+  assert.equal(res.statusCode, 200);
+  assert.ok(res.headers['content-type'].includes('image/svg+xml'));
 });
 
 test('GET /api/listPages returns JSON with report data and records an API-operation metric', async () => {

package/index.ts

@@ -29,6 +29,7 @@ import {
   isValidAuthCode,
   jobsPath,
   metricsExclusionCookieName,
+  populateFile,
   recordMetric,
   reportsPath,
   unusableReportsPath
@@ -367,9 +368,8 @@ export const serveError = async (error: Record<string, unknown>, response: Serve
       response.setHeader('content-location', '/error.html');
       response.setHeader('Access-Control-Allow-Origin', '*');
       response.setHeader('Cache-Control', 'public, max-age=300, stale-while-revalidate=3000');
-      const errorTemplate = await fs.readFile('error.html', 'utf8');
       const errorMessage = typeof error.message === 'string' ? error.message : 'ERROR';
-      const errorPage = errorTemplate.replace(/__error__/, errorMessage);
+      const errorPage = await populateFile('error.html', {error: errorMessage});
       response.end(errorPage);
     }
     // Otherwise, i.e. if it is from an agent:
@@ -942,10 +942,10 @@ const handleRequest = async (request: IncomingMessage, response: ServerResponse)
     }
     // Otherwise, if it is for the application icon:
     else if (pathname.includes('favicon.')) {
-      // Get the site icon.
-      const icon = await fs.readFile(path.join(import.meta.dirname, 'favicon.ico'));
+      // Get the site icon (logo.svg, the only format served).
+      const icon = await fs.readFile(path.join(import.meta.dirname, 'logo.svg'));
       // Serve it.
-      setHeaders('image/x-icon', null, 'low');
+      setHeaders('image/svg+xml', null, 'low');
       response.write(icon, 'binary');
       response.end('');
     }

package/lhm.plugin.json

@@ -4423,5 +4423,5 @@
       }
     }
   ],
-  "version": "60.1.0"
+  "version": "60.1.2"
 }

package/linkValidation.test.ts

@@ -16,6 +16,7 @@ const staticFiles = [
   '/index.html',
   '/style.css',
   '/favicon.ico',
+  '/favicon.svg',
   '/openapi.yaml',
   '/openapi.json',
   '/capability.md',

package/logo.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+  <style>
+    .lens { stroke: #086b6b; }
+    .zero { fill: #12a05c; }
+    @media (prefers-color-scheme: dark) {
+      .lens { stroke: #3fb8b8; }
+      .zero { fill: #4ce0a0; }
+    }
+  </style>
+  <circle class="lens" cx="14" cy="14" r="8.6" fill="none" stroke-width="2.6"/>
+  <path class="lens" d="M20.3 20.3L26.8 26.8" fill="none" stroke-width="2.8" stroke-linecap="round"/>
+  <ellipse class="zero" cx="9.9" cy="14" rx="1.5" ry="1.9"/>
+  <ellipse class="zero" cx="14" cy="14" rx="1.5" ry="1.9"/>
+  <ellipse class="zero" cx="18.1" cy="14" rx="1.5" ry="1.9"/>
+</svg>

package/openapi-3.0.yaml

@@ -2,7 +2,7 @@ openapi: 3.0.3
 info:
   title: Kilotest API
   description: 'Kilotest is an ensemble testing and reporting service for front-end web quality. It uses an ensemble of 12 rule engines to test web pages for front-end quality (accessibility, usability, and web standards, including HTML, CSS, ARIA, and WCAG). Kilotest acts as a web server for human users, an MCP server for AI platforms, and an API for programmatic access. With this API you can request that a page be tested or retested, discover available reports, incrementally retrieve facts from a report: from what reports are available, to what issues were reported in one report, to what elements violated one issue, to what diagnoses rule engines gave for one violation.'
-  version: 60.1.0
+  version: 60.1.2
   license:
     name: MIT
     url: https://github.com/jrpool/kilotest/blob/main/LICENSE

package/openapi.yaml

@@ -2,7 +2,7 @@ openapi: 3.1.0
 info:
   title: Kilotest API
   description: 'Kilotest is an ensemble testing and reporting service for front-end web quality. It uses an ensemble of 12 rule engines to test web pages for front-end quality (accessibility, usability, and web standards, including HTML, CSS, ARIA, and WCAG). Kilotest acts as a web server for human users, an MCP server for AI platforms, and an API for programmatic access. With this API you can request that a page be tested or retested, discover available reports, incrementally retrieve facts from a report: from what reports are available, to what issues were reported in one report, to what elements violated one issue, to what diagnoses rule engines gave for one violation.'
-  version: 60.1.0
+  version: 60.1.2
   license:
     name: MIT
     identifier: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrpool/kilotest",
-  "version": "60.1.0",
+  "version": "60.1.2",
   "description": "Ensemble testing for front-end web quality",
   "type": "module",
   "main": "index.ts",
@@ -10,7 +10,7 @@
   "scripts": {
     "start": "node index.ts",
     "typecheck": "tsc --noEmit",
-    "lint": "npx eslint && out=$(npx markdownlint-cli2 2>&1); code=$?; if [ $code -ne 0 ]; then echo \"$out\"; exit $code; fi",
+    "lint": "npx eslint && npx htmlhint web error.html && out=$(npx markdownlint-cli2 2>&1); code=$?; if [ $code -ne 0 ]; then echo \"$out\"; exit $code; fi",
     "test": "c8 node --require ./test/setup.ts --experimental-test-module-mocks --test --test-concurrency=1 --test-randomize '**/*.test.ts'",
     "test:smoke": "node smokeTest.ts",
     "checkinfo": "node checkinfo.ts",
@@ -55,6 +55,7 @@
     "c8": "*",
     "eslint": "*",
     "globals": "*",
+    "htmlhint": "^1.9.2",
     "js-yaml": "*",
     "markdownlint-cli2": "^0.23.2",
     "node-html-parser": "*",

package/server.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/jrpool/kilotest",
     "source": "github"
   },
-  "version": "60.1.0",
+  "version": "60.1.2",
   "remotes": [
     {
       "type": "streamable-http",

package/smokeTest.ts

@@ -19,7 +19,7 @@ const concretePaths: Record<string, Record<string, string>> = {
     '/api-docs': '/api-docs',
     '/api/*': '/api/listPages',
     '/capability.md': '/capability.md',
-    '/favicon.*': '/favicon.ico',
+    '/favicon.*': '/favicon.svg',
     '/fullReport.json/*': '/fullReport.json/260101T0000/mix',
     '/index.html': '/index.html',
     '/llms-full.txt': '/llms-full.txt',

package/style.css

@@ -208,3 +208,202 @@ ul.xPathList li {
   padding-left: 0;
   overflow-wrap: break-word;
 }
+body.home {
+  --ink: #18212b;
+  --muted: #4c5a66;
+  --accent: #086b6b;
+  --accent-dark: #064f4f;
+  --bg: #f6f8f8;
+  --card: #fff;
+  --line: #dde4e4;
+  --focus: #005fcc;
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  color: var(--ink);
+  background: var(--bg);
+}
+body.home, body.home *, body.home *::before, body.home *::after {
+  box-sizing: border-box;
+}
+body.home a {
+  color: var(--accent);
+  text-underline-offset: 0.15em;
+}
+body.home a:hover {
+  color: var(--accent-dark);
+  background-color: transparent;
+}
+body.home a:focus-visible, body.home summary:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+body.home h2 {
+  color: var(--ink);
+}
+body.home li, body.home p {
+  line-height: 1.6;
+}
+body.home p {
+  margin: 0.6rem 0;
+}
+body.home header {
+  background: var(--card);
+  border-bottom: 1px solid var(--line);
+}
+body.home .header-inner {
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 1.1rem 1.5rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+body.home .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-weight: 800;
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
+}
+body.home .brand svg {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+body.home .brand-tag {
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+body.home .hero {
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 4rem 1.5rem 0;
+}
+body.home .eyebrow {
+  margin: 0 0 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+}
+body.home .eyebrow::before {
+  content: "";
+  display: inline-block;
+  width: 1.4rem;
+  height: 0.16rem;
+  margin: 0 0.5rem 0.22rem 0;
+  background: var(--accent);
+}
+body.home .hero h1 {
+  margin: 0 0 1rem;
+  max-width: 24ch;
+  font-size: clamp(2rem, 4.5vw, 3.1rem);
+  line-height: 1.12;
+  letter-spacing: -0.03em;
+}
+body.home .hero .lede {
+  margin: 0 0 1.75rem;
+  max-width: 52ch;
+  font-size: 1.2rem;
+  color: var(--muted);
+}
+body.home details {
+  max-width: 52rem;
+  margin: 0 0 1rem;
+  padding: 0;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+}
+body.home summary {
+  min-height: 44px;
+  padding: 0.9rem 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+body.home summary:hover {
+  background: #eef3f3;
+  border-radius: 0.75rem;
+}
+body.home details[open] summary {
+  border-bottom: 1px solid var(--line);
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+body.home details > :not(summary) {
+  margin-inline: 1.5rem;
+}
+body.home details h2 {
+  margin: 1.5rem 0 0.5rem;
+  font-size: 1.3rem;
+}
+body.home details h3 {
+  margin: 1.35rem 0 0.35rem;
+  font-size: 1.08rem;
+}
+body.home .nav-section {
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 2.25rem 1.5rem 0;
+}
+body.home .nav-section:last-child {
+  padding-bottom: 5rem;
+}
+body.home .nav-section h2 {
+  margin: 0 0 1.25rem;
+  font-size: 1.4rem;
+  letter-spacing: -0.01em;
+}
+body.home ul.nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+  gap: 1rem;
+}
+body.home ul.nav a {
+  display: block;
+  min-height: 44px;
+  height: 100%;
+  padding: 1.2rem 1.35rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 0.75rem;
+  text-decoration: none;
+  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
+}
+body.home ul.nav a:hover {
+  background: #eef4f4;
+  border-color: var(--accent);
+}
+body.home .card-title {
+  font-weight: 700;
+  font-size: 1.05rem;
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 0.09em;
+  text-underline-offset: 0.2em;
+}
+body.home .card-title::after {
+  content: "\00a0→";
+  display: inline-block;
+  text-decoration: none;
+  font-weight: 700;
+}
+body.home ul.nav a:hover .card-title {
+  text-decoration-thickness: 0.18em;
+}
+body.home .card-desc {
+  display: block;
+  margin: 0.4rem 0 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+@media (prefers-reduced-motion: reduce) {
+  body.home ul.nav a {
+    transition: none;
+  }
+}

package/util.ts

@@ -375,10 +375,26 @@ export const getNowStamp = (): string => {
 export const getPlainText = (string: string): string => string
 .replace(/&/g, '+')
 .replace(/[<>"']/g, ' ');
-// Populates an index.html template in a directory with named values.
-export const populateTemplate = async (dirName: string, query: Record<string, string>): Promise<string> => {
+// Markup shared by populated templates, lazily read once from files.
+let sharedContent: {head: string, logo: string} | undefined;
+// Returns the markup shared by populated templates.
+const getSharedContent = async (): Promise<{head: string, logo: string}> => {
+  // Trailing newlines are stripped so injection does not add blank lines.
+  sharedContent ??= {
+    head: (await fs.readFile(path.join(import.meta.dirname, 'web', 'head.partial'), 'utf8')).trimEnd(),
+    logo: (await fs.readFile(path.join(import.meta.dirname, 'logo.svg'), 'utf8')).trimEnd()
+  };
+  return sharedContent;
+};
+// Populates an HTML template file with named values.
+export const populateFile = async (filePath: string, query: Record<string, string>): Promise<string> => {
   // Get the template.
-  let answerPage = await fs.readFile(path.join(dirName, 'index.html'), 'utf8');
+  let answerPage = await fs.readFile(filePath, 'utf8');
+  // Inject the markup shared by all templates.
+  const shared = await getSharedContent();
+  answerPage = answerPage
+  .replace(/__head__/g, () => shared.head)
+  .replace(/__logo__/g, () => shared.logo);
   // Replace its placeholders.
   Object.keys(query).forEach(param => {
     // A replacer function keeps $-patterns in a value from being interpreted.
@@ -386,6 +402,9 @@ export const populateTemplate = async (dirName: string, query: Record<string, st
   });
   return answerPage;
 };
+// Populates an index.html template in a directory with named values.
+export const populateTemplate = (dirName: string, query: Record<string, string>): Promise<string> =>
+  populateFile(path.join(dirName, 'index.html'), query);
 // Returns the data from a POST request. Resolves null for an unrecognized content-type or a
 // malformed JSON body; callers treat null as an unreadable request.
 export const getPOSTData = (request: import('node:http').IncomingMessage): Promise<unknown> => new Promise(resolve => {

package/web/ai0BalanceForm/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Record AI service 0 balance | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>

package/web/deleteNotesForm/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Delete notes | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>
@@ -20,9 +15,9 @@
           __notes__
         </fieldset>
         <p><label>
-          Authorization code: <input size="3" minLength="3" maxlength="3" name="authCode" required__disabled__>
+          Authorization code: <input size="3" minlength="3" maxlength="3" name="authCode" required __disabled__>
         </label></p>
-        <p><button type="submit"__disabled__>Submit</button></p>
+        <p><button type="submit" __disabled__>Submit</button></p>
       </form>
     </main>
   </body>

package/web/deleteNotesForm/index.ts

@@ -164,7 +164,7 @@ export const answer = async (
     intro: anyNotes ?
       'Choose the comments and feature requests to delete.' :
       'There are no comments or feature requests to delete.',
-    disabled: anyNotes ? '' : ' disabled'
+    disabled: anyNotes ? '' : 'disabled'
   };
   // Return the populated page.
   return {

package/web/enqueue/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Test order | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>

package/web/enqueueForm/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Request approval or rejection | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>
@@ -24,9 +19,9 @@
         </fieldset>
         <p><label>
           Authorization code:
-          <input size="3" minLength="3" maxlength="3" name="authCode" required__disabled__>
+          <input size="3" minlength="3" maxlength="3" name="authCode" required __disabled__>
         </label></p>
-        <p><button type="submit"__disabled__>Submit</button></p>
+        <p><button type="submit" __disabled__>Submit</button></p>
       </form>
     </main>
   </body>

package/web/enqueueForm/index.ts

@@ -31,7 +31,7 @@ export const answer = async () => {
   const query: Record<string, string> = {
     requests: lines.join('\n'),
     noRequests: urls.length ? '' : 'No requests exist now.',
-    disabled: urls.length ? '' : ' disabled'
+    disabled: urls.length ? '' : 'disabled'
   };
   // Get the populated order form template.
   const answerPage = await populateTemplate(import.meta.dirname, query);

package/web/expungeReportsForm/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Expunge reports | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>
@@ -20,9 +15,9 @@
           __reports__
         </fieldset>
         <p><label>
-          Authorization code: <input size="3" minLength="3" maxlength="3" name="authCode" required__disabled__>
+          Authorization code: <input size="3" minlength="3" maxlength="3" name="authCode" required __disabled__>
         </label></p>
-        <p><button type="submit"__disabled__>Submit</button></p>
+        <p><button type="submit" __disabled__>Submit</button></p>
       </form>
     </main>
   </body>

package/web/head.partial

@@ -0,0 +1,6 @@
+<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="publisher" content="Jonathan Robert Pool">
+    <meta name="creator" content="Jonathan Robert Pool">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="stylesheet" href="/style.css">

package/web/hideReportForm/index.html

@@ -1,14 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="publisher" content="Jonathan Robert Pool">
-    <meta name="creator" content="Jonathan Robert Pool">
+    __head__
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Classify report as experimental | Kilotest</title>
-    <link rel="icon" href="/favicon.ico">
-    <link rel="stylesheet" href="/style.css">
   </head>
   <body>
     <main>

package/web/home/home.test.ts

@@ -14,6 +14,6 @@ import {answer} from './index.ts';
 test('answer returns the home page', async () => {
   const result = await answer();
   assert.equal(result.status, 'ok');
-  assert.ok(result.answerPage.includes('<h1>Kilotest</h1>'));
+  assert.ok(result.answerPage.includes('More than a thousand tests'));
   assert.ok(result.answerPage.includes('application/ld+json'));
 });