leva 0.1.5 → 0.1.7

data/app/views/leva/workbench/_prompt_content.html.erb

@@ -0,0 +1,216 @@
+<% if @selected_prompt %>
+  <div class="flex-1 overflow-y-auto p-6 space-y-6" data-controller="prompt-autosave collapsible clipboard" data-prompt-autosave-url-value="<%= workbench_path(@selected_prompt) %>">
+    <!-- System Prompt -->
+    <div class="bg-gray-900 p-5 rounded-lg shadow-lg">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-sm font-semibold text-indigo-400">SYSTEM PROMPT</h2>
+        <button class="btn btn-small text-blue-400 hover:text-blue-300 flex items-center" data-action="clipboard#copy" data-clipboard-source="systemPrompt">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+          </svg>
+          Copy
+        </button>
+      </div>
+      <textarea
+        class="w-full bg-gray-800 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none min-h-[100px] overflow-hidden resize-none"
+        name="prompt[system_prompt]"
+        data-prompt-autosave-target="input"
+        id="systemPrompt"
+        data-action="input->prompt-autosave#debouncedSave"
+      ><%= @selected_prompt.system_prompt %></textarea>
+    </div>
+    <!-- User Message (Prompt Template) -->
+    <div class="bg-gray-900 p-5 rounded-lg shadow-lg">
+      <div class="flex justify-between items-center mb-3">
+        <h2 class="text-sm font-semibold text-indigo-400">USER (PROMPT TEMPLATE)</h2>
+        <button class="btn btn-small text-blue-400 hover:text-blue-300 flex items-center" data-action="clipboard#copy" data-clipboard-source="userPrompt">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+          </svg>
+          Copy
+        </button>
+      </div>
+      <textarea
+        class="w-full bg-gray-800 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none min-h-[200px] overflow-hidden resize-none"
+        name="prompt[user_prompt]"
+        data-prompt-autosave-target="input"
+        id="userPrompt"
+        data-action="input->prompt-autosave#debouncedSave"
+      ><%= @selected_prompt.user_prompt %></textarea>
+    </div>
+    <!-- Available Liquid Tags -->
+    <% if @dataset_record && @dataset_record.recordable.respond_to?(:to_llm_context) %>
+      <div class="bg-gray-900 p-5 rounded-lg shadow-lg" data-controller="collapsible">
+        <h2 class="text-sm font-semibold mb-3 text-indigo-400 cursor-pointer flex items-center" data-action="click->collapsible#toggle">
+          AVAILABLE LIQUID TAGS
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </h2>
+        <div class="bg-gray-800 p-3 rounded-lg text-sm hidden" data-collapsible-target="content">
+          <% @dataset_record.recordable.to_llm_context.each do |key, value| %>
+            <details class="mb-2">
+              <summary class="text-green-400 cursor-pointer flex items-center justify-between">
+                <span>{{ <%= key %> }}</span>
+                <button class="btn btn-small text-blue-400 hover:text-blue-300 flex items-center" data-action="clipboard#copy" data-clipboard-source="liquidTag<%= key %>">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                  </svg>
+                  Copy
+                </button>
+              </summary>
+              <pre class="text-xs text-gray-300 mt-1 whitespace-pre-wrap" id="liquidTag<%= key %>"><%= value.to_s %></pre>
+            </details>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    <!-- Full Prompt Preview -->
+    <% if @dataset_record %>
+      <div class="bg-gray-900 p-5 rounded-lg shadow-lg">
+        <div class="flex justify-between items-center mb-3">
+          <h2 class="text-sm font-semibold text-indigo-400">FULL PROMPT PREVIEW</h2>
+          <button class="btn btn-small text-blue-400 hover:text-blue-300 flex items-center" data-action="clipboard#copy" data-clipboard-source="fullPrompt">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+            </svg>
+            Copy
+          </button>
+        </div>
+        <pre class="w-full bg-gray-800 text-white p-3 rounded-lg text-sm whitespace-pre-wrap" id="fullPrompt"><%= Liquid::Template.parse(@selected_prompt.user_prompt).render(@dataset_record.recordable.to_llm_context.stringify_keys) %></pre>
+      </div>
+    <% end %>
+    <div class="text-sm text-center" data-prompt-autosave-target="status"></div>
+  </div>
+  <script>
+    (() => {
+      const application = Stimulus.Application.start()
+
+      application.register("prompt-autosave", class extends Stimulus.Controller {
+        static targets = ["input", "status"]
+        static values = { url: String }
+
+        connect() {
+          this.debouncedSave = this.debounce(this.save.bind(this), 1000)
+          this.adjustTextareaHeight()
+          this.inputTargets.forEach(input => {
+            input.addEventListener('input', () => this.adjustTextareaHeight(input))
+          })
+        }
+
+        adjustTextareaHeight(textarea = null) {
+          const textareas = textarea ? [textarea] : this.inputTargets
+          textareas.forEach(ta => {
+            ta.style.height = 'auto'
+            ta.style.height = ta.scrollHeight + 'px'
+          })
+        }
+
+        debouncedSave() {
+          this.debouncedSave()
+        }
+
+        save() {
+          const data = new FormData()
+          this.inputTargets.forEach(input => {
+            data.append(input.name, input.value)
+          })
+
+          this.statusTarget.textContent = "Saving..."
+          this.statusTarget.classList.add("text-yellow-500")
+
+          fetch(this.urlValue, {
+            method: 'PATCH',
+            body: data,
+            headers: {
+              'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
+              'Accept': 'application/json'
+            },
+            credentials: 'same-origin'
+          })
+          .then(response => response.json())
+          .then(data => {
+            if (data.status === 'success') {
+              this.statusTarget.textContent = "Changes saved successfully"
+              this.statusTarget.classList.remove("text-yellow-500")
+              this.statusTarget.classList.add("text-green-500")
+            } else {
+              this.statusTarget.textContent = `Error: ${data.errors.join(", ")}`
+              this.statusTarget.classList.remove("text-yellow-500")
+              this.statusTarget.classList.add("text-red-500")
+            }
+            setTimeout(() => {
+              this.statusTarget.textContent = ""
+              this.statusTarget.classList.remove("text-green-500", "text-red-500")
+            }, 3000)
+          })
+          .catch(error => {
+            console.error('Error:', error)
+            this.statusTarget.textContent = "Error saving changes"
+            this.statusTarget.classList.remove("text-yellow-500")
+            this.statusTarget.classList.add("text-red-500")
+          })
+        }
+
+        debounce(func, wait) {
+          let timeout
+          return function executedFunction(...args) {
+            const later = () => {
+              clearTimeout(timeout)
+              func(...args)
+            }
+            clearTimeout(timeout)
+            timeout = setTimeout(later, wait)
+          }
+        }
+      })
+
+      application.register("collapsible", class extends Stimulus.Controller {
+        static targets = ["content"]
+
+        toggle() {
+          this.contentTarget.classList.toggle("hidden")
+        }
+      })
+
+      application.register("clipboard", class extends Stimulus.Controller {
+        static targets = ["content"]
+
+        copy(event) {
+          const sourceId = event.currentTarget.dataset.clipboardSource
+          const sourceElement = document.getElementById(sourceId)
+          const content = sourceElement.value || sourceElement.textContent
+          navigator.clipboard.writeText(content).then(() => {
+            this.showFeedback(event.currentTarget, "Copied!")
+          }, (err) => {
+            console.error('Could not copy text: ', err)
+            this.showFeedback(event.currentTarget, "Failed to copy", true)
+          })
+        }
+
+        showFeedback(button, message, isError = false) {
+          const originalText = button.textContent
+          button.textContent = message
+          button.classList.add(isError ? "text-red-500" : "text-green-500")
+          button.disabled = true
+
+          setTimeout(() => {
+            button.textContent = originalText
+            button.classList.remove("text-green-500", "text-red-500")
+            button.disabled = false
+          }, 2000)
+        }
+      })
+    })()
+  </script>
+<% else %>
+  <div class="flex-1 flex items-center justify-center">
+    <div class="text-center text-gray-500">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+      </svg>
+      <h3 class="text-xl font-medium mb-2">No Prompt Selected</h3>
+      <p class="text-sm">Please select a prompt from the sidebar to begin editing.</p>
+    </div>
+  </div>
+<% end %>

