feat: health scoring

src/Block/Inspector.php

@@ -139,6 +139,20 @@ public function getPosition(): string
         return is_string($value) && $value !== '' ? $value : InspectorConfig::DEFAULT_POSITION;
     }
 
+    /**
+     * Whether the health score gauge should be shown in the toolbar footer
+     *
+     * @return bool
+     */
+    public function getShowHealthScore(): bool
+    {
+        $value = $this->scopeConfig->getValue(
+            InspectorConfig::XML_PATH_SHOW_HEALTH_SCORE,
+            ScopeInterface::SCOPE_STORE
+        );
+        return !is_string($value) || $value !== '0';
+    }
+
     /**
      * Render block HTML
      *

src/Model/Config/Inspector.php

@@ -10,6 +10,7 @@ class Inspector
     public const XML_PATH_SHOW_BUTTON_LABELS = 'mageforge/inspector/show_button_labels';
     public const XML_PATH_THEME = 'mageforge/inspector/theme';
     public const XML_PATH_POSITION = 'mageforge/inspector/position';
+    public const XML_PATH_SHOW_HEALTH_SCORE = 'mageforge/inspector/show_health_score';
     public const DEFAULT_THEME = 'dark';
     public const DEFAULT_POSITION = 'bottom-left';
 }

src/etc/adminhtml/system.xml

@@ -34,6 +34,12 @@
                     <config_path>mageforge/inspector/position</config_path>
                     <comment>Position of the MageForge Toolbar on the page. Default: Bottom Left.</comment>
                 </field>
+                <field id="show_health_score" translate="label comment" type="select" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Health Score</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <config_path>mageforge/inspector/show_health_score</config_path>
+                    <comment>Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes.</comment>
+                </field>
             </group>
         </section>
     </system>

src/etc/config.xml

@@ -12,6 +12,7 @@
                     <theme>dark</theme>
                     <show_button_labels>1</show_button_labels>
                     <position>bottom-left</position>
+                    <show_health_score>1</show_health_score>
                 </inspector>
             </mageforge>
       </default>

src/i18n/de_DE.csv

@@ -9,6 +9,8 @@
 "Show text labels on the Toolbar and Inspector buttons. Default: Yes.","Textbeschriftungen auf Toolbar- und Inspector-Schaltflächen anzeigen. Standard: Ja."
 "Toolbar Position","Toolbar-Position"
 "Position of the MageForge Toolbar on the page. Default: Bottom Left.","Position der MageForge Toolbar auf der Seite. Standard: Unten links."
+"Show Health Score","Health-Score anzeigen"
+"Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes.","Health-Score-Tachometer im Toolbar-Footer anzeigen. Die Aktions-Schaltflächen bleiben stets sichtbar. Standard: Ja."
 "Dark","Dunkel"
 "Light","Hell"
 "Auto (System Preference)","Auto (Systemeinstellung)"

src/i18n/en_US.csv

@@ -9,6 +9,8 @@
 "Show text labels on the Toolbar and Inspector buttons. Default: Yes.","Show text labels on the Toolbar and Inspector buttons. Default: Yes."
 "Toolbar Position","Toolbar Position"
 "Position of the MageForge Toolbar on the page. Default: Bottom Left.","Position of the MageForge Toolbar on the page. Default: Bottom Left."
+"Show Health Score","Show Health Score"
+"Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes.","Show the Overall Health Score gauge in the toolbar footer. The Run All Tests and Reset buttons remain visible regardless. Default: Yes."
 "Dark","Dark"
 "Light","Light"
 "Auto (System Preference)","Auto (System Preference)"

src/view/frontend/templates/inspector.phtml

@@ -69,7 +69,8 @@ JS;
      x-data="mageforgeToolbar"
      data-theme="<?= $escaper->escapeHtmlAttr($block->getTheme()) ?>"
      data-position="<?= $escaper->escapeHtmlAttr($block->getPosition()) ?>"
-     data-show-labels="<?= (int) $block->getShowButtonLabels() ?>"></div>
+     data-show-labels="<?= (int) $block->getShowButtonLabels() ?>"
+     data-show-health-score="<?= (int) $block->getShowHealthScore() ?>"></div>
 
 <!-- MageForge Inspector Component Wrapper -->
 <div class="mageforge-inspector"

src/view/frontend/web/css/toolbar.css

@@ -514,7 +514,7 @@
 }
 
 /* ============================================================================
-   Menu Footer / Toggle All
+   Menu Footer
    ========================================================================== */
 
 .mageforge-toolbar-menu-footer {
@@ -523,33 +523,142 @@
     padding-top: 6px;
 }
 
