Organize diagnostics into horizontal rows and group notification controls

frontend/app/ui/AdminDiagnosticsPanel.tsx

@@ -330,20 +330,12 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos
         <div className="diagnostics-control-copy">
           <h2>{embedded ? 'Connectivity diagnostics' : 'Control center'}</h2>
           <p className="lede">
-            Use live checks for Magent and service connectivity. Use run all when you want outbound notification
-            channels to send a real ping through the configured provider.
+            Check Magent and your connected services. Automatic refresh runs health checks only.
+            Test messages are managed in Notifications below.
           </p>
         </div>
         <div className="diagnostics-control-actions">
-          <label className="diagnostics-email-recipient">
-            <span>Test email recipient</span>
-            <input
-              type="email"
-              placeholder="Leave blank to use configured sender"
-              value={emailRecipient}
-              onChange={(event) => setEmailRecipient(event.target.value)}
-            />
-          </label>
+
           <button
             type="button"
             className={autoRefresh ? 'is-active' : ''}
@@ -360,15 +352,7 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos
           >
             Run live checks
           </button>
-          <button
-            type="button"
-            onClick={() => {
-              void runDiagnostics(undefined, 'all')
-            }}
-            disabled={runningKeys.length > 0 || checks.length === 0}
-          >
-            Run all tests
-          </button>
+
           <span className={`small-pill ${autoRefresh ? 'is-positive' : ''}`}>
             {autoRefresh ? 'Auto refresh on' : 'Auto refresh off'}
           </span>
@@ -420,6 +404,25 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos
               <span className="small-pill">{categoryChecks.length} checks</span>
             </div>
 
+            {category === 'Notifications' && (
+              <div className="diagnostics-notification-controls">
+          <label className="diagnostics-email-recipient">
+            <span>Test email recipient</span>
+            <input
+              type="email"
+              placeholder="Leave blank to use configured sender"
+              value={emailRecipient}
+              onChange={(event) => setEmailRecipient(event.target.value)}
+            />
+          </label>
+                <p>Choose where the test email goes. Other channels use their configured destinations.</p>
+                <button type="button" disabled={runningKeys.length > 0 || categoryChecks.length === 0}
+                  onClick={() => void runDiagnostics(categoryChecks.map(check => check.key), 'all')}>
+                  Test all notification channels
+                </button>
+              </div>
+            )}
+
             <div className="diagnostics-grid">
               {categoryChecks.map((check) => {
                 const isRunning = runningKeys.includes(check.key)
@@ -476,7 +479,8 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos
                             return null
                           }
                           return (
-                            <div className="diagnostic-detail-panel">
+                            <details className="diagnostic-detail-panel">
+                              <summary>Database storage, tables and timings</summary>
                               {renderDatabaseMetricGroup('Storage', [
                                 ['Database file', formatBytes(detail.database_size_bytes)],
                                 ['WAL file', formatBytes(detail.wal_size_bytes)],
@@ -501,7 +505,7 @@ export default function AdminDiagnosticsPanel({ embedded = false }: AdminDiagnos
                                   `${value.toFixed(1)} ms`,
                                 ]),
                               )}
-                            </div>
+                            </details>
                           )
                         })()
                       : null}