rubyllm-observ 0.5.0

data/app/views/observ/observations/show_generation.html.erb

@@ -0,0 +1,195 @@
+<% content_for :title, "Generation #{truncate_id(@observation.observation_id, 12)}" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div class="observ-page-header__breadcrumb">
+      <%= link_to "Observations", observations_path, class: "observ-link" %> /
+    </div>
+    <h1 class="observ-page-header__title">
+      Generation <code class="observ-code observ-code--inline"><%= truncate_id(@observation.observation_id, 12) %></code>
+    </h1>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <section class="observ-metrics-grid observ-metrics-grid--4col">
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Model</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value observ-metric-card__value--small">
+          <%= @observation.model || "—" %>
+        </p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Total Tokens</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_tokens(@observation.total_tokens) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card observ-metric-card--highlighted">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Cost</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value"><%= format_currency(@observation.cost_usd) %></p>
+      </div>
+    </div>
+
+    <div class="observ-metric-card">
+      <div class="observ-metric-card__header">
+        <h3 class="observ-metric-card__label">Duration</h3>
+      </div>
+      <div class="observ-metric-card__body">
+        <p class="observ-metric-card__value">
+          <% if @observation.duration_ms %>
+            <%= format_duration_ms(@observation.duration_ms) %>
+          <% else %>
+            <span class="observ-text--muted">—</span>
+          <% end %>
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <section class="observ-card">
+    <header class="observ-card__header">
+      <h2 class="observ-card__title">Details</h2>
+    </header>
+    <div class="observ-card__body">
+      <dl class="observ-definition-list">
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Trace</dt>
+          <dd class="observ-definition-list__definition">
+            <%= link_to truncate_id(@observation.trace.trace_id, 12), trace_path(@observation.trace), class: "observ-link" %>
+          </dd>
+        </div>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Name</dt>
+          <dd class="observ-definition-list__definition"><%= @observation.name %></dd>
+        </div>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Start Time</dt>
+          <dd class="observ-definition-list__definition"><%= observ_timestamp(@observation.start_time) %></dd>
+        </div>
+        <% if @observation.end_time %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">End Time</dt>
+            <dd class="observ-definition-list__definition"><%= observ_timestamp(@observation.end_time) %></dd>
+          </div>
+        <% end %>
+        <% if @observation.finish_reason %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">Finish Reason</dt>
+            <dd class="observ-definition-list__definition"><%= @observation.finish_reason %></dd>
+          </div>
+        <% end %>
+        <% if @observation.time_to_first_token_ms %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">Time to First Token</dt>
+            <dd class="observ-definition-list__definition"><%= format_duration_ms(@observation.time_to_first_token_ms) %></dd>
+          </div>
+        <% end %>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Prompt</dt>
+          <dd class="observ-definition-list__definition">
+            <% if @observation.prompt_name.present? %>
+              <%= @observation.prompt_name %>
+              <% if @observation.prompt_version.present? %>
+                <span class="observ-text--muted">(v<%= @observation.prompt_version %>)</span>
+              <% end %>
+            <% else %>
+              <span class="observ-text--muted">default prompt</span>
+            <% end %>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+
+  <% if @observation.model_parameters.present? && @observation.model_parameters.any? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Model Parameters</h2>
+      </header>
+      <div class="observ-card__body">
+        <dl class="observ-definition-list observ-definition-list--horizontal">
+          <% @observation.model_parameters.each do |key, value| %>
+            <div class="observ-definition-list__item">
+              <dt class="observ-definition-list__term"><%= key.to_s.humanize %></dt>
+              <dd class="observ-definition-list__definition"><%= value %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.usage.present? && @observation.usage.any? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Token Usage</h2>
+      </header>
+      <div class="observ-card__body">
+        <dl class="observ-definition-list observ-definition-list--horizontal">
+          <% @observation.usage.each do |key, value| %>
+            <div class="observ-definition-list__item">
+              <dt class="observ-definition-list__term"><%= key.humanize %></dt>
+              <dd class="observ-definition-list__definition"><%= format_tokens(value) %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.input.present? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Input</h2>
+      </header>
+      <div class="observ-card__body">
+        <pre class="observ-code-block"><%= @observation.input %></pre>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.output.present? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Output</h2>
+      </header>
+      <div class="observ-card__body">
+        <pre class="observ-code-block"><%= @observation.output %></pre>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.messages.present? && @observation.messages.any? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Messages</h2>
+      </header>
+      <div class="observ-card__body">
+        <%= render_json_viewer(@observation.messages) %>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.provider_metadata.present? && @observation.provider_metadata.any? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Provider Metadata</h2>
+      </header>
+      <div class="observ-card__body">
+        <%= render_json_viewer(@observation.provider_metadata) %>
+      </div>
+    </section>
+  <% end %>
+</div>

