ruby_llm-agents 1.3.4 → 2.1.0

data/app/views/ruby_llm/agents/agents/_config_moderator.html.erb

@@ -1,63 +1,22 @@
 <%# Configuration partial for Moderator types %>
-<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
-  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-    Configuration
-  </h3>
-
-  <!-- Moderation Configuration -->
-  <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-    Moderation Settings
-  </p>
-
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:model] %>
-      </p>
+<div class="font-mono text-xs">
+  <span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">moderation settings</span>
+  <div class="mt-1 space-y-px">
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">model</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:model] %></span>
     </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Threshold</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:threshold] %>
-          <%= config[:threshold] %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Default</span>
-        <% end %>
-      </p>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">threshold</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:threshold] || 'default' %></span>
     </div>
-
-    <div class="col-span-2">
-      <p class="text-sm text-gray-500 dark:text-gray-400">Categories</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:categories].present? %>
-          <% config[:categories].each do |category| %>
-            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-300 mr-1 mb-1">
-              <%= category %>
-            </span>
-          <% end %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">All categories</span>
-        <% end %>
-      </p>
-    </div>
-  </div>
-
-  <!-- Info Section -->
-  <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
-    <div class="flex items-start gap-3 p-3 rounded-lg bg-orange-50 dark:bg-orange-900/20">
-      <div class="flex-shrink-0 mt-0.5">
-        <svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"/>
-        </svg>
-      </div>
-      <div>
-        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Moderator</p>
-        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-          Checks content for policy violations including hate speech, violence, and other harmful content categories.
-        </p>
-      </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">categories</span>
+      <% if config[:categories].present? %>
+        <span class="text-gray-900 dark:text-gray-200"><%= config[:categories].join(", ") %></span>
+      <% else %>
+        <span class="text-gray-400 dark:text-gray-600">all categories</span>
+      <% end %>
     </div>
   </div>
 </div>

data/app/views/ruby_llm/agents/agents/_config_speaker.html.erb

@@ -1,108 +1,43 @@
 <%# Configuration partial for Speaker types %>
-<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
-  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-    Configuration
-  </h3>
-
-  <!-- TTS Configuration -->
-  <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-    Text-to-Speech Settings
-  </p>
-
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:model] %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Provider</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:provider] %>
-          <%= config[:provider].to_s.titleize %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Default</span>
-        <% end %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Voice</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:voice] %>
-          <%= config[:voice] %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Default</span>
-        <% end %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Speed</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:speed] || 1.0 %>x
-      </p>
-    </div>
-  </div>
-
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Output Format</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:output_format] || :mp3 %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Streaming</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:streaming] %>
-          <span class="text-green-600 dark:text-green-400">Enabled</span>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
-        <% end %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">SSML</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:ssml_enabled] %>
-          <span class="text-green-600 dark:text-green-400">Enabled</span>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
-        <% end %>
-      </p>
-    </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:cache_enabled] %>
-          Enabled (<%= config[:cache_ttl].inspect %>)
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
-        <% end %>
-      </p>
-    </div>
-  </div>
-
-  <!-- Info Section -->
-  <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
-    <div class="flex items-start gap-3 p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20">
-      <div class="flex-shrink-0 mt-0.5">
-        <svg class="w-5 h-5 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd"/>
-        </svg>
-      </div>
-      <div>
-        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Speaker</p>
-        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-          Converts text to natural-sounding speech audio. Supports multiple voices, speeds, and output formats.
-        </p>
-      </div>
+<div class="font-mono text-xs">
+  <span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">text-to-speech settings</span>
+  <div class="mt-1 space-y-px">
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">model</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:model] %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">provider</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:provider] ? config[:provider].to_s.titleize : 'default' %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">voice</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:voice] || 'default' %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">speed</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:speed] || 1.0 %>x</span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">format</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:output_format] || :mp3 %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">streaming</span>
+      <span class="<%= config[:streaming] ? 'text-green-500' : 'text-gray-400 dark:text-gray-600' %>"><%= config[:streaming] ? 'enabled' : 'disabled' %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">ssml</span>
+      <span class="<%= config[:ssml_enabled] ? 'text-green-500' : 'text-gray-400 dark:text-gray-600' %>"><%= config[:ssml_enabled] ? 'enabled' : 'disabled' %></span>
+    </div>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">cache</span>
+      <% if config[:cache_enabled] %>
+        <span class="text-green-500">enabled</span>
+        <span class="text-gray-400 dark:text-gray-600">(<%= config[:cache_ttl].inspect %>)</span>
+      <% else %>
+        <span class="text-gray-400 dark:text-gray-600">disabled</span>
+      <% end %>
     </div>
   </div>
 </div>

data/app/views/ruby_llm/agents/agents/_config_transcriber.html.erb

@@ -1,91 +1,38 @@
 <%# Configuration partial for Transcriber types %>
