ruby_llm-agents 1.3.3 → 2.0.0

data/app/views/ruby_llm/agents/shared/_agent_type_badge.html.erb

@@ -14,7 +14,7 @@
       {
         icon: "robot",
         label: "Agent",
-        bg: "bg-blue-100 dark:bg-blue-900/50",
+        bg: "bg-blue-100 dark:bg-blue-500/20",
         text: "text-blue-700 dark:text-blue-300",
         icon_char: "🤖"
       }
@@ -22,7 +22,7 @@
       {
         icon: "chart",
         label: "Embedder",
-        bg: "bg-purple-100 dark:bg-purple-900/50",
+        bg: "bg-purple-100 dark:bg-purple-500/20",
         text: "text-purple-700 dark:text-purple-300",
         icon_char: "📊"
       }
@@ -30,7 +30,7 @@
       {
         icon: "mic",
         label: "Transcriber",
-        bg: "bg-green-100 dark:bg-green-900/50",
+        bg: "bg-green-100 dark:bg-green-500/20",
         text: "text-green-700 dark:text-green-300",
         icon_char: "🎤"
       }
@@ -38,7 +38,7 @@
       {
         icon: "speaker",
         label: "Speaker",
-        bg: "bg-orange-100 dark:bg-orange-900/50",
+        bg: "bg-orange-100 dark:bg-orange-500/20",
         text: "text-orange-700 dark:text-orange-300",
         icon_char: "🔊"
       }
@@ -46,26 +46,10 @@
       {
         icon: "palette",
         label: "Image Gen",
-        bg: "bg-pink-100 dark:bg-pink-900/50",
+        bg: "bg-pink-100 dark:bg-pink-500/20",
         text: "text-pink-700 dark:text-pink-300",
         icon_char: "🎨"
       }