data/app/views/observ/observations/show_span.html.erb

@@ -0,0 +1,93 @@
+<% content_for :title, "Span #{truncate_id(@observation.observation_id, 12)}" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div class="observ-page-header__breadcrumb">
+      <%= link_to "Observations", observations_path, class: "observ-link" %> /
+    </div>
+    <h1 class="observ-page-header__title">
+      Span <code class="observ-code observ-code--inline"><%= truncate_id(@observation.observation_id, 12) %></code>
+    </h1>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <section class="observ-card">
+    <header class="observ-card__header">
+      <h2 class="observ-card__title">Details</h2>
+    </header>
+    <div class="observ-card__body">
+      <dl class="observ-definition-list">
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Trace</dt>
+          <dd class="observ-definition-list__definition">
+            <%= link_to truncate_id(@observation.trace.trace_id, 12), trace_path(@observation.trace), class: "observ-link" %>
+          </dd>
+        </div>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Name</dt>
+          <dd class="observ-definition-list__definition"><%= @observation.name %></dd>
+        </div>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Start Time</dt>
+          <dd class="observ-definition-list__definition"><%= observ_timestamp(@observation.start_time) %></dd>
+        </div>
+        <% if @observation.end_time %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">End Time</dt>
+            <dd class="observ-definition-list__definition"><%= observ_timestamp(@observation.end_time) %></dd>
+          </div>
+        <% end %>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Duration</dt>
+          <dd class="observ-definition-list__definition">
+            <% if @observation.duration_ms %>
+              <%= format_duration_ms(@observation.duration_ms) %>
+            <% else %>
+              <span class="observ-text--muted">In Progress</span>
+            <% end %>
+          </dd>
+        </div>
+        <% if @observation.status_message %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">Status</dt>
+            <dd class="observ-definition-list__definition"><%= @observation.status_message %></dd>
+          </div>
+        <% end %>
+      </dl>
+    </div>
+  </section>
+
+  <% if @observation.input.present? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Input</h2>
+      </header>
+      <div class="observ-card__body">
+        <pre class="observ-code-block"><%= @observation.input %></pre>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.output.present? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Output</h2>
+      </header>
+      <div class="observ-card__body">
+        <pre class="observ-code-block"><%= @observation.output %></pre>
+      </div>
+    </section>
+  <% end %>
+
+  <% if @observation.metadata.present? && @observation.metadata.any? %>
+    <section class="observ-card">
+      <header class="observ-card__header">
+        <h2 class="observ-card__title">Metadata</h2>
+      </header>
+      <div class="observ-card__body">
+        <%= render_json_viewer(@observation.metadata) %>
+      </div>
+    </section>
+  <% end %>
+</div>

data/app/views/observ/prompts/_diff_content.html.erb