data/app/views/leva/workbench/_prompt_form.html.erb

@@ -0,0 +1,89 @@
+<%= form_with(model: prompt, url: workbench_path(prompt), method: :patch, local: false, class: "bg-gray-800 rounded-lg shadow-lg p-6", data: { controller: "prompt-form" }) do |form| %>
+  <div class="mb-4">
+    <%= form.label :name, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+    <%= form.text_field :name, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+  </div>
+  <div class="mb-4">
+    <%= form.label :version, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+    <%= form.number_field :version, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+  </div>
+  <div class="mb-4">
+    <%= form.label :system_prompt, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+    <%= form.text_area :system_prompt, rows: 5, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+  </div>
+  <div class="mb-4">
+    <%= form.label :user_prompt, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+    <%= form.text_area :user_prompt, rows: 5, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+  </div>
+  <div id="form-status" class="mb-4 text-center" data-prompt-form-target="status"></div>
+<% end %>
+<script>
+  (() => {
+    const application = Stimulus.Application.start()
+
+    application.register("prompt-form", class extends Stimulus.Controller {
+      static targets = ["status"]
+
+      connect() {
+        this.timeout = null
+        this.debounceTime = 1000 // 1 second debounce
+        this.lastSavedContent = this.formContent()
+      }
+
+      autoSave() {
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(() => {
+          const currentContent = this.formContent()
+          if (currentContent !== this.lastSavedContent) {
+            this.submitForm()
+          } else {
+            this.showStatus("No changes to save", "text-gray-500")
+          }
+        }, this.debounceTime)
+      }
+
+      submitForm() {
+        const form = this.element
+        const formData = new FormData(form)
+
+        this.showStatus("Saving...", "text-yellow-500")
+
+        fetch(form.action, {
+          method: form.method,
+          body: formData,
+          headers: {
+            "Accept": "application/json",
+            "X-Requested-With": "XMLHttpRequest",
+            "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
+          },
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.status === "success") {
+            this.showStatus("Changes saved successfully", "text-green-500")
+            this.lastSavedContent = this.formContent()
+          } else {
+            this.showStatus(`Error: ${data.errors.join(", ")}`, "text-red-500")
+          }
+        })
+        .catch(error => {
+          console.error("Error:", error)
+          this.showStatus("Error saving changes", "text-red-500")
+        })
+      }
+
+      showStatus(message, className) {
+        this.statusTarget.textContent = message
+        this.statusTarget.className = `mb-4 text-center ${className}`
+        setTimeout(() => {
+          this.statusTarget.textContent = ""
+          this.statusTarget.className = "mb-4 text-center"
+        }, 3000)
+      }
+
+      formContent() {
+        return JSON.stringify(Object.fromEntries(new FormData(this.element)))
+      }
+    })
+  })()
+</script>