-<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
-  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-    Configuration
-  </h3>
-
-  <!-- Transcription Configuration -->
-  <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
-    Transcription Settings
-  </p>
-
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Model</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:model] %>
-      </p>
+<div class="font-mono text-xs">
+  <span class="text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider">transcription settings</span>
+  <div class="mt-1 space-y-px">
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">model</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:model] %></span>
     </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Language</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:language] %>
-          <%= config[:language].upcase %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Auto-detect</span>
-        <% end %>
-      </p>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">language</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:language] ? config[:language].upcase : 'auto-detect' %></span>
     </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Output Format</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <%= config[:output_format] || :text %>
-      </p>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">format</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= config[:output_format] || :text %></span>
     </div>
-
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Timestamps</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:include_timestamps] && config[:include_timestamps] != :none %>
-          <%= config[:include_timestamps].to_s.titleize %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">None</span>
-        <% end %>
-      </p>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">timestamps</span>
+      <span class="text-gray-900 dark:text-gray-200"><%= (config[:include_timestamps] && config[:include_timestamps] != :none) ? config[:include_timestamps].to_s.titleize : 'none' %></span>
     </div>
-  </div>
-
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-    <div>
-      <p class="text-sm text-gray-500 dark:text-gray-400">Cache</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% if config[:cache_enabled] %>
-          Enabled (<%= config[:cache_ttl].inspect %>)
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">Disabled</span>
-        <% end %>
-      </p>
-    </div>
-
-    <div class="col-span-3">
-      <p class="text-sm text-gray-500 dark:text-gray-400">Fallback Models</p>
-      <p class="font-medium text-gray-900 dark:text-gray-100">
-        <% fallback_models = Array(config[:fallback_models]).compact %>
-        <% if fallback_models.any? %>
-          <%= fallback_models.join(" → ") %>
-        <% else %>
-          <span class="text-gray-400 dark:text-gray-500">None configured</span>
-        <% end %>
-      </p>
+    <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+      <span class="w-24 text-gray-400 dark:text-gray-600">cache</span>
+      <% if config[:cache_enabled] %>
+        <span class="text-green-500">enabled</span>
+        <span class="text-gray-400 dark:text-gray-600">(<%= config[:cache_ttl].inspect %>)</span>
+      <% else %>
+        <span class="text-gray-400 dark:text-gray-600">disabled</span>
+      <% end %>
     </div>
-  </div>
-
-  <!-- Info Section -->
-  <div class="border-t border-gray-100 dark:border-gray-700 pt-4">
-    <div class="flex items-start gap-3 p-3 rounded-lg bg-teal-50 dark:bg-teal-900/20">
-      <div class="flex-shrink-0 mt-0.5">
-        <svg class="w-5 h-5 text-teal-500" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/>
-        </svg>
+    <% fallback_models = Array(config[:fallback_models]).compact %>
+    <% if fallback_models.any? %>
+      <div class="flex items-center gap-3 py-1 px-2 -mx-2">
+        <span class="w-24 text-gray-400 dark:text-gray-600">fallbacks</span>
+        <span class="text-gray-900 dark:text-gray-200"><%= fallback_models.join(" → ") %></span>
       </div>
-      <div>
-        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">Transcriber</p>
-        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-          Converts audio to text with support for multiple languages, timestamps, and output formats like SRT and VTT.
-        </p>
-      </div>
-    </div>
+    <% end %>
   </div>
 </div>

data/app/views/ruby_llm/agents/agents/_empty_state.html.erb

@@ -1,19 +1,9 @@
-<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center">
-  <!-- Agent Icon - Blue -->
-  <svg class="mx-auto h-16 w-16 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
-  </svg>
-
-  <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100">
-    No agents yet
-  </h3>
-
-  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-md mx-auto">
-    Create an agent by inheriting from <code class="bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono text-xs">ApplicationAgent</code>
+<div class="py-8">
+  <p class="font-mono text-xs text-gray-400 dark:text-gray-600 mb-4">
+    no agents yet — create one by inheriting from <code class="bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono text-xs">ApplicationAgent</code>
   </p>
 
-  <!-- Code Example -->
-  <div class="mt-6 max-w-sm mx-auto">
+  <div class="max-w-sm">
     <pre class="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 text-left text-sm overflow-x-auto"><code class="text-gray-300"><span class="text-pink-400">class</span> <span class="text-yellow-300">MyAgent</span> <span class="text-pink-400">&lt;</span> <span class="text-yellow-300">ApplicationAgent</span>
   <span class="text-purple-400">model</span> <span class="text-green-400">"gpt-4o-mini"</span>
   <span class="text-purple-400">param</span> <span class="text-blue-400">:query</span>, <span class="text-blue-400">required:</span> <span class="text-orange-400">true</span>