@@ -0,0 +1,16 @@
+<%# Simple line-by-line diff highlighting %>
+<%
+  lines = content.split("\n")
+  removed = diff[:removed] || []
+  added = diff[:added] || []
+%>
+
+<% lines.each do |line| %>
+  <% if side == :from && removed.include?(line) %>
+    <div style="background-color: #fee2e2; color: #991b1b; margin: 0 -1rem; padding: 0 1rem;"><%= line.presence || " " %></div>
+  <% elsif side == :to && added.include?(line) %>
+    <div style="background-color: #dcfce7; color: #166534; margin: 0 -1rem; padding: 0 1rem;"><%= line.presence || " " %></div>
+  <% else %>
+    <div><%= line.presence || " " %></div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,111 @@
+<%= form_with model: prompt, scope: :observ_prompt, url: prompt.persisted? ? prompt_path(prompt.name) : prompts_path,
+  method: prompt.persisted? ? :patch : :post do |f| %>
+
+  <% if prompt.errors.any? %>
+    <div class="observ-card" style="margin-bottom: 1.5rem; border-left: 4px solid #dc2626;">
+      <div class="observ-card__body">
+        <h3 style="color: #dc2626; font-weight: 500; margin: 0 0 0.5rem;">
+          <%= pluralize(prompt.errors.count, "error") %> prohibited this prompt from being saved:
+        </h3>
+        <ul style="list-style: disc; padding-left: 1.5rem; color: #dc2626; font-size: 0.875rem; margin: 0;">
+          <% prompt.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="observ-card">
+    <div class="observ-card__body">
+      <!-- Prompt Name -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :name, "Prompt Name", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_field :name,
+          disabled: prompt.persisted?,
+          placeholder: "e.g., research-agent-system-prompt",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; #{prompt.persisted? ? 'background-color: #f3f4f6;' : ''}" %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          <% if prompt.persisted? %>
+            Name cannot be changed. Create a new prompt to use a different name.
+          <% else %>
+            Use kebab-case. This will be used to identify the prompt (e.g., "my-agent-system-prompt")
+          <% end %>
+        </p>
+      </div>
+
+      <!-- Commit Message -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :commit_message, "Commit Message", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :commit_message,
+          rows: 2,
+          placeholder: "Describe what changed in this version...",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: inherit;" %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Optional but recommended for tracking changes
+        </p>
+      </div>
+
+      <!-- Prompt Content -->
+      <div style="margin-bottom: 1.5rem;" data-controller="observ--prompt-variables">
+        <%= f.label :prompt, "Prompt Content", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :prompt,
+          rows: 15,
+          placeholder: "Enter your prompt here...\n\nUse {{variable_name}} for dynamic variables.",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;",
+          data: { 
+            observ__prompt_variables_target: "input",
+            action: "input->observ--prompt-variables#detectVariables"
+          } %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Use <code style="background-color: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem;">{{variable_name}}</code> syntax for variables
+        </p>
+
+        <!-- Variable Preview -->
+        <div data-observ--prompt-variables-target="preview" style="margin-top: 0.75rem; padding: 0.75rem; background-color: #eff6ff; border-radius: 0.375rem; display: none;">
+          <p style="font-size: 0.875rem; font-weight: 500; color: #1e40af; margin: 0 0 0.5rem;">Detected Variables:</p>
+          <div data-observ--prompt-variables-target="list" style="display: flex; flex-wrap: wrap; gap: 0.5rem;"></div>
+        </div>
+      </div>
+
+      <!-- Configuration (JSON) -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :config, "Configuration (JSON)", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :config,
+          value: prompt.config.present? ? JSON.pretty_generate(prompt.config) : "",
+          rows: 8,
+          placeholder: '{\n  "model": "gpt-4o",\n  "temperature": 0.7,\n  "max_tokens": 2000\n}',
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;",
+          data: { controller: "json-editor" } %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Optional JSON configuration for model parameters and metadata
+        </p>
+      </div>
+
+      <!-- Actions -->
+      <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
+        <div>
+          <% unless prompt.persisted? %>
+            <label style="display: flex; align-items: center;">
+              <%= f.check_box :promote_to_production, style: "margin-right: 0.5rem;" %>
+              <span style="font-size: 0.875rem; color: #374151;">
+                Promote to production immediately
+              </span>
+            </label>
+            <p style="margin-left: 1.5rem; font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">
+              If unchecked, prompt will be saved as draft
+            </p>
+          <% end %>
+        </div>
+
+        <div style="display: flex; gap: 0.75rem;">
+          <%= link_to "Cancel",
+            prompt.persisted? ? prompt_path(prompt.name) : prompts_path,
+            class: "observ-button" %>
+          <%= f.submit prompt.persisted? ? "Update Draft" : "Create Prompt",
+            class: "observ-button observ-button--primary" %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/observ/prompts/_new_form.html.erb

