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/css/agent-inbox.css

@@ -16,26 +16,6 @@ agent-inbox-page {
   width: 100%;
 }
 
-.page-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.page-panel-header h5 {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Refresh button ── */
 
 .inbox-refresh-btn {
@@ -118,11 +98,6 @@ agent-inbox-page {
 /* ── Mobile tweaks ── */
 
 @media (max-width: 600px) {
-  .page-panel-header {
-    padding: 12px 14px;
-    min-height: 50px;
-  }
-
   .inbox-grid {
     grid-template-columns: 1fr;
     padding: 12px;

web/css/agents.css

@@ -5,7 +5,6 @@ agents-page {
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem 2rem;
   background: var(--bs-body-bg);
 }
 
@@ -15,11 +14,8 @@ agents-page {
   width: 100%;
 }
 
-.agents-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
+.agents-body {
+  padding: 1.5rem 2rem;
 }
 
 /* ── Info banner ─────────────────────────────────────────────────────────── */

web/css/approval-groups.css

@@ -35,39 +35,6 @@ approval-groups-page {
   max-width: 100%;
 }
 
-.apr-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.apr-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.apr-header-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.apr-header-count {
-  font-size: 0.76rem;
-  font-weight: 500;
-  color: var(--bs-secondary-color);
-}
-
 /* ── Card list ── */
 
 .apr-card-list {
@@ -417,11 +384,6 @@ approval-groups-page {
 /* ── Mobile ── */
 
 @media (max-width: 600px) {
-  .apr-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .apr-card-list {
     padding: 10px 12px;
     gap: 8px;

web/css/config.css

@@ -3,7 +3,6 @@ config-page {
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem 2rem;
   background: var(--bs-body-bg);
 }
 
@@ -13,11 +12,11 @@ config-page {
   width: 100%;
 }
 
-.config-page-header {
+.config-body {
+  padding: 1.5rem 2rem;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
 .config-sets {

web/css/llm-providers.css

@@ -8,39 +8,6 @@
   max-width: 100%;
 }
 
-.pv-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.pv-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.pv-header-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.pv-header-count {
-  font-size: 0.76rem;
-  font-weight: 500;
-  color: var(--bs-secondary-color);
-}
-
 /* ── Card list ── */
 
 .pv-card-list {
@@ -297,11 +264,6 @@
 /* ── Mobile ── */
 
 @media (max-width: 600px) {
-  .pv-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .pv-card-list {
     padding: 10px 12px;
     gap: 8px;

web/css/llm-requests.css

@@ -10,44 +10,19 @@ llm-requests-page {
 }
 
 .llmr-page {
-  padding: 1.5rem 2rem;
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+}
+
+.llmr-body {
+  padding: 1.5rem 2rem;
+  display: flex;
+  flex-direction: column;
   gap: 1.25rem;
 }
 
-/* ── Header ─────────────────────────────────────────────────────────────────── */
-
-.llmr-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  border-bottom: 1px solid var(--bs-border-color);
-  padding-bottom: 1rem;
-}
-
-.llmr-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.llmr-title i { color: var(--bs-secondary-color); }
-
-.llmr-total-badge {
-  margin-left: auto;
-  font-size: 0.78rem;
-  color: var(--bs-secondary-color);
-  background: var(--bs-tertiary-bg);
-  padding: 2px 10px;
-  border-radius: 20px;
-}
-
 /* ── Filters ─────────────────────────────────────────────────────────────────── */
 
 .llmr-filters {
@@ -197,24 +172,7 @@ llm-requests-page {
 .llmr-row--clickable { cursor: pointer; }
 .llmr-row--clickable:hover td { background: var(--bs-tertiary-bg); }
 
-/* ── Detail — back bar ───────────────────────────────────────────────────────── */
-
-.llmr-detail-back {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--bs-border-color);
-}
-
-.llmr-detail-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--bs-body-color);
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-}
+/* ── Detail ─────────────────────────────────────────────────────────────────── */
 
 .llmr-detail-id {
   font-family: var(--bs-font-monospace);

web/css/models-hub.css

@@ -1,10 +1,13 @@
 /* ── Models hub landing page ────────────────────────────────────────────────── */
 
 .models-hub {
-  padding: 2rem 2.5rem;
   width: 100%;
 }
 
+.models-hub-body {
+  padding: 2rem 2.5rem;
+}
+
 .models-hub-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

web/css/models-llm.css

@@ -10,56 +10,6 @@
   height: 100%;
 }
 
-.llm-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-  gap: 12px;
-}
-
-.llm-header-left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.back-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0 !important;
-  border-radius: 6px !important;
-  flex-shrink: 0;
-}
-
-.back-btn i {
-  font-size: 1rem;
-  line-height: 1;
-}
-
-.llm-page-title {
-  font-size: 1.05rem;
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.llm-page-count {
-  font-size: 0.76rem;
-  color: var(--bs-secondary-color);
-  font-weight: 500;
-}
-
 /* ── Card list ── */
 
 .llm-card-list {
@@ -291,11 +241,6 @@
 /* ── Mobile tweaks ── */
 
 @media (max-width: 600px) {
-  .llm-page-header {
-    padding: 10px 14px;
-    min-height: 50px;
-  }
-
   .llm-card-list {
     padding: 10px 12px;
     gap: 8px;

web/css/page-header.css

@@ -0,0 +1,90 @@
+/* ── Shared page header bar ─────────────────────────────────────────────────
+   The one canonical header for every full-page view: optional back button,
+   title, right-side actions. Replaces the former per-page duplicates
+   (.page-panel-header, .project-page-header, .task-page-header,
+   .llm-page-header, .um-header top bars, .apr-header, .llmr-header,
+   .pv-header, .sa-header, .config-page-header, .agents-page-header).
+
+   Markup contract:
+
+     <div class="page-header">
+       <div class="page-header-left">
+         [<button class="btn btn-sm btn-outline-secondary page-header-back">…</button>]
+         <h2 class="page-header-title">…</h2>
+       </div>
+       <div class="page-header-actions">
+         [<span class="page-header-count">…</span>] [buttons…]
+       </div>
+     </div>
+
+   Sticky so it stays pinned on pages whose container scrolls. */
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  min-height: 54px;
+  border-bottom: 1px solid var(--bs-border-color);
+  background: var(--bs-tertiary-bg);
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.page-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.page-header-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  border-radius: 6px !important;
+  flex-shrink: 0;
+}
+
+.page-header-back i {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.page-header-title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 1.05rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.page-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.page-header-count {
+  font-size: 0.82rem;
+  color: var(--bs-secondary-color);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+  .page-header {
+    padding: 10px 14px;
+    min-height: 50px;
+  }
+}

web/css/projects/base.css

@@ -8,26 +8,6 @@
   width: 100%;
 }
 
-.project-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.project-page-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Grid ── */
 
 .project-grid {

web/css/system-agents.css

@@ -9,29 +9,11 @@
   flex: 1;
   min-height: 0;
   width: 100%;
-  padding: 1.5rem;
   overflow-y: auto;
 }
-.sa-header {
-  display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
-  margin-bottom: 0.35rem;
+.sa-body {
+  padding: 1.5rem;
 }
-.sa-title {
-  font-size: 1.2rem;
-  font-weight: 600;
-  margin: 0;
-}
-.sa-total-badge {
-  font-size: 0.75rem;
-  color: var(--bs-secondary-color);
-  background: var(--bs-tertiary-bg);
-  border: 1px solid var(--bs-border-color);
-  border-radius: 1rem;
-  padding: 0.1rem 0.6rem;
-}
-.sa-refresh-btn { margin-left: auto; }
 .sa-subtitle {
   font-size: 0.85rem;
   color: var(--bs-secondary-color);

web/css/tasks/base.css

@@ -8,26 +8,6 @@
   width: 100%;
 }
 
-.task-page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  min-height: 54px;
-  border-bottom: 1px solid var(--bs-border-color);
-  background: var(--bs-tertiary-bg);
-  flex-shrink: 0;
-}
-
-.task-page-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 1.05rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* ── Empty state ── */
 
 .task-empty {

web/css/users-roles.css

@@ -21,18 +21,6 @@
   margin: 0;
 }
 
-.um-header-right {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-}
-
-.um-header-count {
-  font-size: .82rem;
-  color: var(--placeholder-color);
-}
-
 .um-table-wrap {
   padding: 0 24px 24px;
 }