@jrpool/kilotest 60.1.3 → 60.1.5

package/lhm.plugin.json

@@ -4423,5 +4423,5 @@
       }
     }
   ],
-  "version": "60.1.3"
+  "version": "60.1.5"
 }

package/logo.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
   <style>
-    .lens { stroke: #086b6b; }
+    .lens { stroke: #005c5c; }
     .zero { fill: #12a05c; }
     @media (prefers-color-scheme: dark) {
       .lens { stroke: #3fb8b8; }

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.3
+  version: 60.1.5
   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.3
+  version: 60.1.5
   license:
     name: MIT
     identifier: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrpool/kilotest",
-  "version": "60.1.3",
+  "version": "60.1.5",
   "description": "Ensemble testing for front-end web quality",
   "type": "module",
   "main": "index.ts",

package/server.json

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

package/style.css

@@ -208,10 +208,10 @@ ul.xPathList li {
   padding-left: 0;
   overflow-wrap: break-word;
 }
-body.home {
+body.styled {
   --ink: #18212b;
-  --muted: #4c5a66;
-  --accent: #086b6b;
+  --muted: #424e59;
+  --accent: #005c5c;
   --accent-dark: #064f4f;
   --bg: #f6f8f8;
   --card: #fff;
@@ -224,36 +224,37 @@ body.home {
   color: var(--ink);
   background: var(--bg);
 }
-body.home, body.home *, body.home *::before, body.home *::after {
+body.styled, body.styled *, body.styled *::before, body.styled *::after {
   box-sizing: border-box;
 }
-body.home a {
+body.styled a {
   color: var(--accent);
   text-underline-offset: 0.15em;
 }
-body.home a:hover {
+body.styled a:hover {
   color: var(--accent-dark);
   background-color: transparent;
 }
-body.home a:focus-visible, body.home summary:focus-visible {
+body.styled a:focus-visible, body.styled summary:focus-visible {
   outline: 3px solid var(--focus);
   outline-offset: 2px;
   border-radius: 4px;
 }
-body.home h2 {
+body.styled h2 {
   color: var(--ink);
+  font-size: 1.4rem;
 }
-body.home li, body.home p {
+body.styled li, body.styled p {
   line-height: 1.6;
 }
-body.home p {
+body.styled p {
   margin: 0.6rem 0;
 }
-body.home header {
+body.styled header {
   background: var(--card);
   border-bottom: 1px solid var(--line);
 }
-body.home .header-inner {
+body.styled .header-inner {
   max-width: 64rem;
   margin-inline: auto;
   padding: 1.1rem 1.5rem;
@@ -261,35 +262,42 @@ body.home .header-inner {
   align-items: baseline;
   gap: 0.75rem;
 }
-body.home .brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
+body.styled .brand {
   font-weight: 800;
   font-size: 1.25rem;
   letter-spacing: -0.02em;
 }
-body.home .brand svg {
+body.styled a.brand {
+  color: var(--accent);
+  text-decoration: none;
+}
+body.styled a.brand .brand-name {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+body.styled .brand svg {
   width: 1.35rem;
   height: 1.35rem;
+  margin-right: 0.55rem;
+  vertical-align: -0.2em;
 }
-body.home .brand-tag {
+body.styled .brand-tag {
   font-size: 0.85rem;
   color: var(--muted);
 }
-body.home .hero {
+body.styled .hero {
   max-width: 64rem;
   margin-inline: auto;
   padding: 4rem 1.5rem 0;
 }
-body.home .eyebrow {
+body.styled .eyebrow {
   margin: 0 0 0.75rem;
   font-size: 0.85rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--accent);
 }
-body.home .eyebrow::before {
+body.styled .eyebrow::before {
   content: "";
   display: inline-block;
   width: 1.4rem;
@@ -297,20 +305,19 @@ body.home .eyebrow::before {
   margin: 0 0.5rem 0.22rem 0;
   background: var(--accent);
 }
-body.home .hero h1 {
+body.styled .hero h1 {
   margin: 0 0 1rem;
-  max-width: 24ch;
-  font-size: clamp(2rem, 4.5vw, 3.1rem);
-  line-height: 1.12;
+  font-size: clamp(2rem, 4.5vw, 2.6rem);
+  line-height: 1.5;
   letter-spacing: -0.03em;
 }
-body.home .hero .lede {
+body.styled .hero .lede {
   margin: 0 0 1.75rem;
   max-width: 52ch;
   font-size: 1.2rem;
   color: var(--muted);
 }
-body.home details {
+body.styled details {
   max-width: 52rem;
   margin: 0 0 1rem;
   padding: 0;
@@ -318,45 +325,43 @@ body.home details {
   border: 1px solid var(--line);
   border-radius: 0.75rem;
 }
-body.home summary {
+body.styled summary {
   min-height: 44px;
   padding: 0.9rem 1.25rem;
   font-weight: 600;
   cursor: pointer;
 }
-body.home summary:hover {
+body.styled summary:hover {
   background: #eef3f3;
   border-radius: 0.75rem;
 }
-body.home details[open] summary {
+body.styled 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.styled details > :not(summary) {
+  padding-inline: 1.25rem;
 }
-body.home details h2 {
+body.styled details h2 {
   margin: 1.5rem 0 0.5rem;
-  font-size: 1.3rem;
 }
-body.home details h3 {
+body.styled details h3 {
   margin: 1.35rem 0 0.35rem;
   font-size: 1.08rem;
 }
-body.home .nav-section {
+body.styled .nav-section {
   max-width: 64rem;
   margin-inline: auto;
   padding: 2.25rem 1.5rem 0;
 }
-body.home .nav-section:last-child {
+body.styled .nav-section:last-child {
   padding-bottom: 5rem;
 }
-body.home .nav-section h2 {
+body.styled .nav-section h2 {
   margin: 0 0 1.25rem;
-  font-size: 1.4rem;
   letter-spacing: -0.01em;
 }
-body.home ul.nav {
+body.styled ul.nav {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -364,7 +369,7 @@ body.home ul.nav {
   grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
   gap: 1rem;
 }
-body.home ul.nav a {
+body.styled ul.nav a {
   display: block;
   min-height: 44px;
   height: 100%;
@@ -375,11 +380,11 @@ body.home ul.nav a {
   text-decoration: none;
   transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
 }
-body.home ul.nav a:hover {
+body.styled ul.nav a:hover {
   background: #eef4f4;
   border-color: var(--accent);
 }
-body.home .card-title {
+body.styled .card-title {
   font-weight: 700;
   font-size: 1.05rem;
   color: var(--accent);
@@ -387,23 +392,47 @@ body.home .card-title {
   text-decoration-thickness: 0.09em;
   text-underline-offset: 0.2em;
 }
-body.home .card-title::after {
+body.styled .card-title::after {
   content: "\00a0→";
   display: inline-block;
   text-decoration: none;
   font-weight: 700;
 }
-body.home ul.nav a:hover .card-title {
+body.styled ul.nav a:hover .card-title {
   text-decoration-thickness: 0.18em;
 }
-body.home .card-desc {
+body.styled .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 {
+  body.styled ul.nav a {
     transition: none;
   }
 }
+body.styled .page {
+  max-width: 64rem;
+  margin-inline: auto;
+  padding: 2.5rem 1.5rem 3.5rem;
+}
+body.styled .page h1 {
+  margin: 0 0 1.5rem;
+  font-size: 2rem;
+  letter-spacing: -0.02em;
+}
+body.styled .page h2 {
+  margin: 2rem 0 0.75rem;
+}
+body.styled .page ol, body.styled .page ul {
+  margin: 0.5rem 0 1rem;
+}
+body.styled ul.links {
+  column-width: 20rem;
+  column-gap: 2.5rem;
+}
+body.styled ul.links li {
+  margin-bottom: 0.4rem;
+  break-inside: avoid;
+}

package/web/home/index.html

@@ -51,7 +51,7 @@
       }
     </script>
   </head>
-  <body class="home">
+  <body class="styled">
     <header>
       <div class="header-inner">
         <span class="brand">__logo__Kilotest</span>
@@ -76,7 +76,10 @@
           <h2>Features</h2>
           <p>With Kilotest, you can get results of already performed tests and propose web pages for testing. (Immediate testing on request may become available in a future version.)</p>
           <p>There is a <a href="/capability.md">capability document</a> that summarizes what Kilotest can do for human and AI-agent users.</p>
-          <h2>How to use Kilotest</h2>
+        </details>
+        <details>
+          <summary>How to use Kilotest</summary>
+          <h2>Who are you?</h2>
           <h3>If you are a human user on the web</h3>
           <p>You can use Kilotest starting on this page.</p>
           <p>If your main interest is accessibility, feel free to learn more about it with our <a href="/tutorialWeb.html">tutorial</a>.</p>

package/web/listPages/index.html

@@ -5,25 +5,17 @@
     <meta name="keywords" content="report,accessibility,a11y">
     <title>Pages tested | Kilotest</title>
   </head>
-  <body>
-    <main>
-      <h1>Pages tested by <a href="/">Kilotest</a></h1>
-      <h2>Requested for testing</h2>
-      <ol>
-        __requests__
-      </ol>
-      <p>__noRequests__</p>
+  <body class="styled">
+    <header>
+      <div class="header-inner">
+        <a class="brand" href="/">__logo__<span class="brand-name">Kilotest</span></a>
+        <span class="brand-tag">Ensemble front-end testing</span>
+      </div>
+    </header>
+    <main class="page">
+      <h1>Pages tested</h1>
+__jobSections__
       <p>Should Kilotest <a href="requestNewTestForm.html">test a page</a> that is not listed below?</p>
-      <h2>Queued for testing</h2>
-      <ol>
-        __queue__
-      </ol>
-      <p>__noQueued__</p>
-      <h2>Being tested now</h2>
-      <ul>
-        __claimed__
-      </ul>
-      <p>__noClaimed__</p>
       <h2>Already tested</h2>
 __testedPages__
     </main>

package/web/listPages/index.ts

@@ -19,7 +19,7 @@ import path from 'node:path';
 
 // Adds parameters to a query for the answer page.
 const populateQuery = async (query: Record<string, any>) => {
-  const margin = ' '.repeat(8);
+  const margin = ' '.repeat(6);
   // Initialize the classes of lines.
   const lines: {requests: string[], queue: string[], claimed: string[], tested: string[]} = {
     requests: [],
@@ -35,17 +35,11 @@ const populateQuery = async (query: Record<string, any>) => {
     testRequests[url]!.forEach((req: any) => {
       const {description, reason} = req;
       // Add a line.
-      lines.requests.push(`${margin}<li><code>${url}</code> (${description}): ${reason}</li>`);
+      lines.requests.push(`${margin}  <li><code>${url}</code> (${description}): ${reason}</li>`);
     });
   });
   // Sort the lines in alphabetical order by URL and secondarily by proposed name.
   lines.requests.sort();
-  // Add the lines to the query.
-  query.requests = lines.requests.join('\n');
-  // Add a no-requests message, if applicable, to the query.
-  query.noRequests = lines.requests.length
-  ? 'Kilotest managers can <a href="enqueueForm.html">approve or reject a request</a>.'
-  : 'No requests await approval now.';
   // Get the file names of all queued and claimed jobs.
   const jobFileNames = await getJobNames();
   // For each job category:
@@ -55,15 +49,41 @@ const populateQuery = async (query: Record<string, any>) => {
       // Get the job.
       const job = await getObject(path.join(jobsPath(), category, fileName)) as {target: {url: string, what: string}};
       // Add a line.
-      lines[category].push(`${margin}<li><code>${job.target.url}</code> (${job.target.what})</li>`);
+      lines[category].push(`${margin}  <li><code>${job.target.url}</code> (${job.target.what})</li>`);
     }
-    // Add the lines to the query.
-    query[category] = lines[category].join('\n');
   }
-  // Add a no-queued message, if applicable, to the query.
-  query.noQueued = lines.queue.length ? '' : 'No pages are queued for testing.';
-  // Add a no-claimed message, if applicable, to the query.
-  query.noClaimed = lines.claimed.length ? '' : 'No pages are being tested now.';
+  // Initialize the conditional activity sections.
+  const sections: string[] = [];
+  // Add a section for the test requests, if there are any.
+  if (lines.requests.length) {
+    sections.push([
+      `${margin}<h2>Requested for testing</h2>`,
+      `${margin}<ol>`,
+      ...lines.requests,
+      `${margin}</ol>`,
+      `${margin}<p>Kilotest managers can <a href="enqueueForm.html">approve or reject a request</a>.</p>`
+    ].join('\n'));
+  }
+  // Add a section for the queued jobs, if there are any.
+  if (lines.queue.length) {
+    sections.push([
+      `${margin}<h2>Queued for testing</h2>`,
+      `${margin}<ol>`,
+      ...lines.queue,
+      `${margin}</ol>`
+    ].join('\n'));
+  }
+  // Add a section for the claimed jobs, if there are any.
+  if (lines.claimed.length) {
+    sections.push([
+      `${margin}<h2>Being tested now</h2>`,
+      `${margin}<ul>`,
+      ...lines.claimed,
+      `${margin}</ul>`
+    ].join('\n'));
+  }
+  // Add the sections to the query.
+  query.jobSections = sections.join('\n');
   // Get extracts of the latest reports about all tested pages, sorted by page description.
   const latestExtracts = await getReportExtracts(true);
   const pageCount = latestExtracts.length;