Organize diagnostics into horizontal rows and group notification controls

frontend/app/ops-redesign.css

@@ -4987,3 +4987,29 @@ textarea:focus {
   mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 38%, transparent 100%), linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
   mask-composite: intersect;
 }
+
+/* Diagnostics: scan each service from identity to result to action. */
+.diagnostics-page .diagnostics-grid { grid-template-columns: minmax(0, 1fr); }
+.diagnostics-page .diagnostic-card { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(280px, 1.65fr) minmax(160px, 1fr) auto; align-items: center; gap: 20px; }
+.diagnostics-page .diagnostic-card-top { display: contents; }
+.diagnostics-page .diagnostic-card-copy { grid-column: 1; grid-row: 1; }
+.diagnostics-page .diagnostic-card .system-test { grid-column: 4; grid-row: 1; white-space: nowrap; }
+.diagnostics-page .diagnostic-meta-grid { grid-column: 2; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
+.diagnostics-page .diagnostic-message { grid-column: 3; grid-row: 1; margin: 0; }
+.diagnostics-page .diagnostic-detail-panel { grid-column: 1 / -1; border-top: 1px solid var(--ops-line-soft); padding-top: 14px; }
+.diagnostic-detail-panel > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
+.diagnostics-page .diagnostic-detail-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+.diagnostics-notification-controls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--ops-line-soft); border-radius: 10px; }
+.diagnostics-notification-controls .diagnostics-email-recipient { flex: 1 1 280px; }
+.diagnostics-notification-controls p { flex: 1 1 220px; margin: 0; color: var(--ops-muted); font-size: .85rem; }
+@media (max-width: 1050px) {
+ .diagnostics-page .diagnostic-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 14px; }
+ .diagnostics-page .diagnostic-card .system-test { grid-column: 3; }
+ .diagnostics-page .diagnostic-message { grid-column: 1 / -1; grid-row: 2; }
+}
+@media (max-width: 640px) {
+ .diagnostics-page .diagnostic-card { grid-template-columns: minmax(0, 1fr) auto; }
+ .diagnostics-page .diagnostic-card .system-test { grid-column: 2; }
+ .diagnostics-page .diagnostic-meta-grid { grid-column: 1 / -1; grid-row: 2; }
+ .diagnostics-page .diagnostic-message { grid-row: 3; }
+}

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
+            Check Magent and your connected services. Automatic refresh runs health checks only.
-            channels to send a real ping through the configured provider.
+            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}