Fix: Agent row UI alignment and text truncation (Phase 8 UI Polish)

frontend/src/components/AgentsView.tsx

@@ -249,12 +249,12 @@ const AgentsView: React.FC = () => {
                   alignItems: 'center'
                 }}
               >
-                <div>
-                  <strong>{agent.name}</strong>
-                  <p>{agent.role || 'No role provided.'}</p>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <strong style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{agent.name}</strong>
+                  <p style={{ margin: 0, fontSize: '0.85rem', color: 'var(--text-dim)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{agent.role || 'No role provided.'}</p>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
-                  <span>{agent.api_provider} / {agent.model}</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', paddingLeft: 'var(--space-md)' }}>
+                  <span style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--accent)', whiteSpace: 'nowrap' }}>{agent.api_provider} / {agent.model}</span>
                   <button 
                     className="btn btn-glass btn-sm"
                     onClick={(e) => {
@@ -263,6 +263,7 @@ const AgentsView: React.FC = () => {
                       setShowShareModal(true);
                     }}
                     title="Share to Marketplace"
+                    style={{ padding: '8px' }}
                   >
                     <ShoppingBag size={14} />
                   </button>