data/app/views/leva/workbench/_prompt_sidebar.html.erb

@@ -0,0 +1,21 @@
+<div class="w-64 h-full bg-gray-900 border-r border-gray-800 flex flex-col">
+  <div class="p-4">
+    <h2 class="text-xl font-bold mb-4 text-indigo-400">Prompts</h2>
+    <div class="space-y-2">
+      <% prompts.each do |prompt| %>
+        <%= link_to workbench_index_path(prompt_id: prompt.id), class: "block bg-gray-800 p-3 rounded-lg hover:bg-gray-700 transition duration-150 ease-in-out #{'bg-indigo-600' if prompt == selected_prompt}" do %>
+          <span class="text-sm font-medium"><%= prompt.name %></span>
+          <span class="text-xs text-indigo-300 ml-2">v<%= prompt.version %></span>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+  <div class="mt-auto p-4">
+    <%= link_to new_workbench_path, class: "w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 p-3 rounded-lg transition duration-150 ease-in-out" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
+      </svg>
+      <span>New Prompt</span>
+    <% end %>
+  </div>
+</div>

data/app/views/leva/workbench/_results_section.html.erb

@@ -0,0 +1,159 @@
+<div class="w-1/2 bg-gray-900 border-l border-gray-800 p-5 overflow-y-auto" data-controller="button-loader">
+  <!-- Runner Dropdown -->
+  <div class="mb-5">
+    <h3 class="text-sm font-semibold mb-2 text-indigo-300">Select Runner</h3>
+    <%= form_tag workbench_index_path, method: :get, class: "flex items-center" do %>
+      <%= select_tag :runner,
+                     options_from_collection_for_select(@runners, :name, :name, @selected_runner),
+                     include_blank: "Select a runner",
+                     onchange: "this.form.submit()",
+                     class: "w-full bg-gray-800 text-white border border-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" %>
+      <%= hidden_field_tag :prompt_id, @prompt&.id %>
+      <%= hidden_field_tag :dataset_record_id, @selected_dataset_record %>
+    <% end %>
+  </div>
+  <!-- Dataset Record Dropdown -->
+  <div class="mb-5">
+    <%= form_tag workbench_index_path, method: :get, class: "flex flex-col" do %>
+      <%= label_tag :dataset_record_id, "Select Test Record", class: "text-sm font-semibold mb-2 text-indigo-300" %>
+      <%= select_tag :dataset_record_id,
+                     options_from_collection_for_select(Leva::DatasetRecord.all, :id, :display_name, @selected_dataset_record),
+                     include_blank: "Select a record",
+                     onchange: "this.form.submit()",
+                     class: "w-full bg-gray-800 text-white border border-gray-700 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" %>
+      <%= hidden_field_tag :prompt_id, @prompt&.id %>
+      <%= hidden_field_tag :runner, @selected_runner %>
+    <% end %>
+  </div>
+  <!-- Run Button -->
+  <div class="mb-5">
+    <%= button_to run_workbench_index_path, method: :post, params: { runner: @selected_runner, prompt_id: @prompt&.id, dataset_record_id: @selected_dataset_record }, class: "w-full btn btn-primary bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-bold py-2 px-4 rounded-lg shadow-lg flex items-center justify-center transition duration-300 ease-in-out h-12", data: { action: "click->button-loader#handleClick", "button-loader-target": "button" } do %>
+      <span data-button-loader-target="buttonText" class="flex items-center">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+        </svg>
+        Run
+      </span>
+    <% end %>
+  </div>
+  <!-- Run Result -->
+  <div class="bg-gray-800 p-4 rounded-lg mb-5 shadow-md">
+    <h3 class="text-sm font-semibold mb-2 text-indigo-300">Run Result</h3>
+    <% if @dataset_record && (runner_result = @dataset_record.runner_results.last) %>
+      <div class="mb-3">
+        <h4 class="text-xs font-semibold text-indigo-200 mb-1">Ground Truth:</h4>
+        <pre class="text-sm text-gray-300 whitespace-pre-wrap bg-gray-700 p-2 rounded"><%= runner_result.ground_truth %></pre>
+      </div>
+      <div>
+        <h4 class="text-xs font-semibold text-indigo-200 mb-1">Raw Prediction:</h4>
+        <pre class="text-sm text-gray-300 whitespace-pre-wrap bg-gray-700 p-2 rounded"><%= runner_result.prediction %></pre>
+      </div>
+      <% if runner_result.dataset_record.recordable.extract_regex_pattern %>
+        <div>
+          <h4 class="text-xs font-semibold text-indigo-200 my-2 gap-2">Parsed Predictions:  <%= runner_result.dataset_record.recordable.extract_regex_pattern.to_s %></h4>
+          <% runner_result.parsed_predictions.each do |prediction| %>
+            <pre class="text-sm text-gray-300 whitespace-pre-wrap bg-gray-700 p-2 rounded mb-2"><%= prediction %></pre>
+          <% end %>
+        </div>
+      <% end %>
+      <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
+        <p>Prompt version: <%= runner_result.prompt.version %></p>
+        <p>Run <%= time_ago_in_words(runner_result.created_at) %> ago</p>
+      </div>
+    <% else %>
+      <div class="text-center py-8">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-500 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+        </svg>
+        <p class="text-sm text-gray-500">No results yet. Click 'Run' to start the analysis.</p>
+      </div>
+    <% end %>
+  </div>
+  <!-- Evaluators -->
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-semibold text-indigo-400">Evaluators</h3>
+      <%= button_to run_all_evals_workbench_index_path, method: :post, params: { runner: @selected_runner, prompt_id: @prompt&.id, dataset_record_id: @selected_dataset_record }, class: "btn btn-primary bg-gradient-to-r from-green-500 to-teal-600 hover:from-green-600 hover:to-teal-700 text-white font-bold py-2 px-4 rounded-lg shadow-lg flex items-center justify-center transition duration-300 ease-in-out h-10", data: { action: "click->button-loader#handleClick", "button-loader-target": "button" } do %>
+        <span data-button-loader-target="buttonText" class="flex items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z" clip-rule="evenodd" />
+          </svg>
+          Evaluate All
+        </span>
+      <% end %>
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      <% @evaluators.each do |evaluator_class| %>
+        <div class="bg-gray-800 p-4 rounded-lg shadow-md">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-sm font-medium"><%= evaluator_class.name.demodulize %></span>
+            <%= button_to run_evaluator_workbench_index_path, method: :post, params: { evaluator: evaluator_class.name, runner: @selected_runner, prompt_id: @prompt&.id, dataset_record_id: @selected_dataset_record }, class: "p-2 bg-blue-600 hover:bg-blue-700 rounded-full transition duration-150 ease-in-out", data: { action: "click->button-loader#handleClick", "button-loader-target": "button" } do %>
+              <span data-button-loader-target="buttonText">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                </svg>
+              </span>
+            <% end %>
+          </div>
+          <% if @dataset_record %>
+            <% evaluation_result = @dataset_record.evaluation_results.for_evaluator(evaluator_class).last %>
+            <% if evaluation_result %>
+              <% score = evaluation_result.score %>
+              <% color_class = case score
+                 when 0...0.2 then 'text-red-500'
+                 when 0.2...0.4 then 'text-orange-500'
+                 when 0.4...0.6 then 'text-yellow-500'
+                 when 0.6...0.8 then 'text-lime-500'
+                 when 0.8...1.0 then 'text-green-400'
+                 else 'text-green-300'
+                 end %>
+              <div class="text-sm <%= color_class %> font-semibold">
+                Score: <%= sprintf('%.2f', score) %>
+              </div>
+            <% else %>
+              <div class="text-sm text-gray-500">
+                No evaluation result yet.
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+<script>
+  (() => {
+    const application = Stimulus.Application.start()
+
+    application.register("button-loader", class extends Stimulus.Controller {
+      static targets = ["button", "buttonText"]
+
+      handleClick(event) {
+        event.preventDefault()
+        const button = event.currentTarget
+        const form = button.closest('form')
+
+        this.disableButton(button)
+        this.showSpinner(button)
+
+        // Submit the form
+        form.submit()
+      }
+
+      disableButton(button) {
+        button.disabled = true
+        button.classList.add('opacity-50', 'cursor-not-allowed')
+      }
+
+      showSpinner(button) {
+        const buttonText = button.querySelector('[data-button-loader-target="buttonText"]')
+        buttonText.innerHTML = `
+          <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        `
+      }
+    })
+  })()
+</script>

