diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index 95e1a58..04bbce9 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -2019,28 +2019,33 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
 
   return (
     <section className={`page management-page agents-page${embedded ? ' agents-page-embedded' : ''}`}>
-      <header className="management-header">
-        <div className={embedded ? 'agent-embedded-header-copy' : undefined}>
-          {embedded ? (
-            <>
-              <h1>{t('agents.embedded.title')}</h1>
-              <p>{t('agents.embedded.subtitle')}</p>
-            </>
-          ) : null}
-        </div>
-        <div className="agent-header-actions">
-          {detectionError ? (
-            <MessageNotice message={detectionError} onDismiss={() => setDetectionError('')} />
-          ) : null}
-          <button type="button" className="secondary-button compact-button" onClick={() => void refresh()} disabled={loading || busy}>
-            <RefreshCw size={16} className={loading ? 'spin' : ''} />
-            {t('agents.redetect')}
-          </button>
-        </div>
-      </header>
+      {embedded ? (
+        <header className="management-header">
+          <div className="agent-embedded-header-copy">
+            <h1>{t('agents.embedded.title')}</h1>
+            <p>{t('agents.embedded.subtitle')}</p>
+          </div>
+        </header>
+      ) : null}
 
       <div className="agent-workbench">
         <aside className="panel agent-client-list" aria-label={t('agents.localClients')}>
+          <div className="agent-client-list-heading">
+            <strong>{t('agents.localClients')}</strong>
+            <button
+              type="button"
+              className="icon-button quiet"
+              onClick={() => void refresh()}
+              disabled={loading || busy}
+              title={t('agents.redetect')}
+              aria-label={t('agents.redetect')}
+            >
+              <RefreshCw size={15} className={loading ? 'spin' : ''} aria-hidden="true" />
+            </button>
+          </div>
+          {detectionError ? (
+            <MessageNotice message={detectionError} onDismiss={() => setDetectionError('')} />
+          ) : null}
           <div className="agent-list-items">
             {agentDefinitions.map((agent) => {
               const status = statuses.find((item) => item.id === agent.id);
diff --git a/src/pages/EasyModePage.tsx b/src/pages/EasyModePage.tsx
index d971437..d598063 100644
--- a/src/pages/EasyModePage.tsx
+++ b/src/pages/EasyModePage.tsx
@@ -844,11 +844,11 @@ export function EasyModePage({
                 <div className="simple-mode-choice-title">
                   <strong>{t("easyMode.oauth.title")}</strong>
                   {totalLoggedInOAuth > 0 ? (
-                    <span className="state-pill success" style={{ fontSize: "12px" }}>
+                    <span className="state-pill success">
                       {t("easyMode.oauth.accountsLoggedIn", { count: totalLoggedInOAuth })}
                     </span>
                   ) : (
-                    <span className="state-pill neutral" style={{ fontSize: "12px" }}>{t("easyMode.oauth.recommended")}</span>
+                    <span className="state-pill neutral">{t("easyMode.oauth.recommended")}</span>
                   )}
                 </div>
               </div>
@@ -867,7 +867,7 @@ export function EasyModePage({
                 <div className="simple-mode-choice-title">
                   <strong>{t("easyMode.api.title")}</strong>
                   {totalApiProviders > 0 ? (
-                    <span className="state-pill success" style={{ fontSize: "12px" }}>
+                    <span className="state-pill success">
                       {t("easyMode.api.platformsConnected", { count: totalApiProviders })}
                     </span>
                   ) : null}
@@ -906,12 +906,12 @@ export function EasyModePage({
 
                       <div className="simple-mode-provider-card-foot">
                         {loggedIn ? (
-                          <span className="state-pill success" style={{ fontSize: "12px" }}>
+                          <span className="state-pill success">
                             <Check size={12} style={{ marginRight: 4 }} />
                             {t("easyMode.oauth.loggedIn")}
                           </span>
                         ) : (
-                          <span className="state-pill neutral" style={{ fontSize: "12px" }}>{t("easyMode.status.notLoggedIn")}</span>
+                          <span className="state-pill neutral">{t("easyMode.status.notLoggedIn")}</span>
                         )}
 
                         <button
@@ -1126,7 +1126,7 @@ export function EasyModePage({
             <button
               type="button"
               className="primary-button"
-              style={{ minHeight: 42, padding: "0 22px", fontSize: "15px" }}
+              style={{ minHeight: 42, padding: "0 22px" }}
               disabled={!hasConnectedSource}
               onClick={() => {
                 setActiveStep(2);
diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index 67979fd..1883def 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -662,7 +662,7 @@ export function UsageRecordsPage() {
         <div className="usage-filter-row">
           <div className="usage-filter-group">
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('usage.filter.timeRange')}</span>
+              <span className="sr-only">{t('usage.filter.timeRange')}</span>
               <select
                 value={range}
                 onChange={(event) => {
@@ -682,7 +682,7 @@ export function UsageRecordsPage() {
             </label>
 
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('usage.filter.model')}</span>
+              <span className="sr-only">{t('usage.filter.model')}</span>
               <select
                 value={model}
                 onChange={(event) => changeFilter(setModel, event.currentTarget.value)}
@@ -698,7 +698,7 @@ export function UsageRecordsPage() {
             </label>
 
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('usage.column.provider')}</span>
+              <span className="sr-only">{t('usage.column.provider')}</span>
               <select
                 value={provider}
                 onChange={(event) => changeFilter(setProvider, event.currentTarget.value)}
@@ -714,7 +714,7 @@ export function UsageRecordsPage() {
             </label>
 
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('usage.filter.source')}</span>
+              <span className="sr-only">{t('usage.filter.source')}</span>
               <select
                 value={source}
                 onChange={(event) => changeFilter(setSource, event.currentTarget.value)}
@@ -730,7 +730,7 @@ export function UsageRecordsPage() {
             </label>
 
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('apiAccess.field.key')}</span>
+              <span className="sr-only">{t('apiAccess.field.key')}</span>
               <select
                 value={apiKeyHash}
                 onChange={(event) => changeFilter(setApiKeyHash, event.currentTarget.value)}
@@ -746,7 +746,7 @@ export function UsageRecordsPage() {
             </label>
 
             <label className="usage-filter-item">
-              <span className="usage-filter-label">{t('usage.filter.result')}</span>
+              <span className="sr-only">{t('usage.filter.result')}</span>
               <select
                 value={result}
                 onChange={(event) => changeFilter(setResult, event.currentTarget.value)}
@@ -2204,6 +2204,7 @@ function EventsView({
         </div>
 
         <div className="usage-events-summary-right">
+          <div className="usage-pagination-controls">
           <select
             className="usage-page-size-select"
             value={pageSize}
@@ -2239,6 +2240,7 @@ function EventsView({
               <ChevronRight size={14} />
             </button>
           </div>
+          </div>
 
           <button
             type="button"
diff --git a/src/styles.css b/src/styles.css
index 77dbe72..063eceb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1728,7 +1728,7 @@ textarea:focus-visible {
 
 .client-api-card-heading strong {
   color: var(--theme-2d2a26);
-  font-size: 13.5px;
+  font-size: var(--font-size-label);
   font-weight: var(--font-weight-semibold);
   line-height: 1.2;
 }
@@ -1736,7 +1736,7 @@ textarea:focus-visible {
 .client-api-card-heading .client-api-format-tag,
 .client-api-card-heading span {
   color: var(--theme-7a746c);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   line-height: 1.2;
   white-space: nowrap;
 }
@@ -1778,7 +1778,7 @@ textarea:focus-visible {
   border-radius: 6px;
   background: var(--bg-secondary);
   color: var(--theme-2d2a26);
-  font-size: 12.5px;
+  font-size: var(--font-size-meta);
   font-family: var(--font-mono);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6051,31 +6051,18 @@ textarea:focus-visible {
 }
 
 .agents-page {
-  grid-template-rows: minmax(54px, auto) auto;
+  grid-template-rows: minmax(0, 1fr);
   gap: 14px;
 }
 
+.agents-page-embedded {
+  grid-template-rows: minmax(48px, auto) minmax(0, 1fr);
+}
+
 .agents-page-embedded .agent-client-list {
   min-height: 0;
 }
 
-.agent-header-actions {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.agent-header-actions .agent-inline-message {
-  max-width: 360px;
-  text-align: right;
-}
-
-.agent-header-actions .compact-button {
-  flex: none;
-}
-
 .agent-inline-message {
   display: block;
   min-width: 0;
@@ -6096,11 +6083,37 @@ textarea:focus-visible {
 
 .agent-client-list {
   position: relative;
-  display: block;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  gap: 10px;
   padding: 14px;
 }
 
+.agent-client-list-heading {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 32px;
+}
+
+.agent-client-list-heading strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-section);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-client-list-heading .icon-button {
+  width: 30px;
+  height: 30px;
+}
+
 .agent-list-items button > span {
   display: grid;
   width: 100%;
@@ -6128,8 +6141,8 @@ textarea:focus-visible {
 }
 
 .agent-list-items {
-  position: absolute;
-  inset: 14px;
+  position: relative;
+  flex: 1 1 auto;
   display: grid;
   align-content: start;
   grid-auto-rows: max-content;
@@ -8413,8 +8426,6 @@ textarea:focus-visible {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  min-width: 96px;
-  height: 32px;
   padding: 0 14px;
   border: 0;
   border-radius: 6px;
@@ -8467,8 +8478,8 @@ textarea:focus-visible {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  min-width: 120px;
-  flex: 1 1 130px;
+  min-width: 0;
+  flex: 1 1 0;
 }
 
 .usage-filter-label {
@@ -8504,6 +8515,7 @@ textarea:focus-visible {
 .usage-filter-reset-btn {
   display: inline-flex;
   align-items: center;
+  align-self: flex-end;
   gap: 5px;
   height: 34px;
   padding: 0 12px;
@@ -8613,7 +8625,7 @@ textarea:focus-visible {
 
 .usage-stat-card-value {
   color: var(--theme-2d2a26);
-  font-size: 20px;
+  font-size: var(--font-size-dialog-title);
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
@@ -9128,7 +9140,7 @@ textarea:focus-visible {
   background: var(--theme-fffdf8);
   color: var(--theme-8a847c);
   font-size: var(--font-size-caption);
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 .usage-events-summary-left {
@@ -9165,9 +9177,17 @@ textarea:focus-visible {
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  justify-content: flex-end;
   min-width: 0;
 }
 
+.usage-pagination-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
 .usage-col-hint {
   font-size: var(--font-size-caption);
   color: var(--text-quaternary);
@@ -9728,6 +9748,7 @@ body.table-col-resizing * {
   .usage-events-summary {
     gap: 8px;
     padding: 8px 12px;
+    flex-wrap: wrap;
   }
 
   .usage-events-summary-left,
@@ -11448,17 +11469,6 @@ body.table-col-resizing * {
     flex-direction: column;
   }
 
-  .agent-header-actions {
-    width: 100%;
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .agent-header-actions .agent-inline-message {
-    max-width: none;
-    text-align: left;
-  }
-
   .agent-subpage-tabs {
     width: 100%;
     grid-auto-columns: minmax(104px, 1fr);
@@ -11534,14 +11544,17 @@ body.table-col-resizing * {
 
   .usage-tabs {
     width: 100%;
+    max-width: 100%;
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
   }
 
   .usage-tabs button {
-    flex: 1 1 45%;
-    min-width: 0;
-    padding: 0 7px;
+    flex: 0 0 auto;
+    min-width: max-content;
+    padding: 0 12px;
   }
 
   .usage-topbar-actions {
diff --git a/src/styles/feature-pages.css b/src/styles/feature-pages.css
index b049332..3cea88d 100644
--- a/src/styles/feature-pages.css
+++ b/src/styles/feature-pages.css
@@ -2191,7 +2191,6 @@
 }
 
 .agents-page-embedded .agent-list-items {
-  inset: 16px;
   min-height: 0;
   max-height: none;
   overflow-y: auto;
@@ -2985,13 +2984,16 @@
   .usage-tabs {
     display: flex;
     width: 100%;
-    flex-wrap: wrap;
+    max-width: 100%;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
   }
 
   .usage-tabs button {
-    flex: 1 1 45%;
-    min-width: 0;
-    padding-inline: 7px;
+    flex: 0 0 auto;
+    min-width: max-content;
+    padding-inline: 12px;
   }
 
   .usage-topbar-actions {
@@ -3453,7 +3455,7 @@
 .app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
   min-height: 0;
   flex: 1 1 auto;
-  grid-template-rows: minmax(54px, auto) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
 }
 
@@ -3522,7 +3524,7 @@
 
   .app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
     flex: none;
-    grid-template-rows: auto auto;
+    grid-template-rows: auto;
     overflow: visible;
   }
 
diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css
index 0a9e6ad..7d3fe54 100644
--- a/src/styles/ui-refinements.css
+++ b/src/styles/ui-refinements.css
@@ -124,7 +124,7 @@ body, html, #root {
 
 .sidebar-theme-selector button {
   border-radius: 6px;
-  font-size: 12px;
+  font-size: var(--font-size-caption);
   font-weight: 500;
   color: var(--text-tertiary);
   transition: all 0.15s ease;
@@ -188,13 +188,13 @@ body, html, #root {
 
 .control-panel .panel-detail-row dt {
   color: var(--text-secondary);
-  font-size: 13.5px;
+  font-size: var(--font-size-label);
 }
 
 .control-panel .panel-detail-row dd {
   color: var(--text-primary);
   font-weight: 500;
-  font-size: 13.5px;
+  font-size: var(--font-size-label);
 }
 
 .control-panel .panel-detail-row dd code,
@@ -204,7 +204,7 @@ body, html, #root {
   border-radius: 6px;
   padding: 2px 8px;
   font-family: var(--font-mono);
-  font-size: 13px;
+  font-size: var(--font-size-meta);
 }
 
 /* Home Page API Access Panel */
@@ -314,44 +314,60 @@ body, html, #root {
 
 .home-quick-info strong {
   color: var(--text-primary);
-  font-size: 14.5px;
+  font-size: var(--font-size-label);
   font-weight: 600;
 }
 
 .home-quick-info p {
   margin: 0;
   color: var(--text-tertiary);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
   line-height: 1.45;
   white-space: normal;
   overflow-wrap: anywhere;
 }
 
-/* 6. Tabs & Segmented Controls (Unified Modern Style) */
+/* 6. Subpage navigation */
 .agent-subpage-tabs,
 .oauth-subpage-tabs,
 .config-subpage-tabs,
 .usage-tabs {
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--bg-hover);
-  padding: 3px;
   display: inline-flex;
-  gap: 2px;
+  align-items: stretch;
+  gap: 4px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .agent-subpage-tabs button,
 .oauth-subpage-tabs button,
 .config-subpage-tabs button,
-.usage-tabs button {
-  border-radius: 6px;
-  border: none;
+.usage-tabs button,
+.agent-subpage-tabs button:hover,
+.oauth-subpage-tabs button:hover,
+.config-subpage-tabs button:hover,
+.usage-tabs button:hover,
+.agent-subpage-tabs button.active,
+.oauth-subpage-tabs button.active,
+.config-subpage-tabs button.active,
+.usage-tabs button.active {
+  min-width: 0;
+  height: 38px;
+  padding: 0 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
   background: transparent;
+  box-shadow: none;
   color: var(--text-tertiary);
-  font-weight: 500;
-  font-size: 13.5px;
-  padding: 6px 14px;
-  transition: all 0.15s ease;
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-medium);
 }
 
 .agent-subpage-tabs button:hover,
@@ -365,10 +381,10 @@ body, html, #root {
 .oauth-subpage-tabs button.active,
 .config-subpage-tabs button.active,
 .usage-tabs button.active {
-  background: var(--bg-primary);
+  margin-bottom: -1px;
+  border-bottom-color: var(--ui-accent);
   color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* API access toolbar */
@@ -500,7 +516,7 @@ body, html, #root {
 
 .oauth-hint {
   color: var(--text-tertiary);
-  font-size: 12.5px;
+  font-size: var(--font-size-meta);
   line-height: 1.5;
 }
 
@@ -596,34 +612,82 @@ body, html, #root {
   box-shadow: none;
 }
 
+.usage-records-page .usage-filter-row,
+.usage-records-page .usage-filter-group {
+  align-items: center;
+  gap: 8px;
+}
+
 .usage-records-page .usage-filter-item {
-  min-width: 0;
+  flex: 1 1 150px;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+  min-width: 132px;
+  max-width: 210px;
+  height: 36px;
+  padding: 0 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: var(--bg-primary);
 }
 
 .usage-records-page .usage-filter-label {
-  padding-left: 12px;
+  flex: none;
+  padding: 0 8px 0 0;
+  border-right: 1px solid var(--border-color);
+  margin-right: 2px;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-caption);
+  line-height: 20px;
 }
 
 .usage-records-page .usage-filter-item select,
 .usage-records-page .usage-filter-item input {
+  width: 100%;
+  min-width: 0;
   height: 34px;
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  background: var(--bg-primary);
+  padding: 0 18px 0 4px;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
   color: var(--text-primary);
 }
 
-.usage-records-page .usage-filter-item select:hover,
-.usage-records-page .usage-filter-item input:hover {
+.usage-records-page .usage-filter-item:hover {
   border-color: var(--border-hover);
 }
 
-.usage-records-page .usage-filter-item select:focus,
-.usage-records-page .usage-filter-item input:focus {
+.usage-records-page .usage-filter-item:focus-within {
   border-color: var(--ui-accent);
   box-shadow: 0 0 0 3px var(--ui-focus-ring);
 }
 
+.usage-records-page .usage-filter-item select:hover,
+.usage-records-page .usage-filter-item input:hover,
+.usage-records-page .usage-filter-item select:focus,
+.usage-records-page .usage-filter-item input:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.usage-records-page .usage-filter-reset-btn {
+  align-self: center;
+  height: 36px;
+  border-style: solid;
+  border-color: var(--border-color);
+  border-radius: 10px;
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+}
+
+.usage-records-page .usage-filter-reset-btn:hover {
+  border-color: var(--border-hover);
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
 .usage-records-page .usage-section-heading strong {
   color: #1d1d1f;
   font-weight: 650;
@@ -670,14 +734,14 @@ body, html, #root {
 
 .usage-stat-card-label {
   color: var(--text-secondary);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
   font-weight: 590;
   letter-spacing: -0.01em;
 }
 
 .usage-stat-card-value {
   color: var(--usage-tone);
-  font-size: 30px;
+  font-size: var(--font-size-display);
   font-weight: 650;
   letter-spacing: -0.045em;
   line-height: 1.02;
@@ -718,7 +782,7 @@ body, html, #root {
   border-radius: 999px;
   background: #f2f2f7;
   color: #3a3a3c;
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   font-weight: 590;
   line-height: 1.45;
 }
@@ -757,7 +821,7 @@ body, html, #root {
 
 .metric-card strong {
   color: var(--text-primary);
-  font-size: 26px;
+  font-size: var(--font-size-display);
   font-weight: 700;
 }
 
@@ -1161,3 +1225,15 @@ body, html, #root {
   background: rgba(15, 118, 110, 0.2);
   color: #2dd4bf;
 }
+
+:root[data-theme='dark'] .usage-records-page .usage-filter-item {
+  background: var(--bg-primary);
+  border-color: var(--border-color);
+}
+
+:root[data-theme='dark'] .usage-records-page .usage-filter-item select,
+:root[data-theme='dark'] .usage-records-page .usage-filter-item input {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text-primary);
+}
diff --git a/tests/agent-configuration-layout-ui.cjs b/tests/agent-configuration-layout-ui.cjs
index 16ef086..f8869bb 100644
--- a/tests/agent-configuration-layout-ui.cjs
+++ b/tests/agent-configuration-layout-ui.cjs
@@ -32,7 +32,7 @@ const desktopViewports = [
       });
       await page.waitForFunction(() => window.fixtureCalls.some(call => call.cmd === 'get_agent_config_statuses')
         && document.querySelector('.agent-config-panel')?.getBoundingClientRect().height > 0
-        && !document.querySelector('.agent-header-actions button')?.disabled);
+        && !document.querySelector('.agent-client-list-heading button')?.disabled);
       await page.evaluate(() => document.fonts.ready);
     };
 
diff --git a/tests/agent-management-ui.cjs b/tests/agent-management-ui.cjs
index 9750f79..dd923c1 100644
--- a/tests/agent-management-ui.cjs
+++ b/tests/agent-management-ui.cjs
@@ -16,7 +16,7 @@ const path = require('node:path');
     const open = async query => {
       await page.goto('http://localhost:1421/tests/fixtures/agent-backups.html?reset-selections&' + query);
       await page.waitForFunction(() => {
-        const refresh = document.querySelector('.agent-header-actions button');
+        const refresh = document.querySelector('.agent-client-list-heading button');
         return refresh && !refresh.disabled && document.querySelector('.agent-model-trigger, .agent-desktop-models')
           && window.fixtureCalls.some(call => call.cmd === 'get_agent_models');
       });
diff --git a/tests/agent-native-oauth-ui.cjs b/tests/agent-native-oauth-ui.cjs
index eb512a6..08e2917 100644
--- a/tests/agent-native-oauth-ui.cjs
+++ b/tests/agent-native-oauth-ui.cjs
@@ -28,7 +28,7 @@ const base = 'http://127.0.0.1:1421';
       await page.goto(`${base}/tests/fixtures/agent-backups.html?reset-selections&client=codex&${query}`, { waitUntil: 'domcontentloaded' });
       await update().waitFor();
       await page.waitForFunction(() => {
-        const button = document.querySelector('.agents-page .management-header button');
+        const button = document.querySelector('.agent-client-list-heading button');
         return window.fixtureCalls.some(call => call.cmd === 'get_agent_models') && button && !button.disabled;
       });
     };
diff --git a/tests/agent-navigation-ui.cjs b/tests/agent-navigation-ui.cjs
index 2aa7eb0..8a76e57 100644
--- a/tests/agent-navigation-ui.cjs
+++ b/tests/agent-navigation-ui.cjs
@@ -18,7 +18,7 @@ const assert = require('node:assert/strict');
       assert.equal(await page.locator('[role=tab][aria-selected=true]').count(), 1);
     };
     const ready = () => page.waitForFunction(() => {
-      const refresh = document.querySelector('.agent-header-actions button');
+      const refresh = document.querySelector('.agent-client-list-heading button');
       return refresh && !refresh.disabled && window.fixtureCalls.some(call => call.cmd === 'get_agent_models');
     });
     const open = async query => {