feat(ui): button taxonomy unification + audit dashboard polish (build 632)

Three user-reported issues triggered a wider audit. Root cause was
structural: codebase had two button-class taxonomies coexisting and
neither was fully styled. Splunk's bundled CSS ships .btn and
.btn-primary only; .btn-success / .btn-danger / .btn-warning fall
back to plain grey. The custom .wl-btn / .wl-btn-primary /
.wl-btn-danger had no CSS rules at all beyond .wl-btn-locked
(opacity helper). Result: every Approve/Reject/Remove/Purge button
rendered the same grey as Cancel.

- Add .btn-success / .btn-danger / .btn-warning rules with hover +
  focus + disabled states; add focus ring for all .btn variants;
  lift disabled-state contrast from ~1.3:1 to readable opacity 0.55.
- Migrate 9 .wl-btn sites in control_panel.js to .btn taxonomy;
  preserve only .wl-btn-locked (used by approval-lock UX).
- Cap Expiring Soon panel at max-height 400px (was auto-extending
  to ~14k px); page is now 86% shorter.
- Fix empty-state inconsistency on 7 single-value audit panels via
  | append [| makeresults | eval x=0] | stats max(x) postlude.
- Add visual separator between [Add/Edit/Destroy] and [Persist]
  groups on WM main toolbar via #btn-save::before.
- Add .wl-link default colour + hover (was inheriting muted parent).
- Update 1 E2E selector assertion + add header comment to QUnit
  fixtures documenting they don't mirror production class names.
- CHANGELOG entry under Unreleased; CLAUDE.md Decision Log entry
  2026-05-01 ("Kill wl-btn taxonomy entirely"); L3 span->button
  migration deferred to its own PR with full plan documented.

Closes the 3 user-reported issues (Activate Emergency Lockdown
visibility, Trash Change link contrast, Admin/Analyst Settings
button mismatch) plus all wider audit findings except L3 (deferred)
and L1/L2 (cosmetic, follow-up).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: wildleo91

CHANGELOG.md

@@ -64,6 +64,127 @@ Detailed per-round entries below.
 
 ---
 