data/app/views/leva/workbench/_top_bar.html.erb

@@ -0,0 +1,10 @@
+<div class="bg-gray-900 p-4 flex items-center justify-between border-b border-gray-800">
+  <div>
+    <% if selected_prompt.present? %>
+      <span class="font-medium text-lg"><%= selected_prompt.name %></span>
+      <span class="text-sm text-indigo-300 ml-2">v<%= selected_prompt.version %></span>
+    <% else %>
+      <span class="font-medium text-lg text-gray-400">No prompt selected</span>
+    <% end %>
+  </div>
+</div>

data/app/views/leva/workbench/edit.html.erb

@@ -0,0 +1,20 @@
+<% content_for :title, "Edit Prompt: #{@prompt.name}" %>
+<div class="container mx-auto px-4 py-8 bg-gray-950 text-white">
+  <h1 class="text-3xl font-bold text-indigo-400 mb-6">Edit Prompt: <%= @prompt.name %></h1>
+  <%= form_with(model: @prompt, url: workbench_path(@prompt), method: :patch, local: false, class: "bg-gray-800 rounded-lg shadow-lg p-6", data: { controller: "prompt-form" }) do |form| %>
+    <div class="mb-4">
+      <%= form.label :name, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+      <%= form.text_field :name, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+    </div>
+    <div class="mb-4">
+      <%= form.label :system_prompt, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+      <%= form.text_area :system_prompt, rows: 5, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+    </div>
+    <div class="mb-4">
+      <%= form.label :user_prompt, class: "block text-sm font-semibold mb-2 text-indigo-300" %>
+      <%= form.text_area :user_prompt, rows: 5, class: "w-full bg-gray-700 text-white p-3 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none", data: { action: "input->prompt-form#autoSave" } %>
+    </div>
+    <div id="form-status" class="mb-4 text-center"></div>
+  <% end %>
+  <%= link_to "Back to Workbench", workbench_index_path, class: "btn btn-secondary" %>
+</div>