-.mageforge-toolbar-menu-toggle-all {
-    display: block;
-    width: 100%;
-    padding: 7px 10px;
+/* ============================================================================
+   Health Score Gauge
+   ========================================================================== */
+
+.mageforge-toolbar-health-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4px 12px 6px;
+    gap: 2px;
+}
+
+.mageforge-toolbar-health-gauge {
+    width: 130px;
+    height: 75px;
+    overflow: visible;
+}
+
+.mageforge-health-gauge-progress {
+    transition: stroke-dasharray 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mageforge-health-gauge-needle {
+    transition:
+        x2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+        y2 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 0.3s ease;
+}
+
+.mageforge-toolbar-health-score-text {
+    text-align: center;
+}
+
+.mageforge-toolbar-health-score-value {
+    font-family: var(--mageforge-font-family);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--mageforge-color-white);
+    line-height: 1.2;
+}
+
+.mageforge-toolbar-health-score-max {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--mageforge-color-slate-400);
+}
+
+.mageforge-toolbar-health-score-label {
+    font-family: var(--mageforge-font-family);
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--mageforge-color-slate-400);
+    margin-top: 2px;
+}
+
+/* ============================================================================
+   Run All Tests Button Row
+   ========================================================================== */
+
+.mageforge-toolbar-menu-button-row {
+    display: flex;
+    align-items: stretch;
+    gap: 6px;
+    margin-bottom: 4px;
+}
+
+.mageforge-toolbar-menu-run-all {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    flex: 1;
+    padding: 9px 16px;
+    background: linear-gradient(90deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-pink) 100%);
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+    color: var(--mageforge-color-white);
+    font-family: var(--mageforge-font-family);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease,
+        box-shadow 0.15s ease;
+    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
+}
+
+.mageforge-toolbar-menu-run-all:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
+}
+
+.mageforge-toolbar-menu-run-all:active {
+    transform: translateY(0);
+}
+
+.mageforge-toolbar-menu-run-all:disabled,
+.mageforge-toolbar-menu-run-all.mageforge-running {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.mageforge-toolbar-menu-reset {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 9px 10px;
     background: none;
     border: 1px solid var(--mageforge-border-color);
     border-radius: 7px;
     cursor: pointer;
     color: var(--mageforge-color-slate-400);
-    font-family: var(--mageforge-font-family);
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    text-align: center;
+    line-height: 0;
     transition:
         color 0.15s ease,
         background 0.15s ease,
         border-color 0.15s ease;
 }
 
-.mageforge-toolbar-menu-toggle-all:hover {
+.mageforge-toolbar-menu-reset:hover {
     color: var(--mageforge-color-white);
     background: var(--mageforge-surface-glass-hover);
     border-color: var(--mageforge-border-glass);
 }
 
+/* ============================================================================
+   Menu Credit
+   ========================================================================== */
+
 .mageforge-toolbar-menu-credit {
     margin-top: 8px;
     text-align: center;
@@ -558,6 +667,10 @@
     color: var(--mageforge-color-slate-400);
 }
 
+.mageforge-toolbar-menu-credit-heart {
+    color: var(--mageforge-color-red);
+}
+
 .mageforge-toolbar-menu-credit-link {
     color: var(--mageforge-color-slate-400);
     text-decoration: none;

src/view/frontend/web/js/toolbar.js

@@ -28,7 +28,10 @@ function _registerMageforgeToolbar() {
         menu: null,
 
         /** @type {HTMLButtonElement|null} */
-        toggleAllButton: null,
+        runAllButton: null,
+
+        /** @type {HTMLButtonElement|null} */
+        resetButton: null,
 
         // ====================================================================
         // Lifecycle

src/view/frontend/web/js/toolbar/audits.js

@@ -40,6 +40,55 @@ export const auditMethods = {
         }
     },
 
+    /**
+     * Run every audit, wait for the DOM to settle, then compute and display
+     * an overall health score (0–100) in the footer gauge.
+     */
+    async runAllAuditsForScore() {
+        const btn = this.runAllButton;
+        if (!btn) return;
+        btn.disabled = true;
+        btn.classList.add('mageforge-running');
+
+        try {
+            this._batchRunning = true;
+            this.deactivateAllAudits();
+
+            audits.forEach(audit => {
+                if (!this.activeAudits.has(audit.key)) {
+                    this.runAudit(audit.key);
+                }
+            });
+
+            // Allow async DOM mutations to settle
+            await new Promise(resolve => setTimeout(resolve, 200));
+
+            let totalPoints = 0;
+            let maxPoints = 0;
+            audits.forEach(audit => {
+                const item = this.menu?.querySelector(`[data-audit-key="${audit.key}"]`);
+                if (!item) return;
+                maxPoints += 100;
+                const status = item.querySelector('.mageforge-toolbar-menu-status');
+                if (!status || !status.textContent.trim()) {
+                    totalPoints += 100;
+                } else if (status.classList.contains('mageforge-toolbar-menu-status--success')) {
+                    totalPoints += 100;
+                } else if (status.classList.contains('mageforge-toolbar-menu-status--warning')) {
+                    totalPoints += 50;
+                }
+                // error = 0 points (default)
+            });
+
+            const score = maxPoints > 0 ? Math.round((totalPoints / maxPoints) * 100) : 100;
+            this.updateHealthScore(score);
+        } finally {
+            this._batchRunning = false;
+            btn.disabled = false;
+            btn.classList.remove('mageforge-running');
+        }
+    },
+
     /**
      * Deactivates all currently active audits (called when closing the toolbar).
      */

src/view/frontend/web/js/toolbar/audits/highlight.js

@@ -156,7 +156,9 @@ export function applyHighlight(elements, key, context, options = {}) {
         }
     });
     if (!skipBadge) {
-        elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        if (!context._batchRunning) {
+            elements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
         context.setAuditCounterBadge(key, `${elements.length}`, severity);
     }
 }

src/view/frontend/web/js/toolbar/audits/images-without-alt.js

@@ -48,7 +48,7 @@ export default {
 
         // Scroll to first issue (errors take priority)
         const first = errors[0] ?? warnings[0];
-        if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        if (first && !context._batchRunning) first.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
         context.setAuditCounterBadge(this.key, `${total}`, errors.length > 0 ? 'error' : 'warning');
     },