ruby_llm-agents 0.2.4 → 0.3.0

data/app/views/rubyllm/agents/executions/dry_run.html.erb

@@ -0,0 +1,149 @@
+<div class="mb-6">
+  <%= link_to ruby_llm_agents.execution_path(@execution), class: "inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200" do %>
+    <svg
+      class="w-4 h-4 mr-1"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M10 19l-7-7m0 0l7-7m-7 7h18"
+      />
+    </svg>
+    Back to Execution
+  <% end %>
+</div>
+
+<!-- Header -->
+<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6 mb-6">
+  <div class="flex items-center gap-3 mb-2">
+    <svg class="w-6 h-6 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+    </svg>
+    <h2 class="text-xl font-bold text-blue-900 dark:text-blue-100">Dry Run Preview</h2>
+  </div>
+  <p class="text-sm text-blue-700 dark:text-blue-300">
+    This is a preview of what would be sent to the LLM. No API call was made and no execution was recorded.
+  </p>
+</div>
+
+<!-- Agent Info -->
+<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+  <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">Agent Configuration</h3>
+
+  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+    <div>
+      <p class="text-xs text-gray-500 dark:text-gray-400">Agent</p>
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= @dry_run_result[:agent] || @execution.agent_type %></p>
+    </div>
+    <div>
+      <p class="text-xs text-gray-500 dark:text-gray-400">Model</p>
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= @dry_run_result[:model] || 'N/A' %></p>
+    </div>
+    <div>
+      <p class="text-xs text-gray-500 dark:text-gray-400">Temperature</p>
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= @dry_run_result[:temperature] || 'N/A' %></p>
+    </div>
+    <div>
+      <p class="text-xs text-gray-500 dark:text-gray-400">Version</p>
+      <p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= @dry_run_result[:version] || 'N/A' %></p>
+    </div>
+  </div>
+</div>
+
+<!-- System Prompt -->
+<% if @dry_run_result[:system_prompt].present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">System Prompt</h3>
+      <button
+        type="button"
+        onclick="copyToClipboard(this, 'system-prompt-content')"
+        class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+      >
+        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+        </svg>
+        <span>Copy</span>
+      </button>
+    </div>
+    <pre id="system-prompt-content" class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto whitespace-pre-wrap"><%= @dry_run_result[:system_prompt] %></pre>
+  </div>
+<% end %>
+
+<!-- User Prompt -->
+<% if @dry_run_result[:user_prompt].present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">User Prompt</h3>
+      <button
+        type="button"
+        onclick="copyToClipboard(this, 'user-prompt-content')"
+        class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+      >
+        <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+        </svg>
+        <span>Copy</span>
+      </button>
+    </div>
+    <pre id="user-prompt-content" class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto whitespace-pre-wrap"><%= @dry_run_result[:user_prompt] %></pre>
+  </div>
+<% end %>
+
+<!-- Parameters -->
+<% if @dry_run_result[:parameters].present? %>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 mb-6">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Parameters</h3>
+    </div>
+    <pre class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg p-4 text-sm overflow-x-auto font-mono"><%= highlight_json(@dry_run_result[:parameters]) %></pre>
+  </div>
+<% end %>
+
+<!-- Actions -->
+<div class="flex items-center gap-4">
+  <%= link_to execution_path(@execution), class: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors" do %>
+    <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+    </svg>
+    Back to Execution
+  <% end %>
+
+  <%= button_to rerun_execution_path(@execution),
+      method: :post,
+      class: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors",
+      data: { confirm: "This will make a real API call and create a new execution. Are you sure?" } do %>
+    <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+    </svg>
+    Execute for Real
+  <% end %>
+</div>
+
+<script>
+  function copyToClipboard(button, elementId) {
+    const content = document.getElementById(elementId).textContent;
+    const span = button.querySelector('span');
+
+    navigator.clipboard.writeText(content).then(function() {
+      span.textContent = 'Copied!';
+      button.classList.add('text-green-600');
+
+      setTimeout(function() {
+        span.textContent = 'Copy';
+        button.classList.remove('text-green-600');
+      }, 2000);
+    }).catch(function(err) {
+      console.error('Failed to copy:', err);
+      span.textContent = 'Failed';
+      setTimeout(function() {
+        span.textContent = 'Copy';
+      }, 2000);
+    });
+  }
+</script>

data/app/views/rubyllm/agents/executions/index.html.erb

@@ -1,83 +1,28 @@
 <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Executions</h2>
 
 <%= turbo_frame_tag "executions_content" do %>
-  <%= render partial: "rubyllm/agents/executions/filters", locals: { agent_types: @agent_types, filter_stats: @filter_stats } %>
+  <%= render partial: "rubyllm/agents/executions/filters", locals: { agent_types: @agent_types, model_ids: @model_ids, filter_stats: @filter_stats } %>
   <%= render partial: "rubyllm/agents/executions/list", locals: { executions: @executions, pagination: @pagination, filter_stats: @filter_stats } %>
 <% end %>
 
 <script>