@@ -0,0 +1,102 @@
+<%= form_with model: form, url: prompts_path, method: :post do |f| %>
+
+  <% if form.errors.any? %>
+    <div class="observ-card" style="margin-bottom: 1.5rem; border-left: 4px solid #dc2626;">
+      <div class="observ-card__body">
+        <h3 style="color: #dc2626; font-weight: 500; margin: 0 0 0.5rem;">
+          <%= pluralize(form.errors.count, "error") %> prohibited this prompt from being saved:
+        </h3>
+        <ul style="list-style: disc; padding-left: 1.5rem; color: #dc2626; font-size: 0.875rem; margin: 0;">
+          <% form.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="observ-card">
+    <div class="observ-card__body">
+      <!-- Prompt Name -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :name, "Prompt Name", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_field :name,
+          placeholder: "e.g., research-agent-system-prompt",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Use kebab-case. This will be used to identify the prompt (e.g., "my-agent-system-prompt")
+        </p>
+      </div>
+
+      <!-- Commit Message -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :commit_message, "Commit Message", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :commit_message,
+          rows: 2,
+          placeholder: "Describe what changed in this version...",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: inherit;" %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Optional but recommended for tracking changes
+        </p>
+      </div>
+
+      <!-- Prompt Content -->
+      <div style="margin-bottom: 1.5rem;" data-controller="observ--prompt-variables">
+        <%= f.label :prompt, "Prompt Content", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :prompt,
+          rows: 15,
+          placeholder: "Enter your prompt here...\n\nUse {{variable_name}} for dynamic variables.",
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;",
+          data: { 
+            observ__prompt_variables_target: "input",
+            action: "input->observ--prompt-variables#detectVariables"
+          } %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Use <code style="background-color: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem;">{{variable_name}}</code> syntax for variables
+        </p>
+
+        <!-- Variable Preview -->
+        <div data-observ--prompt-variables-target="preview" style="margin-top: 0.75rem; padding: 0.75rem; background-color: #eff6ff; border-radius: 0.375rem; display: none;">
+          <p style="font-size: 0.875rem; font-weight: 500; color: #1e40af; margin: 0 0 0.5rem;">Detected Variables:</p>
+          <div data-observ--prompt-variables-target="list" style="display: flex; flex-wrap: wrap; gap: 0.5rem;"></div>
+        </div>
+      </div>
+
+      <!-- Configuration (JSON) -->
+      <div style="margin-bottom: 1.5rem;">
+        <%= f.label :config, "Configuration (JSON)", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+        <%= f.text_area :config,
+          rows: 8,
+          placeholder: '{\n  "model": "gpt-4o",\n  "temperature": 0.7,\n  "max_tokens": 2000\n}',
+          style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem;",
+          data: { controller: "json-editor" } %>
+        <p style="margin-top: 0.25rem; font-size: 0.875rem; color: #6b7280;">
+          Optional JSON configuration for model parameters and metadata
+        </p>
+      </div>
+
+      <!-- Hidden field for from_version -->
+      <%= f.hidden_field :from_version %>
+
+      <!-- Actions -->
+      <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;">
+        <div>
+          <label style="display: flex; align-items: center;">
+            <%= f.check_box :promote_to_production, style: "margin-right: 0.5rem;" %>
+            <span style="font-size: 0.875rem; color: #374151;">
+              Promote to production immediately
+            </span>
+          </label>
+          <p style="margin-left: 1.5rem; font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">
+            If unchecked, prompt will be saved as draft
+          </p>
+        </div>
+
+        <div style="display: flex; gap: 0.75rem;">
+          <%= link_to "Cancel", prompts_path, class: "observ-button" %>
+          <%= f.submit "Create Prompt", class: "observ-button observ-button--primary" %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/observ/prompts/_prompt_actions.html.erb

@@ -0,0 +1,4 @@
+<div class="prompt-actions">
+  <%= link_to "New Version", new_prompt_path(name: prompt.name, from_version: prompt.version), class: "observ-button observ-button--secondary" %>
+  <%= link_to "View History", versions_prompt_path(prompt.name), class: "observ-button" %>
+</div>

data/app/views/observ/prompts/_prompt_content_highlighted.html.erb

@@ -0,0 +1,4 @@
+<%# Highlight {{variables}} in prompt content with proper HTML escaping %>
+<%= ERB::Util.html_escape(content).gsub(/(\{\{[^}]+\}\})/) { |match|
+  "<span style='color: #2563eb; font-weight: 600;'>#{match}</span>"
+}.html_safe %>

data/app/views/observ/prompts/_version_actions.html.erb

@@ -0,0 +1,40 @@
+<div class="prompt-actions">
+  <% if prompt.draft? %>
+    <%= link_to "Edit", edit_prompt_path(prompt.name, version: prompt.version), 
+        class: "observ-button observ-button--sm observ-button--primary",
+        data: { turbo_frame: "_top" } %>
+    <%= button_to "Promote to Production",
+      promote_prompt_version_path(prompt.name, prompt),
+      method: :post,
+      form: { data: { turbo_confirm: "Promote this version to production?", turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm observ-button--success" %>
+    <%= button_to "Delete", prompt_path(prompt.name, version: prompt.version),
+      method: :delete,
+      form: { data: { turbo_confirm: "Delete this draft version?", turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm observ-button--danger" %>
+
+  <% elsif prompt.production? %>
+    <%= button_to "Clone to Draft",
+      clone_prompt_version_path(prompt.name, prompt),
+      method: :post,
+      form: { data: { turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm observ-button--secondary" %>
+    <%= button_to "Demote to Archived",
+      demote_prompt_version_path(prompt.name, prompt),
+      method: :post,
+      form: { data: { turbo_confirm: "Demote this production version?", turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm" %>
+
+  <% elsif prompt.archived? %>
+    <%= button_to "Clone to Draft",
+      clone_prompt_version_path(prompt.name, prompt),
+      method: :post,
+      form: { data: { turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm observ-button--secondary" %>
+    <%= button_to "Restore to Production",
+      restore_prompt_version_path(prompt.name, prompt),
+      method: :post,
+      form: { data: { turbo_confirm: "Restore this version to production?", turbo_frame: "_top" } },
+      class: "observ-button observ-button--sm observ-button--success" %>
+  <% end %>
+</div>