From 567782d281034da038b243c046ae9d8a19776a30 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sat, 31 Oct 2026 23:33:06 -0700
Subject: [PATCH 1/4] Fold the per-pod wake card into one Wake table

The agent settings Wake section rendered one card per pod. The D223
artboard shows a single table, one row per pod, with the message-wake
segment, board switch, heartbeat select and actions in the row.

- Replace the pod cards with a table (pod, messages, board, heartbeat,
  remove). The message-wake segment stays the only message-wake control.
- Update the pod-count and Pods-column assertions for the table.
- Point the layout invariants at the table's save and remove buttons.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-authored-by: kite <WyJraXRlIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-haiku-5-5/default
---
 .../v2/__tests__/V2AgentSettingsPage.test.tsx |   2 +-
 .../src/v2/__tests__/V2AgentWakePods.test.tsx |   4 +-
 .../v2/__tests__/v2-layout-invariants.test.ts |   4 +-
 frontend/src/v2/agents/V2AgentWakePods.tsx    | 151 ++++++++++--------
 frontend/src/v2/agents/v2-agent-wake-pods.css |  17 +-
 5 files changed, 98 insertions(+), 80 deletions(-)

diff --git a/frontend/src/v2/__tests__/V2AgentSettingsPage.test.tsx b/frontend/src/v2/__tests__/V2AgentSettingsPage.test.tsx
index 1612b48a1e..6eeae4d674 100644
--- a/frontend/src/v2/__tests__/V2AgentSettingsPage.test.tsx
+++ b/frontend/src/v2/__tests__/V2AgentSettingsPage.test.tsx
@@ -348,7 +348,7 @@ test('a partial installation owner cannot see identity-wide key controls', async
   renderPage();
   expect(await screen.findByRole('heading', { name: 'Policy' })).toBeInTheDocument();
   expect(await screen.findByText('Key management is unavailable for this agent. Ask an admin for access.')).toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: 'Pods' })).toBeInTheDocument();
+  expect(screen.getByRole('columnheader', { name: 'Pods' })).toBeInTheDocument();
   expect(screen.queryByRole('button', { name: 'Regenerate key' })).not.toBeInTheDocument();
   expect(screen.queryByText('Laptop')).not.toBeInTheDocument();
   expect(axios.get.mock.calls.some(([url]) => url === '/api/agent-memory/maya-claude/default')).toBe(false);