data/app/views/leva/workbench/index.html.erb

@@ -1,101 +1,15 @@
 <% content_for :title, 'Workbench' %>
-<div class="flex h-[calc(100vh-4rem)] bg-gray-900 text-white">
+<div class="flex h-[calc(100vh-4rem)] bg-gray-950 text-white">
   <!-- Left Sidebar -->
-  <div class="w-64 h-full bg-gray-800 border-r border-gray-700 flex flex-col">
-    <div class="p-4">
-      <h2 class="text-xl font-bold mb-4">Prompts</h2>
-      <div class="space-y-2">
-        <% @prompts.each do |prompt| %>
-          <div class="bg-gray-700 p-2 rounded">
-            <span class="text-sm font-medium"><%= prompt.name %></span>
-            <span class="text-xs text-gray-400 ml-2">v<%= prompt.version %></span>
-          </div>
-        <% end %>
-      </div>
-    </div>
-    <div class="mt-auto p-4">
-      <%= link_to new_prompt_path, class: "w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 p-2 rounded" do %>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
-        </svg>
-        <span>New Prompt</span>
-      <% end %>
-    </div>
-  </div>
+  <%= render 'prompt_sidebar', prompts: @prompts, selected_prompt: @selected_prompt %>
   <!-- Main Content -->
   <div class="flex-1 flex flex-col">
     <!-- Top Bar -->
