refactor(frontend): clean up code by consolidating multi-line JSX into single lines where feasible

- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits.
- Improved consistency in component imports by grouping and consolidating them.
- No functional changes, purely restructuring for clarity and maintainability.

frontend/tests/components/agents/AgentTypeDetail.test.tsx

@@ -160,9 +160,7 @@ describe('AgentTypeDetail', () => {
   it('shows not found state when agentType is null', () => {
     render(<AgentTypeDetail {...defaultProps} agentType={null} isLoading={false} />);
     expect(screen.getByText('Agent type not found')).toBeInTheDocument();
-    expect(
-      screen.getByText('The requested agent type could not be found')
-    ).toBeInTheDocument();
+    expect(screen.getByText('The requested agent type could not be found')).toBeInTheDocument();
   });
 
   it('shows danger zone with deactivate button', () => {
@@ -191,9 +189,7 @@ describe('AgentTypeDetail', () => {
   });
 
   it('applies custom className', () => {
-    const { container } = render(
-      <AgentTypeDetail {...defaultProps} className="custom-class" />
-    );
+    const { container } = render(<AgentTypeDetail {...defaultProps} className="custom-class" />);
     expect(container.firstChild).toHaveClass('custom-class');
   });
 
@@ -205,18 +201,13 @@ describe('AgentTypeDetail', () => {
   });
 
   it('shows no expertise message when expertise is empty', () => {
-    render(
-      <AgentTypeDetail {...defaultProps} agentType={{ ...mockAgentType, expertise: [] }} />
-    );
+    render(<AgentTypeDetail {...defaultProps} agentType={{ ...mockAgentType, expertise: [] }} />);
     expect(screen.getByText('No expertise areas defined')).toBeInTheDocument();
   });
 
   it('shows "None configured" when no fallback model', () => {
     render(
-      <AgentTypeDetail
-        {...defaultProps}
-        agentType={{ ...mockAgentType, fallback_models: [] }}
-      />
+      <AgentTypeDetail {...defaultProps} agentType={{ ...mockAgentType, fallback_models: [] }} />
     );
     expect(screen.getByText('None configured')).toBeInTheDocument();
   });

frontend/tests/components/agents/AgentTypeForm.test.tsx

@@ -36,9 +36,7 @@ describe('AgentTypeForm', () => {
     it('renders create form title', () => {
       render(<AgentTypeForm {...defaultProps} />);
       expect(screen.getByText('Create Agent Type')).toBeInTheDocument();
-      expect(
-        screen.getByText('Define a new agent type template')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Define a new agent type template')).toBeInTheDocument();
     });
 
     it('renders all tabs', () => {
@@ -233,9 +231,7 @@ describe('AgentTypeForm', () => {
     });
 
     it('applies custom className', () => {
-      const { container } = render(
-        <AgentTypeForm {...defaultProps} className="custom-class" />
-      );
+      const { container } = render(<AgentTypeForm {...defaultProps} className="custom-class" />);
       expect(container.querySelector('form')).toHaveClass('custom-class');
     });
   });

frontend/tests/components/agents/AgentTypeList.test.tsx

@@ -143,15 +143,11 @@ describe('AgentTypeList', () => {
   it('shows empty state when no agent types', () => {
     render(<AgentTypeList {...defaultProps} agentTypes={[]} />);
     expect(screen.getByText('No agent types found')).toBeInTheDocument();
-    expect(
-      screen.getByText('Create your first agent type to get started')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Create your first agent type to get started')).toBeInTheDocument();
   });
 
   it('shows filter hint in empty state when filters are applied', () => {
-    render(
-      <AgentTypeList {...defaultProps} agentTypes={[]} searchQuery="nonexistent" />
-    );
+    render(<AgentTypeList {...defaultProps} agentTypes={[]} searchQuery="nonexistent" />);
     expect(screen.getByText('Try adjusting your search or filters')).toBeInTheDocument();
   });
 
@@ -175,9 +171,7 @@ describe('AgentTypeList', () => {
   });
 
   it('applies custom className', () => {
-    const { container } = render(
-      <AgentTypeList {...defaultProps} className="custom-class" />
-    );
+    const { container } = render(<AgentTypeList {...defaultProps} className="custom-class" />);
     expect(container.firstChild).toHaveClass('custom-class');
   });
 });