rubyllm-observ 0.5.0

data/app/views/observ/dashboard/index.html.erb

@@ -0,0 +1,236 @@
+<% content_for :title, "Dashboard" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <h1 class="observ-page-header__title">Observability Dashboard</h1>
+    <div class="observ-page-header__actions">
+      <%= form_with url: dashboard_path, method: :get, class: "observ-period-selector" do |f| %>
+        <%= f.select :period, 
+          options_for_select([["Last 24 Hours", "24h"], ["Last 7 Days", "7d"], ["Last 30 Days", "30d"], ["All Time", "all"]], @time_period),
+          {}, 
+          { class: "observ-period-selector__select", onchange: "this.form.requestSubmit()" } %>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-dashboard">
+  <section class="observ-metrics-grid">
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Total Sessions</h3>
+        <%= observ_trend_badge(@metrics[:trends][:sessions]) %>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_number(@metrics[:total_sessions]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Total Traces</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_number(@metrics[:total_traces]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">LLM Calls</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_number(@metrics[:total_llm_calls]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card observ-metric-card--highlighted">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Total Cost</h3>
+        <%= observ_trend_badge(@metrics[:trends][:cost]) %>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_currency(@metrics[:total_cost]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Total Tokens</h3>
+        <%= observ_trend_badge(@metrics[:trends][:tokens]) %>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_tokens(@metrics[:total_tokens]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Avg Latency</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_duration_ms(@metrics[:avg_latency_ms]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Success Rate</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= observ_percentage(@metrics[:success_rate]) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Avg Cost/Call</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_currency(@metrics[:avg_cost_per_call]) %></p>
+      </div>
+    </div>
+  </section>
+
+  <div class="observ-dashboard__grid">
+    <section class="observ-card observ-card--span-2">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Metrics by Agent</h2>
+      </header>
+      <div class="observ-card__body">
+        <% if @metrics_by_agent.any? %>
+          <table class="observ-table observ-table--compact">
+            <thead class="observ-table__header">
+              <tr class="observ-table__row">
+                <th class="observ-table__cell">Agent</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Sessions</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Traces</th>
+                <th class="observ-table__cell observ-table__cell--numeric">LLM Calls</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Tokens</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Cost</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @metrics_by_agent.each do |metrics| %>
+                <tr class="observ-table__row">
+                  <td class="observ-table__cell">
+                    <%= metrics[:agent_type] %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_number(metrics[:sessions]) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_number(metrics[:traces]) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_number(metrics[:llm_calls]) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_tokens(metrics[:tokens]) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_currency(metrics[:cost]) %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        <% else %>
+          <p class="observ-card__empty">No agent metrics available for this period.</p>
+        <% end %>
+      </div>
+    </section>
+
+    <section class="observ-card observ-card--span-2">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Cost by Model</h2>
+      </header>
+      <div class="observ-card__body">
+        <% if @cost_by_model.any? %>
+          <table class="observ-table observ-table--compact">
+            <thead class="observ-table__header">
+              <tr class="observ-table__row">
+                <th class="observ-table__cell">Model</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Cost</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Percentage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% total_cost = @cost_by_model.values.sum %>
+              <% @cost_by_model.sort_by { |_, cost| -cost }.each do |model, cost| %>
+                <tr class="observ-table__row">
+                  <td class="observ-table__cell">
+                    <%= observ_model_badge(model) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_currency(cost) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= observ_percentage((cost / total_cost) * 100) %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        <% else %>
+          <p class="observ-card__empty">No cost data available for this period.</p>
+        <% end %>
+      </div>
+    </section>
+
+    <section class="observ-card observ-card--span-2">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Recent Sessions</h2>
+        <div class="observ-card__actions">
+          <%= link_to "View All →", sessions_path, class: "observ-link" %>
+        </div>
+      </header>
+      <div class="observ-card__body">
+        <% if @recent_sessions.any? %>
+          <table class="observ-table observ-table--compact">
+            <thead class="observ-table__header">
+              <tr class="observ-table__row">
+                <th class="observ-table__cell">Session ID</th>
+                <th class="observ-table__cell">Agent</th>
+                <th class="observ-table__cell">Started</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Traces</th>
+                <th class="observ-table__cell observ-table__cell--numeric">Cost</th>
+                <th class="observ-table__cell">Status</th>
+                <th class="observ-table__cell"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @recent_sessions.each do |session| %>
+                <tr class="observ-table__row">
+                  <td class="observ-table__cell">
+                    <code class="observ-code observ-code--inline"><%= truncate_id(session.session_id, 12) %></code>
+                  </td>
+                  <td class="observ-table__cell">
+                    <%= session.metadata&.dig("agent_type") || "—" %>
+                  </td>
+                  <td class="observ-table__cell">
+                    <%= observ_relative_time(session.start_time) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= session.end_time ? session.total_traces_count : session.traces.count %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--numeric">
+                    <%= format_currency(session.end_time ? session.total_cost : session.traces.sum(:total_cost)) %>
+                  </td>
+                  <td class="observ-table__cell">
+                    <%= observ_status_badge(observ_session_status(session)) %>
+                  </td>
+                  <td class="observ-table__cell observ-table__cell--actions">
+                    <%= link_to "View", session_path(session), class: "observ-button observ-button--sm" %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        <% else %>
+          <p class="observ-card__empty">No sessions found for this period.</p>
+        <% end %>
+      </div>
+    </section>
+  </div>
+</div>

data/app/views/observ/dataset_items/_form.html.erb

@@ -0,0 +1,49 @@
+<%= form_with model: item, scope: :observ_dataset_item, url: item.persisted? ? dataset_item_path(dataset, item) : dataset_items_path(dataset),
+  method: item.persisted? ? :patch : :post, class: "observ-form" do |f| %>
+  <% if item.errors.any? %>
+    <div class="observ-alert observ-alert--danger">
+      <h3 class="observ-alert__title">Please fix the following errors:</h3>
+      <ul class="observ-alert__list">
+        <% item.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="observ-form__group">
+    <%= f.label :input_text, "Input", class: "observ-form__label" %>
+    <%= f.text_area :input_text,
+      value: item.input.is_a?(Hash) ? JSON.pretty_generate(item.input) : item.input,
+      class: "observ-form__textarea observ-form__textarea--code",
+      rows: 6,
+      placeholder: '{"text": "What is the capital of France?"}',
+      required: true %>
+    <p class="observ-form__hint">The input data for this test case. Can be JSON or plain text.</p>
+  </div>
+
+  <div class="observ-form__group">
+    <%= f.label :expected_output_text, "Expected Output", class: "observ-form__label" %>
+    <%= f.text_area :expected_output_text,
+      value: item.expected_output.is_a?(Hash) ? JSON.pretty_generate(item.expected_output) : item.expected_output,
+      class: "observ-form__textarea observ-form__textarea--code",
+      rows: 6,
+      placeholder: '{"answer": "Paris"}' %>
+    <p class="observ-form__hint">Optional. The expected output for comparison. Can be JSON or plain text.</p>
+  </div>
+
+  <div class="observ-form__group">
+    <%= f.label :status, class: "observ-form__label" %>
+    <%= f.select :status,
+      options_for_select([["Active", "active"], ["Archived", "archived"]], item.status),
+      {},
+      class: "observ-form__select" %>
+    <p class="observ-form__hint">Archived items are excluded from new runs</p>
+  </div>
+
+  <div class="observ-form__actions">
+    <%= f.submit item.persisted? ? "Update Item" : "Add Item",
+      class: "observ-button observ-button--primary" %>
+    <%= link_to "Cancel", dataset_path(dataset, tab: "items"), class: "observ-button" %>
+  </div>
+<% end %>

data/app/views/observ/dataset_items/edit.html.erb

@@ -0,0 +1,18 @@
+<% content_for :title, "Edit Item - #{@dataset.name}" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Dataset", dataset_path(@dataset, tab: "items"), class: "observ-datasets__back-link" %>
+      <h1 class="observ-page-header__title">Edit Item</h1>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <section class="observ-card">
+    <div class="observ-card__body">
+      <%= render "form", item: @item, dataset: @dataset %>
+    </div>
+  </section>
+</div>

data/app/views/observ/dataset_items/index.html.erb

@@ -0,0 +1,95 @@
+<% content_for :title, "Items - #{@dataset.name}" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Dataset", dataset_path(@dataset), class: "observ-datasets__back-link" %>
+      <h1 class="observ-page-header__title">Items: <%= @dataset.name %></h1>
+    </div>
+    <%= link_to "Add Item", new_dataset_item_path(@dataset), class: "observ-button observ-button--primary" %>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <!-- Filters -->
+  <section class="observ-card">
+    <div class="observ-card__body">
+      <%= form_with url: dataset_items_path(@dataset), method: :get, class: "observ-datasets-filters__form" do |f| %>
+        <div class="observ-datasets-filters__field">
+          <%= f.label :status, "Filter by status", class: "observ-datasets-filters__label" %>
+          <%= f.select :status,
+            options_for_select([["All", ""], ["Active", "active"], ["Archived", "archived"]], params[:status]),
+            {},
+            class: "observ-datasets-filters__select" %>
+        </div>
+        <div class="observ-datasets-filters__actions">
+          <%= f.submit "Filter", class: "observ-button observ-button--secondary" %>
+          <%= link_to "Clear", dataset_items_path(@dataset), class: "observ-button" %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Items Table -->
+  <section class="observ-card">
+    <div class="observ-card__body">
+      <% if @items.any? %>
+        <table class="observ-table">
+          <thead class="observ-table__header">
+            <tr class="observ-table__row">
+              <th class="observ-table__cell">Input</th>
+              <th class="observ-table__cell">Expected Output</th>
+              <th class="observ-table__cell">Status</th>
+              <th class="observ-table__cell observ-table__cell--numeric">Runs</th>
+              <th class="observ-table__cell">Created</th>
+              <th class="observ-table__cell observ-table__cell--actions"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @items.each do |item| %>
+              <tr class="observ-table__row">
+                <td class="observ-table__cell observ-datasets__cell--preview">
+                  <code class="observ-datasets__preview"><%= item.input_preview(max_length: 100) %></code>
+                </td>
+                <td class="observ-table__cell observ-datasets__cell--preview">
+                  <% if item.expected_output.present? %>
+                    <code class="observ-datasets__preview"><%= item.expected_output_preview(max_length: 100) %></code>
+                  <% else %>
+                    <span class="observ-text--muted">Not set</span>
+                  <% end %>
+                </td>
+                <td class="observ-table__cell">
+                  <span class="observ-badge <%= item.active? ? 'observ-badge--success' : 'observ-badge--default' %>">
+                    <%= item.status %>
+                  </span>
+                </td>
+                <td class="observ-table__cell observ-table__cell--numeric">
+                  <%= item.run_count %>
+                </td>
+                <td class="observ-table__cell">
+                  <%= time_ago_in_words(item.created_at) %> ago
+                </td>
+                <td class="observ-table__cell observ-table__cell--actions">
+                  <div class="observ-datasets-table__action-group">
+                    <%= link_to "Edit", edit_dataset_item_path(@dataset, item), class: "observ-button observ-button--sm" %>
+                    <%= button_to "Delete", dataset_item_path(@dataset, item),
+                      method: :delete,
+                      class: "observ-button observ-button--sm observ-button--danger",
+                      data: { confirm: "Are you sure?" } %>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      <% else %>
+        <div class="observ-card__empty">
+          <p class="observ-card__empty-text">No items found</p>
+          <%= link_to "Add an item", new_dataset_item_path(@dataset), class: "observ-button observ-button--primary" %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <%= observ_pagination(@items) %>
+</div>

data/app/views/observ/dataset_items/new.html.erb

@@ -0,0 +1,18 @@
+<% content_for :title, "Add Item - #{@dataset.name}" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Dataset", dataset_path(@dataset, tab: "items"), class: "observ-datasets__back-link" %>
+      <h1 class="observ-page-header__title">Add Item to <%= @dataset.name %></h1>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <section class="observ-card">
+    <div class="observ-card__body">
+      <%= render "form", item: @item, dataset: @dataset %>
+    </div>
+  </section>
+</div>

data/app/views/observ/dataset_run_items/_score_close_drawer.html.erb

@@ -0,0 +1,4 @@
+<script>
+  // Close the drawer after successful score save
+  document.querySelector('.observ-drawer')?.classList.remove('open');
+</script>

data/app/views/observ/dataset_run_items/_score_drawer.html.erb

@@ -0,0 +1,75 @@
+<div class="observ-drawer__header">
+  <h2 class="observ-drawer__title">Score Item</h2>
+</div>
+
+<div class="observ-drawer__body">
+  <% if local_assigns[:error] %>
+    <div class="observ-alert observ-alert--danger"><%= error %></div>
+  <% end %>
+
+  <div class="observ-datasets__score-context">
+    <h4 class="observ-text--label">Input</h4>
+    <pre class="observ-code-block"><%= format_trace_data(run_item.input) %></pre>
+
+    <% if run_item.expected_output.present? %>
+      <h4 class="observ-text--label">Expected Output</h4>
+      <pre class="observ-code-block"><%= format_trace_data(run_item.expected_output) %></pre>
+    <% end %>
+
+    <h4 class="observ-text--label">Actual Output</h4>
+    <pre class="observ-code-block"><%= format_trace_data(run_item.actual_output) %></pre>
+  </div>
+
+  <% existing_manual = run_item.score_for("manual", source: :manual) %>
+
+  <%= form_with url: score_dataset_run_run_item_path(run_item.dataset_run.dataset, run_item.dataset_run, run_item), method: :post, class: "observ-form" do |f| %>
+    <div class="observ-form__group">
+      <label class="observ-form__label">Is the output correct?</label>
+      <div class="observ-datasets__score-buttons">
+        <label class="observ-datasets__score-button">
+          <input type="radio" name="value" value="1" <%= "checked" if existing_manual&.passed? %>>
+          <span class="observ-datasets__score-icon observ-datasets__score-icon--pass">&#10003;</span>
+          Correct
+        </label>
+        <label class="observ-datasets__score-button">
+          <input type="radio" name="value" value="0" <%= "checked" if existing_manual&.failed? %>>
+          <span class="observ-datasets__score-icon observ-datasets__score-icon--fail">&#10005;</span>
+          Incorrect
+        </label>
+      </div>
+    </div>
+
+    <div class="observ-form__group">
+      <label class="observ-form__label" for="comment">Comment (optional)</label>
+      <textarea name="comment" id="comment" class="observ-form__textarea" rows="3"><%= existing_manual&.comment %></textarea>
+    </div>
+
+    <div class="observ-form__actions">
+      <button type="submit" class="observ-button observ-button--primary">Save Score</button>
+      <button type="button" class="observ-button" data-action="click->observ--drawer#close">Cancel</button>
+    </div>
+  <% end %>
+
+  <% if run_item.scores.any? %>
+    <div class="observ-datasets__existing-scores">
+      <h4 class="observ-text--label">Existing Scores</h4>
+      <ul class="observ-scores-list">
+        <% run_item.scores.each do |score| %>
+          <li class="observ-scores-list__item">
+            <span class="observ-scores-list__indicator <%= score.passed? ? 'observ-scores-list__indicator--pass' : 'observ-scores-list__indicator--fail' %>">
+              <%= score.passed? ? '✓' : '✗' %>
+            </span>
+            <span class="observ-scores-list__name"><%= score.name %></span>
+            <% unless score.boolean? %>
+              <span class="observ-scores-list__value"><%= score.display_value %></span>
+            <% end %>
+            <span class="observ-scores-list__source"><%= score.source %></span>
+            <% if score.comment.present? %>
+              <span class="observ-scores-list__comment"><%= score.comment %></span>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>

data/app/views/observ/dataset_run_items/_score_success.html.erb

@@ -0,0 +1,29 @@
+<div class="observ-drawer__body">
+  <div class="observ-alert observ-alert--success">
+    <strong>Score saved successfully!</strong>
+    <p>The item has been marked as <%= score.passed? ? "correct" : "incorrect" %>.</p>
+  </div>
+
+  <div class="observ-datasets__score-result">
+    <div class="observ-drawer__field">
+      <label class="observ-drawer__field-label">Score</label>
+      <span class="observ-badge <%= score.badge_class %>"><%= score.display_value %></span>
+    </div>
+
+    <% if score.comment.present? %>
+      <div class="observ-drawer__field">
+        <label class="observ-drawer__field-label">Comment</label>
+        <p><%= score.comment %></p>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="observ-drawer__actions">
+    <%= link_to "Score Another Item",
+      "#",
+      class: "observ-button observ-button--primary",
+      data: {
+        action: "click->observ--drawer#close"
+      } %>
+  </div>
+</div>

data/app/views/observ/dataset_run_items/_scores_cell.html.erb

@@ -0,0 +1,19 @@
+<td class="observ-table__cell" id="run-item-<%= run_item.id %>-scores">
+  <% if run_item.scores.any? %>
+    <ul class="observ-scores-list observ-scores-list--compact">
+      <% run_item.scores.limit(3).each do |score| %>
+        <li class="observ-scores-list__item" title="<%= score.source %>">
+          <span class="observ-scores-list__indicator <%= score.passed? ? 'observ-scores-list__indicator--pass' : 'observ-scores-list__indicator--fail' %>">
+            <%= score.passed? ? '✓' : '✗' %>
+          </span>
+          <span class="observ-scores-list__name"><%= score.name %></span>
+        </li>
+      <% end %>
+      <% if run_item.scores.count > 3 %>
+        <li class="observ-scores-list__item observ-scores-list__more">+<%= run_item.scores.count - 3 %></li>
+      <% end %>
+    </ul>
+  <% else %>
+    <span class="observ-text--muted">-</span>
+  <% end %>
+</td>

data/app/views/observ/dataset_run_items/details_drawer.turbo_stream.erb

@@ -0,0 +1,80 @@
+<%= turbo_stream.update "drawer-header-title" do %>
+  Run Item Details
+<% end %>
+
+<%= turbo_stream.update "drawer-content" do %>
+  <div class="observ-drawer__section">
+    <!-- Status -->
+    <div class="observ-drawer__field">
+      <label class="observ-drawer__field-label">Status</label>
+      <div class="observ-drawer__field-value">
+        <span class="observ-badge <%= run_item_status_badge_class(@run_item.status) %>">
+          <%= @run_item.status %>
+        </span>
+        <% if @run_item.output_matches? == true %>
+          <span class="observ-badge observ-badge--success">Match</span>
+        <% elsif @run_item.output_matches? == false %>
+          <span class="observ-badge observ-badge--danger">Mismatch</span>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Metrics -->
+    <% if @run_item.succeeded? %>
+      <div class="observ-drawer__metrics">
+        <div class="observ-drawer__metric">
+          <span class="observ-drawer__metric-label">Cost</span>
+          <span class="observ-drawer__metric-value">$<%= number_with_precision(@run_item.cost || 0, precision: 4) %></span>
+        </div>
+        <div class="observ-drawer__metric">
+          <span class="observ-drawer__metric-label">Tokens</span>
+          <span class="observ-drawer__metric-value"><%= number_with_delimiter(@run_item.tokens || 0) %></span>
+        </div>
+        <div class="observ-drawer__metric">
+          <span class="observ-drawer__metric-label">Duration</span>
+          <span class="observ-drawer__metric-value"><%= @run_item.duration_ms ? "#{@run_item.duration_ms}ms" : "-" %></span>
+        </div>
+      </div>
+    <% end %>
+
+    <!-- Input -->
+    <div class="observ-drawer__field">
+      <label class="observ-drawer__field-label">Input</label>
+      <pre class="observ-code-block"><%= format_trace_data(@run_item.input) %></pre>
+    </div>
+
+    <!-- Expected Output -->
+    <div class="observ-drawer__field">
+      <label class="observ-drawer__field-label">Expected Output</label>
+      <% if @run_item.expected_output.present? %>
+        <pre class="observ-code-block"><%= format_trace_data(@run_item.expected_output) %></pre>
+      <% else %>
+        <p class="observ-text--muted">No expected output defined</p>
+      <% end %>
+    </div>
+
+    <!-- Actual Output -->
+    <div class="observ-drawer__field">
+      <label class="observ-drawer__field-label">Actual Output</label>
+      <% if @run_item.failed? %>
+        <div class="observ-alert observ-alert--danger">
+          <strong>Error:</strong> <%= @run_item.error %>
+        </div>
+      <% elsif @run_item.actual_output.present? %>
+        <pre class="observ-code-block"><%= format_trace_data(@run_item.actual_output) %></pre>
+      <% else %>
+        <p class="observ-text--muted">Pending execution</p>
+      <% end %>
+    </div>
+
+    <!-- Actions -->
+    <div class="observ-drawer__actions">
+      <% if @run_item.trace %>
+        <%= link_to "View Full Trace", trace_path(@run_item.trace), class: "observ-button observ-button--primary" %>
+      <% end %>
+      <button type="button" class="observ-button" data-action="click->observ--drawer#close">
+        Close
+      </button>
+    </div>
+  </div>
+<% end %>

data/app/views/observ/dataset_run_items/score_drawer.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.update "drawer-header-title" do %>
+  Score Item
+<% end %>
+
+<%= turbo_stream.update "drawer-content" do %>
+  <%= render "observ/dataset_run_items/score_drawer", run_item: @run_item %>
+<% end %>