RubyGems - llm_logs - Versions diffs - 0.1.0 - Mend

llm_logs 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

checksums.yaml +7 -0
data/README.md +148 -0
data/Rakefile +11 -0
data/app/controllers/llm_logs/application_controller.rb +5 -0
data/app/controllers/llm_logs/prompt_versions_controller.rb +66 -0
data/app/controllers/llm_logs/prompts_controller.rb +91 -0
data/app/controllers/llm_logs/spans_controller.rb +8 -0
data/app/controllers/llm_logs/traces_controller.rb +19 -0
data/app/helpers/llm_logs/formatting_helper.rb +34 -0
data/app/models/llm_logs/application_record.rb +5 -0
data/app/models/llm_logs/prompt.rb +54 -0
data/app/models/llm_logs/prompt_version.rb +31 -0
data/app/models/llm_logs/span.rb +38 -0
data/app/models/llm_logs/trace.rb +46 -0
data/app/views/kaminari/tailwind/_first_page.html.erb +5 -0
data/app/views/kaminari/tailwind/_gap.html.erb +3 -0
data/app/views/kaminari/tailwind/_last_page.html.erb +5 -0
data/app/views/kaminari/tailwind/_next_page.html.erb +5 -0
data/app/views/kaminari/tailwind/_page.html.erb +9 -0
data/app/views/kaminari/tailwind/_paginator.html.erb +17 -0
data/app/views/kaminari/tailwind/_prev_page.html.erb +5 -0
data/app/views/layouts/llm_logs/application.html.erb +52 -0
data/app/views/llm_logs/prompt_versions/compare.html.erb +41 -0
data/app/views/llm_logs/prompt_versions/index.html.erb +92 -0
data/app/views/llm_logs/prompt_versions/show.html.erb +48 -0
data/app/views/llm_logs/prompts/_form.html.erb +94 -0
data/app/views/llm_logs/prompts/edit.html.erb +6 -0
data/app/views/llm_logs/prompts/index.html.erb +43 -0
data/app/views/llm_logs/prompts/new.html.erb +5 -0
data/app/views/llm_logs/prompts/show.html.erb +107 -0
data/app/views/llm_logs/spans/show.html.erb +99 -0
data/app/views/llm_logs/traces/_span_node.html.erb +66 -0
data/app/views/llm_logs/traces/index.html.erb +78 -0
data/app/views/llm_logs/traces/show.html.erb +79 -0
data/config/routes.rb +18 -0
data/db/migrate/001_create_llm_logs_traces.rb +22 -0
data/db/migrate/002_create_llm_logs_spans.rb +31 -0
data/db/migrate/003_create_llm_logs_prompts.rb +13 -0
data/db/migrate/004_create_llm_logs_prompt_versions.rb +18 -0
data/db/migrate/005_add_prompt_version_to_traces.rb +7 -0
data/lib/generators/llm_logs/install_generator.rb +17 -0
data/lib/generators/llm_logs/templates/initializer.rb +10 -0
data/lib/llm_logs/engine.rb +14 -0
data/lib/llm_logs/instrumentation/ruby_llm_chat.rb +107 -0
data/lib/llm_logs/prompt_renderer.rb +17 -0
data/lib/llm_logs/tracer.rb +67 -0
data/lib/llm_logs/version.rb +3 -0
data/lib/llm_logs.rb +23 -0
metadata +145 -0

data/app/views/layouts/llm_logs/application.html.erb ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-gray-50">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LLM Logs</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script type="module">
+    import "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.12/dist/turbo.es2017-esm.js"
+  </script>
+  <style>
+    pre { white-space: pre-wrap; word-wrap: break-word; }
+  </style>
+</head>
+<body class="h-full">
+  <nav class="bg-gray-900">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-14 items-center justify-between">
+        <div class="flex items-center space-x-8">
+          <span class="text-white font-semibold text-lg">LLM Logs</span>
+          <div class="flex space-x-1">
+            <%= link_to "Traces", llm_logs.traces_path,
+              class: "px-3 py-2 rounded-md text-sm font-medium #{request.path.start_with?(llm_logs.traces_path) || request.path == llm_logs.root_path ? 'bg-gray-800 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+            <%= link_to "Prompts", llm_logs.prompts_path,
+              class: "px-3 py-2 rounded-md text-sm font-medium #{request.path.start_with?(llm_logs.prompts_path) ? 'bg-gray-800 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white'}" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+  <% if notice.present? %>
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
+      <div class="rounded-md bg-green-50 p-3 text-sm text-green-800 border border-green-200">
+        <%= notice %>
+      </div>
+    </div>
+  <% end %>
+  <% if alert.present? %>
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-4">
+      <div class="rounded-md bg-red-50 p-3 text-sm text-red-800 border border-red-200">
+        <%= alert %>
+      </div>
+    </div>
+  <% end %>
+  <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
+    <%= yield %>
+  </main>
+</body>
+</html>