-    when "moderator"
-      {
-        icon: "shield",
-        label: "Moderator",
-        bg: "bg-red-100 dark:bg-red-900/50",
-        text: "text-red-700 dark:text-red-300",
-        icon_char: "🛡️"
-      }
-    when "workflow"
-      {
-        icon: "gear",
-        label: "Workflow",
-        bg: "bg-indigo-100 dark:bg-indigo-900/50",
-        text: "text-indigo-700 dark:text-indigo-300",
-        icon_char: "⚙️"
-      }
     else
       {
         icon: "question",

data/app/views/ruby_llm/agents/shared/_executions_table.html.erb

@@ -1,182 +1,66 @@
 <%# Show tenant column when multi-tenancy is enabled and no specific tenant is selected %>
 <% show_tenant_column = tenant_filter_enabled? && current_tenant_id.blank? %>
+<% show_agent_column = !local_assigns.fetch(:hide_agent_column, false) %>
 
 <% if executions.empty? %>
-  <p class="text-gray-500 dark:text-gray-400 text-center py-8">No executions found.</p>
+  <div class="font-mono text-xs text-gray-400 dark:text-gray-600 py-4 px-2">no executions found</div>
 <% else %>
-  <div class="overflow-x-auto">
-    <table class="min-w-full text-sm">
-      <thead class="bg-gray-50 dark:bg-gray-900/50">
-        <tr>
-          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
-          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Agent</th>
-          <% if show_tenant_column %>
-            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tenant</th>
-          <% end %>
-          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Model</th>
-          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Duration</th>
-          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tokens</th>
-          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cost</th>
-          <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Time</th>
-        </tr>
-      </thead>
-      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-100 dark:divide-gray-700">
-        <% executions.each do |execution| %>
-          <%
-            is_workflow = execution.workflow_type.present?
-            children = execution.child_executions.sort_by(&:created_at)
-            has_children = children.any?
-          %>
-
-          <%# Parent/Main Row %>
-          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
-            <%# Status %>
-            <td class="px-4 py-3 whitespace-nowrap">
-              <%= render "ruby_llm/agents/shared/status_badge", status: execution.status, size: :sm %>
-            </td>
-
-            <%# Agent Name with Workflow Badge %>
-            <td class="px-4 py-3 whitespace-nowrap">
-              <div class="flex items-center gap-2">
-                <%= link_to ruby_llm_agents.execution_path(execution), class: "font-medium text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400" do %>
-                  <%= execution.agent_type.gsub(/Agent$/, "") %>
-                <% end %>
-                <% if is_workflow %>
-                  <span class="text-xs text-emerald-600 dark:text-emerald-400">◈</span>
-                <% end %>
-              </div>
-            </td>
-
-            <%# Tenant (only when viewing all tenants) %>
-            <% if show_tenant_column %>
-              <td class="px-4 py-3 whitespace-nowrap">
-                <% if execution.tenant_id.present? %>
-                  <a href="<%= url_for(request.query_parameters.merge(tenant_id: execution.tenant_id)) %>"
-                     class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50">
-                    <%= truncate(execution.tenant_id, length: 15) %>
-                  </a>
-                <% else %>
-                  <span class="text-gray-400 dark:text-gray-500 text-xs">—</span>
-                <% end %>
-              </td>
-            <% end %>
-
-            <%# Model %>
-            <td class="px-4 py-3 whitespace-nowrap text-gray-500 dark:text-gray-400 font-mono text-xs">
-              <%= execution.model_id %>
-            </td>
-
-            <%# Duration %>
-            <td class="px-4 py-3 whitespace-nowrap text-right text-gray-900 dark:text-gray-100 tabular-nums">
-              <%= execution.duration_ms ? "#{number_with_delimiter(execution.duration_ms)}ms" : "-" %>
-            </td>
-
-            <%# Tokens %>
-            <td class="px-4 py-3 whitespace-nowrap text-right text-gray-900 dark:text-gray-100 tabular-nums">
-              <%= number_with_delimiter(execution.total_tokens || 0) %>
-            </td>
-
-            <%# Cost %>
-            <td class="px-4 py-3 whitespace-nowrap text-right text-gray-900 dark:text-gray-100 tabular-nums">
-              $<%= number_with_precision(execution.total_cost || 0, precision: 4) %>
-            </td>
-
-            <%# Time %>
-            <td class="px-4 py-3 whitespace-nowrap text-right text-gray-500 dark:text-gray-400">
-              <%= time_ago_in_words(execution.created_at) %> ago
-            </td>
-          </tr>
-
-          <%# Error Row (if applicable) %>
-          <% if execution.status_error? && execution.error_message.present? %>
-            <tr class="bg-red-50/50 dark:bg-red-900/20">
-              <td></td>
-              <td colspan="<%= show_tenant_column ? 7 : 6 %>" class="px-4 py-2">
-                <p class="text-xs text-red-600 dark:text-red-400">
-                  <span class="font-medium"><%= execution.error_class %>:</span>
-                  <%= truncate(execution.error_message, length: 120) %>
-                </p>
-              </td>
-            </tr>
-          <% end %>
-
-          <%# Child Rows (for workflows) %>
-          <% if has_children %>
-            <% children.each_with_index do |child, index| %>
-              <% is_last = index == children.size - 1 %>
-              <tr class="bg-gray-50/50 dark:bg-gray-900/30 hover:bg-gray-100/50 dark:hover:bg-gray-800/50 transition-colors">
-                <%# Status with tree line %>
-                <td class="px-4 py-2 whitespace-nowrap">
-                  <div class="flex items-center">
-                    <span class="text-gray-300 dark:text-gray-600 mr-2 font-mono text-xs"><%= is_last ? "└─" : "├─" %></span>
-                    <% case child.status
-                       when "success" %>
-                      <span class="text-green-600 dark:text-green-400">✓</span>
-                    <% when "error" %>
-                      <span class="text-red-600 dark:text-red-400">✗</span>
-                    <% when "timeout" %>
-                      <span class="text-orange-600 dark:text-orange-400">⏱</span>
-                    <% when "running" %>
-                      <span class="text-blue-600 dark:text-blue-400 animate-pulse">●</span>
-                    <% else %>
-                      <span class="text-gray-400">○</span>
-                    <% end %>
-                  </div>
-                </td>
-
-                <%# Step Name %>
-                <td class="px-4 py-2 whitespace-nowrap">
-                  <%= link_to ruby_llm_agents.execution_path(child), class: "text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400" do %>
-                    <span class="text-gray-400 dark:text-gray-500 text-xs"><%= index + 1 %>.</span>
-                    <%= child.workflow_step || child.agent_type.gsub(/Agent$/, "") %>
-                  <% end %>
-                </td>
-
-                <%# Tenant - empty for child rows %>
-                <% if show_tenant_column %>
-                  <td class="px-4 py-2"></td>
-                <% end %>
-
-                <%# Model %>
-                <td class="px-4 py-2 whitespace-nowrap text-gray-400 dark:text-gray-500 font-mono text-xs">
-                  <%= child.model_id %>
-                </td>
-
-                <%# Duration %>
-                <td class="px-4 py-2 whitespace-nowrap text-right text-gray-600 dark:text-gray-300 tabular-nums text-xs">
-                  <%= child.duration_ms ? "#{number_with_delimiter(child.duration_ms)}ms" : "-" %>
-                </td>
-
-                <%# Tokens %>
-                <td class="px-4 py-2 whitespace-nowrap text-right text-gray-600 dark:text-gray-300 tabular-nums text-xs">
-                  <%= number_with_delimiter(child.total_tokens || 0) %>
-                </td>
-
-                <%# Cost %>
-                <td class="px-4 py-2 whitespace-nowrap text-right text-gray-600 dark:text-gray-300 tabular-nums text-xs">
-                  $<%= number_with_precision(child.total_cost || 0, precision: 4) %>
-                </td>
-
-                <%# Time - empty for children %>
-                <td class="px-4 py-2"></td>
-              </tr>
+  <!-- Column headers -->
+  <div class="flex items-center gap-3 px-2 -mx-2 font-mono text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-wider mb-1">
+    <span class="w-20 flex-shrink-0">status</span>
+    <% if show_agent_column %>
+      <span class="flex-1 min-w-0">agent</span>
+    <% end %>
+    <% if show_tenant_column %>
+      <span class="flex-1 min-w-0 hidden sm:block">tenant</span>
+    <% end %>
+    <span class="flex-1 min-w-0 hidden lg:block">model</span>
+    <span class="w-16 flex-shrink-0 text-right">duration</span>
+    <span class="w-16 flex-shrink-0 text-right hidden md:block">tokens</span>
+    <span class="w-16 flex-shrink-0 text-right hidden md:block">cost</span>
+    <span class="w-24 flex-shrink-0 text-right">time</span>
+  </div>
 
-              <%# Child Error Row %>
-              <% if child.status_error? && child.error_message.present? %>
-                <tr class="bg-red-50/30 dark:bg-red-900/10">
-                  <td></td>
-                  <td colspan="<%= show_tenant_column ? 7 : 6 %>" class="px-4 py-1.5 pl-8">
-                    <p class="text-xs text-red-500 dark:text-red-400">
-                      <%= truncate(child.error_message, length: 100) %>
-                    </p>
-                  </td>
-                </tr>
-              <% end %>
-            <% end %>
-          <% end %>
+  <!-- Rows -->
+  <div class="font-mono text-xs space-y-px">
+    <% executions.each do |execution| %>
+      <%
+        status_badge_class = case execution.status.to_s
+          when "running" then "badge-running"
+          when "success" then "badge-success"
+          when "error" then "badge-error"
+          when "timeout" then "badge-timeout"
+          else "badge-timeout"
+        end
+      %>
+      <div class="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800/50 cursor-pointer"
+           onclick="window.location='<%= ruby_llm_agents.execution_path(execution) %>'">
+        <span class="w-20 flex-shrink-0"><span class="badge badge-sm <%= status_badge_class %>"><%= execution.status %></span></span>
+        <% if show_agent_column %>
+          <span class="flex-1 min-w-0 truncate text-gray-900 dark:text-gray-200"><%= execution.agent_type.gsub(/Agent$/, "") %></span>
+        <% end %>
+        <% if show_tenant_column %>
+          <span class="flex-1 min-w-0 truncate text-gray-400 dark:text-gray-600 hidden sm:inline"><%= execution.tenant_id.present? ? truncate(execution.tenant_id, length: 30) : "—" %></span>
         <% end %>
-      </tbody>
-    </table>
+        <span class="flex-1 min-w-0 truncate text-gray-400 dark:text-gray-600 hidden lg:inline"><%= execution.model_id %></span>
+        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400">
+          <% if execution.status_running? %>
+            <span class="text-blue-500 animate-pulse">...</span>
+          <% else %>
+            <%= execution.duration_ms ? format_duration_ms(execution.duration_ms) : "—" %>
+          <% end %>
+        </span>
+        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden md:inline"><%= number_with_delimiter(execution.total_tokens || 0) %></span>
+        <span class="w-16 flex-shrink-0 text-right text-gray-500 dark:text-gray-400 hidden md:inline">$<%= number_with_precision(execution.total_cost || 0, precision: 4) %></span>
+        <span class="w-24 flex-shrink-0 text-gray-400 dark:text-gray-600 text-right whitespace-nowrap"><%= time_ago_in_words(execution.created_at) %></span>
+      </div>
+      <% if execution.status_error? && execution.error_message.present? %>
+        <div class="flex items-center gap-1 pl-5 py-0.5 text-red-400 dark:text-red-500/70 text-xs font-mono">
+          <span class="text-gray-300 dark:text-gray-700">└</span>
+          <span class="truncate"><%= execution.error_class %>: <%= truncate(execution.error_message, length: 100) %></span>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 
   <%# Pagination %>
@@ -186,31 +70,24 @@
       total_pages = pagination[:total_pages]
       total_count = pagination[:total_count]
       per_page = pagination[:per_page]
-
       from_record = ((current_page - 1) * per_page) + 1
       to_record = [current_page * per_page, total_count].min
     %>
-    <div class="mt-4 flex items-center justify-between border-t border-gray-100 dark:border-gray-700 pt-4">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        Showing <%= from_record %>-<%= to_record %> of <%= number_with_delimiter(total_count) %> executions
-      </p>
-      <nav class="flex items-center space-x-1">
+    <div class="flex items-center justify-between font-mono text-xs mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+      <span class="text-gray-400 dark:text-gray-600"><%= from_record %>-<%= to_record %> of <%= number_with_delimiter(total_count) %></span>
+      <nav class="flex items-center gap-1">
         <% if current_page > 1 %>
-          <%= link_to "Previous", url_for(request.query_parameters.merge(page: current_page - 1)), class: "px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700" %>
+          <%= link_to "prev", url_for(request.query_parameters.merge(page: current_page - 1)),
+              class: "px-2 py-0.5 text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
         <% else %>
-          <span class="px-3 py-1.5 text-sm font-medium text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md cursor-not-allowed">Previous</span>
+          <span class="px-2 py-0.5 text-gray-300 dark:text-gray-700">prev</span>
         <% end %>
 
         <%
           window = 2
-          left_edge = 1
-          right_edge = 1
-
           pages_to_show = []
           (1..total_pages).each do |page|
-            if page <= left_edge ||
-               page > total_pages - right_edge ||
-               (page >= current_page - window && page <= current_page + window)
+            if page <= 1 || page >= total_pages || (page >= current_page - window && page <= current_page + window)
               pages_to_show << page
             elsif pages_to_show.last != :gap
               pages_to_show << :gap
@@ -220,18 +97,20 @@
 
         <% pages_to_show.each do |page| %>
           <% if page == :gap %>
-            <span class="px-2 py-1.5 text-sm text-gray-500 dark:text-gray-400">...</span>
+            <span class="px-1 text-gray-400 dark:text-gray-600">...</span>
           <% elsif page == current_page %>
-            <span class="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md"><%= page %></span>
+            <span class="px-2 py-0.5 text-gray-900 dark:text-gray-100"><%= page %></span>
           <% else %>
-            <%= link_to page, url_for(request.query_parameters.merge(page: page)), class: "px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700" %>
+            <%= link_to page, url_for(request.query_parameters.merge(page: page)),
+                class: "px-2 py-0.5 text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
           <% end %>
         <% end %>
 
         <% if current_page < total_pages %>
-          <%= link_to "Next", url_for(request.query_parameters.merge(page: current_page + 1)), class: "px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700" %>
+          <%= link_to "next", url_for(request.query_parameters.merge(page: current_page + 1)),
+              class: "px-2 py-0.5 text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" %>
         <% else %>
-          <span class="px-3 py-1.5 text-sm font-medium text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md cursor-not-allowed">Next</span>
+          <span class="px-2 py-0.5 text-gray-300 dark:text-gray-700">next</span>
         <% end %>
       </nav>
     </div>

data/app/views/ruby_llm/agents/shared/_filter_dropdown.html.erb

@@ -10,18 +10,12 @@
   #       { value: "success", label: "Success", color: "bg-green-500" },
   #       { value: "error", label: "Error", color: "bg-red-500" }
   #     ],
-  #     selected: ["success"],
-  #     icon: "M9.75 17L9 20l-1...", # optional SVG path
-  #     width: "w-48",               # optional, default w-48
-  #     full_width: false            # optional, for mobile
+  #     selected: ["success"]
 
   selected = local_assigns[:selected] || []
-  width = local_assigns[:width] || "w-48"
-  full_width = local_assigns[:full_width] || false
   show_all = local_assigns.fetch(:show_all_option, true)
   all_label = local_assigns[:all_label] || "All"
 
-  # Determine current label
   current_label = if selected.empty?
     label
   elsif selected.length == 1
@@ -31,7 +25,6 @@
     "#{selected.length} #{label}"
   end
 
-  # Get color for single selection (if applicable)
   current_color = if selected.length == 1
     opt = options.find { |o| o[:value].to_s == selected.first.to_s }
     opt&.dig(:color)
@@ -40,41 +33,28 @@
   has_selection = selected.any?
 %>
 <div class="relative" x-data="{ open: false }" @click.outside="open = false" data-filter="<%= filter_id %>">
-  <%# Trigger button %>
   <button type="button" @click="open = !open"
-    class="<%= full_width ? 'w-full md:w-auto justify-between md:justify-start' : '' %> flex items-center gap-2 px-3 py-2 text-sm
-           bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg
-           hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors
-           <%= has_selection ? 'border-blue-300 dark:border-blue-600' : '' %>">
-    <div class="flex items-center gap-2">
-      <% if current_color.present? %>
-        <span class="w-2 h-2 rounded-full <%= current_color %> <%= current_color.include?('blue') && selected.first == 'running' ? 'animate-pulse' : '' %>"></span>
-      <% elsif local_assigns[:icon].present? %>
-        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= icon %>"/>
-        </svg>
-      <% elsif !has_selection && options.first&.dig(:color) %>
-        <span class="w-2 h-2 rounded-full bg-gray-400"></span>
-      <% end %>
-      <span class="text-gray-700 dark:text-gray-200"><%= current_label %></span>
-    </div>
-    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    class="flex items-center gap-1.5 px-2 py-1 font-mono text-xs rounded
+           hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors
+           <%= has_selection ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500' %>">
+    <% if current_color.present? %>
+      <span class="w-1.5 h-1.5 rounded-full <%= current_color %> <%= current_color.include?('blue') && selected.first == 'running' ? 'animate-pulse' : '' %>"></span>
+    <% end %>
+    <span><%= current_label %></span>
+    <svg class="w-3 h-3 text-gray-400 dark:text-gray-600 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
     </svg>
   </button>
 
-  <%# Dropdown menu %>
   <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-       class="absolute z-20 mt-1 <%= full_width ? 'left-0 right-0 md:left-auto md:right-auto md:min-w-max' : 'min-w-max' %>
-              bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1
-              max-h-64 overflow-y-auto">
+       class="absolute z-20 mt-1 min-w-max bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 max-h-64 overflow-y-auto">
 
     <% if show_all %>
-      <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-700">
-        <label class="flex items-center gap-2 cursor-pointer">
+      <div class="px-3 py-1.5 border-b border-gray-100 dark:border-gray-700">
+        <label class="flex items-center gap-2 cursor-pointer font-mono text-xs">
           <input type="checkbox"
                  class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-700"
                  <%= selected.empty? ? 'checked' : '' %>
@@ -82,24 +62,20 @@
                    $el.closest('[data-filter]').querySelectorAll('.filter-cb').forEach(c => c.checked = false);
                    $el.closest('form').requestSubmit();
                  ">
-          <span class="text-sm font-medium text-gray-700 dark:text-gray-200"><%= all_label %></span>
+          <span class="text-gray-700 dark:text-gray-200"><%= all_label %></span>
         </label>
       </div>
     <% end %>
 
     <% options.each do |option| %>
-      <div class="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200
-                  hover:bg-gray-50 dark:hover:bg-gray-700">
-        <%# Checkbox: toggle this item, dropdown stays open %>
+      <div class="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">
         <input type="checkbox"
                name="<%= name %>"
                value="<%= option[:value] %>"
                class="filter-cb rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 dark:bg-gray-700"
                <%= selected.include?(option[:value].to_s) ? 'checked' : '' %>
                @change="$el.closest('form').requestSubmit()">
-
-        <%# Label: click to select ONLY this item AND close dropdown %>
-        <span class="flex-1 flex items-center gap-2 cursor-pointer"
+        <span class="flex-1 flex items-center gap-1.5 cursor-pointer"
               @click.prevent="
                 $el.closest('[data-filter]').querySelectorAll('.filter-cb').forEach(c => c.checked = false);
                 $el.previousElementSibling.checked = true;
@@ -107,11 +83,7 @@
                 $el.closest('form').requestSubmit();
               ">
           <% if option[:color].present? %>
-            <span class="w-2 h-2 rounded-full <%= option[:color] %> <%= option[:color].include?('blue') && option[:value] == 'running' ? 'animate-pulse' : '' %>"></span>
-          <% elsif option[:icon].present? %>
-            <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= option[:icon] %>"/>
-            </svg>
+            <span class="w-1.5 h-1.5 rounded-full <%= option[:color] %> <%= option[:color].include?('blue') && option[:value] == 'running' ? 'animate-pulse' : '' %>"></span>
           <% end %>
           <%= option[:label] %>
         </span>

data/app/views/ruby_llm/agents/shared/_select_dropdown.html.erb

@@ -6,58 +6,34 @@
   #     filter_id: "days",
   #     options: [
   #       { value: "", label: "All Time" },
-  #       { value: "1", label: "Today" },
-  #       { value: "7", label: "Last 7 Days" },
-  #       { value: "30", label: "Last 30 Days" }
+  #       { value: "7", label: "Last 7 Days" }
   #     ],
-  #     selected: "7",
-  #     icon: "M8 7V3m8 4V3...", # optional SVG path
-  #     width: "w-40",           # optional, default w-40
-  #     full_width: false        # optional, for mobile
+  #     selected: "7"
 
   selected = local_assigns[:selected].to_s
-  width = local_assigns[:width] || "w-40"
-  full_width = local_assigns[:full_width] || false
-
-  # Find current option
   current_option = options.find { |o| o[:value].to_s == selected } || options.first
   current_label = current_option[:label]
-
   has_selection = selected.present?
 %>
 <div class="relative" x-data="{ open: false }" @click.outside="open = false" data-filter="<%= filter_id %>">
-  <%# Trigger button %>
   <button type="button" @click="open = !open"
-    class="<%= full_width ? 'w-full md:w-auto justify-between md:justify-start' : '' %> flex items-center gap-2 px-3 py-2 text-sm
-           bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg
-           hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors
-           <%= has_selection ? 'border-blue-300 dark:border-blue-600' : '' %>">
-    <div class="flex items-center gap-2">
-      <% if local_assigns[:icon].present? %>
-        <svg class="w-4 h-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= icon %>"/>
-        </svg>
-      <% end %>
-      <span class="text-gray-700 dark:text-gray-200"><%= current_label %></span>
-    </div>
-    <svg class="w-4 h-4 text-gray-400 dark:text-gray-500 flex-shrink-0 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    class="flex items-center gap-1.5 px-2 py-1 font-mono text-xs rounded
+           hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors
+           <%= has_selection ? 'text-gray-900 dark:text-gray-100' : 'text-gray-400 dark:text-gray-500' %>">
+    <span><%= current_label %></span>
+    <svg class="w-3 h-3 text-gray-400 dark:text-gray-600 transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
     </svg>
   </button>
 
-  <%# Dropdown menu %>
   <div x-show="open" x-cloak x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-       class="absolute z-20 mt-1 <%= full_width ? 'left-0 right-0 md:left-auto md:right-auto md:min-w-max' : 'min-w-max' %>
-              bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1">
+       class="absolute z-20 mt-1 min-w-max bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1">
     <% options.each do |option| %>
       <%
         is_selected = option[:value].to_s == selected
-        item_classes = is_selected ?
-          "bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300" :
-          "text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
       %>
       <button type="button"
               @click="
@@ -65,17 +41,12 @@
                 open = false;
                 $el.closest('form').requestSubmit();
               "
-              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left <%= item_classes %>">
-        <% if option[:icon].present? %>
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= option[:icon] %>"/>
-          </svg>
-        <% end %>
+              class="w-full flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-left
+                     <%= is_selected ? 'text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400' %>
+                     hover:bg-gray-50 dark:hover:bg-gray-700">
         <%= option[:label] %>
         <% if is_selected %>
-          <svg class="w-4 h-4 ml-auto text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-          </svg>
+          <span class="ml-auto text-gray-400 dark:text-gray-600">&check;</span>
         <% end %>
       </button>
     <% end %>