Add Playwright validation for tool template runtime header and theme usage - PR_26126_066-tool-template-runtime-validation

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.txt

@@ -1,6 +1,6 @@
 Playwright V8 Coverage Report
 
-PR: PR_26126_059-playwright-coverage-multi-tool-verification
+PR: generated by current workspace-v2 Playwright run.
 Coverage source: Playwright/Chromium built-in V8 coverage.
 Coverage scope: all repo-relative browser JavaScript collected by Playwright/Chromium V8 coverage.
 Dependencies: no new npm packages.
@@ -13,11 +13,15 @@ Note: coverage entries are aggregated across every page/tool where coverageRepor
 Exercised tool entry points detected:
 (84%) Preview Generator V2 - exercised 19 runtime JS files
 (49%) Palette Manager - exercised 12 runtime JS files
+(89%) First-Class Tool Starter Template - exercised 10 runtime JS files
 (0%) Workspace V2 - not exercised by this Playwright run
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(100%) none changed - no changed runtime JS files
+(67%) tools/templates/first-class-tool-starter/js/ToolStarterApp.js - executed lines 69/69; executed functions 8/12
+(92%) tools/templates/first-class-tool-starter/js/controls/ToolStarterShellControl.js - executed lines 111/111; executed functions 11/12
+(100%) tools/templates/first-class-tool-starter/js/bootstrap.js - executed lines 42/42; executed functions 4/4
+(100%) tools/templates/first-class-tool-starter/js/controls/AccordionSection.js - executed lines 27/27; executed functions 5/5
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -96,6 +100,7 @@ Files with executed line/function counts where available:
 (65%) tools/palette-manager-v2/controls/SourcePaletteBrowserControl.js - executed lines 121/121; executed functions 15/23
 (67%) src/shared/number/numberUtils.js - executed lines 14/14; executed functions 2/3
 (67%) tools/preview-generator-v2/PreviewGeneratorV2ShellControl.js - executed lines 117/117; executed functions 8/12
+(67%) tools/templates/first-class-tool-starter/js/ToolStarterApp.js - executed lines 69/69; executed functions 8/12
 (71%) tools/palette-manager-v2/controls/PaletteValidationErrorControl.js - executed lines 30/30; executed functions 5/7
 (73%) src/engine/theme/mount-shared-header.js - executed lines 143/143; executed functions 8/11
 (75%) src/engine/core/FixedTicker.js - executed lines 36/36; executed functions 3/4
@@ -106,7 +111,10 @@ Files with executed line/function counts where available:
 (80%) src/engine/theme/accordionV2/accordionV2.js - executed lines 26/26; executed functions 4/5
 (81%) tools/preview-generator-v2/PreviewGeneratorV2App.js - executed lines 539/539; executed functions 47/58
 (82%) samples/shared/sampleDetailPageEnhancement.js - executed lines 471/471; executed functions 41/50
+(86%) tools/templates/first-class-tool-starter/js/controls/StatusLogControl.js - executed lines 21/21; executed functions 6/7
 (87%) tools/common/PaletteSortService.js - executed lines 103/103; executed functions 13/15
+(88%) tools/templates/first-class-tool-starter/js/controls/SourceInputControl.js - executed lines 33/33; executed functions 7/8
+(92%) tools/templates/first-class-tool-starter/js/controls/ToolStarterShellControl.js - executed lines 111/111; executed functions 11/12
 (100%) samples/phase-01/0102/main.js - executed lines 23/23; executed functions 1/1
 (100%) samples/shared/numberUtils.js - executed lines 7/7; executed functions 1/1
 (100%) src/engine/audio/index.js - executed lines 15/15; executed functions 1/1
@@ -141,9 +149,21 @@ Files with executed line/function counts where available:
 (100%) tools/preview-generator-v2/PreviewGeneratorV2Logger.js - executed lines 19/19; executed functions 5/5
 (100%) tools/preview-generator-v2/PreviewGeneratorV2RepoAccess.js - executed lines 21/21; executed functions 5/5
 (100%) tools/preview-generator-v2/PreviewGeneratorV2Ui.js - executed lines 48/48; executed functions 9/9
+(100%) tools/templates/first-class-tool-starter/js/bootstrap.js - executed lines 42/42; executed functions 4/4
+(100%) tools/templates/first-class-tool-starter/js/controls/AccordionSection.js - executed lines 27/27; executed functions 5/5
+(100%) tools/templates/first-class-tool-starter/js/controls/ActionNavControl.js - executed lines 16/16; executed functions 4/4
+(100%) tools/templates/first-class-tool-starter/js/controls/InspectorControl.js - executed lines 8/8; executed functions 3/3
+(100%) tools/templates/first-class-tool-starter/js/controls/PreviewPanelControl.js - executed lines 23/23; executed functions 5/5
+(100%) tools/templates/first-class-tool-starter/js/services/ToolStateSerializer.js - executed lines 13/13; executed functions 3/3
 
 Uncovered or low-coverage changed JS files:
-(100%) none changed - no changed runtime JS files
+(100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) tests/helpers/playwrightV8CoverageReporter.mjs - changed JS file not collected as browser runtime coverage
+(0%) tests/playwright/PreviewGeneratorV2Baseline.spec.mjs - changed JS file not collected as browser runtime coverage
+(0%) tools/templates/first-class-tool-starter/tests/playwright/FirstClassToolStarter.spec.mjs - changed JS file not collected as browser runtime coverage
+(67%) tools/templates/first-class-tool-starter/js/ToolStarterApp.js - changed JS file with browser V8 coverage
+(92%) tools/templates/first-class-tool-starter/js/controls/ToolStarterShellControl.js - changed JS file with browser V8 coverage
+(100%) tools/templates/first-class-tool-starter/js/bootstrap.js - changed JS file with browser V8 coverage
+(100%) tools/templates/first-class-tool-starter/js/controls/AccordionSection.js - changed JS file with browser V8 coverage

docs/dev/reports/tool_template_runtime_validation.txt

@@ -0,0 +1,38 @@
+# PR_26126_066 Tool Template Runtime Validation
+
+Scope:
+- Updated the first-class tool starter under tools/templates.
+- Updated workspace-v2 Playwright coverage/reporting so the starter is launched in the normal test lane.
+- Updated V8 coverage reporting to include the first-class tool starter template entry point.
+- No live tools outside tests/coverage plumbing were modified.
+
+Template runtime hardening:
+- Header markup now follows the Preview Generator V2 / Palette Manager-style shell pattern with body.tools-platform-tool-page, collapsible header/details, #shared-theme-header, and a tool-local header host.
+- Template now consumes src/engine/theme/main.css, src/engine/ui/hubCommon.css, src/engine/theme/accordionV2/accordionV2.css, and src/engine/theme/mount-shared-header.js.
+- Added ToolStarterShellControl to own Hide Header and Details behavior, summary state, fullscreen state classes, and summary metadata.
+- AccordionSection now uses data-accordion-v2-open, data-accordion-v2-bound, and data-accordion-v2-icon-state behavior consistent with current tool accordions.
+- Source input state now refreshes visible validation text when required input is cleared.
+
+Playwright and coverage updates:
+- Workspace-v2 Playwright now launches tools/templates/first-class-tool-starter/index.html.
+- Workspace-v2 Playwright validates template launch, header/theme links, no tools/shared script/link dependencies, Hide Header and Details behavior, accordion interactions, Run enabled/disabled state, status/log clear behavior, and missing input validation.
+- Playwright V8 coverage report now includes First-Class Tool Starter Template in the exercised tool entry points.
+- Coverage helper excludes test specs under /tests/ from changed runtime JS classification.
+
+Validation:
+- Playwright impacted: Yes
+- npm run test:workspace-v2 -> 5 passed.
+- Template-local Playwright validation: npx playwright test --config tools/templates/first-class-tool-starter/playwright.config.mjs --reporter=list -> 6 passed.
+- node --check passed for all changed starter JS/MJS files and updated Playwright/helper files.
+- git diff --check passed for scoped changed files.
+- Verified template HTML has no inline script blocks, style blocks, or inline event handlers.
+- Verified no actual tools/shared imports, script references, CSS references, or runtime dependencies were added.
+- Verified no tracked roadmap, samples, start_of_day, games, tools/shared, package, or package-lock files changed.
+
+Coverage evidence:
+- docs/dev/reports/playwright_v8_coverage_report.txt lists First-Class Tool Starter Template as exercised.
+- Changed runtime JS coverage includes ToolStarterApp, ToolStarterShellControl, bootstrap, and AccordionSection.
+
+Manual test notes:
+- Open tools/templates/first-class-tool-starter/index.html through a local HTTP server.
+- Confirm shared header renders, Hide Header and Details toggles the header, accordions collapse/expand, Run enables only after source input, Run writes status/output, Clear empties the status log, and clearing the source input restores the required-input message.

tests/helpers/playwrightV8CoverageReporter.mjs