-    <div class="bg-gray-800 p-4 flex items-center justify-between border-b border-gray-700">
-      <div>
-        <span class="font-medium"><%= @selected_prompt.name %></span>
-        <span class="text-xs text-gray-400 ml-2">v<%= @selected_prompt.version %></span>
-      </div>
-      <div class="flex items-center space-x-2">
-        <%= button_to run_workbench_index_path, method: :post, class: "flex items-center space-x-2 px-4 py-2 rounded bg-indigo-600 hover:bg-indigo-700" do %>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-          </svg>
-          <span>Run</span>
-        <% end %>
-        <%= button_to run_with_evaluation_workbench_index_path, method: :post, class: "flex items-center space-x-2 px-4 py-2 rounded bg-green-600 hover:bg-green-700" do %>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-          </svg>
-          <span>Run + Evaluate</span>
-        <% end %>
-      </div>
-    </div>
+    <%= render 'top_bar', selected_prompt: @selected_prompt %>
     <!-- Scrollable Content -->
     <div class="flex-1 flex overflow-hidden">
-      <div class="flex-1 overflow-y-auto p-6 space-y-4">
-        <!-- System Prompt -->
-        <div class="bg-gray-800 p-4 rounded">
-          <h2 class="text-sm font-semibold mb-2">SYSTEM PROMPT</h2>
-          <textarea
-            class="w-full bg-gray-700 text-white p-2 rounded resize-none"
-            style="height: auto; min-height: 100px;"
-            name="system_prompt"
-          ><%= @selected_prompt.system_prompt %></textarea>
-        </div>
-        <!-- User Message -->
-        <div class="bg-gray-800 p-4 rounded">
-          <h2 class="text-sm font-semibold mb-2">USER</h2>
-          <textarea
-            class="w-full bg-gray-700 text-white p-2 rounded resize-none"
-            style="height: auto; min-height: 200px;"
-            name="user_prompt"
-          ><%= @selected_prompt.user_prompt %></textarea>
-        </div>
-      </div>
-      <!-- Results Section -->
-      <div class="w-1/3 bg-gray-800 border-l border-gray-700 p-4 overflow-y-auto">
-        <h2 class="text-lg font-semibold mb-4">Results</h2>
-        <!-- Run Result -->
-        <div class="bg-gray-700 p-4 rounded mb-4">
-          <h3 class="text-sm font-semibold mb-2">Run Result</h3>
-          <p class="text-sm">
-            <%= flash[:notice] || "No results yet. Click 'Run' or 'Run + Evaluate' to start the analysis." %>
-          </p>
-        </div>
-        <!-- Evaluators -->
-        <div class="space-y-4">
-          <h3 class="text-sm font-semibold">Evaluators</h3>
-          <% @evaluators.each do |evaluator| %>
-            <div class="bg-gray-700 p-4 rounded">
-              <div class="flex items-center justify-between mb-2">
-                <span class="text-sm font-medium"><%= evaluator %></span>
-                <div class="flex items-center space-x-2">
-                  <%= button_to run_evaluator_workbench_index_path, method: :post, params: { evaluator: evaluator }, class: "p-1 bg-blue-500 hover:bg-blue-600 rounded" do %>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-                    </svg>
-                  <% end %>
-                </div>
-              </div>
-            </div>
-          <% end %>
-        </div>
-      </div>
+      <%= render 'prompt_content', selected_prompt: @selected_prompt %>
+      <%= render 'results_section', evaluators: @evaluators, dataset_record: @dataset_record %>
     </div>
   </div>
 </div>