Match tool template header and body colors to Preview Generator V2 - PR_26126_067-tool-template-preview-generator-theme-match

Author: DavidQ

docs/dev/reports/playwright_v8_coverage_report.txt

@@ -18,10 +18,7 @@ Exercised tool entry points detected:
 (0%) Workspace Manager - not exercised by this Playwright run
 
 Changed runtime JS files covered:
-(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
+(100%) none changed - no changed runtime JS files
 
 Files with executed line/function counts where available:
 (2%) src/engine/input/ActionInputService.js - executed lines 397/397; executed functions 1/51
@@ -157,13 +154,7 @@ Files with executed line/function counts where available:
 (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 - no low-coverage changed runtime JS files
+(100%) none changed - no 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
+(100%) none - no changed JS files

docs/dev/reports/tool_template_preview_generator_theme_match.txt

@@ -0,0 +1,25 @@
+PR_26126_067-tool-template-preview-generator-theme-match
+
+Scope:
+- Updated tools/templates/first-class-tool-starter visual styling only.
+- No live tools, samples, schemas, roadmap, or tools/shared files were modified.
+
+Changes:
+- Matched the template body/background color system to Preview Generator V2 using the shared purple gradient and translucent panel surfaces.
+- Matched the template header frame, header summary strip, title, subtitle, meta, and description colors to the Preview Generator V2/Palette Manager shell style.
+- Updated template control surfaces, accordion panels, inputs, preview area, output block, and status log to use the same translucent dark panel and muted text color family.
+- Preserved external CSS only; no inline style, inline script block, or inline event handler was added.
+- Kept src/engine/theme imports intact and kept tools/shared unused.
+
+Validation:
+- git diff --check -- tools/templates/first-class-tool-starter/styles/toolStarter.css
+- rg check confirmed tools/templates/first-class-tool-starter/index.html has no inline style block, inline script block, or inline event handlers.
+- npm run test:workspace-v2
+
+Playwright impacted: Yes
+- The PR changes visible template styling on a Playwright-covered tool template.
+- npm run test:workspace-v2 passed.
+
+Manual test notes:
+- Template header lines now use the same purple gradient frame, dark summary strip, white title, and muted subtitle/meta/description color system as Preview Generator V2.
+- Body, menu, panels, accordions, controls, preview, output, and status surfaces now use the same translucent purple/dark color family.

tools/templates/first-class-tool-starter/styles/toolStarter.css

@@ -1,12 +1,14 @@
 :root {
-  --tool-starter-bg: #10131a;
-  --tool-starter-panel: #181d28;
-  --tool-starter-panel-strong: #202738;
-  --tool-starter-line: #3a4356;
-  --tool-starter-text: #eef2ff;
-  --tool-starter-muted: #a9b4c7;
-  --tool-starter-accent: #5ad7c7;
-  --tool-starter-danger: #ff7a7a;
+  --tool-starter-bg: var(--bg-gradient, linear-gradient(180deg, #c4b5fd 0%, #a78bfa 18%, #8b5cf6 36%, #7c3aed 54%, #6d28d9 74%, #5b21b6 88%, #4c1d95 100%));
+  --tool-starter-panel: var(--pm-surface, rgba(40, 25, 84, 0.72));
+  --tool-starter-panel-strong: var(--pm-surface-strong, rgba(0, 0, 0, 0.24));
+  --tool-starter-line: var(--pm-line, rgba(221, 214, 254, 0.26));
+  --tool-starter-text: var(--text, #f7f4ff);
+  --tool-starter-muted: var(--pm-text-muted, #c4b5fd);
+  --tool-starter-header-muted: var(--muted, #e9ddff);
+  --tool-starter-accent: var(--accent, #ddd6fe);
+  --tool-starter-danger: #ffb4b4;
+  --tool-starter-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
   color-scheme: dark;
   font-family: Inter, Segoe UI, system-ui, sans-serif;
 }
@@ -17,9 +19,11 @@
 
 body {
   min-height: 100vh;
+  min-height: 100dvh;
   margin: 0;
   background: var(--tool-starter-bg);
   color: var(--tool-starter-text);
+  overflow-x: hidden;
 }
 
 button,
@@ -51,15 +55,15 @@ textarea:focus-visible {
 
 .is-collapsible {
   border-bottom: 1px solid var(--tool-starter-line);
-  background: #151a24;
+  background: transparent;
 }
 
 .is-collapsible__summary {
   min-height: 36px;
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--tool-starter-muted);
+  color: var(--tool-starter-header-muted);
   font-weight: 700;
   padding: 8px 18px;
 }
@@ -74,21 +78,54 @@ textarea:focus-visible {
 }
 
 .tool-starter__header {
-  background: #151a24;
+  background: transparent;
+  padding: 10px 16px;
 }
 
 .tool-starter__local-shell-frame {
-  --tools-platform-frame-surface: #151a24;
+  --tools-platform-frame-surface: var(--tool-starter-panel);
   --tools-platform-frame-line: var(--tool-starter-line);
+  border: 1px solid var(--tool-starter-line);
+  border-radius: 18px;
+  background: var(--tool-starter-bg);
+  box-shadow: var(--tool-starter-shadow);
   color: var(--tool-starter-text);
 }
 
+.tool-starter__local-shell-frame .tools-platform-frame__accordion-content {
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+}
+
+.tool-starter__local-shell-frame .tools-platform-frame__accordion-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 12px;
+  background: #4c1d95;
+  padding: 12px 14px;
+}
+
+.tool-starter__local-shell-frame .tools-platform-frame__title {
+  margin: 0;
+  color: #ffffff;
+}
+
+.tool-starter__local-shell-frame .tools-platform-frame__eyebrow,
+.tool-starter__local-shell-frame .tools-platform-frame__meta,
+.tool-starter__local-shell-frame .tools-platform-frame__description {
+  margin: 0;
+  color: var(--tool-starter-header-muted);
+}
+
 .tool-starter__menu {
   display: flex;
   justify-content: center;
   gap: 10px;
   border-bottom: 1px solid var(--tool-starter-line);
-  background: #111722;
+  background: var(--tool-starter-panel);
   padding: 10px;
 }
 
@@ -123,6 +160,7 @@ textarea:focus-visible {
   border: 1px solid var(--tool-starter-line);
   border-radius: 8px;
   background: var(--tool-starter-panel);
+  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
 
@@ -195,7 +233,7 @@ textarea:focus-visible {
   min-width: 0;
   border: 1px solid var(--tool-starter-line);
   border-radius: 6px;
-  background: #0d111a;
+  background: var(--tool-starter-panel-strong);
   color: var(--tool-starter-text);
   padding: 8px 10px;
 }
@@ -217,7 +255,7 @@ textarea:focus-visible {
   place-items: center;
   border: 1px dashed var(--tool-starter-line);
   border-radius: 8px;
-  background: #0d111a;
+  background: var(--tool-starter-panel-strong);
   color: var(--tool-starter-muted);
   padding: 16px;
   text-align: center;
@@ -250,7 +288,7 @@ textarea:focus-visible {
   margin: 0;
   border: 1px solid var(--tool-starter-line);
   border-radius: 6px;
-  background: #0d111a;
+  background: var(--tool-starter-panel-strong);
   color: var(--tool-starter-text);
   overflow: auto;
   padding: 10px;