diff --git a/frontend/src/v2/__tests__/V2AgentWakePods.test.tsx b/frontend/src/v2/__tests__/V2AgentWakePods.test.tsx
index dce2de0c26..b59d17c491 100644
--- a/frontend/src/v2/__tests__/V2AgentWakePods.test.tsx
+++ b/frontend/src/v2/__tests__/V2AgentWakePods.test.tsx
@@ -188,12 +188,12 @@ describe('per-agent Wake and Pods settings', () => {
     view.rerender(
       <MemoryRouter><V2AgentWakePods agentName="new-agent" instanceId="default" updatePod={updatePod} /></MemoryRouter>,
     );
-    expect((await screen.findAllByText('New pod')).length).toBe(2);
+    expect((await screen.findAllByText('New pod')).length).toBe(1);
     await act(async () => { finishOld({ data: { installations: [{
       podId: 'pod-old', podName: 'Old pod', wakeOnMessage: true, boardWake: true, heartbeatMinutes: 60,
     }] } }); });
     expect(screen.queryByText('Old pod')).not.toBeInTheDocument();
-    expect(screen.getAllByText('New pod')).toHaveLength(2);
+    expect(screen.getByText('New pod')).toBeInTheDocument();
   });
 
   it('previews heartbeat turns against the plan cap before saving', async () => {
diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index e6920c50f4..deb58eb50f 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -5053,8 +5053,8 @@ describe('GitHub gig card fits the chat column', () => {
 describe('agent Wake and Pods controls', () => {
   const css = read('../agents/v2-agent-wake-pods.css');
   test('action buttons keep a visible surface over the v2 button reset', () => {
-    const save = ruleBody(css, '.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod > button');
-    const remove = ruleBody(css, '.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod-row button');
+    const save = ruleBody(css, '.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod button');
+    const remove = ruleBody(css, '.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__remove');
     expect(save).toContain('background: var(--v2-surface)');
     expect(remove).toContain('background: var(--v2-surface)');
     expect(remove).toContain('border: 1px solid var(--v2-border)');
diff --git a/frontend/src/v2/agents/V2AgentWakePods.tsx b/frontend/src/v2/agents/V2AgentWakePods.tsx
index 3024896042..d077623a33 100644
--- a/frontend/src/v2/agents/V2AgentWakePods.tsx
+++ b/frontend/src/v2/agents/V2AgentWakePods.tsx
@@ -185,74 +185,89 @@ const V2AgentWakePods: React.FC<{
       <section className="v2-agent-wake-pods__section" aria-labelledby="agent-wake-title">
         <h2 id="agent-wake-title">{t('agentSettings.wakeTitle')}</h2>
         <p className="v2-agent-wake-pods__hint">{t('agentSettings.mentionsAlwaysWake')}</p>
-        {installations.map((entry) => (
-          <div className="v2-agent-wake-pods__pod" key={entry.podId}>
-            <Link to={`/v2/pods/${entry.podId}`}>{entry.podName}</Link>
-            <div className="v2-agent-wake-pods__choice" role="group" aria-busy={busyPod === entry.podId}
-              aria-labelledby={`message-wake-label-${entry.podId}`}>
-              <span id={`message-wake-label-${entry.podId}`}>{t('agentSettings.messageWake')}</span>
-              <div className="v2-agent-wake-pods__segment">
-                {MESSAGE_WAKE_CHOICES.map((choice) => (
-                  <label className="v2-agent-wake-pods__option" key={choice}>
-                    <input type="radio" name={`message-wake-${entry.podId}`} value={choice}
-                      checked={messageWakeChoice(entry) === choice}
-                      onChange={() => { void save(entry, MESSAGE_WAKE_SETTINGS[choice]); }} />
-                    <span>{t(`agentSettings.messageWake_${choice}`)}</span>
-                  </label>
-                ))}
-              </div>
-            </div>
-            <label className="v2-agent-wake-pods__row">
-              <span>{t('agentSettings.boardWake')}</span>
-              <input type="checkbox" checked={entry.boardWake} disabled={busyPod === entry.podId}
-                onChange={(event) => { void save(entry, { boardWake: event.target.checked }); }} />
-            </label>
-            <label className="v2-agent-wake-pods__row">
-              <span>{t('agentSettings.heartbeat')}</span>
-              <input type="checkbox" checked={entry.heartbeatEnabled} disabled={busyPod === entry.podId}
-                onChange={(event) => { void save(entry, { heartbeatEnabled: event.target.checked,
-                  heartbeatMinutes: draftMinutes[entry.podId] ?? entry.heartbeatMinutes }); }} />
-            </label>
-            <label className="v2-agent-wake-pods__row v2-agent-wake-pods__subrow">
-              <span>{t('agentSettings.heartbeatInterval')}</span>
-              <select value={draftMinutes[entry.podId] ?? entry.heartbeatMinutes} disabled={busyPod === entry.podId}
-                onChange={(event) => { setDraftMinutes((current) => ({ ...current,
-                  [entry.podId]: Number(event.target.value) })); }}>
-                {[...new Set([15, 30, 60, 120, 360, 720, 1440, entry.heartbeatMinutes])]
-                  .sort((a, b) => a - b).map((minutes) => (
-                    <option value={minutes} key={minutes}>{t('agentSettings.everyMinutes', { count: minutes })}</option>
-                  ))}
-              </select>
-            </label>
-            <p className="v2-agent-wake-pods__hint">
-              {turnCap === null
-                ? t('agentSettings.capUnavailable', {
-                  count: Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)),
-                })
-                : t('agentSettings.turnsPerDay', {
-                  count: Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)), cap: turnCap,
-                })}
-              {turnCap !== null && Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)) > turnCap
-                && ` ${t('agentSettings.overCap')}`}
-            </p>
-            {entry.heartbeatEnabled && draftMinutes[entry.podId] !== entry.heartbeatMinutes
-              && <button type="button" disabled={busyPod === entry.podId}
-                onClick={() => { void save(entry, { heartbeatMinutes: draftMinutes[entry.podId] }); }}>
-                {t('agentSettings.saveInterval')}
-              </button>}
-          </div>
-        ))}
-      </section>
-      <section className="v2-agent-wake-pods__section" aria-labelledby="agent-pods-title">
-        <h2 id="agent-pods-title">{t('agentSettings.podsTitle')}</h2>
-        {installations.length ? installations.map((entry) => (
-          <div className="v2-agent-wake-pods__pod-row" key={entry.podId}>
-            <Link to={`/v2/pods/${entry.podId}`}>{entry.podName}</Link>
-            <button type="button" disabled={busyPod === entry.podId} onClick={() => { void remove(entry); }}>
-              {t('agentSettings.remove')}
-            </button>
-          </div>
-        )) : <p className="v2-agent-wake-pods__empty">{t('agentSettings.noPods')}</p>}
+        {installations.length ? (
+          <table className="v2-agent-wake-pods__table">
+            <thead>
+              <tr>
+                <th scope="col">{t('agentSettings.podsTitle')}</th>
+                <th scope="col">{t('agentSettings.messageWake')}</th>
+                <th scope="col">{t('agentSettings.boardWake')}</th>
+                <th scope="col">{t('agentSettings.heartbeat')}</th>
+                <th scope="col"><span className="v2-agent-wake-pods__sr">{t('agentSettings.remove')}</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              {installations.map((entry) => (
+                <tr className="v2-agent-wake-pods__pod" key={entry.podId}>
+                  <th scope="row"><Link to={`/v2/pods/${entry.podId}`}>{entry.podName}</Link></th>
+                  <td>
+                    <div className="v2-agent-wake-pods__choice" role="group" aria-busy={busyPod === entry.podId}
+                      aria-label={t('agentSettings.messageWake')}>
+                      <div className="v2-agent-wake-pods__segment">
+                        {MESSAGE_WAKE_CHOICES.map((choice) => (
+                          <label className="v2-agent-wake-pods__option" key={choice}>
+                            <input type="radio" name={`message-wake-${entry.podId}`} value={choice}
+                              checked={messageWakeChoice(entry) === choice}
+                              onChange={() => { void save(entry, MESSAGE_WAKE_SETTINGS[choice]); }} />
+                            <span>{t(`agentSettings.messageWake_${choice}`)}</span>
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  </td>
+                  <td>
+                    <label className="v2-agent-wake-pods__row">
+                      <span>{t('agentSettings.boardWake')}</span>
+                      <input type="checkbox" checked={entry.boardWake} disabled={busyPod === entry.podId}
+                        onChange={(event) => { void save(entry, { boardWake: event.target.checked }); }} />
+                    </label>
+                  </td>
+                  <td>
+                    <label className="v2-agent-wake-pods__row">
+                      <span>{t('agentSettings.heartbeat')}</span>
+                      <input type="checkbox" checked={entry.heartbeatEnabled} disabled={busyPod === entry.podId}
+                        onChange={(event) => { void save(entry, { heartbeatEnabled: event.target.checked,
+                          heartbeatMinutes: draftMinutes[entry.podId] ?? entry.heartbeatMinutes }); }} />
+                    </label>
+                    <label className="v2-agent-wake-pods__row v2-agent-wake-pods__subrow">
+                      <span>{t('agentSettings.heartbeatInterval')}</span>
+                      <select value={draftMinutes[entry.podId] ?? entry.heartbeatMinutes} disabled={busyPod === entry.podId}
+                        onChange={(event) => { setDraftMinutes((current) => ({ ...current,
+                          [entry.podId]: Number(event.target.value) })); }}>
+                        {[...new Set([15, 30, 60, 120, 360, 720, 1440, entry.heartbeatMinutes])]
+                          .sort((a, b) => a - b).map((minutes) => (
+                            <option value={minutes} key={minutes}>{t('agentSettings.everyMinutes', { count: minutes })}</option>
+                          ))}
+                      </select>
+                    </label>
+                    <p className="v2-agent-wake-pods__hint">
+                      {turnCap === null
+                        ? t('agentSettings.capUnavailable', {
+                          count: Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)),
+                        })
+                        : t('agentSettings.turnsPerDay', {
+                          count: Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)), cap: turnCap,
+                        })}
+                      {turnCap !== null && Math.ceil(1440 / (draftMinutes[entry.podId] ?? entry.heartbeatMinutes)) > turnCap
+                        && ` ${t('agentSettings.overCap')}`}
+                    </p>
+                    {entry.heartbeatEnabled && draftMinutes[entry.podId] !== entry.heartbeatMinutes
+                      && <button type="button" disabled={busyPod === entry.podId}
+                        onClick={() => { void save(entry, { heartbeatMinutes: draftMinutes[entry.podId] }); }}>
+                        {t('agentSettings.saveInterval')}
+                      </button>}
+                  </td>
+                  <td>
+                    <button type="button" className="v2-agent-wake-pods__remove" disabled={busyPod === entry.podId}
+                      onClick={() => { void remove(entry); }}>
+                      {t('agentSettings.remove')}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : <p className="v2-agent-wake-pods__empty">{t('agentSettings.noPods')}</p>}
       </section>
     </div>
   );
diff --git a/frontend/src/v2/agents/v2-agent-wake-pods.css b/frontend/src/v2/agents/v2-agent-wake-pods.css
index 30d4faf502..f63f898c2c 100644
--- a/frontend/src/v2/agents/v2-agent-wake-pods.css
+++ b/frontend/src/v2/agents/v2-agent-wake-pods.css
@@ -1,17 +1,12 @@
 .v2-agent-wake-pods { display: grid; gap: 24px; }
 .v2-agent-wake-pods__section { border: 1px solid var(--v2-border); border-radius: 6px; padding: 20px; background: var(--v2-surface); }
 .v2-agent-wake-pods__section h2 { margin: 0 0 16px; color: var(--v2-text-primary); font: 700 20px/28px var(--v2-font-display); }
-.v2-agent-wake-pods__pod + .v2-agent-wake-pods__pod { border-top: 1px solid var(--v2-border-soft); margin-top: 16px; padding-top: 16px; }
-.v2-agent-wake-pods__pod > a, .v2-agent-wake-pods__pod-row > a { color: var(--v2-accent-text); font: 600 14px/20px var(--v2-font); }
-.v2-agent-wake-pods__row, .v2-agent-wake-pods__pod-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; color: var(--v2-text-primary); font: 500 14px/20px var(--v2-font); }
+.v2-agent-wake-pods__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; color: var(--v2-text-primary); font: 500 14px/20px var(--v2-font); }
 .v2-agent-wake-pods__row input { width: 18px; height: 18px; accent-color: var(--v2-ink); }
 .v2-agent-wake-pods__subrow { padding-left: 18px; }
 .v2-agent-wake-pods__hint { margin: 4px 0 12px; color: var(--v2-text-muted); font: 400 13px/19px var(--v2-font); }
-.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod > button { border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px 10px; background: var(--v2-surface); color: var(--v2-text-primary); cursor: pointer; }
+.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod button { border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px 10px; background: var(--v2-surface); color: var(--v2-text-primary); cursor: pointer; }
 .v2-agent-wake-pods__row select { max-width: 55%; border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px; background: var(--v2-surface); color: var(--v2-text-primary); }
-.v2-agent-wake-pods__pod-row + .v2-agent-wake-pods__pod-row { border-top: 1px solid var(--v2-border-soft); }
-.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__pod-row button { border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px 10px; background: var(--v2-surface); color: var(--v2-text-secondary); cursor: pointer; }
-.v2-agent-wake-pods__pod-row button:disabled { opacity: .5; cursor: default; }
 .v2-agent-wake-pods__error { margin: 0; color: var(--v2-danger); }
 .v2-agent-wake-pods__empty, .v2-agent-wake-pods__loading { margin: 0; color: var(--v2-text-muted); }
 @media (max-width: 600px) { .v2-agent-wake-pods__section { padding: 16px; } }
@@ -20,3 +15,11 @@
 .v2-agent-wake-pods__segment { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 0; }
 .v2-agent-wake-pods__option { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--v2-border); border-radius: 999px; color: var(--v2-text-primary); font: 500 13px/18px var(--v2-font); cursor: pointer; }
 .v2-agent-wake-pods__option input { width: 14px; height: 14px; accent-color: var(--v2-ink); }
+.v2-agent-wake-pods__table { width: 100%; border-collapse: collapse; }
+.v2-agent-wake-pods__table th, .v2-agent-wake-pods__table td { padding: 12px 10px; border-top: 1px solid var(--v2-border-soft); vertical-align: top; text-align: left; }
+.v2-agent-wake-pods__table thead th { border-top: 0; color: var(--v2-text-muted); font: 600 12px/16px var(--v2-font); }
+.v2-agent-wake-pods__table tbody th a { color: var(--v2-accent-text); font: 600 14px/20px var(--v2-font); }
+.v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__remove { border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px 10px; background: var(--v2-surface); color: var(--v2-text-secondary); cursor: pointer; }
+.v2-agent-wake-pods__remove:disabled { opacity: .5; cursor: default; }
+.v2-agent-wake-pods__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (max-width: 600px) { .v2-agent-wake-pods__table thead { display: none; } .v2-agent-wake-pods__table, .v2-agent-wake-pods__table tbody, .v2-agent-wake-pods__table tr, .v2-agent-wake-pods__table td, .v2-agent-wake-pods__table th { display: block; width: 100%; } }

From 239ca6086d35defa98abd2937723804b0d202435 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sat, 31 Oct 2026 23:55:39 -0700
Subject: [PATCH 2/4] Complete the visually-hidden pattern on the wake sr-only
 class

srOnlyPattern pins one shape for visually-hidden text. The wake table's
sr-only class declared only part of it, so the test failed on CI.
Add padding, margin, border and clip-path to match the pattern.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-authored-by: kite <WyJraXRlIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-haiku-5-5/default
---
 frontend/src/v2/agents/v2-agent-wake-pods.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/v2/agents/v2-agent-wake-pods.css b/frontend/src/v2/agents/v2-agent-wake-pods.css
index f63f898c2c..af1a5522ef 100644
--- a/frontend/src/v2/agents/v2-agent-wake-pods.css
+++ b/frontend/src/v2/agents/v2-agent-wake-pods.css
@@ -21,5 +21,5 @@
 .v2-agent-wake-pods__table tbody th a { color: var(--v2-accent-text); font: 600 14px/20px var(--v2-font); }
 .v2-agent-settings .v2-agent-wake-pods .v2-agent-wake-pods__remove { border: 1px solid var(--v2-border); border-radius: 4px; padding: 7px 10px; background: var(--v2-surface); color: var(--v2-text-secondary); cursor: pointer; }
 .v2-agent-wake-pods__remove:disabled { opacity: .5; cursor: default; }
-.v2-agent-wake-pods__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.v2-agent-wake-pods__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
 @media (max-width: 600px) { .v2-agent-wake-pods__table thead { display: none; } .v2-agent-wake-pods__table, .v2-agent-wake-pods__table tbody, .v2-agent-wake-pods__table tr, .v2-agent-wake-pods__table td, .v2-agent-wake-pods__table th { display: block; width: 100%; } }

From b881aada21ad0223babf294a9d5579d33ad82397 Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 00:02:35 -0700
Subject: [PATCH 3/4] Give agent settings the frame's avatar header with tabs

The settings page opened with a page head that carried a floating "Your
team" link and a separate tab row. The D223 frame puts the avatar, name
and Profile / Memory / Settings tabs on one header row, the same header
the Memory page already uses.

- Replace the page head and the "Your team" action with the avatar header.
- Move the tabs into that header, with Settings as the current page.
- Pin the header row and its tabs in the layout invariants.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-authored-by: kite <WyJraXRlIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-haiku-5-5/default
---
 .../src/v2/__tests__/v2-layout-invariants.test.ts |  8 ++++++++
 frontend/src/v2/agents/V2AgentSettingsPage.tsx    | 15 ++++++++++-----
 frontend/src/v2/agents/v2-agent-settings.css      |  6 ++++++
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index deb58eb50f..b54b8338f0 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -5065,6 +5065,14 @@ describe('agent Wake and Pods controls', () => {
     expect(segment).toContain('display: flex');
     expect(segment).toContain('flex-wrap: wrap');
   });
+
+  it('keeps the settings header on one row with the tabs at its end', () => {
+    const css = fs.readFileSync(path.join(__dirname, '../agents/v2-agent-settings.css'), 'utf8');
+    const head = ruleBody(css, '.v2-agent-settings__head');
+    expect(head).toContain('display: flex');
+    expect(head).toContain('align-items: center');
+    expect(ruleBody(css, '.v2-agent-settings__seg')).toContain('margin-left: auto');
+  });
 });
 
 describe('agent runtime and grants fit the Settings column', () => {
diff --git a/frontend/src/v2/agents/V2AgentSettingsPage.tsx b/frontend/src/v2/agents/V2AgentSettingsPage.tsx
index d6439d6b16..11e6cc1f4b 100644
--- a/frontend/src/v2/agents/V2AgentSettingsPage.tsx
+++ b/frontend/src/v2/agents/V2AgentSettingsPage.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import axios from '../../utils/axiosConfig';
-import V2PageHead from '../components/V2PageHead';
+import V2Avatar from '../components/V2Avatar';
 import V2AgentRuntimeGrants, { Runtime } from '../components/V2AgentRuntimeGrants';
 import { AgentControlLoader } from '../components/V2AgentControlSection';
 import { AgentConnection } from '../utils/agentConnection';
@@ -254,13 +254,18 @@ const V2AgentSettingsPage: React.FC = () => {
 
   return (
     <main className="v2-agent-settings">
-      <V2PageHead title={access.displayName || agentName} actions={<Link to="/v2/agents">{t('agentSettings.yourTeam')}</Link>} />
-      <div className="v2-agent-settings__column">
-        <nav className="v2-agent-settings__tabs" aria-label={t('agentSettings.tabs')}>
+      <header className="v2-agent-settings__head">
+        <V2Avatar name={access.displayName || agentName} size="lg" kind="agent" seed={`${agentName}:${instanceId}`} />
+        <div className="v2-agent-settings__ident">
+          <h1>{access.displayName || agentName}</h1>
+        </div>
+        <nav className="v2-agent-settings__tabs v2-agent-settings__seg" aria-label={t('agentSettings.tabs')}>
           <Link to={`/v2/agent/${encodeURIComponent(agentName)}/${encodeURIComponent(instanceId)}`}>{t('agentSettings.profile')}</Link>
-          <span aria-current="page">{t('agentSettings.settings')}</span>
           <Link to={`/v2/agents/${encodeURIComponent(agentName)}/${encodeURIComponent(instanceId)}/memory`}>{t('agentSettings.memory', { defaultValue: 'Memory' })}</Link>
+          <span aria-current="page">{t('agentSettings.settings')}</span>
         </nav>
+      </header>
+      <div className="v2-agent-settings__column">
         <AgentControlLoader agentName={agentName} instanceId={instanceId}
           refreshNonce={connectionRefreshNonce} onConnectionState={onConnectionState} />
         <V2AgentWakePods agentName={agentName} instanceId={instanceId} updatePod={updatePod} onRemoved={onRemoved} />
diff --git a/frontend/src/v2/agents/v2-agent-settings.css b/frontend/src/v2/agents/v2-agent-settings.css
index 915aa1c045..c920aeb4c3 100644
--- a/frontend/src/v2/agents/v2-agent-settings.css
+++ b/frontend/src/v2/agents/v2-agent-settings.css
@@ -12,6 +12,12 @@
 
 .v2-agent-settings__state { padding: 32px; color: var(--v2-text-secondary); }
 
+/* Header: avatar, name and the Profile / Memory / Settings tabs on one row. */
+.v2-agent-settings__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 28px; min-height: 76px; border-bottom: 1px solid var(--v2-border-soft); box-sizing: border-box; }
+.v2-agent-settings__ident h1 { margin: 0; font-size: 20px; }
+.v2-agent-settings__seg { margin-left: auto; margin-top: 0; margin-bottom: 0; border-bottom: 0; }
+@media (max-width: 600px) { .v2-agent-settings__head { padding: 12px 16px; } }
+
 .v2-agent-settings__tabs {
   display: flex;
   gap: 24px;

From 848b9adf28cec0ac5c4aac649daaa0b933dd81df Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 00:05:17 -0700
Subject: [PATCH 4/4] Scope the settings header tabs above the base tab rules

The header's segment rules were declared before the base tab rules at the
same specificity, so the tab margins and the current-page underline still
applied inside the header. Scope the header rules under the header so they
win, and pin the reset in the layout invariants.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-authored-by: kite <WyJraXRlIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-haiku-5-5/default
---
 frontend/src/v2/__tests__/v2-layout-invariants.test.ts | 3 ++-
 frontend/src/v2/agents/v2-agent-settings.css           | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index b54b8338f0..65c3dd3001 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -5071,7 +5071,8 @@ describe('agent Wake and Pods controls', () => {
     const head = ruleBody(css, '.v2-agent-settings__head');
     expect(head).toContain('display: flex');
     expect(head).toContain('align-items: center');
-    expect(ruleBody(css, '.v2-agent-settings__seg')).toContain('margin-left: auto');
+    expect(ruleBody(css, '.v2-agent-settings__head .v2-agent-settings__seg')).toContain('margin-left: auto');
+    expect(ruleBody(css, '.v2-agent-settings__head .v2-agent-settings__seg [aria-current="page"]')).toContain('border-bottom: 0');
   });
 });
 
diff --git a/frontend/src/v2/agents/v2-agent-settings.css b/frontend/src/v2/agents/v2-agent-settings.css
index c920aeb4c3..132e0396f1 100644
--- a/frontend/src/v2/agents/v2-agent-settings.css
+++ b/frontend/src/v2/agents/v2-agent-settings.css
@@ -15,7 +15,9 @@
 /* Header: avatar, name and the Profile / Memory / Settings tabs on one row. */
 .v2-agent-settings__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 28px; min-height: 76px; border-bottom: 1px solid var(--v2-border-soft); box-sizing: border-box; }
 .v2-agent-settings__ident h1 { margin: 0; font-size: 20px; }
-.v2-agent-settings__seg { margin-left: auto; margin-top: 0; margin-bottom: 0; border-bottom: 0; }
+/* Scoped under the header so these beat the base tab rules declared later. */
+.v2-agent-settings__head .v2-agent-settings__seg { margin-left: auto; margin-top: 0; margin-bottom: 0; border-bottom: 0; }
+.v2-agent-settings__head .v2-agent-settings__seg [aria-current="page"] { border-bottom: 0; }
 @media (max-width: 600px) { .v2-agent-settings__head { padding: 12px 16px; } }
 
 .v2-agent-settings__tabs {