Turn the agent Control block into one Connection row (TASK-731)

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', () => {

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; }

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>;
 };