@jrpool/kilotest 60.5.0 → 60.6.0

package/.devin/config.local.json

@@ -40,7 +40,8 @@
       "Exec(sqlite3)",
       "Exec(npm update)",
       "Exec(npm ls)",
-      "Exec(pkill)"
+      "Exec(pkill)",
+      "Exec(python3)"
     ]
   }
 }

package/docs/SERVICE.md

@@ -259,7 +259,7 @@ kilotest.com {
   # Specify the only paths of forwardable requests.
   @allowedGET {
     method GET
-    path /mcp / /index.html /robots.txt /openapi.yaml /openapi.json /swagger.yaml /swagger.json /api-docs /llms.txt /llms-full.txt /capability.md *.html* /fullReport.json/* /api/* /tutorialWeb/images/* /tutorialAI/images/* /qai /qai/comments /favicon.* /style.css /sitemap.xml
+    path /mcp / /index.html /robots.txt /openapi.yaml /openapi.json /swagger.yaml /swagger.json /api-docs /llms.txt /llms-full.txt /capability.md *.html* /fullReport.json/* /api/* /tutorialWeb/images/* /tutorialAI/images/* /media/* /qai /qai/comments /favicon.* /style.css /sitemap.xml
   }
   # UptimeRobot's uptime check is the only known HEAD caller, and it targets only the site
   # root (see "Health monitoring" below), so HEAD is forwarded only for that path, not the

package/index.test.ts

@@ -451,6 +451,32 @@ test('GET /tutorialAI/images/nonexistent.png returns an error page', async () =>
   assert.ok(res.body.includes('Image not found'));
 });
 
+test('GET /media/demo-chatgpt.mp4 serves the video', async () => {
+  const res = await request('GET', '/media/demo-chatgpt.mp4');
+  assert.equal(res.statusCode, 200);
+  assert.ok(res.headers['content-type'].includes('video/mp4'));
+});
+
+test('GET /media with an unknown extension serves octet-stream', async () => {
+  // Create a temporary media file with an unknown extension.
+  const mediaPath = path.join(import.meta.dirname, 'media', 'test.xyz');
+  await fs.writeFile(mediaPath, 'fake media data');
+  try {
+    const res = await request('GET', '/media/test.xyz');
+    assert.equal(res.statusCode, 200);
+    assert.ok(res.headers['content-type'].includes('application/octet-stream'));
+  }
+  finally {
+    await fs.unlink(mediaPath).catch(() => {});
+  }
+});
+
+test('GET /media/nonexistent.mp4 returns an error page', async () => {
+  const res = await request('GET', '/media/nonexistent.mp4');
+  assert.equal(res.statusCode, 400);
+  assert.ok(res.body.includes('Media file not found'));
+});
+
 test('GET /nonexistent.html returns an abuse error', {timeout: 500}, async () => {
   const res = await request('GET', '/nonexistent.html');
   assert.equal(res.statusCode, 400);

package/index.ts

@@ -42,6 +42,7 @@ import fs from 'node:fs/promises';
 import {handleComment as handleTutorialWebComment} from './web/tutorialWeb/index.ts';
 import {answer as tutorialWeb} from './web/tutorialWeb/index.ts';
 import {answer as accessibility} from './web/accessibility/index.ts';
+import {answer as demoChatgpt} from './web/demo-chatgpt/index.ts';
 import {answer as home} from './web/home/index.ts';
 import {answer as privacy} from './web/privacy/index.ts';
 import {answer as terms} from './web/terms/index.ts';
@@ -111,6 +112,7 @@ const answer: {
   accessibility: PageHandler;
   ai0BalanceForm: PageHandler;
   deleteNotesForm: PageHandler;
+  'demo-chatgpt': PageHandler;
   enqueue: PageHandler;
   enqueueForm: PageHandler;
   expungeReportsForm: PageHandler;
@@ -144,6 +146,7 @@ const answer: {
   accessibility,
   ai0BalanceForm,
   deleteNotesForm,
+  'demo-chatgpt': demoChatgpt,
   enqueue,
   enqueueForm,
   expungeReportsForm,
@@ -217,6 +220,7 @@ export const routes = {
     '/llms-full.txt',
     '/llms.txt',
     '/mcp',
+    '/media/*',
     '/openapi.json',
     '/openapi.yaml',
     '/qai',
@@ -914,6 +918,27 @@ const handleRequest = async (request: IncomingMessage, response: ServerResponse)
         await serveError({message: 'Invalid service request'}, response, false);
       }
     }
+    // Otherwise, if it is for a media file (e.g. a demonstration video):
+    else if (pathname.startsWith('/media/')) {
+      const mediaFile = pathname.slice('/media/'.length);
+      const mediaPath = path.join(import.meta.dirname, 'media', mediaFile);
+      try {
+        const media = await fs.readFile(mediaPath);
+        const ext = path.extname(mediaFile).toLowerCase();
+        const mimeTypes: Record<string, string> = {
+          '.mp4': 'video/mp4',
+          '.webm': 'video/webm',
+          '.mov': 'video/quicktime',
+          '.m4v': 'video/mp4'
+        };
+        const mimeType = mimeTypes[ext] || 'application/octet-stream';
+        setHeaders(mimeType, null, 'low');
+        response.end(media);
+      }
+      catch {
+        await serveError({message: 'ERROR: Media file not found'}, response, true);
+      }
+    }
     // Otherwise, if it is for a tutorial image:
     else if (pathname.startsWith('/tutorialWeb/images/') || pathname.startsWith('/tutorialAI/images/')) {
       let imgFile: string;

package/lhm.plugin.json

@@ -4423,5 +4423,5 @@
       }
     }
   ],
-  "version": "60.5.0"
+  "version": "60.6.0"
 }

package/linkValidation.test.ts

@@ -35,6 +35,7 @@ validPathPatterns.add('/api/*');
 validPathPatterns.add('/fullReport.json/*');
 validPathPatterns.add('/tutorialWeb/images/*');
 validPathPatterns.add('/tutorialAI/images/*');
+validPathPatterns.add('/media/*');
 
 // Specific page routes (those that end in .html)
 const htmlRoutes = [

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrpool/kilotest",
-  "version": "60.5.0",
+  "version": "60.6.0",
   "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.5.0",
+  "version": "60.6.0",
   "remotes": [
     {
       "type": "streamable-http",

package/sitemap.xml

@@ -9,6 +9,7 @@
   <url><loc>https://kilotest.com/privacy.html</loc></url>
   <url><loc>https://kilotest.com/terms.html</loc></url>
   <url><loc>https://kilotest.com/accessibility.html</loc></url>
+  <url><loc>https://kilotest.com/demo-chatgpt.html</loc></url>
   <url><loc>https://kilotest.com/openapi.yaml</loc></url>
   <url><loc>https://kilotest.com/llms.txt</loc></url>
   <url><loc>https://kilotest.com/llms-full.txt</loc></url>

package/smokeTest.ts

@@ -25,6 +25,7 @@ const concretePaths: Record<string, Record<string, string>> = {
     '/llms-full.txt': '/llms-full.txt',
     '/llms.txt': '/llms.txt',
     '/mcp': '/mcp',
+    '/media/*': '/media/demo-chatgpt.mp4',
     '/openapi.json': '/openapi.json',
     '/openapi.yaml': '/openapi.yaml',
     '/qai': '/qai',

package/web/accessibility/index.html

@@ -15,7 +15,7 @@
       <h2>Unremediated issues</h2>
       <p>Kilotest has reported these lowest-priority issues:</p>
       <ul>
-        <li><strong>large visible-element count</strong> (<code>visibleBulk</code>) on the list-pages page: justified by the existence of more than 100 tested pages</li>
+        <li><strong>large visible-element count</strong> (<code>visibleBulk</code>) on the list-pages page: justified by the existence of more than 200 tested pages</li>
         <li><strong>inconsistent heading, link, or button styles</strong> (<code>incnsistentStyles</code>) on the list-pages page: under investigation</li>
       </ul>
       <p>The testing of Kilotest pages is incomplete, so additional unremediated issues may remain.</p>

package/web/demo-chatgpt/demo-chatgpt.test.ts

@@ -0,0 +1,18 @@
+/*
+  demo.test.ts
+  Unit tests for web/demo/index.ts, covering the answer export.
+*/
+
+// IMPORTS
+
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {answer} from './index.ts';
+
+// TESTS
+
+test('answer returns the demonstration page', async () => {
+  const result = await answer();
+  assert.equal(result.status, 'ok');
+  assert.ok(result.answerPage.includes('ChatGPT demonstration'));
+});

package/web/demo-chatgpt/index.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    __head__
+    <meta name="description" content="Kilotest demonstration: a step-through walkthrough of ChatGPT using the Kilotest tools">
+    <title>ChatGPT demonstration | Kilotest</title>
+  </head>
+  <body class="styled">
+    __header__
+    <main class="page">
+      <h1>ChatGPT demonstration</h1>
+      <p>This page shows how ChatGPT uses Kilotest to answer questions about the front-end quality of web pages. Each of the five scenarios below reproduces a real interaction. Step through them at your own pace with the Previous and Next buttons, or press Play to advance automatically. The same interaction is also available as a <a href="/media/demo-chatgpt.mp4">video recording</a>.</p>
+      <div class="demo" id="demo">
+        <div class="demo-controls">
+          <button type="button" id="demo-play" aria-pressed="false"><span aria-hidden="true">▶</span> Play</button>
+          <button type="button" id="demo-prev"><span aria-hidden="true">◀</span> Previous</button>
+          <button type="button" id="demo-next">Next <span aria-hidden="true">▶</span></button>
+          <span id="demo-status" role="status">Scene 1 of 5</span>
+        </div>
+        <div class="demo-stage" id="demo-stage" aria-live="polite">
+
+          <section class="frame" data-scene="1">
+            <h2>1. Which of its own pages has Kilotest tested?</h2>
+            <h3>Prompt 1</h3>
+            <div class="msg user"><p><span class="mention">@ Kilotest</span> Name all pages of Kilotest that Kilotest has tested. I need only their names and not their URLs, test dates, test results, or any other information.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for a few seconds</p></div>
+            <h3>Response 1</h3>
+            <div class="msg assistant"><p>The assistant at first listed every tested page, not only the Kilotest pages.</p></div>
+            <h3>Corrective prompt 1</h3>
+            <div class="msg user"><p>You answered the wrong question. I asked you to name all pages of Kilotest that Kilotest has tested. I did not ask you to name all pages that Kilotest has tested.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for 13s</p></div>
+            <h3>Corrected response 1</h3>
+            <div class="msg assistant"><ul><li>Kilotest</li><li>Kilotest list diagnoses</li><li>Kilotest list issues</li><li>Kilotest list pages</li><li>Kilotest list violators</li></ul></div>
+          </section>
+
+          <section class="frame" data-scene="2" hidden>
+            <h2>2. What issues were reported in a page&rsquo;s latest report?</h2>
+            <h3>Prompt 2</h3>
+            <div class="msg user"><p><span class="mention">@ Kilotest</span> Name the issues reported in the latest report about the Human Rights Watch contact page. I need only their names and not their descriptions, priorities, or any other information.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for 9s</p></div>
+            <h3>Response 2</h3>
+            <div class="msg assistant">
+              <ul class="issue-list">
+                <li>abbr title missing</li>
+                <li>all-capital text</li>
+                <li>aria reference invalid</li>
+                <li>attribute invalid</li>
+                <li>attribute obsolete</li>
+                <li>attribute value invalid</li>
+                <li>autocomplete invalid</li>
+                <li>box size absolute</li>
+                <li>button name not visible</li>
+                <li>code invalid</li>
+                <li>contrast poor</li>
+                <li>double br use dubious</li>
+                <li>element focusability and operability conflict</li>
+                <li>fieldset missing?</li>
+                <li>focus indication improvable</li>
+                <li>focusable element hidden</li>
+                <li>forms not distinctly named</li>
+                <li>heading level skipped</li>
+                <li>heading structure illogical</li>
+                <li>hovering changes content</li>
+                <li>ID empty</li>
+                <li>ID not unique</li>
+                <li>iframe not named</li>
+                <li>image not named</li>
+                <li>inconsistent heading, link, or button styles</li>
+                <li>itemid invalid</li>
+                <li>label location dubious</li>
+                <li>large visible-element count</li>
+                <li>line height low</li>
+                <li>link destination not URL</li>
+                <li>link href missing</li>
+                <li>link indication poor</li>
+                <li>link not named</li>
+                <li>links named identically</li>
+                <li>links not grouped as nav</li>
+                <li>list-like br use dubious</li>
+                <li>menu navigation nonstandard</li>
+                <li>parent invalid</li>
+                <li>requirement invalid</li>
+                <li>role assigned instead of implicit</li>
+                <li>role redundant</li>
+                <li>small targets too near to each other</li>
+                <li>summary has explicit role</li>
+                <li>svg image not named</li>
+                <li>tab-opening link action unstated?</li>
+                <li>target small</li>
+                <li>target very small</li>
+                <li>text contrast improvable</li>
+                <li>text contrast not testable</li>
+                <li>title attribute invalid</li>
+                <li>z-index not zero</li>
+              </ul>
+            </div>
+          </section>
+
+          <section class="frame" data-scene="3" hidden>
+            <h2>3. Which issue did the most rule engines report, and what did they find?</h2>
+            <h3>Prompt 3</h3>
+            <div class="msg user"><p><span class="mention">@ Kilotest</span> In the latest report about the Wikimedia Foundation (home) page, tell me which highest-priority issue was reported by the largest number of rule engines. For that issue, give me the XPath of the element that was reported as a violator by the largest number of rule engines. Finally, for that element and that issue, give me a one-sentence summary of the diagnoses. I do not need an issue explanation, additional information about the element, the number of diagnoses, their full texts, or the number or names of the rule engines that issued them.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for 21s</p></div>
+            <h3>Response 3</h3>
+            <div class="msg assistant">
+              <p><strong>Highest-priority issue:</strong> Link not named</p>
+              <p><strong>XPath(s) tied for the most rule-engine reports:</strong></p>
+              <ul>
+                <li><code>/html/body/div[2]/footer[1]/div[1]/div[2]/div[1]/figure[1]/a[1]</code></li>
+                <li><code>/html/body/div[2]/footer[1]/div[1]/div[2]/div[1]/figure[2]/a[1]</code></li>
+              </ul>
+              <p><strong>Diagnosis summary:</strong> Both links lack an accessible name, such as discernible text or an equivalent text alternative, making their purpose unclear to screen-reader users.</p>
+            </div>
+          </section>
+
+          <section class="frame" data-scene="4" hidden>
+            <h2>4. How do I get an untested page tested?</h2>
+            <h3>Prompt 4</h3>
+            <div class="msg user"><p><span class="mention">@ Kilotest</span> Request a Kilotest test of Example12345 (<a href="https://example12345.info">https://example12345.info</a>) and let me know whether the request was accepted. If it was, tell me how long I should expect to wait before the results will be available.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for 12s</p></div>
+            <h3>Response 4</h3>
+            <div class="msg assistant"><p>Kilotest <strong>did not accept the request</strong> to test Example12345 (<code>https://example12345.info</code>).</p>
+            <p>The reason given was that the URL does not resolve to a page that this Kilotest deployment can test.</p>
+            <p>Since the request was rejected, there is no expected wait time for results.</p></div>
+          </section>
+
+          <section class="frame" data-scene="5" hidden>
+            <h2>5. Can a page be retested after it has been remediated?</h2>
+            <h3>Prompt 5</h3>
+            <div class="msg user"><p><span class="mention">@ Kilotest</span> Order a Kilotest retest of the Example page. When the report is completed, compare it with the previous report about that page and give me two lists: one naming any eliminated issues and the other naming any newly reported issues. I do not need the report dates, the issue counts, issue explanations, or any other information. If the order is rejected, or if the report is not completed within 4 minutes, stop waiting and tell me what happened.</p></div>
+            <div class="msg tool"><p>Used Kilotest — worked for 1m 12s</p></div>
+            <h3>Response 5</h3>
+            <div class="msg assistant">
+              <p>Kilotest accepted the retest order, and the report was completed within 4 minutes.</p>
+              <p><strong>Eliminated issues</strong></p>
+              <p>– None</p>
+              <p><strong>Newly reported issues</strong></p>
+              <p>– None</p>
+            </div>
+          </section>
+
+        </div>
+      </div>
+      <p>Each scenario corresponds to a real capability of the Kilotest tools: discovering tested pages, listing issues, drilling down to elements and diagnoses, requesting tests, and ordering retests. The responses above reproduce real Kilotest report data.</p>
+    </main>
+    <script>
+      const frames = Array.from(document.querySelectorAll('#demo-stage .frame'));
+      const playBtn = document.getElementById('demo-play');
+      const prevBtn = document.getElementById('demo-prev');
+      const nextBtn = document.getElementById('demo-next');
+      const status = document.getElementById('demo-status');
+      let current = 0;
+      let timer = null;
+
+      function show(index) {
+        current = Math.max(0, Math.min(frames.length - 1, index));
+        frames.forEach((frame, i) => { frame.hidden = i !== current; });
+        status.textContent = 'Scene ' + (current + 1) + ' of ' + frames.length;
+        prevBtn.disabled = current === 0;
+        nextBtn.disabled = current === frames.length - 1;
+      }
+
+      function stop() {
+        if (timer) { clearInterval(timer); timer = null; }
+        playBtn.innerHTML = '<span aria-hidden="true">▶</span> Play';
+        playBtn.setAttribute('aria-pressed', 'false');
+      }
+
+      playBtn.addEventListener('click', function () {
+        if (timer) { stop(); return; }
+        if (current === frames.length - 1) { show(0); }
+        playBtn.innerHTML = '<span aria-hidden="true">⏸</span> Pause';
+        playBtn.setAttribute('aria-pressed', 'true');
+        timer = setInterval(function () {
+          if (current >= frames.length - 1) { stop(); return; }
+          show(current + 1);
+        }, 6000);
+      });
+
+      prevBtn.addEventListener('click', function () { stop(); show(current - 1); });
+      nextBtn.addEventListener('click', function () { stop(); show(current + 1); });
+      show(0);
+    </script>
+    <style>
+      .demo-controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+        margin-bottom: 1rem;
+      }
+      .demo-controls button {
+        min-height: 44px;
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        font-family: inherit;
+        border: solid 1px var(--line);
+        border-radius: 0.375rem;
+        background: var(--card);
+        color: inherit;
+        cursor: pointer;
+      }
+      .demo-controls button:hover {
+        border-color: var(--accent);
+      }
+      .demo-controls button:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+      .demo-controls button:disabled:hover {
+        border-color: var(--line);
+      }
+      #demo-status {
+        font-size: 0.9rem;
+        color: var(--muted);
+      }
+      .demo-stage .frame {
+        border: solid 1px var(--line);
+        border-radius: 0.5rem;
+        padding: 1rem 1.25rem;
+        background: var(--card);
+      }
+      .demo-stage .frame h2 {
+        margin-top: 0;
+        font-size: 1.15rem;
+      }
+      .demo-stage .frame h3 {
+        margin: 1rem 0 0.25rem;
+        font-size: 0.95rem;
+        color: var(--accent);
+      }
+      .msg {
+        margin: 0.75rem 0;
+        max-width: 52rem;
+      }
+      .msg p {
+        margin: 0;
+      }
+      .msg.user {
+        display: flex;
+        justify-content: flex-end;
+      }
+      .msg.user p {
+        max-width: 42rem;
+        padding: 0.55rem 1.1rem;
+        background: #e9e9e9;
+        border-radius: 1.4rem;
+      }
+      .msg.tool {
+        font-size: 0.9rem;
+        color: #888;
+      }
+      .msg.tool p {
+        padding: 0.2rem 0;
+      }
+      .msg.tool p::after {
+        content: "  \203A";
+      }
+      .mention {
+        display: inline-block;
+        padding: 0.05rem 0.5rem;
+        margin-right: 0.25rem;
+        font-size: 0.85rem;
+        background: #ddf0e8;
+        border-radius: 0.4rem;
+      }
+      .msg.assistant {
+        padding: 0.6rem 0;
+      }
+      .issue-list {
+        columns: 14rem 3;
+        column-gap: 2rem;
+        font-size: 0.9rem;
+        margin: 0.5rem 0 0;
+      }
+    </style>
+    __footer__
+  </body>
+</html>

package/web/demo-chatgpt/index.ts

@@ -0,0 +1,19 @@
+/*
+  index.ts
+  Serves the Kilotest demonstration page.
+*/
+
+// IMPORTS
+
+import {populateTemplate} from '../../util.ts';
+
+// FUNCTIONS
+
+// Returns the demonstration page.
+export const answer = async () => {
+  const answerPage = await populateTemplate(import.meta.dirname, {});
+  return {
+    status: 'ok',
+    answerPage
+  };
+};

package/web/tutorialAI/index.html

@@ -111,6 +111,8 @@
           <li>Toggle the <q>Ask/Allow</q> buttons to show <q>Allow</q>.</li>
         </ol>
       </details>
+      <h2>Demonstration</h2>
+      <p>A <a href="/demo-chatgpt.html">step-through demonstration</a> shows ChatGPT using Kilotest to discover tested pages, inspect reported issues, and request tests and retests.</p>
       <h2 id="other">Other AI platforms</h2>
       <p>You can connect Kilotest to some other AI platforms, too. The instructions above are limited to consumer platforms that are either free or relatively inexpensive (US$20 per month or less). Business platforms such as ChatGPT Business, and developer platforms such as Devin Desktop, also permit you to enable Kilotest.</p>
       <p>Feel free to submit a comment below about empowering any AI platform to use Kilotest.</p>