@@ -38,15 +38,11 @@ export class PlaywrightV8CoverageReporter {
   async writeReport() {
     const coverageByPath = this.buildCoverageByPath();
     const changedJsFiles = this.getChangedJsFiles();
-    const changedRuntimeJsFiles = changedJsFiles.filter((filePath) => (
-      filePath.startsWith("src/")
-      || filePath.startsWith("tools/")
-      || filePath.startsWith("common/")
-    ));
+    const changedRuntimeJsFiles = changedJsFiles.filter((filePath) => this.isRuntimeJsFile(filePath));
     const reportLines = [
       "Playwright V8 Coverage Report",
       "",
-      "PR: PR_26126_059-playwright-coverage-multi-tool-verification",
+      "PR: generated by current workspace-v2 Playwright run.",
       "Coverage source: Playwright/Chromium built-in V8 coverage.",
       "Coverage scope: all repo-relative browser JavaScript collected by Playwright/Chromium V8 coverage.",
       "Dependencies: no new npm packages.",
@@ -229,6 +225,15 @@ export class PlaywrightV8CoverageReporter {
       .sort((left, right) => left.localeCompare(right));
   }
 
+  isRuntimeJsFile(filePath) {
+    if (filePath.includes("/tests/")) {
+      return false;
+    }
+    return filePath.startsWith("src/")
+      || filePath.startsWith("tools/")
+      || filePath.startsWith("common/");
+  }
+
   pathFromStatusLine(line) {
     const rawPath = line.slice(3).trim();
     if (!rawPath) {
@@ -275,6 +280,7 @@ export class PlaywrightV8CoverageReporter {
     const toolEntryPoints = [
       { name: "Preview Generator V2", prefix: "tools/preview-generator-v2/" },
       { name: "Palette Manager", prefix: "tools/palette-manager-v2/" },
+      { name: "First-Class Tool Starter Template", prefix: "tools/templates/first-class-tool-starter/" },
       { name: "Workspace V2", prefix: "tools/workspace-v2/" },
       { name: "Workspace Manager", prefix: "tools/workspace-manager/" }
     ];

tests/playwright/PreviewGeneratorV2Baseline.spec.mjs

@@ -120,6 +120,13 @@ async function openPaletteManager(page) {
   return server;
 }
 
+async function openToolTemplate(page) {
+  const server = await startRepoServer();
+  await coverageReporter.start(page);
+  await page.goto(`${server.baseUrl}/tools/templates/first-class-tool-starter/index.html`, { waitUntil: "networkidle" });
+  return server;
+}
+
 async function expectAccordionToggles(page, contentId) {
   const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
   const content = page.locator(`#${contentId}`);
@@ -443,4 +450,55 @@ test.describe("Preview Generator V2 baseline", () => {
       await server.close();
     }
   });
+
+  test("launches first-class tool starter template with runtime-valid controls", async ({ page }) => {
+    const server = await openToolTemplate(page);
+    const pageErrors = [];
+
+    page.on("pageerror", (error) => {
+      pageErrors.push(error.message);
+    });
+
+    try {
+      await expect(page.locator("body.tools-platform-tool-page[data-tool-id='first-class-tool-starter']")).toBeVisible();
+      await expect(page.locator('link[href="../../../src/engine/theme/main.css"]')).toHaveCount(1);
+      await expect(page.locator('link[href="../../../src/engine/theme/accordionV2/accordionV2.css"]')).toHaveCount(1);
+      await expect(page.locator("#shared-theme-header")).toBeAttached();
+      await expect(page.locator("[data-tool-starter-header]")).toContainText("First-Class Tool Starter");
+      await expect(page.locator("[data-tool-starter-summary]")).toHaveAttribute("data-tools-platform-summary-active", "1");
+
+      const sharedReferences = await page.evaluate(() => [
+        ...document.querySelectorAll("script[src],link[href]")
+      ].map((element) => element.getAttribute("src") || element.getAttribute("href"))
+        .filter((value) => value && value.includes("tools/shared")));
+      expect(sharedReferences).toEqual([]);
+
+      const summary = page.locator("[data-tool-starter-summary]");
+      const details = page.locator(".is-collapsible");
+      await expect(summary).toContainText("Hide Header and Details");
+      await summary.click();
+      await expect(details).not.toHaveAttribute("open", "");
+      await expect(summary).toHaveAttribute("data-tools-platform-summary-state", "collapsed");
+
+      await expectAccordionToggles(page, "sourceInputContent");
+
+      const runButton = page.locator("#runToolButton");
+      await expect(runButton).toBeDisabled();
+      await page.locator("#sourceInput").fill("starter value");
+      await expect(runButton).toBeEnabled();
+      await runButton.click();
+      await expect(page.locator("#statusLog")).toHaveValue(/Processed source value/);
+      await page.locator("#clearStatusButton").click();
+      await expect(page.locator("#statusLog")).toHaveValue("");
+
+      await page.locator("#sourceInput").fill("");
+      await expect(runButton).toBeDisabled();
+      await expect(page.locator("#sourceValidationMessage")).toContainText("Input is required");
+
+      expect(pageErrors).toEqual([]);
+    } finally {
+      await coverageReporter.stop(page);
+      await server.close();
+    }
+  });
 });

tools/templates/first-class-tool-starter/README.md

@@ -25,6 +25,7 @@ tools/<tool-id>/
       PreviewPanelControl.js
       SourceInputControl.js
       StatusLogControl.js
+      ToolStarterShellControl.js
     services/
       ToolStateSerializer.js
   tests/
@@ -62,6 +63,8 @@ The contracts define:
 - One class per file.
 - One control or section per class.
 - Header markup follows the Palette Manager V2 pattern: `body.tools-platform-tool-page`, collapsible header/details, `#shared-theme-header`, and a tool-local header host.
+- Header styling consumes `src/engine/theme/main.css`, `src/engine/ui/hubCommon.css`, and `src/engine/theme/accordionV2/accordionV2.css`.
+- `ToolStarterShellControl` owns Hide Header and Details behavior, summary state, and fullscreen state classes.
 - App/root class coordinates only and must not own DOM logic or business logic.
 - Controls own their DOM and their events.
 - Controls communicate through injected callbacks or the app coordinator.

tools/templates/first-class-tool-starter/index.html

@@ -1,23 +1,37 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>First-Class Tool Starter</title>
+    <link rel="stylesheet" href="../../../src/engine/theme/main.css">
+    <link rel="stylesheet" href="../../../src/engine/ui/hubCommon.css">
+    <link rel="stylesheet" href="../../../src/engine/theme/accordionV2/accordionV2.css">
     <link rel="stylesheet" href="./styles/toolStarter.css">
     <script type="module" src="./js/bootstrap.js"></script>
   </head>
-  <body class="tools-platform-tool-page hub-page-tools" data-tool-id="first-class-tool-starter">
+  <body class="tools-platform-tool-page tools-platform-surface hub-page-tools" data-tool-id="first-class-tool-starter">
     <details class="is-collapsible" open>
       <summary class="is-collapsible__summary" data-tool-starter-summary>Hide Header and Details</summary>
       <div class="is-collapsible__content">
         <div id="shared-theme-header"></div>
         <div class="tool-starter__header" data-tool-starter-header>
-          <div>
-            <h1>First-Class Tool Starter</h1>
-            <p>Replace this shell with the new tool name and purpose.</p>
-          </div>
-          <p class="tool-starter__header-meta">Self-contained starter</p>
+          <section class="tools-platform-frame tool-starter__local-shell-frame">
+            <div class="tools-platform-frame__accordion-content">
+              <div class="tools-platform-frame__accordion-summary">
+                <div class="tools-platform-frame__summary-copy">
+                  <h1 class="tools-platform-frame__title" data-tool-id="first-class-tool-starter">First-Class Tool Starter</h1>
+                  <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>
+                </div>
+                <div class="tools-platform-frame__summary-meta">
+                  <div class="tools-platform-frame__meta">Self-contained starter with no tools/shared dependency.</div>
+                </div>
+              </div>
+              <div class="tools-platform-frame__topline">
+                <p class="tools-platform-frame__description">Replace this shell with the new tool name and purpose.</p>
+              </div>
+            </div>
+          </section>
         </div>
       </div>
     </details>
@@ -30,7 +44,7 @@ <h1>First-Class Tool Starter</h1>
 
     <main class="tool-starter app-shell" data-tool-id="first-class-tool-starter">
       <aside class="tool-starter__panel tool-starter__panel--left" aria-label="Tool inputs">
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-open="true">
+        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="sourceInputContent">
             <span>Input Source</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -44,7 +58,7 @@ <h1>First-Class Tool Starter</h1>
           </div>
         </section>
 
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-open="true">
+        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="statusLogContent">
             <span>Status</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -57,7 +71,7 @@ <h1>First-Class Tool Starter</h1>
       </aside>
 
       <section class="tool-starter__panel tool-starter__panel--center" aria-label="Tool preview">
-        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-open="true">
+        <section class="accordion-v2 tool-starter__accordion tool-starter__accordion--fill is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="previewPanelContent">
             <span>Preview</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -71,7 +85,7 @@ <h1>First-Class Tool Starter</h1>
       </section>
 
       <aside class="tool-starter__panel tool-starter__panel--right" aria-label="Tool output">
-        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-open="true">
+        <section class="accordion-v2 tool-starter__accordion is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="inspectorContent">
             <span>Output Summary</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -82,5 +96,6 @@ <h1>First-Class Tool Starter</h1>
         </section>
       </aside>
     </main>
+    <script type="module" src="../../../src/engine/theme/mount-shared-header.js"></script>
   </body>
 </html>