From 948586a8b74f97db569897991a167a046dda520b Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sat, 31 Oct 2026 23:15:38 -0700
Subject: [PATCH] fix(v2): memory page spans the pane at the frame's width
 (TASK-732)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-authored-by: lark <WyJsYXJrIiwiZGVmYXVsdCJd@agents.commonly.invalid>
Agent-Model: claude/claude-sonnet-5-5/default
---
 frontend/src/v2/__tests__/v2-layout-invariants.test.ts |  6 ++++++
 frontend/src/v2/agents/V2AgentMemory.tsx               |  4 +++-
 frontend/src/v2/agents/v2-agent-settings.css           | 10 ++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index 32dd045b3..2501010f4 100644
--- a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
+++ b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
@@ -5098,6 +5098,12 @@ describe('agent Memory tab (TASK-690 slice 1 and 2)', () => {
     expect(ruleBody(css, '.v2-agent-memory')).toContain('display: grid');
     expect(ruleBody(css, '.v2-agent-memory', { within: desktop })).toContain('grid-template-columns: 200px minmax(0, 1fr)');
   });
+  test('the page spans the pane instead of a centred column', () => {
+    const page = ruleBody(css, '.v2-agent-memory-page');
+    expect(page).toContain('width: 100%');
+    expect(page).toContain('max-width: none');
+    expect(page).toContain('align-self: stretch');
+  });
   test('phone hides the group nav and makes the groups collapsible', () => {
     expect(ruleBody(css, '.v2-agent-memory__nav ul', { within: phone })).toContain('display: none');
     expect(ruleBody(css, '.v2-agent-memory__gtitle', { within: phone })).toContain('cursor: pointer');
diff --git a/frontend/src/v2/agents/V2AgentMemory.tsx b/frontend/src/v2/agents/V2AgentMemory.tsx
index a7f82dedc..954e0262f 100644
--- a/frontend/src/v2/agents/V2AgentMemory.tsx
+++ b/frontend/src/v2/agents/V2AgentMemory.tsx
@@ -147,7 +147,7 @@ const V2AgentMemory: React.FC = () => {
   const settingsHref = `/v2/agents/${encodeURIComponent(agentName)}/${encodeURIComponent(instanceId)}`;
 
   return (
-    <main className="v2-agent-settings">
+    <main className="v2-agent-settings v2-agent-memory-page">
       <header className="v2-agent-memory__head">
         <V2Avatar name={head?.displayName || agentName} src={head?.profilePicture} size="lg" kind="agent" seed={`${agentName}:${instanceId}`} />
         <div className="v2-agent-memory__ident">
@@ -160,6 +160,7 @@ const V2AgentMemory: React.FC = () => {
           <Link to={settingsHref}>{t('agentSettings.settings')}</Link>
         </nav>
       </header>
+      <div className="v2-agent-memory-page__body">
       {state === 'ready' && index ? null : <MemoryShell loading={state === 'loading'} message={state === 'denied' ? t('agentProfile.memory.none', { defaultValue: 'No memory recorded yet.' }) : ''} loadingLabel={t('common.loading', { defaultValue: 'Loading…' })} query={query} setQuery={setQuery} searchLabel={t('agentProfile.memory.search', { defaultValue: 'Search memory' })} navLabel={t('agentSettings.memory', { defaultValue: 'Memory' })} />}
       {state === 'ready' && index && (() => {
         const needle = query.trim().toLowerCase();
@@ -243,6 +244,7 @@ const V2AgentMemory: React.FC = () => {
           </div>
         );
       })()}
+      </div>
     </main>
   );
 };
diff --git a/frontend/src/v2/agents/v2-agent-settings.css b/frontend/src/v2/agents/v2-agent-settings.css
index 906139189..915aa1c04 100644
--- a/frontend/src/v2/agents/v2-agent-settings.css
+++ b/frontend/src/v2/agents/v2-agent-settings.css
@@ -186,3 +186,13 @@
 .v2-agent-memory__ident p { margin: 2px 0 0; font-size: 12.5px; color: var(--v2-text-tertiary); }
 .v2-agent-memory__seg { margin-left: auto; margin-bottom: 0; }
 .v2-agent-memory__navitem { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; font-size: 13.5px; color: var(--v2-text-tertiary); }
+
+/* Frame width: the agent bar spans the pane, the body fills it (nav left, sections across). */
+.v2-agent-memory-page { width: 100%; max-width: none; align-self: stretch; box-sizing: border-box; }
+.v2-agent-memory-page .v2-agent-memory__head { margin: 0; padding: 12px 28px; min-height: 76px; border-bottom: 1px solid var(--v2-border-soft); box-sizing: border-box; }
+.v2-agent-memory-page .v2-agent-memory__seg { margin-top: 0; border-bottom: 0; }
+.v2-agent-memory-page__body { width: 100%; padding: 20px 28px; box-sizing: border-box; }
+@media (max-width: 767px) {
+  .v2-agent-memory-page .v2-agent-memory__head { padding: 12px 16px; }
+  .v2-agent-memory-page__body { padding: 16px; }
+}