From 296e3f98cd26b35cf57b69ee09c8236e9a633f7d Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Sun, 1 Nov 2026 00:20:28 -0700
Subject: [PATCH] Turn the agent Control block into one Connection row

The Settings page opened its connection status as a section with a bare
"Control" heading and a loose paragraph. The D223 frame lists it as one
labelled row in Identity & access. Render it as a row with a "Connection"
label, its status, and the reconnect or regenerate action.

- Replace the section and heading in the loaded and loading states.
- Add the row rules to the settings stylesheet and pin them 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
---
 .../v2/__tests__/v2-layout-invariants.test.ts |  8 +++++
 frontend/src/v2/agents/v2-agent-settings.css  |  5 +++
 .../v2/components/V2AgentControlSection.tsx   | 32 +++++++++----------
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts
index e6920c50f4..47cfc07306 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('lays out the connection row as one line with its value flexing', () => {
+    const css = fs.readFileSync(path.join(__dirname, '../agents/v2-agent-settings.css'), 'utf8');
+    const row = ruleBody(css, '.v2-agent-settings__row');
+    expect(row).toContain('display: flex');
+    expect(row).toContain('align-items: center');
+    expect(ruleBody(css, '.v2-agent-settings__row-value')).toContain('flex: 1');
+  });
 });
 
 describe('agent runtime and grants fit the Settings column', () => {
diff --git a/frontend/src/v2/agents/v2-agent-settings.css b/frontend/src/v2/agents/v2-agent-settings.css
index 915aa1c045..41372f433a 100644
--- a/frontend/src/v2/agents/v2-agent-settings.css
+++ b/frontend/src/v2/agents/v2-agent-settings.css
@@ -30,6 +30,11 @@
   border-bottom: 2px solid var(--v2-accent);
 }
 
+/* A labelled row in a list (the frame's Identity & access rows). */
+.v2-agent-settings__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--v2-border-soft); }
+.v2-agent-settings__row-label { min-width: 120px; color: var(--v2-text-secondary); font-size: 13px; }
+.v2-agent-settings__row-value { flex: 1; min-width: 0; }
+
 .v2-agent-settings__section { padding: 28px 0; }
 .v2-agent-settings__section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
 .v2-agent-settings__section h2 { margin: 0; font-family: var(--v2-font-display); font-size: 20px; }
diff --git a/frontend/src/v2/components/V2AgentControlSection.tsx b/frontend/src/v2/components/V2AgentControlSection.tsx
index cce854622f..4f4696d36c 100644
--- a/frontend/src/v2/components/V2AgentControlSection.tsx
+++ b/frontend/src/v2/components/V2AgentControlSection.tsx
@@ -19,18 +19,16 @@ const V2AgentControlSection: React.FC<Props> = ({ agentName, instanceId, podId,
   const needsReconnect = connection.state === 'revoked' || connection.state === 'stale';
   const canRegenerateMachineKey = runtimeType === 'wrapper' && connection.state === 'connected';
   return (
-    <section className="v2-agent-settings__section" data-testid="agent-control-section">
-      <div className="v2-agent-settings__section-head">
-        <h2>{t('agentConnection.control')}</h2>
-        {(needsReconnect || canRegenerateMachineKey) && (
-          <Link className="v2-agent-settings__action"
-            to={`/v2/agents/byo?pod=${encodeURIComponent(podId)}&name=${encodeURIComponent(agentName)}&instanceId=${encodeURIComponent(instanceId)}&reconnect=1${runtimeType === 'wrapper' ? '&mode=machine' : ''}`}>
-            {t(needsReconnect ? 'agentConnection.reconnect' : 'agentSettings.regenerate')}
-          </Link>
-        )}
-      </div>
-      <p>{connectionLabel(connection, t)}</p>
-    </section>
+    <div className="v2-agent-settings__row" data-testid="agent-control-section">
+      <span className="v2-agent-settings__row-label">{t('agentSettings.connection', { defaultValue: 'Connection' })}</span>
+      <span className="v2-agent-settings__row-value">{connectionLabel(connection, t)}</span>
+      {(needsReconnect || canRegenerateMachineKey) && (
+        <Link className="v2-agent-settings__action"
+          to={`/v2/agents/byo?pod=${encodeURIComponent(podId)}&name=${encodeURIComponent(agentName)}&instanceId=${encodeURIComponent(instanceId)}&reconnect=1${runtimeType === 'wrapper' ? '&mode=machine' : ''}`}>
+          {t(needsReconnect ? 'agentConnection.reconnect' : 'agentSettings.regenerate')}
+        </Link>
+      )}
+    </div>
   );
 };
 
@@ -92,10 +90,10 @@ export const AgentControlLoader: React.FC<{
   }, [agentName, instanceId, refreshNonce, onConnectionState]);
 
   if (status) return <V2AgentControlSection {...status} />;
-  return <section className="v2-agent-settings__section" data-testid="agent-control-section">
-    <h2>{t('agentConnection.control')}</h2>
-    <p role={unavailable ? 'alert' : 'status'}>
+  return <div className="v2-agent-settings__row" data-testid="agent-control-section">
+    <span className="v2-agent-settings__row-label">{t('agentSettings.connection', { defaultValue: 'Connection' })}</span>
+    <span className="v2-agent-settings__row-value" role={unavailable ? 'alert' : 'status'}>
       {t(unavailable ? 'agentConnection.unavailable' : 'agentConnection.checking')}
-    </p>
-  </section>;
+    </span>
+  </div>;
 };