@jrpool/kilotest 60.1.11 → 60.2.1

package/.devin/config.local.json

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

package/lhm.plugin.json

@@ -4423,5 +4423,5 @@
       }
     }
   ],
-  "version": "60.1.11"
+  "version": "60.2.1"
 }

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

package/package.json

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

package/style.css

@@ -351,6 +351,9 @@ body.styled details[open] summary {
 body.styled details > :not(summary) {
   padding-inline: 1.25rem;
 }
+body.styled details > :is(ol, ul):not([class]) {
+  padding-inline-start: 2.75rem;
+}
 body.styled .hero details h2 {
   margin: 1.5rem 0 0.5rem;
 }

package/web/listDiagnoses/index.html

@@ -9,10 +9,9 @@
     __header__
     <main class="page">
       <h1>Diagnoses of the <q>__issue__</q> violation by element __catalogIndex__ on the __target__ page</h1>
-      <h2>Basics</h2>
-      <h3>About the page</h3>
+      <h2>About the page</h2>
 __pageFacts__
-      <h3>About the issue</h3>
+      <h2>About the issue</h2>
 __issueFacts__
       <h3>About the violator</h3>
 __violatorFacts__

package/web/listDiagnoses/index.ts

@@ -30,7 +30,6 @@ const populateQuery = async (
   issueID: string,
   reportID: string,
   catalogIndex: string,
-  pathID: string | null,
   query: Record<string, any>
 ) => {
   // Get the report.
@@ -81,7 +80,7 @@ const populateQuery = async (
   }
   // Otherwise, i.e. if it succeeded, add the issue-facts and violator-facts lists to the query.
   query.issueFacts = getIssueFactsLines(report, issueID, margin).join('\n');
-  query.violatorFacts = getViolatorFactsLines(report, issueID, catalogIndex, pathID, margin).join('\n');
+  query.violatorFacts = getViolatorFactsLines(report, issueID, catalogIndex, margin).join('\n');
   // Initialize an array of diagnoses.
   const diagnoses: any[] = [];
   // For each violating standard instance that pertains to this combination of issue and violator:
@@ -111,13 +110,11 @@ const populateQuery = async (
   query.diagnoses = lines.join('\n');
 };
 // Returns a page answering the diagnoses question.
-export const answer = async (pageArgs: string, search: string) => {
+export const answer = async (pageArgs: string) => {
   const [issueID, reportID, catalogIndex] = pageArgs.split('/') as [string, string, string];
-  const params = new URLSearchParams(search);
-  const pathID = params.get('pathID');
   const query: Record<string, any> = {};
   // Create a query to replace the placeholders.
-  await populateQuery(issueID, reportID, catalogIndex, pathID, query);
+  await populateQuery(issueID, reportID, catalogIndex, query);
   // If this failed:
   if (query.error) {
     // Return why.

package/web/listIssues/index.html

@@ -10,7 +10,7 @@
     <main class="page">
       <h1>Issues reported for __target__</h1>
       __oldWarn__
-      <h2>About the tests</h2>
+      <h2>About the page</h2>
 __pageFacts__
       <h2>History</h2>
 __history__

package/web/listIssues/listIssues.test.ts

@@ -108,17 +108,13 @@ test('listIssues for the empty report shows no issue links', async () => {
 test('listIssues counts the prevented rule engine as called but not able to test', async () => {
   const result = await answer('260101T0006-prv');
   assert.equal(result.status, 'ok');
-  assert.ok(result.answerPage.includes('<li>Called: 2</li>'));
-  assert.ok(result.answerPage.includes('<li>Were able to test: 1</li>'));
-  assert.ok(result.answerPage.includes('<li>Reported any rule violations: 1</li>'));
+  assert.ok(result.answerPage.includes('<li>Rule engines: 2 called, 1 able to test, 1 reported any violations</li>'));
 });
 
 test('listIssues counts a rule engine that reported no violations as called and able to test', async () => {
   const result = await answer('260101T0005-emp');
   assert.equal(result.status, 'ok');
-  assert.ok(result.answerPage.includes('<li>Called: 1</li>'));
-  assert.ok(result.answerPage.includes('<li>Were able to test: 1</li>'));
-  assert.ok(result.answerPage.includes('<li>Reported any rule violations: 0</li>'));
+  assert.ok(result.answerPage.includes('<li>Rule engines: 1 called, 1 able to test, 0 reported any violations</li>'));
 });
 
 test('listIssues counts an unknown prevented engine as called but not able to test', async () => {
@@ -131,8 +127,7 @@ test('listIssues counts an unknown prevented engine as called but not able to te
   try {
     const result = await answer('260103T0000-unk');
     assert.equal(result.status, 'ok');
-    assert.ok(result.answerPage.includes('<li>Called: 3</li>'));
-    assert.ok(result.answerPage.includes('<li>Were able to test: 1</li>'));
+    assert.ok(result.answerPage.includes('<li>Rule engines: 3 called, 1 able to test, 1 reported any violations</li>'));
   }
   finally {
     await fs.unlink(reportPath);
@@ -171,8 +166,7 @@ test('listIssues shows violation and violator counts for an issue with multiple
   // The mul report has linkNoText with 4 violations by 3 violators.
   const result = await answer('260101T0008-mul');
   assert.equal(result.status, 'ok');
-  assert.ok(result.answerPage.includes('<li>Violations: 4</li>'));
-  assert.ok(result.answerPage.includes('<li>Violators: 3</li>'));
+  assert.ok(result.answerPage.includes('<li>Results: 4 violations, 3 violators</li>'));
 });
 
 test('listIssues handles acts with no standardResult instances', async () => {

package/web/listViolators/index.html

@@ -9,10 +9,9 @@
     __header__
     <main class="page">
       <h1>Violators of the <q>__issue__</q> issue for the __target__ page</h1>
-      <h2>Basics</h2>
-      <h3>About the page</h3>
+      <h2>About the page</h2>
 __pageFacts__
-      <h3>About the issue</h3>
+      <h2>About the issue</h2>
 __issueFacts__
       <h2>Violators</h2>
       <p>Here are the HTML elements reported to violate rules belonging to the <q>__issue__</q> issue.</p>

package/web/listViolators/index.ts

@@ -92,11 +92,11 @@ const populateQuery = async (
   let takeMeAdviceNeeded = false;
   // For each violator:
   violators.forEach((violator: any, index: number) => {
-    const {catalogIndex, pathID} = violator;
+    const {catalogIndex} = violator;
     // Add a heading to the lines.
     lines.push(`${margin}<li><h3>Element ${catalogIndex}</h3>`);
     // Add the violator facts to the lines.
-    lines.push(...getViolatorFactsLines(report, issueID, catalogIndex, pathID, `${margin}  `, 'pseudoTopLevel'));
+    lines.push(...getViolatorFactsLines(report, issueID, catalogIndex, `${margin}  `, 'pseudoTopLevel'));
     if (catalogIndex) {
       const catalogItem = catalog[catalogIndex];
       if (catalogItem?.textLinkable) {
@@ -107,8 +107,7 @@ const populateQuery = async (
         lines.push(`${margin}  <p class="links">${takeMeLink}</p>`);
       }
     }
-    const href
-    = `/listDiagnoses.html/${issueID}/${reportID}/${catalogIndex}?pathID=${encodeURIComponent(pathID)}`;
+    const href = `/listDiagnoses.html/${issueID}/${reportID}/${catalogIndex}`;
     const questionString = 'What diagnoses were reported';
     const labelString = `${questionString} for violator ${index + 1}?`;
     lines.push(

package/web/listViolators/listViolators.test.ts

@@ -86,7 +86,7 @@ test('listViolators includes links to listDiagnoses for violators', async () =>
 test('listViolators excludes cantTell instances from the violator count', async () => {
   const result = await answer('focusIndicationBad/260101T0000-mix');
   assert.equal(result.status, 'ok');
-  assert.ok(result.answerPage.includes('<li>Violators: 0</li>'));
+  assert.ok(result.answerPage.includes('<li>Results: 0 violations, 0 violators</li>'));
   assert.ok(!result.answerPage.includes('<h3>Element'));
 });
 
@@ -272,7 +272,7 @@ test('listViolators handles instances with missing catalogIndex and acts with no
     const result = await answer('linkNoText/260101T0004-nvi');
     assert.equal(result.status, 'ok');
     // Should show plural violator count.
-    assert.ok(result.answerPage.includes('<li>Violators: 2</li>'));
+    assert.ok(result.answerPage.includes('<li>Results: 2 violations, 2 violators</li>'));
   }
   finally {
     await fs.unlink(reportPath).catch(() => {});

package/web/tutorialAI/index.html

@@ -6,9 +6,10 @@
     <meta name="description" content="Kilotest tutorial: how to connect an AI platform to Kilotest for technical analysis">
     <title>Connect an AI Platform | Kilotest</title>
   </head>
-  <body>
-    <main>
-      <h1><a href="/">Kilotest</a>: Connect an AI Platform</h1>
+  <body class="styled">
+    __header__
+    <main class="page">
+      <h1>Connect an AI Platform</h1>
       <h2>Purpose</h2>
       <p>This tutorial shows you how to make Kilotest available to assistants powered by artificial intelligence. Suppose:</p>
       <ul>
@@ -16,53 +17,55 @@
         <li>You want to audit the quality of a web page.</li>
       </ul>
       <p>Then the models on your AI platform can use Kilotest <strong>if</strong> you make Kilotest available on the platform.</p>
-      <h2>What AI platform do you use?</h2>
-      <ul>
-        <li><a href="#claude">Claude.ai in a browser or Claude Desktop</a></li>
-        <li><a href="#vibe">Mistral Vibe</a></li>
-        <li><a href="#perplexity">Perplexity Pro in a browser</a></li>
-        <li><a href="#other">Other platforms</a></li>
-      </ul>
-      <h2 id="claude"><a href="https://claude.ai">Claude.ai in a browser</a> or <a href="https://downloads.claude.com">Claude Desktop</a></h2>
-      <ol>
-        <li><a href="https://claude.ai/new">Start a new task</a>.</li>
-        <li>Expand the left sidebar to see the labels.</li>
-        <li>Click the <q>Customize</q> button.</li>
-        <li>Click the <q>Connectors</q> button.</li>
-        <li>Enter <q>Kilotest</q> in the <q>Search</q> input.</li>
-        <li>Select <q>Kilotest</q> from the search results.</li>
-        <li>Click the <q>Connect to Claude</q> button.</li>
-        <li>If you wish, click the <q>Your tool permissions</q> button and adjust the settings for the Kilotest tools.</li>
-      </ol>
-      <h2 id="vibe">Mistral Vibe</h2>
-      <ol>
-        <li>Choose the <a href="https://chat.mistral.ai/work">Work tab</a>.</li>
-        <li>Click <q>Connect your apps for better answers</q>.</li>
-        <li>Click the <q>+ Add connector</q> button.</li>
-        <li>Click the <q>Add a custom connector</q> button.</li>
-        <li>Enter <q>Kilotest</q> into the <q>Connector name</q> input.</li>
-        <li>Enter <q>https://kilotest.com/mcp</q> into the <q>Server</q> input.</li>
-        <li>Click the <q>Add connector</q> button.</li>
-        <li>Toggle the <q>Ask/Allow</q> buttons to show <q>Allow</q>.</li>
-      </ol>
-      <h2 id="perplexity"><a href="https://www.perplexity.ai/">Perplexity</a> Pro in a browser</h2>
-      <ol>
-        <li>After signing in, click the <q>Customize</q> button in the left sidebar.</li>
-        <li>Click the <q>+ Custom connector</q> menu button.</li>
-        <li>Click the <q>Add MCP connector</q> menu item.</li>
-        <li>Enter <q>Kilotest</q> into the <q>Name</q> input.</li>
-        <li>Enter <q>https://kilotest.com/mcp</q> into the <q>MCP server URL</q> input.</li>
-        <li>Click the <q>Advanced</q> menu button to open the advanced settings.</li>
-        <li>Under <q>Authentication</q>, change the authentication type to <q>None</q>.</li>
-        <li>Check the <q>I understand &hellip;</q> checkbox.</li>
-        <li>Click the <q>Add</q> button.</li>
-      </ol>
-      <p>Once you add Kilotest, it <strong>may</strong> become available in the Perplexity app on your computer or mobile device, too.</p>
+      <h2>Platform instructions</h2>
+      <details id="claude">
+        <summary>Claude.ai in a browser or Claude Desktop</summary>
+        <p>These instructions apply to <a href="https://claude.ai">Claude.ai in a browser</a> and <a href="https://downloads.claude.com">Claude Desktop</a>.</p>
+        <ol>
+          <li><a href="https://claude.ai/new">Start a new task</a>.</li>
+          <li>Expand the left sidebar to see the labels.</li>
+          <li>Click the <q>Customize</q> button.</li>
+          <li>Click the <q>Connectors</q> button.</li>
+          <li>Enter <q>Kilotest</q> in the <q>Search</q> input.</li>
+          <li>Select <q>Kilotest</q> from the search results.</li>
+          <li>Click the <q>Connect to Claude</q> button.</li>
+          <li>If you wish, click the <q>Your tool permissions</q> button and adjust the settings for the Kilotest tools.</li>
+        </ol>
+      </details>
+      <details id="vibe">
+        <summary>Mistral Vibe</summary>
+        <ol>
+          <li>Choose the <a href="https://chat.mistral.ai/work">Work tab</a>.</li>
+          <li>Click <q>Connect your apps for better answers</q>.</li>
+          <li>Click the <q>+ Add connector</q> button.</li>
+          <li>Click the <q>Add a custom connector</q> button.</li>
+          <li>Enter <q>Kilotest</q> into the <q>Connector name</q> input.</li>
+          <li>Enter <q>https://kilotest.com/mcp</q> into the <q>Server</q> input.</li>
+          <li>Click the <q>Add connector</q> button.</li>
+          <li>Toggle the <q>Ask/Allow</q> buttons to show <q>Allow</q>.</li>
+        </ol>
+      </details>
+      <details id="perplexity">
+        <summary>Perplexity Pro in a browser</summary>
+        <p>These instructions apply to <a href="https://www.perplexity.ai/">Perplexity</a> Pro in a browser.</p>
+        <ol>
+          <li>After signing in, click the <q>Customize</q> button in the left sidebar.</li>
+          <li>Click the <q>+ Custom connector</q> menu button.</li>
+          <li>Click the <q>Add MCP connector</q> menu item.</li>
+          <li>Enter <q>Kilotest</q> into the <q>Name</q> input.</li>
+          <li>Enter <q>https://kilotest.com/mcp</q> into the <q>MCP server URL</q> input.</li>
+          <li>Click the <q>Advanced</q> menu button to open the advanced settings.</li>
+          <li>Under <q>Authentication</q>, change the authentication type to <q>None</q>.</li>
+          <li>Check the <q>I understand &hellip;</q> checkbox.</li>
+          <li>Click the <q>Add</q> button.</li>
+        </ol>
+        <p>Once you add Kilotest, it <strong>may</strong> become available in the Perplexity app on your computer or mobile device, too.</p>
+      </details>
       <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>
       <p>You can also submit an issue on the <a href="https://github.com/jrpool/kilotest/issues">Kilotest GitHub repository</a>.</p>
-      <section id="suggest-improvement" class="main">
+      <section id="suggest-improvement">
         <h2>Suggest improvements</h2>
         <p>Please submit suggestions for improving this tutorial below. The Kilotest managers will review them.</p>
         <form id="comment-form" novalidate>
@@ -139,7 +142,7 @@
       #suggest-improvement {
         margin-top: 2rem;
         padding-top: 2rem;
-        border-top: solid 1px #ccc;
+        border-top: solid 1px var(--line);
       }
       #comment-form {
         margin: 1rem 0;
@@ -152,12 +155,12 @@
         padding: 0.5rem;
         border: solid 1px #ccc;
         border-radius: 0.25rem;
-        font-family: system-ui, sans-serif;
+        font-family: inherit;
         font-size: 1rem;
       }
       .char-count {
         font-size: 0.875rem;
-        color: #666;
+        color: var(--muted);
         margin: 0.25rem 0;
       }
       .char-count.low {

package/web/util.test.ts

@@ -215,10 +215,8 @@ test('getPageFactsLines returns the about-page list lines for a report', async (
   const lines = getPageFactsLines(getPageDataStrings(report), getReportData(report), '  ');
   const html = lines.join('\n');
   assert.ok(html.includes('<li>URL: <a href="https://example.com/mixed">'));
-  assert.ok(html.includes('<li>Summary of results:'));
-  assert.ok(html.includes('<li>Called: 2</li>'));
-  assert.ok(html.includes('<li>Violations: 3</li>'));
-  assert.ok(html.includes('<li>Issues: 2</li>'));
+  assert.ok(html.includes('<li>Rule engines: 2 called, 2 able to test, 2 reported any violations</li>'));
+  assert.ok(html.includes('<li>Results: 3 violations, 2 violators, 2 issues</li>'));
 });
 
 test('getPageFactsLines ends with a link to download the full report', async () => {
@@ -227,7 +225,7 @@ test('getPageFactsLines ends with a link to download the full report', async ()
   const lines = getPageFactsLines(getPageDataStrings(report), getReportData(report), '');
   const topItems = parse(lines.join('\n')).querySelectorAll('ul:not(ul ul) > li');
   const lastItem = topItems[topItems.length - 1]!;
-  assert.ok(topItems[topItems.length - 2]!.text.trim().startsWith('Summary of results:'));
+  assert.ok(topItems[topItems.length - 2]!.text.trim().startsWith('Results:'));
   assert.equal(lastItem.querySelector('a')?.getAttribute('href'), '/fullReport.json/260101T0000-mix');
   assert.equal(lastItem.text.trim(), 'Download the full technical report (JSON)');
 });
@@ -237,28 +235,28 @@ const getResultFacts = async (reportID: string) => {
   const {getReportData} = await import('./util.ts');
   const report = await getFixtureReport(reportID);
   const lines = getPageFactsLines(getPageDataStrings(report), getReportData(report), '');
-  const items = parse(lines.join('\n')).querySelectorAll('li');
-  const itemTexts: string[] = items.map(li => li.text.trim());
-  const getAmount = (label: string) => {
-    const text = itemTexts.find(t => t.startsWith(`${label}: `));
-    assert.ok(text, `${label} item exists`);
-    return Number(text.slice(label.length + 2));
-  };
-  // The summary item is the parent of the rule-engine item and the 3 amount items.
-  const summaryItem = items.find(li => li.text.trim().startsWith('Summary of results:'));
-  assert.ok(summaryItem, 'Summary of results item exists');
-  const summaryList = summaryItem.querySelector('ul')!;
-  const amountLabels = summaryList.childNodes
-  .filter((node: any) => node.tagName === 'LI')
-  .map(li => li.text.trim().split(':')[0]);
+  const itemTexts: string[] = parse(lines.join('\n'))
+  .querySelectorAll('li')
+  .map(li => li.text.trim());
+  const enginesItem = itemTexts.find(t => t.startsWith('Rule engines: '));
+  assert.ok(enginesItem, 'Rule engines item exists');
+  const engineAmounts = enginesItem.match(
+    /^Rule engines: (\d+) called, (\d+) able to test, (\d+) reported any violations$/
+  );
+  assert.ok(engineAmounts, 'Rule engines item has the expected format');
+  const resultsItem = itemTexts.find(t => t.startsWith('Results: '));
+  assert.ok(resultsItem, 'Results item exists');
+  const resultAmounts = resultsItem.match(
+    /^Results: (\d+) violations?, (\d+) violators?, (\d+) issues?$/
+  );
+  assert.ok(resultAmounts, 'Results item has the expected format');
   return {
-    called: getAmount('Called'),
-    tested: getAmount('Were able to test'),
-    reporters: getAmount('Reported any rule violations'),
-    amountLabels,
-    violations: getAmount('Violations'),
-    violators: getAmount('Violators'),
-    issues: getAmount('Issues')
+    called: Number(engineAmounts[1]),
+    tested: Number(engineAmounts[2]),
+    reporters: Number(engineAmounts[3]),
+    violations: Number(resultAmounts[1]),
+    violators: Number(resultAmounts[2]),
+    issues: Number(resultAmounts[3])
   };
 };
 
@@ -281,7 +279,6 @@ for (const [reportID, called, tested, reporters, violations, violators, issues]
     assert.equal(facts.called, called);
     assert.equal(facts.tested, tested);
     assert.equal(facts.reporters, reporters);
-    assert.deepEqual(facts.amountLabels, ['Rule engines', 'Violations', 'Violators', 'Issues']);
     assert.equal(facts.violations, violations);
     assert.equal(facts.violators, violators);
     assert.equal(facts.issues, issues);
@@ -297,14 +294,13 @@ test('getIssueFactsLines returns the about-issue list lines for a report', async
   assert.ok(html.includes('<li>Priority:'));
   assert.ok(html.includes('<li>Related WCAG standard: <a href='));
   assert.ok(html.includes('<li>Reported by'));
-  assert.ok(html.includes('<li>Violations:'));
-  assert.ok(html.includes('<li>Violators:'));
+  assert.ok(/<li>Results: \d+ violations?, \d+ violators?<\/li>/.test(html));
 });
 
 test('getViolatorFactsLines returns the about-violator list lines for a report', async () => {
   const {getViolatorFactsLines} = await import('./util.ts');
   const report = await getFixtureReport('260101T0000-mix');
-  const lines = getViolatorFactsLines(report, 'linkNoText', '0', null, '  ');
+  const lines = getViolatorFactsLines(report, 'linkNoText', '0', '  ');
   const html = lines.join('\n');
   assert.ok(html.includes('<li>Tag name: <code>'));
   assert.ok(html.includes('<li>Text:'));

package/web/util.ts

@@ -252,7 +252,7 @@ export const getReportData = (report: UsableReport): ReportData => {
 export const getPageData = (report: UsableReport): PageData => {
   const {what: description, url} = report.target;
   // Get the elapsed time in days since the report was completed.
-  const daysAgo = getAgoDays(getReportEndTime(report));
+  const daysAgo = getAgoDays(getReportEndTime(report))!;
   // Return the data.
   return {
     description,
@@ -270,7 +270,7 @@ export const getPageDataStrings = (report: UsableReport): PageDataStrings => {
     description,
     url,
     urlLink: `<a href="${url}">${url}</a>`,
-    testInfo: `Tested ${daysAgo === 1 ? '1 day' : `${daysAgo} days`} ago on ${when} by job <code>${report.id}</code>`,
+    testInfo: `Tested ${getCountString(daysAgo!, 'day', 'days')} ago on ${when} by job <code>${report.id}</code>`,
     fullReportLink: `<a href="/fullReport.json/${report.id}">Download the full technical report</a> (JSON)`
   };
 };
@@ -279,27 +279,20 @@ export const getPageFactsLines = (
   strings: PageDataStrings,
   summary: ResultsSummary,
   margin: string
-): string[] => [
-  `${margin}<ul>`,
-  `${margin}  <li>URL: ${strings.urlLink}</li>`,
-  `${margin}  <li>${strings.testInfo}</li>`,
-  `${margin}  <li>Summary of results:`,
-  `${margin}    <ul>`,
-  `${margin}      <li>Rule engines:`,
-  `${margin}        <ul>`,
-  `${margin}          <li>Called: ${summary.engineCount}</li>`,
-  `${margin}          <li>Were able to test: ${summary.testedEngineCount}</li>`,
-  `${margin}          <li>Reported any rule violations: ${summary.reporterCount}</li>`,
-  `${margin}        </ul>`,
-  `${margin}      </li>`,
-  `${margin}      <li>Violations: ${summary.violationCount}</li>`,
-  `${margin}      <li>Violators: ${summary.violatorCount}</li>`,
-  `${margin}      <li>Issues: ${summary.issueCount}</li>`,
-  `${margin}    </ul>`,
-  `${margin}  </li>`,
-  `${margin}  <li>${strings.fullReportLink}</li>`,
-  `${margin}</ul>`
-];
+): string[] => {
+  const {
+    engineCount, issueCount, reporterCount, testedEngineCount, violationCount, violatorCount
+  } = summary;
+  return [
+    `${margin}<ul>`,
+    `${margin}  <li>URL: ${strings.urlLink}</li>`,
+    `${margin}  <li>${strings.testInfo}</li>`,
+    `${margin}  <li>Rule engines: ${engineCount} called, ${testedEngineCount} able to test, ${reporterCount} reported any violations</li>`,
+    `${margin}  <li>Results: ${getCountString(violationCount, 'violation', 'violations')}, ${getCountString(violatorCount, 'violator', 'violators')}, ${getCountString(issueCount, 'issue', 'issues')}</li>`,
+    `${margin}  <li>${strings.fullReportLink}</li>`,
+    `${margin}</ul>`
+  ];
+};
 // Returns the lines of a list of facts about an issue in an available report.
 export const getIssueFactsLines = (
   report: UsableReport,
@@ -328,8 +321,7 @@ export const getIssueFactsLines = (
     `${margin}  <li>Priority: ${getWeightName(weight)}</li>`,
     `${margin}  <li>Related WCAG standard: <a href="${getWCAGLink(wcag)}">${wcag}</a></li>`,
     `${margin}  <li>Reported by ${reporterString} (${getEngineNamesString(reporters)})</li>`,
-    `${margin}  <li>Violations: ${violationCount}</li>`,
-    `${margin}  <li>Violators: ${violatorIndexes.size}</li>`,
+    `${margin}  <li>Results: ${getCountString(violationCount, 'violation', 'violations')}, ${getCountString(violatorIndexes.size, 'violator', 'violators')}</li>`,
     `${margin}</ul>`
   ];
 };
@@ -338,7 +330,6 @@ export const getViolatorFactsLines = (
   report: UsableReport,
   issueID: string,
   catalogIndex: string,
-  pathID: string | null,
   margin: string,
   listClass?: string
 ): string[] => {
@@ -350,9 +341,12 @@ export const getViolatorFactsLines = (
   const text = catalogItem?.text;
   // Identify the rule engines that reported the violator for the issue.
   const reporters = new Set<string>();
-  getTestActInstances(report, {violationsOnly: true, issueID, catalogIndex}).forEach(({act}) => {
+  let instancePathID: string | undefined;
+  getTestActInstances(report, {violationsOnly: true, issueID, catalogIndex}).forEach(({act, instance}) => {
     reporters.add(act.which!);
+    instancePathID ??= instance.pathID;
   });
+  const pathID = catalogItem?.pathID || instancePathID;
   const lines: string[] = [
     `${margin}<ul${listClass ? ` class="${listClass}"` : ''}>`,
     `${margin}  <li>Tag name: <code>${tagName || 'HTML'}</code></li>`