+## Unreleased — 2026-05-01 (build 632, UI consistency sweep)
+
+### UI consistency: button taxonomy + audit dashboard polish (builds 631-632)
+
+Three user-reported issues triggered a wider audit of every page,
+dropdown, modal, and form. The root cause was structural: the codebase
+had two button-class taxonomies coexisting, and **neither was fully
+styled**. Splunk's bundled CSS ships rules for `.btn` and `.btn-primary`
+only — `.btn-success`, `.btn-danger`, and `.btn-warning` silently fall
+back to plain `.btn` grey. The custom `.wl-btn` / `.wl-btn-primary` /
+`.wl-btn-danger` classes had **no CSS rules at all** beyond
+`.wl-btn-locked` (an opacity helper). Result: every "Approve / Reject /
+Remove / Purge" button across the app rendered the same grey as
+"Cancel" — destructive actions had no colour signal.
+
+Fixed by (a) defining `.btn-success`, `.btn-danger`, `.btn-warning`
+with hover + focus + disabled states in `whitelist_manager.css`, and
+(b) migrating the 9 `wl-btn` sites in `control_panel.js` to the
+Splunk-bundled `btn` taxonomy. Custom `.wl-btn-locked` is preserved
+(it's the approval-lock opacity helper, used by `wl_table.js` and
+`wl_approval_ui.js`). See Decision Log entry 2026-05-01 for the
+"kill `wl-btn` taxonomy entirely" rationale.
+
+#### Fixed — user-reported
+
+- **"Activate Emergency Lockdown"** in Control Panel header now
+  renders as a proper red button instead of 12 px red plain text on
+  the page background. The single most consequential action in the
+  app is now visually appropriate.
+- **"Change" retention link** on the Trash tab now uses the
+  `.wl-link` rule's new default accent colour (was inheriting muted
+  grey from parent).
+- **Admin Settings "Save Changes" / "Reset to Defaults"** now match
+  Analyst Settings visually (green primary + neutral grey). Both
+  pages were previously using completely different button systems.
+
+#### Fixed — surfaced by the wider audit
+
+- **Whitelist Manager "Save Changes"** (`btn-success`) renders green
+  for the first time. Previously rendered grey, identical to
+  "Discard Changes".
+- **Row-level "Remove" button** in the Actions column now red
+  (`btn-danger` rule added). Previously grey, identical to "Export CSV".
+- **Modal "Approve" / "Reject"** now green / red. Previously both grey.
+- **CSV Import "Replace"** button (destructive) now red. Was grey.
+- **Disabled-state contrast** on `btn-primary` / `btn-success` /
+  `btn-danger` / `btn-warning` lifted from ~1.3:1 (failed WCAG AA)
+  to a uniform `opacity: 0.55` so the colour identity stays readable
+  while still signalling disabled.
+- **`.wl-link` default colour** added — sites without an inline
+  `color` attribute (conflict-reload link in `wl_save.js`, presence
+  hooks in `wl_presence.js`, nav links in `wl_nav.js`) are now
+  readable on dark theme.
+- **Keyboard-focus ring** added for all `.btn` variants. `<span
+  class="btn">` elements previously had no focus indication; they
+  now show the same accent outline as `<button>` / `<a>` variants.
+  (Note: `<span class="btn">` are still NOT keyboard-tab-able —
+  see CLAUDE.md "Pending / Future Work" for the L3 span→button
+  migration plan.)
+
+#### Fixed — Audit Trail dashboard layout
+
+- **"Expiring Soon" panel** capped at `max-height: 400px` with
+  internal scroll. Previously auto-extended to ~14,000 px on
+  dashboards with many expiring rows, pushing the rest of the page
+  off-screen and producing a 17,850-px-tall dashboard. Page is now
+  ~2,600 px after the cap (86% reduction). The Splunk SimpleXML
+  `<option name="height">` is ignored on table panels so the cap is
+  CSS-side via `#expiring_soon_table { max-height: 400px; ... }`.
+- **Empty-state inconsistency** fixed across 7 single-value panels
+  (Rows Added / Removed / Auto-Removed / Edited / Columns Added /
+  Removed / Renamed). They previously showed "No results found." on
+  empty input because `stats sum(...)` produces zero rows when no
+  events match the `where action=X` filter. Now post-fixed with
+  `| append [| makeresults count=1 | eval x=0] | stats max(x) as x`
+  so the panels always render `0` when empty, matching the
+  `stats count` panels next to them.
+
+#### Polish
+
+- **Visual separator** between [Add/Edit/Destroy] group and
+  [Save/Discard persist] group on the WM main action bar
+  (`#btn-save::before` thin border). The two semantic groups
+  previously sat in one undifferentiated row of buttons.
+- **`urlArgs: "_b=632"`** in `whitelist_manager.js` keeps cache-bust
+  in sync with `app.conf [install] build = 632` per the CLAUDE.md
+  maintenance rule.
+
+#### Tests touched
+
+- `tests/e2e/test_admin_limits.cjs` — assertion `saveClass.includes("wl-btn")`
+  updated to `saveClass.includes("btn-primary")` since the migrated
+  Save Changes button no longer carries the legacy class.
+- `tests/qunit/test_wl_modals.js` — header comment added
+  documenting that the test fixtures use synthetic `wl-btn-*`
+  identifiers that DO NOT mirror production class names. The
+  fixtures are self-contained and tests still pass; the comment
+  prevents future-reader confusion.
+
+#### Deferred to separate work
+
+- **`<span class="btn">` → `<button class="btn">` accessibility
+  migration** (audit finding L3). Visible buttons are tab-focusable
+  via the new focus ring, but `<span>` still doesn't receive
+  Splunk's tab traversal or ARIA "button" role. Doing this right
+  requires unifying three different "disabled" patterns
+  (`<button disabled>`, inline `opacity:0.5;pointer-events:none`,
+  `wl-btn-locked` class) into one. See CLAUDE.md "Pending / Future
+  Work" for the full scope.
+- **Sigstore E2E verification** — already on the Pending list,
+  unchanged.
+
+#### Migration / rollback
+
+CSS-only and class-rename changes; click handlers find by `#id` not
+class. Rollback: `git revert` the build-631 + build-632 commits and
+redeploy at the next build number. The `.wl-btn-locked` class is
+preserved.
+
+---
+
 ## Unreleased — 2026-04-29 (build 629, no app changes)
 
 ### Round 9: housekeeping — doc-drift, dead artifacts, PR-time anti-pattern gating

appserver/static/control_panel.js

@@ -190,7 +190,7 @@ require([
                 '<p style="font-size:18px;font-weight:bold;">Error loading Control Panel</p>' +
                 '<p>The server may be restarting or temporarily unavailable. ' +
                 'Please try refreshing the page.</p>' +
-                '<span class="wl-btn wl-btn-primary" style="margin-top:10px;' +
+                '<span class="btn btn-primary" style="margin-top:10px;' +
                 'cursor:pointer;" onclick="location.reload()">Refresh</span></div>'
             );
         }
