fix: Improve Embedding Pool UI styling

- Add dedicated CSS for embedding-pool-main-panel
- Style discovered providers list with proper cards
- Fix toggle switch visibility
- Add info-message component styling
- Update renderDiscoveredProviders() to use CSS classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ccw/src/templates/dashboard-css/31-api-settings.css

@@ -2095,4 +2095,171 @@ select.cli-input {
 
 .capabilities-checkboxes .checkbox-label {
   font-size: 0.875rem;
+}
+
+/* ========== Embedding Pool Section ========== */
+.embedding-pool-main-panel {
+  padding: 1.5rem;
+}
+
+.embedding-pool-main-panel .panel-header {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.embedding-pool-main-panel .panel-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.embedding-pool-main-panel .panel-header h2 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: hsl(var(--primary));
+}
+
+.embedding-pool-main-panel .settings-section {
+  margin-bottom: 1.5rem;
+  padding: 1.25rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+}
+
+.embedding-pool-main-panel .settings-section .section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.embedding-pool-main-panel .settings-section .section-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.embedding-pool-main-panel .form-group {
+  margin-bottom: 1.25rem;
+}
+
+.embedding-pool-main-panel .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.embedding-pool-main-panel .form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.embedding-pool-main-panel .form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* Discovered Providers List */
+.discovered-providers-list {
+  margin-top: 1rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.discovered-providers-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.5);
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.discovered-providers-header h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.discovered-providers-header .provider-count {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.discovered-provider-item:last-child {
+  border-bottom: none;
+}
+
+.discovered-provider-item.excluded {
+  opacity: 0.5;
+  background: hsl(var(--muted) / 0.3);
+}
+
+.discovered-provider-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.discovered-provider-info .provider-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: hsl(var(--primary));
+}
+
+.discovered-provider-info .provider-icon.excluded {
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.discovered-provider-keys {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-actions .btn-sm {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+/* Info Message */
+.info-message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.info-message svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
 }

ccw/src/templates/dashboard-js/views/api-settings.js

@@ -2615,7 +2615,7 @@ function renderDiscoveredProviders() {
   if (!container) return;
 
   if (embeddingPoolDiscoveredProviders.length === 0) {
-    container.innerHTML = '<div class="info-message" style="margin-top: 1rem;">' +
+    container.innerHTML = '<div class="info-message">' +
       '<i data-lucide="info"></i> ' + t('apiSettings.noProvidersFound') +
       '</div>';
     if (window.lucide) lucide.createIcons();
@@ -2628,29 +2628,38 @@ function renderDiscoveredProviders() {
 
   embeddingPoolDiscoveredProviders.forEach(function(p) {
     totalProviders++;
-    totalKeys += p.keyCount || 1;
+    totalKeys += p.apiKeys?.length || 1;
   });
 
-  let providersHtml = '<div class="discovered-providers-box" style="margin-top: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px;">' +
-    '<h4>' + t('apiSettings.discoveredProviders') + ' (' + totalProviders + ' providers, ' + totalKeys + ' ' + t('apiSettings.providerKeys') + ')</h4>' +
-    '<div class="providers-list" style="margin-top: 0.75rem;">';
+  let providersHtml = '<div class="discovered-providers-list">' +
+    '<div class="discovered-providers-header">' +
+    '<h4>' + t('apiSettings.discoveredProviders') + '</h4>' +
+    '<span class="provider-count">' + totalProviders + ' providers, ' + totalKeys + ' keys</span>' +
+    '</div>';
 
   embeddingPoolDiscoveredProviders.forEach(function(provider) {
     const isExcluded = excludedIds.indexOf(provider.providerId) > -1;
     const icon = isExcluded ? 'x-circle' : 'check-circle';
-    const statusClass = isExcluded ? 'text-error' : 'text-success';
-    const keyInfo = provider.keyCount > 1 ? ' (' + provider.keyCount + ' ' + t('apiSettings.providerKeys') + ')' : '';
+    const keyCount = provider.apiKeys?.length || 1;
+    const keyInfo = keyCount > 1 ? ' (' + keyCount + ' keys)' : '';
 
-    providersHtml += '<div class="provider-item" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-bottom: 1px solid var(--border-color);">' +
-      '<i data-lucide="' + icon + '" class="' + statusClass + '"></i>' +
-      '<span style="flex: 1;">' + provider.providerName + keyInfo + '</span>' +
-      '<button class="btn btn-sm ' + (isExcluded ? 'btn-secondary' : 'btn-outline') + '" onclick="toggleProviderExclusion(\'' + provider.providerId + '\')">' +
+    providersHtml += '<div class="discovered-provider-item' + (isExcluded ? ' excluded' : '') + '">' +
+      '<div class="discovered-provider-info">' +
+      '<i data-lucide="' + icon + '" class="provider-icon' + (isExcluded ? ' excluded' : '') + '"></i>' +
+      '<div>' +
+      '<div class="discovered-provider-name">' + escapeHtml(provider.providerName) + '</div>' +
+      '<div class="discovered-provider-keys">' + provider.modelName + keyInfo + '</div>' +
+      '</div>' +
+      '</div>' +
+      '<div class="discovered-provider-actions">' +
+      '<button class="btn btn-sm ' + (isExcluded ? 'btn-primary' : 'btn-outline') + '" onclick="toggleProviderExclusion(\'' + provider.providerId + '\')">' +
       (isExcluded ? t('common.include') : t('apiSettings.excludeProvider')) +
       '</button>' +
+      '</div>' +
       '</div>';
   });
 
-  providersHtml += '</div></div>';
+  providersHtml += '</div>';
   container.innerHTML = providersHtml;
   if (window.lucide) lucide.createIcons();
 }