data/app/views/llm_logs/prompt_versions/compare.html.erb ADDED Viewed

@@ -0,0 +1,41 @@
+<div class="mb-6">
+  <div class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
+    <%= link_to "Prompts", prompts_path, class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <%= link_to @prompt.name, prompt_path(@prompt), class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <span>Compare v<%= @version_a.version_number %> vs v<%= @version_b.version_number %></span>
+  </div>
+  <h1 class="text-2xl font-bold text-gray-900">
+    Compare v<%= @version_a.version_number %> vs v<%= @version_b.version_number %>
+  </h1>
+</div>
+<style>
+  .diff ul { list-style: none; margin: 0; padding: 0; }
+  .diff li { min-height: 1.25em; }
+  .diff li.del { background-color: #fecaca; }
+  .diff li.ins { background-color: #bbf7d0; }
+  .diff del, .diff ins { text-decoration: none; }
+  .diff pre { white-space: pre-wrap; word-wrap: break-word; font-size: 0.875rem; }
+</style>
+<div class="space-y-6">
+  <% @diffs.each do |diff| %>
+    <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+      <div class="px-4 py-3 border-b border-gray-200">
+        <span class="text-xs font-medium text-gray-500 uppercase"><%= diff[:role] %></span>
+      </div>
+      <div class="grid grid-cols-2 divide-x divide-gray-200 diff">
+        <div class="p-4">
+          <div class="text-xs font-medium text-gray-400 mb-2">v<%= @version_a.version_number %></div>
+          <pre class="font-mono"><%= raw diff[:left] %></pre>
+        </div>
+        <div class="p-4">
+          <div class="text-xs font-medium text-gray-400 mb-2">v<%= @version_b.version_number %></div>
+          <pre class="font-mono"><%= raw diff[:right] %></pre>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/llm_logs/prompt_versions/index.html.erb ADDED Viewed

@@ -0,0 +1,92 @@
+<div class="mb-6">
+  <div class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
+    <%= link_to "Prompts", prompts_path, class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <%= link_to @prompt.name, prompt_path(@prompt), class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <span>Versions</span>
+  </div>
+  <h1 class="text-2xl font-bold text-gray-900">Version History: <%= @prompt.name %></h1>
+</div>
+<div id="compare-bar" class="mb-4 hidden">
+  <a id="compare-link" href="#" class="inline-flex items-center bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">
+    Compare
+  </a>
+</div>
+<% current_version = @versions.first %>
+<div class="space-y-4">
+  <% @versions.each do |version| %>
+    <% is_current = version == current_version %>
+    <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center space-x-3">
+          <input type="checkbox" class="compare-checkbox rounded border-gray-300 text-indigo-600"
+                 value="<%= version.version_number %>" data-version="<%= version.version_number %>">
+          <%= link_to prompt_version_path(@prompt, version), class: "text-lg font-semibold text-gray-900 hover:text-indigo-600" do %>
+            v<%= version.version_number %>
+          <% end %>
+          <% if is_current %>
+            <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">Current</span>
+          <% end %>
+          <% if version.model.present? %>
+            <span class="text-xs bg-gray-100 rounded-full px-2 py-0.5 text-gray-600"><%= version.model %></span>
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-3">
+          <span class="text-sm text-gray-500"><%= version.created_at.strftime('%b %d, %Y %H:%M') %></span>
+          <% unless is_current %>
+            <%= button_to "Restore", restore_prompt_version_path(@prompt, version),
+                method: :post,
+                class: "text-sm text-indigo-600 hover:text-indigo-900",
+                data: { turbo_confirm: "Are you sure you want to restore this as the current active prompt version?" } %>
+            <%= button_to "Delete", prompt_version_path(@prompt, version),
+                method: :delete,
+                class: "text-sm text-red-600 hover:text-red-900",
+                data: { turbo_confirm: "Are you sure you want to delete this version?" } %>
+          <% end %>
+        </div>
+      </div>
+      <% if version.changelog.present? %>
+        <p class="text-sm text-gray-600 mb-3"><%= version.changelog %></p>
+      <% end %>
+      <div class="space-y-2">
+        <% version.messages.each do |msg| %>
+          <div class="rounded p-2 text-xs <%= msg['role'] == 'system' ? 'bg-yellow-50' : msg['role'] == 'user' ? 'bg-blue-50' : 'bg-gray-50' %>">
+            <span class="font-medium text-gray-500 uppercase"><%= msg['role'] %>:</span>
+            <span class="font-mono"><%= truncate(msg['content'], length: 120) %></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>
+<script>
+  document.addEventListener("turbo:load", function() {
+    var checkboxes = document.querySelectorAll(".compare-checkbox");
+    var bar = document.getElementById("compare-bar");
+    var link = document.getElementById("compare-link");
+    var basePath = "<%= prompt_versions_path(@prompt) %>/compare";
+    checkboxes.forEach(function(cb) {
+      cb.addEventListener("change", updateCompare);
+    });
+    function updateCompare() {
+      var checked = document.querySelectorAll(".compare-checkbox:checked");
+      if (checked.length === 2) {
+        var versions = Array.from(checked).map(function(cb) { return parseInt(cb.value); }).sort(function(a, b) { return a - b; });
+        link.href = basePath + "?a=" + versions[0] + "&b=" + versions[1];
+        link.textContent = "Compare v" + versions[0] + " vs v" + versions[1];
+        bar.classList.remove("hidden");
+      } else {
+        bar.classList.add("hidden");
+      }
+    }
+  });
+</script>

data/app/views/llm_logs/prompt_versions/show.html.erb ADDED Viewed

@@ -0,0 +1,48 @@
+<div class="mb-6">
+  <div class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
+    <%= link_to "Prompts", prompts_path, class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <%= link_to @prompt.name, prompt_path(@prompt), class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <span>v<%= @version.version_number %></span>
+  </div>
+  <h1 class="text-2xl font-bold text-gray-900"><%= @prompt.name %> — v<%= @version.version_number %></h1>
+  <% if @version.changelog.present? %>
+    <p class="text-sm text-gray-500 mt-1"><%= @version.changelog %></p>
+  <% end %>
+  <p class="text-sm text-gray-500 mt-1">
+    <%= link_to pluralize(@version.traces.count, "trace"),
+      traces_path(prompt_version_id: @version.id),
+      class: "text-indigo-600 hover:text-indigo-900" %>
+  </p>
+</div>
+<div class="space-y-6">
+  <% if @version.model.present? %>
+    <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-4">
+      <h2 class="text-sm font-medium text-gray-900 mb-2">Model: <span class="font-mono"><%= @version.model %></span></h2>
+      <% if @version.model_params.present? && @version.model_params.any? %>
+        <dl class="grid grid-cols-4 gap-2 text-sm">
+          <% @version.model_params.each do |key, value| %>
+            <dt class="text-gray-500"><%= key %></dt>
+            <dd class="text-gray-900 font-mono"><%= value %></dd>
+          <% end %>
+        </dl>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+    <div class="px-4 py-3 border-b border-gray-200">
+      <h2 class="text-sm font-medium text-gray-900">Messages</h2>
+    </div>
+    <div class="p-4 space-y-3">
+      <% @version.messages.each do |msg| %>
+        <div class="rounded-lg p-3 <%= msg['role'] == 'system' ? 'bg-yellow-50' : msg['role'] == 'user' ? 'bg-blue-50' : 'bg-gray-50' %>">
+          <div class="text-xs font-medium text-gray-500 uppercase mb-1"><%= msg['role'] %></div>
+          <pre class="text-sm whitespace-pre-wrap font-mono"><%= msg['content'] %></pre>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/llm_logs/prompts/_form.html.erb ADDED Viewed

@@ -0,0 +1,94 @@
+<%= form_with(model: prompt, url: prompt.persisted? ? prompt_path(prompt) : prompts_path, class: "space-y-6") do |f| %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
+    <h2 class="text-lg font-medium text-gray-900">Prompt Details</h2>
+    <div class="grid grid-cols-2 gap-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Slug</label>
+        <%= f.text_field :slug, class: "w-full rounded-md shadow-sm text-sm px-3 py-2 border #{prompt.errors[:slug].any? ? 'border-red-500' : 'border-gray-300'}",
+            placeholder: "e.g. strategy-analysis" %>
+        <% prompt.errors[:slug].each do |error| %>
+          <p class="mt-1 text-sm text-red-600"><%= error %></p>
+        <% end %>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+        <%= f.text_field :name, class: "w-full rounded-md shadow-sm text-sm px-3 py-2 border #{prompt.errors[:name].any? ? 'border-red-500' : 'border-gray-300'}" %>
+        <% prompt.errors[:name].each do |error| %>
+          <p class="mt-1 text-sm text-red-600"><%= error %></p>
+        <% end %>
+      </div>
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+      <%= f.text_area :description, rows: 2, class: "w-full rounded-md shadow-sm text-sm px-3 py-2 border #{prompt.errors[:description].any? ? 'border-red-500' : 'border-gray-300'}" %>
+      <% prompt.errors[:description].each do |error| %>
+        <p class="mt-1 text-sm text-red-600"><%= error %></p>
+      <% end %>
+    </div>
+  </div>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
+    <h2 class="text-lg font-medium text-gray-900">Messages</h2>
+    <p class="text-xs text-gray-500">Use <code class="bg-gray-100 px-1 rounded">{{variable_name}}</code> for Mustache template variables.</p>
+    <div id="messages-container" class="space-y-4">
+      <% messages = (current_version&.messages || [{ "role" => "system", "content" => "" }]) %>
+      <% messages.each_with_index do |msg, i| %>
+        <div class="message-row border rounded-lg p-4 space-y-2">
+          <div class="flex items-center justify-between">
+            <select name="prompt[messages][<%= i %>][role]" class="rounded-md border-gray-300 text-sm py-1.5 px-3 bg-white border shadow-sm">
+              <% %w[system user assistant].each do |role| %>
+                <option value="<%= role %>" <%= 'selected' if msg['role'] == role %>><%= role %></option>
+              <% end %>
+            </select>
+          </div>
+          <textarea name="prompt[messages][<%= i %>][content]" rows="4"
+            class="w-full rounded-md border-gray-300 shadow-sm text-sm px-3 py-2 border font-mono"
+            placeholder="Message content..."><%= msg['content'] %></textarea>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
+    <h2 class="text-lg font-medium text-gray-900">Model Configuration</h2>
+    <div class="grid grid-cols-3 gap-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
+        <%= f.text_field :model, value: current_version&.model,
+            class: "w-full rounded-md border-gray-300 shadow-sm text-sm px-3 py-2 border",
+            placeholder: "e.g. claude-sonnet-4" %>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
+        <input type="number" name="prompt[model_params][temperature]" step="0.1" min="0" max="2"
+          value="<%= current_version&.model_params&.dig('temperature') %>"
+          class="w-full rounded-md border-gray-300 shadow-sm text-sm px-3 py-2 border">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
+        <input type="number" name="prompt[model_params][max_tokens]" step="1" min="1"
+          value="<%= current_version&.model_params&.dig('max_tokens') %>"
+          class="w-full rounded-md border-gray-300 shadow-sm text-sm px-3 py-2 border">
+      </div>
+    </div>
+  </div>
+  <% if prompt.persisted? %>
+    <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-6">
+      <label class="block text-sm font-medium text-gray-700 mb-1">Changelog (optional)</label>
+      <%= f.text_field :changelog, class: "w-full rounded-md border-gray-300 shadow-sm text-sm px-3 py-2 border",
+          placeholder: "What changed in this version?" %>
+    </div>
+  <% end %>
+  <div class="flex items-center justify-between">
+    <%= link_to "Cancel", prompt.persisted? ? prompt_path(prompt) : prompts_path, class: "text-sm text-gray-600 hover:text-gray-900" %>
+    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">
+      <%= prompt.persisted? ? "Save New Version" : "Create Prompt" %>
+    </button>
+  </div>
+<% end %>

data/app/views/llm_logs/prompts/edit.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<div class="mb-6">
+  <h1 class="text-2xl font-bold text-gray-900">Edit: <%= @prompt.name %></h1>
+  <p class="text-sm text-gray-500 mt-1">Saving creates a new version.</p>
+</div>
+<%= render "form", prompt: @prompt, current_version: @current_version %>

data/app/views/llm_logs/prompts/index.html.erb ADDED Viewed

@@ -0,0 +1,43 @@
+<div class="flex items-center justify-between mb-6">
+  <h1 class="text-2xl font-bold text-gray-900">Prompts</h1>
+  <%= link_to "New Prompt", new_prompt_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-500" %>
+</div>
+<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg overflow-hidden">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Slug</th>
+        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Version</th>
+        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Updated</th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-200">
+      <% @prompts.each do |prompt| %>
+        <tr class="hover:bg-gray-50">
+          <td class="px-4 py-3 text-sm">
+            <%= link_to prompt.name, prompt_path(prompt), class: "text-indigo-600 hover:text-indigo-900 font-medium" %>
+          </td>
+          <td class="px-4 py-3 text-sm text-gray-500 font-mono"><%= prompt.slug %></td>
+          <td class="px-4 py-3 text-sm text-right">
+            <% if prompt.versions.any? %>
+              <%= link_to "v#{prompt.versions.maximum(:version_number)}", prompt_versions_path(prompt), class: "text-indigo-600 hover:text-indigo-900" %>
+            <% else %>—<% end %>
+          </td>
+          <td class="px-4 py-3 text-sm text-gray-500"><%= prompt.updated_at.strftime('%b %d %H:%M') %></td>
+        </tr>
+      <% end %>
+      <% if @prompts.empty? %>
+        <tr>
+          <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
+            No prompts yet. <%= link_to "Create one", new_prompt_path, class: "text-indigo-600 hover:text-indigo-900" %>.
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+<%= paginate @prompts, theme: "tailwind" %>

data/app/views/llm_logs/prompts/new.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<div class="mb-6">
+  <h1 class="text-2xl font-bold text-gray-900">New Prompt</h1>
+</div>
+<%= render "form", prompt: @prompt, current_version: nil %>

data/app/views/llm_logs/prompts/show.html.erb ADDED Viewed

@@ -0,0 +1,107 @@
+<div class="mb-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900"><%= @prompt.name %></h1>
+      <p class="text-sm text-gray-500 mt-1">
+        <span class="font-mono"><%= @prompt.slug %></span>
+        <% if @prompt.description.present? %>
+          &middot; <%= @prompt.description %>
+        <% end %>
+      </p>
+    </div>
+    <div class="flex items-center space-x-3">
+      <%= link_to "Edit", edit_prompt_path(@prompt), class: "bg-indigo-600 text-white px-3 py-1.5 rounded-md text-sm font-medium hover:bg-indigo-500" %>
+      <%= button_to "Delete", prompt_path(@prompt), method: :delete, class: "text-sm text-red-600 hover:text-red-900",
+          data: { turbo_confirm: "Delete this prompt and all versions?" } %>
+    </div>
+  </div>
+</div>
+<div class="grid grid-cols-3 gap-6">
+  <div class="col-span-2 space-y-6">
+    <% if @current_version %>
+      <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+        <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+          <h2 class="text-sm font-medium text-gray-900">Messages (v<%= @current_version.version_number %>)</h2>
+          <% if @current_version.model.present? %>
+            <span class="text-xs text-gray-500">Model: <span class="font-medium"><%= @current_version.model %></span></span>
+          <% end %>
+        </div>
+        <div class="p-4 space-y-3">
+          <% @current_version.messages.each do |msg| %>
+            <div class="rounded-lg p-3 <%= msg['role'] == 'system' ? 'bg-yellow-50' : msg['role'] == 'user' ? 'bg-blue-50' : 'bg-gray-50' %>">
+              <div class="text-xs font-medium text-gray-500 uppercase mb-1"><%= msg['role'] %></div>
+              <pre class="text-sm whitespace-pre-wrap font-mono"><%= msg['content'] %></pre>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <% if @current_version.model_params.present? && @current_version.model_params.any? %>
+        <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+          <div class="px-4 py-3 border-b border-gray-200">
+            <h2 class="text-sm font-medium text-gray-900">Model Parameters</h2>
+          </div>
+          <div class="p-4">
+            <dl class="grid grid-cols-2 gap-2 text-sm">
+              <% @current_version.model_params.each do |key, value| %>
+                <dt class="text-gray-500"><%= key %></dt>
+                <dd class="text-gray-900 font-mono"><%= value %></dd>
+              <% end %>
+            </dl>
+          </div>
+        </div>
+      <% end %>
+      <% if @current_version.default_variables.present? && @current_version.default_variables.any? %>
+        <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+          <div class="px-4 py-3 border-b border-gray-200">
+            <h2 class="text-sm font-medium text-gray-900">Default Variables</h2>
+          </div>
+          <div class="p-4">
+            <pre class="text-sm bg-gray-50 rounded-lg p-3 font-mono"><%= JSON.pretty_generate(@current_version.default_variables) %></pre>
+          </div>
+        </div>
+      <% end %>
+    <% else %>
+      <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-8 text-center text-sm text-gray-500">
+        No versions yet. <%= link_to "Edit this prompt", edit_prompt_path(@prompt), class: "text-indigo-600" %> to add content.
+      </div>
+    <% end %>
+  </div>
+  <div>
+    <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+      <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+        <h2 class="text-sm font-medium text-gray-900">Version History</h2>
+        <%= link_to "View all", prompt_versions_path(@prompt), class: "text-xs text-indigo-600 hover:text-indigo-900" %>
+      </div>
+      <div class="divide-y divide-gray-100">
+        <% @versions.each do |version| %>
+          <%= link_to prompt_version_path(@prompt, version), class: "block px-4 py-3 #{version == @current_version ? 'bg-indigo-50' : 'hover:bg-gray-50'}" do %>
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium text-gray-900">v<%= version.version_number %></span>
+              <% if version == @current_version %>
+                <span class="inline-flex items-center rounded-full bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-800">Current</span>
+              <% end %>
+              <span class="text-xs text-gray-500"><%= version.created_at.strftime('%b %d %H:%M') %></span>
+            </div>
+            <% if version.changelog.present? %>
+              <p class="text-xs text-gray-500 mt-1"><%= version.changelog %></p>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+    <div class="mt-4 bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 p-4">
+      <h3 class="text-sm font-medium text-gray-900 mb-2">SDK Usage</h3>
+      <pre class="text-xs bg-gray-50 rounded p-3 font-mono overflow-x-auto">prompt = LlmLogs::Prompt.load("<%= @prompt.slug %>")
+params = prompt.build(<% if @current_version&.variables&.any? %>
+<%= @current_version.variables.map { |v| "  #{v}: \"\"" }.join(",\n") %>
+<% else %>
+  # no variables
+<% end %>)</pre>
+    </div>
+  </div>
+</div>

data/app/views/llm_logs/spans/show.html.erb ADDED Viewed

@@ -0,0 +1,99 @@
+<div class="mb-6">
+  <div class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
+    <%= link_to @trace.name, trace_path(@trace), class: "text-indigo-600 hover:text-indigo-900" %>
+    <span>/</span>
+    <span><%= @span.name %></span>
+  </div>
+  <div class="flex items-center space-x-3">
+    <h1 class="text-2xl font-bold text-gray-900"><%= @span.name %></h1>
+    <% type_colors = { "llm" => "bg-purple-100 text-purple-800", "tool" => "bg-amber-100 text-amber-800", "custom" => "bg-gray-100 text-gray-800" } %>
+    <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium <%= type_colors[@span.span_type] %>">
+      <%= @span.span_type %>
+    </span>
+    <% if @span.status == "error" %>
+      <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800">error</span>
+    <% end %>
+  </div>
+</div>
+<div class="grid grid-cols-5 gap-4 mb-6">
+  <div class="bg-white rounded-lg p-4 shadow-sm ring-1 ring-gray-900/5">
+    <dt class="text-xs font-medium text-gray-500 uppercase">Model</dt>
+    <dd class="text-lg font-semibold text-gray-900 mt-1"><%= @span.model || "—" %></dd>
+  </div>
+  <div class="bg-white rounded-lg p-4 shadow-sm ring-1 ring-gray-900/5">
+    <dt class="text-xs font-medium text-gray-500 uppercase">Input Tokens</dt>
+    <dd class="text-lg font-semibold text-gray-900 mt-1"><%= number_with_delimiter(@span.input_tokens || 0) %></dd>
+  </div>
+  <div class="bg-white rounded-lg p-4 shadow-sm ring-1 ring-gray-900/5">
+    <dt class="text-xs font-medium text-gray-500 uppercase">Output Tokens</dt>
+    <dd class="text-lg font-semibold text-gray-900 mt-1"><%= number_with_delimiter(@span.output_tokens || 0) %></dd>
+  </div>
+  <div class="bg-white rounded-lg p-4 shadow-sm ring-1 ring-gray-900/5">
+    <dt class="text-xs font-medium text-gray-500 uppercase">Cached Tokens</dt>
+    <dd class="text-lg font-semibold text-green-600 mt-1"><%= number_with_delimiter(@span.cached_tokens || 0) %></dd>
+    <% if (@span.input_tokens || 0) > 0 && (@span.cached_tokens || 0) > 0 %>
+      <dd class="text-xs text-green-600 mt-0.5"><%= (@span.cached_tokens.to_f / @span.input_tokens * 100).round %>% of input</dd>
+    <% end %>
+  </div>
+  <div class="bg-white rounded-lg p-4 shadow-sm ring-1 ring-gray-900/5">
+    <dt class="text-xs font-medium text-gray-500 uppercase">Duration</dt>
+    <dd class="text-lg font-semibold text-gray-900 mt-1">
+      <%= format_duration_ms(@span.duration_ms) %>
+    </dd>
+  </div>
+</div>
+<% if @span.input.present? %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 mb-6">
+    <div class="px-4 py-3 border-b border-gray-200">
+      <h2 class="text-sm font-medium text-gray-900">Input<%= @span.input.is_a?(Array) ? " Messages" : "" %></h2>
+    </div>
+    <div class="p-4 space-y-3">
+      <% if @span.input.is_a?(Array) %>
+        <% @span.input.each do |msg| %>
+          <div class="rounded-lg p-3 <%= msg['role'] == 'user' ? 'bg-blue-50' : 'bg-gray-50' %>">
+            <div class="text-xs font-medium text-gray-500 uppercase mb-1"><%= msg['role'] %></div>
+            <pre class="text-sm whitespace-pre-wrap"><%= msg['content'] %></pre>
+          </div>
+        <% end %>
+      <% else %>
+        <pre class="text-sm bg-gray-50 rounded-lg p-3 whitespace-pre-wrap"><%= pretty_json(@span.input) %></pre>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+<% if @span.output.present? %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5 mb-6">
+    <div class="px-4 py-3 border-b border-gray-200">
+      <h2 class="text-sm font-medium text-gray-900">Output</h2>
+    </div>
+    <div class="p-4">
+      <pre class="text-sm bg-green-50 rounded-lg p-3 whitespace-pre-wrap"><%= pretty_json(@span.output) %></pre>
+    </div>
+  </div>
+<% end %>
+<% if @span.error_message.present? %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-red-200 mb-6">
+    <div class="px-4 py-3 border-b border-red-200 bg-red-50">
+      <h2 class="text-sm font-medium text-red-800">Error</h2>
+    </div>
+    <div class="p-4">
+      <pre class="text-sm text-red-800 whitespace-pre-wrap"><%= @span.error_message %></pre>
+    </div>
+  </div>
+<% end %>
+<% if @span.metadata.present? && @span.metadata.any? %>
+  <div class="bg-white rounded-lg shadow-sm ring-1 ring-gray-900/5">
+    <div class="px-4 py-3 border-b border-gray-200">
+      <h2 class="text-sm font-medium text-gray-900">Metadata</h2>
+    </div>
+    <div class="p-4">
+      <pre class="text-sm bg-gray-50 rounded-lg p-3"><%= JSON.pretty_generate(@span.metadata) %></pre>
+    </div>
+  </div>
+<% end %>