From 561988ac8ffd3e014300cbad5e8dfabf44c6372d Mon Sep 17 00:00:00 2001
From: "benjamin.baker" <benjamin.baker@geaerospace.com>
Date: Wed, 9 Sep 2026 11:54:05 -0400
Subject: [PATCH] Render the script surfaces correctly in dark mode

The explainer panel used var(--surface, #fff) and PCDetail's Run Scripts
and Corporate Tools styles used --text-primary, --text-secondary and
--bg-secondary. None of those four tokens exist in this app's theme, so
var() fell through: the explainer rendered a solid white block over the
dark background and the surrounding copy lost its intended contrast.

The real tokens are --bg-card, --text and --text-light. A fallback
colour is what made this hard to catch - it looks correct in light mode
and only misrenders on the theme the shop floor actually runs, so it
would not have shown up in authoring or in review.

Both files now carry a test asserting their styles reference only
defined tokens and contain no var(--x, #colour) fallbacks. That test
immediately caught a further dead --warning fallback in the banner.

The two long per-field explanations in the Add Script form are now
collapsed behind "How this works". The modal already scrolled, and
three paragraphs of standing prose between the inputs pushed Save off
screen, so the copy was being skimmed past rather than read.
---
 plugins/computers/frontend/views/PCDetail.vue | 26 ++++-----
 .../frontend/views/pcDetailRunScripts.spec.js | 10 ++++
 .../frontend/views/SystemScriptsSettings.vue  | 55 +++++++++++++------
 .../views/systemScriptsSettings.spec.js       | 19 +++++++
 4 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/plugins/computers/frontend/views/PCDetail.vue b/plugins/computers/frontend/views/PCDetail.vue
index 7fe76e7c..794c1599 100644
--- a/plugins/computers/frontend/views/PCDetail.vue
+++ b/plugins/computers/frontend/views/PCDetail.vue
@@ -1995,7 +1995,7 @@ async function confirmRetire() {
    it does before the confirm gate rather than after. */
 .corptools-intro {
   margin: 0 0 1rem;
-  color: var(--text-secondary);
+  color: var(--text-light);
   font-size: 0.875rem;
 }
 /* Warning weight without alert-banner styling: it is permanent, so a loud
@@ -2004,9 +2004,9 @@ async function confirmRetire() {
 .corptools-warning {
   margin: 0 0 1rem;
   padding: 0.5rem 0.75rem;
-  border-left: 3px solid var(--warning, #d97706);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
+  border-left: 3px solid var(--warning);
+  background: var(--bg-card);
+  color: var(--text);
   font-size: 0.875rem;
 }
 .corptools-list {
@@ -2027,7 +2027,7 @@ async function confirmRetire() {
   font-weight: 600;
 }
 .corptools-desc {
-  color: var(--text-secondary);
+  color: var(--text-light);
   font-size: 0.8125rem;
   margin-top: 0.125rem;
 }
@@ -2037,9 +2037,9 @@ async function confirmRetire() {
 .corptools-rowwarning {
   margin: 0.25rem 0 0.375rem;
   padding: 0.375rem 0.625rem;
-  border-left: 3px solid var(--danger, #dc2626);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
+  border-left: 3px solid var(--danger);
+  background: var(--bg-card);
+  color: var(--text);
   font-size: 0.8125rem;
   font-weight: 500;
 }
@@ -2047,7 +2047,7 @@ async function confirmRetire() {
    picker-specific pieces are new. */
 .runscripts-empty {
   padding: 0.75rem 0;
-  color: var(--text-secondary);
+  color: var(--text-light);
   font-size: 0.875rem;
 }
 .runscripts-detail {
@@ -2058,7 +2058,7 @@ async function confirmRetire() {
 }
 .runscripts-desc {
   margin: 0 0 0.5rem;
-  color: var(--text-secondary);
+  color: var(--text-light);
   font-size: 0.8125rem;
 }
 /* Two columns so the label and its value stay on one line: the folder is the
@@ -2072,11 +2072,11 @@ async function confirmRetire() {
   font-size: 0.8125rem;
 }
 .runscripts-facts dt {
-  color: var(--text-secondary);
+  color: var(--text-light);
 }
 .runscripts-facts dd {
   margin: 0;
-  color: var(--text-primary);
+  color: var(--text);
 }
 /* Defined locally: .mono is not a global utility in this build, and a path
    rendered in the body font is harder to read back against the endpoint. */
@@ -2086,7 +2086,7 @@ async function confirmRetire() {
 }
 .runscripts-note {
   margin: 0.5rem 0 0;
-  color: var(--text-secondary);
+  color: var(--text-light);
   font-size: 0.8125rem;
 }
 .runscripts-actions {
diff --git a/plugins/computers/frontend/views/pcDetailRunScripts.spec.js b/plugins/computers/frontend/views/pcDetailRunScripts.spec.js
index a8149dbe..86c4153f 100644
--- a/plugins/computers/frontend/views/pcDetailRunScripts.spec.js
+++ b/plugins/computers/frontend/views/pcDetailRunScripts.spec.js
@@ -82,4 +82,14 @@ describe('PCDetail Run Scripts tab', () => {
     const handler = source.slice(source.indexOf('async function confirmRunScript'))
     expect(handler.slice(0, handler.indexOf('\n}\n'))).toMatch(/queued for/)
   })
+
+  it('styles the Run Scripts tab from defined theme tokens only', () => {
+    // --text-primary/--text-secondary/--bg-secondary are not defined by this
+    // app's theme. var() then falls through to the fallback, or to inherit,
+    // which reads fine in light mode and misrenders for dark-mode users - the
+    // failure only shows up on the theme most of the shop floor runs.
+    const runscripts = source.slice(source.indexOf('.corptools-intro'))
+    expect(runscripts).not.toMatch(/--text-primary|--text-secondary|--bg-secondary|--surface/)
+    expect(runscripts).not.toMatch(/var\(--[a-z-]+,\s*#/)
+  })
 })
diff --git a/plugins/endpoints/frontend/views/SystemScriptsSettings.vue b/plugins/endpoints/frontend/views/SystemScriptsSettings.vue
index 30793bb9..e0d9d39b 100644
--- a/plugins/endpoints/frontend/views/SystemScriptsSettings.vue
+++ b/plugins/endpoints/frontend/views/SystemScriptsSettings.vue
@@ -183,12 +183,15 @@
                 class="form-control mono"
                 placeholder="C:\Program Files\CorporateTools"
               />
-              <p class="hint">
-                Leave blank to run from the agent's staging folder. Set this only
-                when the script calls a tool already installed on the endpoint by
-                relative path. The folder must exist on the endpoint or the push
-                fails rather than running somewhere else.
-              </p>
+              <details class="field-help">
+                <summary>How this works</summary>
+                <p>
+                  Leave blank to run from the agent's staging folder. Set this only
+                  when the script calls a tool already installed on the endpoint by
+                  relative path. The folder must exist on the endpoint or the push
+                  fails rather than running somewhere else.
+                </p>
+              </details>
             </div>
             <div class="form-group">
               <label>
@@ -199,13 +202,16 @@
                 <option value="default">Continue - report success if the script reaches the end</option>
                 <option value="strict">Stop on the first error and fail the command</option>
               </select>
-              <p class="hint">
-                PowerShell normally writes an error and carries on, and still
-                exits zero, so a script can report success having done none of
-                its work. Stop makes the first failure end the run and fail the
-                command. Leave this on Continue unless you have read the script
-                and know it does not rely on a step being allowed to fail.
-              </p>
+              <details class="field-help">
+                <summary>How this works</summary>
+                <p>
+                  PowerShell normally writes an error and carries on, and still
+                  exits zero, so a script can report success having done none of
+                  its work. Stop makes the first failure end the run and fail the
+                  command. Leave this on Continue unless you have read the script
+                  and know it does not rely on a step being allowed to fail.
+                </p>
+              </details>
             </div>
             <div class="form-group">
               <label>
@@ -356,7 +362,7 @@ onMounted(loadData)
 .mono { font-family: monospace; }
 .hint { color: var(--text-light); font-weight: normal; }
 .warning-banner {
-  border: 1px solid var(--warning, #b8860b);
+  border: 1px solid var(--warning);
   border-left-width: 4px;
   border-radius: 4px;
   padding: 0.75rem 1rem;
@@ -364,15 +370,17 @@ onMounted(loadData)
   background: rgba(184, 134, 11, 0.08);
 }
 .explainer {
-  border: 1px solid var(--border, #ddd);
+  border: 1px solid var(--border);
   border-radius: 4px;
   margin-bottom: 1rem;
-  background: var(--surface, #fff);
+  background: var(--bg-card);
+  color: var(--text);
 }
 .explainer summary {
   cursor: pointer;
   padding: 0.6rem 1rem;
   font-weight: 600;
+  color: var(--text);
 }
 .explainer-body {
   padding: 0 1rem 0.75rem;
@@ -380,10 +388,25 @@ onMounted(loadData)
 .explainer-body h4 {
   margin: 0.9rem 0 0.25rem;
   font-size: 0.95rem;
+  color: var(--text);
 }
 .explainer-body p {
   margin: 0 0 0.5rem;
   color: var(--text-light);
   line-height: 1.5;
 }
+.field-help {
+  margin-top: 0.4rem;
+}
+.field-help summary {
+  cursor: pointer;
+  color: var(--text-light);
+  font-size: 0.85rem;
+}
+.field-help p {
+  margin: 0.35rem 0 0;
+  color: var(--text-light);
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
 </style>
diff --git a/plugins/endpoints/frontend/views/systemScriptsSettings.spec.js b/plugins/endpoints/frontend/views/systemScriptsSettings.spec.js
index 4de40841..d86dde65 100644
--- a/plugins/endpoints/frontend/views/systemScriptsSettings.spec.js
+++ b/plugins/endpoints/frontend/views/systemScriptsSettings.spec.js
@@ -96,6 +96,25 @@ describe('SystemScriptsSettings', () => {
     expect(source).not.toMatch(/<details class="explainer" open>/)
   })
 
+  it('collapses the long per-field prose in the form', () => {
+    // The modal is already tall enough to scroll. Three paragraphs of standing
+    // explanation between the inputs pushes Save off screen and gets skimmed
+    // past, which is the opposite of what the copy is for.
+    const helps = source.match(/<details class="field-help">/g) || []
+    expect(helps.length).toBeGreaterThanOrEqual(2)
+    expect(source).toMatch(/<summary>How this works<\/summary>/)
+  })
+
+  it('styles itself from defined theme tokens only', () => {
+    // --surface and --text-primary are not defined by this app's theme, so a
+    // var() fallback silently rendered a white panel on the dark background.
+    // A fallback colour is the bug: it looks correct in light mode and only
+    // shows up as a bright block for dark-mode users.
+    const styles = source.slice(source.indexOf('<style scoped>'))
+    expect(styles).not.toMatch(/--surface|--text-primary|--text-secondary|--bg-secondary/)
+    expect(styles).not.toMatch(/var\(--[a-z-]+,\s*#/)
+  })
+
   it('states that output is kept locally and only returned on failure', () => {
     // Operators otherwise assume either that nothing was captured or that
     // every run is shipped back to the server.