@@ -319,9 +319,8 @@ require([
                     '</span></div>';
                 // Deactivate button — only if superadmin AND not the one who locked
                 if (cpIsSuperAdmin && lockdown.locked_by !== cpUser) {
-                    html += '<span class="wl-btn" id="wl-cp-deactivate-lockdown" ' +
-                        'style="cursor:pointer;background:#fff;color:#c0392b;' +
-                        'font-weight:600;white-space:nowrap">' +
+                    html += '<span class="btn btn-primary" id="wl-cp-deactivate-lockdown" ' +
+                        'style="cursor:pointer;white-space:nowrap">' +
                         'Deactivate Lockdown</span>';
                 }
                 html += '</div>';
@@ -350,9 +349,8 @@ require([
                 if (cpIsSuperAdmin) {
                     $banner.html(
                         '<div style="margin-bottom:8px;text-align:right">' +
-                        '<span class="wl-btn" id="wl-cp-activate-lockdown" ' +
-                        'style="cursor:pointer;color:#c0392b;border-color:#c0392b;' +
-                        'font-size:12px">Activate Emergency Lockdown</span></div>');
+                        '<span class="btn btn-danger" id="wl-cp-activate-lockdown" ' +
+                        'style="cursor:pointer">Activate Emergency Lockdown</span></div>');
 
                     $("#wl-cp-activate-lockdown").on("click", function () {
                         showCpPrompt("Activate Emergency Lockdown",
@@ -2406,12 +2404,12 @@ require([
                 _.escape((item.comment || "").substring(0, 60)) +
                 (item.comment && item.comment.length > 60 ? "..." : "") + '</td>' +
                 '<td>' +
-                '<span class="wl-btn wl-btn-primary wl-trash-restore" ' +
+                '<span class="btn btn-primary wl-trash-restore" ' +
                 'data-trash-id="' + tid + '" style="cursor:pointer;margin-right:4px">' +
                 'Restore</span>';
 
             if (cpIsSuperAdmin) {
-                html += '<span class="wl-btn wl-btn-danger wl-trash-purge" ' +
+                html += '<span class="btn btn-danger wl-trash-purge" ' +
                     'data-trash-id="' + tid + '" data-name="' +
                     _.escape(item.name || "") + '" style="cursor:pointer">' +
                     'Request Purge</span>';
@@ -2770,9 +2768,9 @@ require([
 
         // ── Buttons ──
         html += '<div style="margin-top:16px;display:flex;align-items:center;gap:10px">' +
-            '<span class="wl-btn wl-btn-primary" id="wl-save-admin-limits" ' +
+            '<span class="btn btn-primary" id="wl-save-admin-limits" ' +
             'style="cursor:pointer">Save Changes</span> ' +
-            '<span class="wl-btn" id="wl-reset-admin-limits" ' +
+            '<span class="btn" id="wl-reset-admin-limits" ' +
             'style="cursor:pointer">Reset to Defaults</span>' +
             '<span id="wl-cp-admin-limits-msg" style="display:none;font-size:13px;' +
             'font-weight:500;margin-left:8px"></span>' +
@@ -3004,9 +3002,9 @@ require([
             'border:1px solid var(--wl-border,#444);border-radius:4px;margin-bottom:12px;' +
             'box-sizing:border-box">' +
             '<div style="text-align:right">' +
-            '<span class="wl-btn" id="wl-cp-prompt-cancel" style="cursor:pointer;margin-right:8px">' +
+            '<span class="btn" id="wl-cp-prompt-cancel" style="cursor:pointer;margin-right:8px">' +
             'Cancel</span>' +
-            '<span class="wl-btn wl-btn-primary" id="wl-cp-prompt-ok" style="cursor:pointer">' +
+            '<span class="btn btn-primary" id="wl-cp-prompt-ok" style="cursor:pointer">' +
             'OK</span></div></div></div>';
 
         $("body").append(html);

appserver/static/whitelist_manager.css

@@ -514,6 +514,21 @@ body.wl-resizing * {
     margin-left: auto;
 }
 
+/* Visual separator between the [Add/Edit/Destroy] group and the
+ * [Save/Discard persist] group on the WM main action bar. The two
+ * groups previously sat in one undifferentiated row with colour as
+ * the only signal of role. The separator + extra margin establishes
+ * a clear semantic boundary without restructuring the HTML.
+ * (See 2026-04-30 UI consistency audit, finding M4-M5.) */
+.wl-buttons #btn-save::before {
+    content: "";
+    display: inline-block;
+    border-left: 1px solid var(--wl-border-section);
+    margin-right: 12px;
+    height: 22px;
+    vertical-align: middle;
+}
+
 .wl-buttons-right .btn {
     margin-right: 0;
     margin-left: 8px;
@@ -1051,6 +1066,16 @@ body.wl-dark > .wl-modal-overlay {
     cursor: pointer;
     text-decoration: underline;
     font-weight: bold;
+    /* Default to the existing accent token so wl-link sites without an
+     * inline color attribute (e.g. the conflict-reload link in
+     * wl_save.js, presence indicators in wl_presence.js) stay readable
+     * on dark theme. Trash "Change" still has its own inline colour
+     * which wins via specificity. (See 2026-04-30 UI consistency audit.) */
+    color: var(--wl-accent, #2962ff);
+}
+.wl-link:hover {
+    color: #5b8dff;
+    text-decoration: none;
 }
 
 .wl-kbd {
@@ -1253,6 +1278,88 @@ th.wl-pending-approval-header {
     pointer-events: none;
 }
 
+/* ── Button colour rules ───────────────────────────────────────────────
+ * Splunk's bundled CSS only ships .btn and .btn-primary. .btn-success,
+ * .btn-danger, and .btn-warning silently fall back to .btn grey without
+ * these rules. Without them, every "Approve / Reject / Remove / Purge"
+ * button in the app rendered the same grey as Cancel — destructive
+ * actions had no colour signal. (See 2026-04-30 UI consistency audit
+ * and Decision Log entry.)
+ *
+ * Specificity is `.btn.btn-X` so these override the base .btn rule but
+ * not inline style overrides. Hover/disabled states are explicit so
+ * disabled doesn't fall back to the failing-AA Splunk default.
+ */
+.btn.btn-success {
+    background-color: #1a8929;
+    color: #fff;
+    border: 1px solid #146a20;
+}
+.btn.btn-success:hover:not([disabled]):not(.wl-btn-locked) {
+    background-color: #20a532;
+    border-color: #1a8929;
+}
+
+.btn.btn-danger {
+    background-color: #c62828;
+    color: #fff;
+    border: 1px solid #8e1d1d;
+}
+.btn.btn-danger:hover:not([disabled]):not(.wl-btn-locked) {
+    background-color: #d83232;
+    border-color: #c62828;
+}
+
+.btn.btn-warning {
+    background-color: #e65100;
+    color: #fff;
+    border: 1px solid #b34000;
+}
+.btn.btn-warning:hover:not([disabled]):not(.wl-btn-locked) {
+    background-color: #f57c00;
+    border-color: #e65100;
+}
+
+/* Disabled-state contrast fix.
+ * Splunk's default .btn:disabled keeps full bg colour but lowers text
+ * to ~1.3:1 contrast (fails WCAG AA). For the buttons that signal
+ * danger / success / primary action, drop overall opacity instead so
+ * the colour identity stays readable. (See 2026-04-30 audit.)
+ */
+.btn.btn-primary[disabled],
+.btn.btn-primary.wl-btn-locked,
+.btn.btn-success[disabled],
+.btn.btn-success.wl-btn-locked,
+.btn.btn-danger[disabled],
+.btn.btn-danger.wl-btn-locked,
+.btn.btn-warning[disabled],
+.btn.btn-warning.wl-btn-locked {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+/* Focus ring for keyboard navigation — applies to all .btn variants
+ * including <span class="btn"> elements that don't get the browser
+ * default focus outline. Uses the existing accent token so light/dark
+ * themes match. */
+.btn:focus-visible {
+    outline: 2px solid #2962ff;
+    outline-offset: 2px;
+}
+
+/* ── Audit Trail "Expiring Soon" height cap ────────────────────────────
+ * Splunk SimpleXML <option name="height"> is ignored on table panels,
+ * so we cap the panel via CSS instead. Without the cap the table
+ * auto-extends to ~14000 px on dashboards with many expiring rows
+ * (5+ pages of 10), pushing the rest of the page off-screen. The
+ * inner scroll keeps every row reachable while restoring page balance.
+ * (See 2026-04-30 UI consistency audit.)
+ */
+#expiring_soon_table {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
 /* ── Inline approval action bar (admin only) ─────────────────────── */
 .wl-approval-bar {
     margin: 8px 0;

appserver/static/whitelist_manager.js

@@ -11,7 +11,7 @@
 // disk cache. Splunk serves /static/@<server-hash>/... with Cache-Control:
 // public, max-age=31536000; without urlArgs, bumped build numbers don't force
 // a re-fetch and clients run stale JS until they hard-refresh.
-require.config({ urlArgs: "_b=629" });
+require.config({ urlArgs: "_b=632" });
 require([
     "jquery",
     "underscore",

default/app.conf

@@ -5,7 +5,7 @@
 
 [install]
 is_configured = false
-build = 629
+build = 632
 
 [launcher]
 author       = Security Engineering