-  function toggleDropdown(button) {
-    document.querySelectorAll('.filter-dropdown .dropdown-menu').forEach(menu => {
-      if (menu !== button.nextElementSibling) {
-        menu.classList.add('hidden');
+  // Toggle attempts expansion (used by executions list)
+  function toggleAttempts(executionId) {
+    const attemptsRow = document.getElementById('attempts-row-' + executionId);
+    const expandBtn = document.querySelector(`button[data-execution-id="${executionId}"]`);
+
+    if (attemptsRow) {
+      const isHidden = attemptsRow.classList.contains('hidden');
+      attemptsRow.classList.toggle('hidden');
+
+      // Rotate the chevron
+      if (expandBtn) {
+        const svg = expandBtn.querySelector('svg');
+        if (svg) {
+          svg.classList.toggle('rotate-90', isHidden);
+        }
+        expandBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
       }
-    });
-    button.nextElementSibling.classList.toggle('hidden');
-  }
-
-  function selectSingleFilter(name, value, label) {
-    document.getElementById('filter_' + name).value = value;
-    // Update button label
-    const dropdown = document.querySelector(`[data-filter="${name}"]`);
-    dropdown.querySelector('.dropdown-label').textContent = label;
-    // Update ring
-    const button = dropdown.querySelector('button');
-    if (value) {
-      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
-    } else {
-      button.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-1');
-    }
-    // Close dropdown and submit
-    dropdown.querySelector('.dropdown-menu').classList.add('hidden');
-    document.getElementById('filters-form').requestSubmit();
-  }
-
-  function toggleAllOptions(checkbox, filterName) {
-    const dropdown = document.querySelector(`[data-filter="${filterName}"]`);
-    const checkboxes = dropdown.querySelectorAll('.filter-checkbox');
-
-    if (checkbox.checked) {
-      // Uncheck all specific options
-      checkboxes.forEach(cb => cb.checked = false);
-      updateMultiSelect(filterName);
     }
   }
-
-  function updateMultiSelect(filterName) {
-    const dropdown = document.querySelector(`[data-filter="${filterName}"]`);
-    const checkboxes = dropdown.querySelectorAll('.filter-checkbox:checked');
-    const selectAllCheckbox = dropdown.querySelector('.select-all-checkbox');
-    const button = dropdown.querySelector('button');
-    const label = dropdown.querySelector('.dropdown-label');
-
-    const count = checkboxes.length;
-
-    // Update "All" checkbox
-    selectAllCheckbox.checked = (count === 0);
-
-    // Update label
-    if (count === 0) {
-      label.textContent = filterName === 'agent_types' ? 'All Agents' : 'All Statuses';
-      button.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-1');
-    } else if (count === 1) {
-      const value = checkboxes[0].value;
-      label.textContent = filterName === 'agent_types' ? value.replace(/Agent$/, '') : value.charAt(0).toUpperCase() + value.slice(1);
-      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
-    } else {
-      label.textContent = `${count} ${filterName === 'agent_types' ? 'Agents' : 'Statuses'}`;
-      button.classList.add('ring-2', 'ring-blue-500', 'ring-offset-1');
-    }
-
-    // Submit form
-    document.getElementById('filters-form').requestSubmit();
-  }
-
-  // Close dropdowns when clicking outside
-  document.addEventListener('click', function(e) {
-    if (!e.target.closest('.filter-dropdown')) {
-      document.querySelectorAll('.filter-dropdown .dropdown-menu').forEach(menu => {
-        menu.classList.add('hidden');
-      });
-    }
-  });
 </script>

data/app/views/rubyllm/agents/executions/index.turbo_stream.erb

@@ -1,4 +1,18 @@
-<%= turbo_stream.replace "executions_content" do %>
-  <%= render partial: "rubyllm/agents/executions/filters", locals: { agent_types: @agent_types, filter_stats: @filter_stats } %>
+<%# Only update the stats (not the whole filter container to preserve Alpine.js state) %>
+<%= turbo_stream.replace "filter-stats" do %>
+  <div id="filter-stats" class="flex items-center justify-between md:justify-end gap-3 py-2 px-3 md:p-0 bg-gray-50 md:bg-transparent dark:bg-gray-700/50 md:dark:bg-transparent rounded-lg md:rounded-none">
+    <span class="text-xs text-gray-500 dark:text-gray-400 md:hidden">Results</span>
+    <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+      <span class="tabular-nums"><%= number_to_human_short(@filter_stats[:total_count]) %><span class="md:hidden"> executions</span></span>
+      <span class="text-gray-300 dark:text-gray-600">|</span>
+      <span class="tabular-nums"><%= number_to_human_short(@filter_stats[:total_cost], prefix: "$", precision: 2) %></span>
+      <span class="hidden md:inline text-gray-300 dark:text-gray-600">|</span>
+      <span class="hidden md:inline tabular-nums"><%= number_to_human_short(@filter_stats[:total_tokens]) %>t</span>
+    </div>
+  </div>
+<% end %>
+
+<%# Update the executions list %>
+<%= turbo_stream.replace "executions-list" do %>
   <%= render partial: "rubyllm/agents/executions/list", locals: { executions: @executions, pagination: @pagination, filter_stats: @filter_stats } %>
 <% end %>