diff --git a/frontend/src/v2/__tests__/v2-layout-invariants.test.ts b/frontend/src/v2/__tests__/v2-layout-invariants.test.ts index e6920c50f..47cfc0730 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 915aa1c04..41372f433 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 cce854622..4f4696d36 100644 --- a/frontend/src/v2/components/V2AgentControlSection.tsx +++ b/frontend/src/v2/components/V2AgentControlSection.tsx @@ -19,18 +19,16 @@ const V2AgentControlSection: React.FC = ({ agentName, instanceId, podId, const needsReconnect = connection.state === 'revoked' || connection.state === 'stale'; const canRegenerateMachineKey = runtimeType === 'wrapper' && connection.state === 'connected'; return ( -
-
-

{t('agentConnection.control')}

- {(needsReconnect || canRegenerateMachineKey) && ( - - {t(needsReconnect ? 'agentConnection.reconnect' : 'agentSettings.regenerate')} - - )} -
-

{connectionLabel(connection, t)}

-
+
+ {t('agentSettings.connection', { defaultValue: 'Connection' })} + {connectionLabel(connection, t)} + {(needsReconnect || canRegenerateMachineKey) && ( + + {t(needsReconnect ? 'agentConnection.reconnect' : 'agentSettings.regenerate')} + + )} +
); }; @@ -92,10 +90,10 @@ export const AgentControlLoader: React.FC<{ }, [agentName, instanceId, refreshNonce, onConnectionState]); if (status) return ; - return
-

{t('agentConnection.control')}

-

+ return

+ {t('agentSettings.connection', { defaultValue: 'Connection' })} + {t(unavailable ? 'agentConnection.unavailable' : 'agentConnection.checking')} -

-
; + + ; };