web: unify page headers into one shared page-header bar

Every full-page view now renders the same sticky top bar (back button,
title, right-side actions) from the new web/css/page-header.css,
replacing a dozen per-page duplicates (.page-panel-header,
.project-page-header, .task-page-header, .llm-page-header, .um-header,
.apr-header, .llmr-header, .pv-header, .sa-header, .config-page-header,
.agents-page-header). Pages that padded the whole container (config,
agents, system-agents, llm-requests, models-hub) move that padding into
a body wrapper so the bar sits flush and stays pinned on scroll.
Back buttons are standardized to the icon-only .page-header-back.

web/components/system-agents.js

@@ -294,20 +294,26 @@ export class SystemAgentsPage extends LightElement {
   render() {
     return html`
       <div class="sa-page">
-        <div class="sa-header">
-          <h2 class="sa-title"><i class="bi bi-robot"></i> ${t('system_agents.title')}</h2>
-          <span class="sa-total-badge">${t('system_agents.total', { n: this._total })}</span>
-          <button class="btn btn-sm btn-outline-secondary sa-refresh-btn"
-                  ?disabled=${this._loading}
-                  @click=${() => this._loadAll()}>
-            <i class="bi bi-arrow-clockwise"></i> ${t('system_agents.refresh')}
-          </button>
+        <div class="page-header">
+          <div class="page-header-left">
+            <h2 class="page-header-title"><i class="bi bi-robot"></i> ${t('system_agents.title')}</h2>
+          </div>
+          <div class="page-header-actions">
+            <span class="page-header-count">${t('system_agents.total', { n: this._total })}</span>
+            <button class="btn btn-sm btn-outline-secondary"
+                    ?disabled=${this._loading}
+                    @click=${() => this._loadAll()}>
+              <i class="bi bi-arrow-clockwise"></i> ${t('system_agents.refresh')}
+            </button>
+          </div>
+        </div>
+        <div class="sa-body">
+          <p class="sa-subtitle">${t('system_agents.subtitle')}</p>
+          ${this._renderTabs()}
+          ${this._renderAgentPanel()}
+          ${this._renderTable()}
+          ${this._renderPagination()}
         </div>
-        <p class="sa-subtitle">${t('system_agents.subtitle')}</p>
-        ${this._renderTabs()}
-        ${this._renderAgentPanel()}
-        ${this._renderTable()}
-        ${this._renderPagination()}
       </div>
     `;
   }