prompt_engine 1.0.0

data/app/views/prompt_engine/playground_run_results/index.html.erb

@@ -0,0 +1,99 @@
+<div class="admin-header">
+  <div>
+    <h1>Test Run History</h1>
+    <% if @prompt %>
+      <p class="text-muted">All test runs for <%= @prompt.name %></p>
+    <% elsif @prompt_version %>
+      <p class="text-muted">Test runs for <%= @prompt_version.prompt.name %> - Version <%= @prompt_version.version_number %></p>
+    <% else %>
+      <p class="text-muted">All test runs across all prompts</p>
+    <% end %>
+  </div>
+  
+  <div class="btn-group">
+    <% if @prompt %>
+      <%= link_to "Back to Prompt", prompt_path(@prompt), class: "btn btn--secondary btn--medium" %>
+      <%= link_to "Test Prompt", playground_prompt_path(@prompt), class: "btn btn--primary btn--medium" %>
+    <% elsif @prompt_version %>
+      <%= link_to "Back to Version", prompt_version_path(@prompt_version.prompt, @prompt_version), class: "btn btn--secondary btn--medium" %>
+    <% else %>
+      <%= link_to "All Prompts", prompts_path, class: "btn btn--secondary btn--medium" %>
+    <% end %>
+  </div>
+</div>
+
+<div class="table-container">
+  <% if @playground_run_results.any? %>
+    <table class="table">
+        <thead>
+          <tr class="table__row">
+            <th class="table__cell table__cell--header">Prompt</th>
+            <th class="table__cell table__cell--header">Run Date</th>
+            <th class="table__cell table__cell--header">Version</th>
+            <th class="table__cell table__cell--header">Provider</th>
+            <th class="table__cell table__cell--header table__cell--hide-mobile">Model</th>
+            <th class="table__cell table__cell--header">Execution Time</th>
+            <th class="table__cell table__cell--header">Tokens</th>
+            <th class="table__cell table__cell--header table__cell--actions">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% @playground_run_results.each do |result| %>
+            <tr class="table__row">
+              <td class="table__cell">
+                <%= link_to result.prompt_version.prompt.name, prompt_path(result.prompt_version.prompt), class: "table__action" %>
+              </td>
+              <td class="table__cell">
+                <div class="table__primary">
+                  <%= result.created_at.strftime("%b %d, %Y") %>
+                </div>
+                <div class="table__secondary">
+                  <%= result.created_at.strftime("%I:%M %p") %>
+                </div>
+              </td>
+              <td class="table__cell">
+                <span class="table__badge table__badge--info">v<%= result.prompt_version.version_number %></span>
+              </td>
+              <td class="table__cell">
+                <span class="table__badge table__badge--<%= result.provider == 'anthropic' ? 'warning' : 'success' %>">
+                  <%= result.provider %>
+                </span>
+              </td>
+              <td class="table__cell table__cell--hide-mobile">
+                <span class="table__secondary"><%= result.model %></span>
+              </td>
+              <td class="table__cell">
+                <div class="table__metric">
+                  <span class="table__metric-value"><%= result.execution_time %></span>
+                  <span class="table__metric-unit">s</span>
+                </div>
+              </td>
+              <td class="table__cell">
+                <% if result.token_count %>
+                  <div class="table__metric">
+                    <span class="table__metric-value"><%= result.token_count %></span>
+                    <span class="table__metric-unit">tokens</span>
+                  </div>
+                <% else %>
+                  <span class="table__secondary">—</span>
+                <% end %>
+              </td>
+              <td class="table__cell table__cell--actions">
+                <%= link_to "View Details", playground_run_result_path(result), class: "table__action" %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+  <% else %>
+    <div class="table__empty">
+      <div class="table__empty-title">No test runs yet</div>
+      <% if @prompt %>
+        <p class="table__empty-text">Start testing your prompt to see results here.</p>
+        <%= link_to "Test this prompt", playground_prompt_path(@prompt), class: "btn btn--primary btn--medium" %>
+      <% else %>
+        <p class="table__empty-text">Test runs will appear here once you start testing prompts.</p>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/prompt_engine/playground_run_results/show.html.erb

@@ -0,0 +1,123 @@
+<div class="admin-header">
+  <div>
+    <h1>Test Run Details</h1>
+    <p class="text-muted"><%= @playground_run_result.created_at.strftime("%B %d, %Y at %I:%M %p") %></p>
+  </div>
+  
+  <div class="btn-group">
+    <%= link_to "Back to Test Runs", prompt_playground_run_results_path(@playground_run_result.prompt_version.prompt), class: "btn btn--secondary btn--medium" %>
+    <%= link_to "View Prompt", prompt_path(@playground_run_result.prompt_version.prompt), class: "btn btn--secondary btn--medium" %>
+  </div>
+</div>
+
+<div class="prompt-details">
+  <div class="card mb-lg">
+    <div class="card__header">
+      <h3 class="card__title">Run Information</h3>
+    </div>
+    <div class="card__body">
+      <div class="detail-grid">
+        <div class="detail-item">
+          <label class="detail-label">Prompt</label>
+          <div class="detail-value">
+            <%= link_to @playground_run_result.prompt_version.prompt.name, prompt_path(@playground_run_result.prompt_version.prompt), class: "link" %>
+          </div>
+        </div>
+        
+        <div class="detail-item">
+          <label class="detail-label">Version</label>
+          <div class="detail-value">
+            <%= link_to "Version #{@playground_run_result.prompt_version.version_number}", prompt_version_path(@playground_run_result.prompt_version.prompt, @playground_run_result.prompt_version), class: "link" %>
+          </div>
+        </div>
+        
+        <div class="detail-item">
+          <label class="detail-label">Provider</label>
+          <div class="detail-value">
+            <span class="table__badge table__badge--info"><%= @playground_run_result.provider %></span>
+          </div>
+        </div>
+        
+        <div class="detail-item">
+          <label class="detail-label">Model</label>
+          <div class="detail-value"><%= @playground_run_result.model %></div>
+        </div>
+        
+        <div class="detail-item">
+          <label class="detail-label">Execution Time</label>
+          <div class="detail-value"><%= @playground_run_result.execution_time %>s</div>
+        </div>
+        
+        <div class="detail-item">
+          <label class="detail-label">Token Count</label>
+          <div class="detail-value"><%= @playground_run_result.token_count || "Not available" %></div>
+        </div>
+        
+        <% if @playground_run_result.temperature.present? %>
+          <div class="detail-item">
+            <label class="detail-label">Temperature</label>
+            <div class="detail-value"><%= @playground_run_result.temperature %></div>
+          </div>
+        <% end %>
+        
+        <% if @playground_run_result.max_tokens.present? %>
+          <div class="detail-item">
+            <label class="detail-label">Max Tokens</label>
+            <div class="detail-value"><%= @playground_run_result.max_tokens %></div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <% if @playground_run_result.parameters.present? && @playground_run_result.parameters.any? %>
+    <div class="card mb-lg">
+      <div class="card__header">
+        <h3 class="card__title">Parameters Used</h3>
+      </div>
+      <div class="card__body">
+        <div class="parameters-table">
+          <% @playground_run_result.parameters.each do |key, value| %>
+            <div class="parameter-row">
+              <div class="parameter-name"><%= key %></div>
+              <div class="parameter-value"><%= value %></div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <% if @playground_run_result.system_message.present? %>
+    <div class="card mb-lg">
+      <div class="card__header">
+        <h3 class="card__title">System Message</h3>
+      </div>
+      <div class="card__body">
+        <pre class="prompt-content"><%= @playground_run_result.system_message %></pre>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="card mb-lg">
+    <div class="card__header">
+      <h3 class="card__title">Rendered Prompt</h3>
+    </div>
+    <div class="card__body">
+      <pre class="prompt-content"><%= @playground_run_result.rendered_prompt %></pre>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card__header">
+      <h3 class="card__title">AI Response</h3>
+    </div>
+    <div class="card__body">
+      <pre class="prompt-content"><%= @playground_run_result.response %></pre>
+    </div>
+  </div>
+</div>
+
+<div class="form__actions mt-lg">
+  <%= link_to "Back to Test Runs", prompt_playground_run_results_path(@playground_run_result.prompt_version.prompt), class: "btn btn--secondary btn--medium" %>
+</div>

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

@@ -0,0 +1,224 @@
+<%= form_with(model: prompt, local: true, html: { class: "form" }) do |form| %>
+  <% if prompt.errors.any? %>
+    <div class="form__errors">
+      <h3 class="text-danger">Please fix the following errors:</h3>
+      <ul>
+        <% prompt.errors.full_messages.each do |message| %>
+          <li class="text-danger text-sm"><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="form__group">
+    <%= form.label :name, class: "form__label form__label--required" %>
+    <%= form.text_field :name, class: "form__input", required: true, 
+        placeholder: "e.g., Customer Support Response" %>
+    <div class="form__help">A descriptive name for this prompt</div>
+  </div>
+
+  <div class="form__group">
+    <%= form.label :description, class: "form__label" %>
+    <%= form.text_area :description, class: "form__textarea", rows: 2,
+        placeholder: "Brief description of what this prompt does" %>
+  </div>
+
+  <div class="form__group">
+    <%= form.label :system_message, "System Message", class: "form__label" %>
+    <%= form.text_area :system_message, class: "form__textarea", rows: 4,
+        placeholder: "Instructions for the AI system (optional)" %>
+    <div class="form__help">Sets the behavior and context for the AI</div>
+  </div>
+
+  <div class="form__group">
+    <%= form.label :content, "Prompt Content", class: "form__label form__label--required" %>
+    <%= form.text_area :content, class: "form__textarea", rows: 6, required: true,
+        placeholder: "The main prompt content that will be sent to the AI",
+        data: { action: "input->variable-detector#detectVariables" } %>
+    <div class="form__help">The main prompt template. Use {{variable_name}} syntax for variables.</div>
+  </div>
+
+  <div id="parameters-section" class="parameters-section" style="display: none;">
+    <h3 class="form__section-title">Parameters</h3>
+    <div class="form__help mb-md">Configure the parameters detected in your prompt:</div>
+    
+    <div id="parameters-list" class="parameters-list">
+      <!-- Parameters will be dynamically inserted here -->
+    </div>
+    
+    <%= form.fields_for :parameters do |parameter_form| %>
+      <div class="parameter-fields" style="display: none;">
+        <%= parameter_form.hidden_field :id %>
+        <%= parameter_form.hidden_field :_destroy %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="form__inline">
+    <div class="form__group">
+      <%= form.label :model, "AI Model", class: "form__label" %>
+      <%= form.select :model, 
+          options_for_select([
+            ["GPT-4", "gpt-4"],
+            ["GPT-4 Turbo", "gpt-4-turbo-preview"],
+            ["GPT-3.5 Turbo", "gpt-3.5-turbo"],
+            ["Claude 3 Opus", "claude-3-opus"],
+            ["Claude 3 Sonnet", "claude-3-sonnet"],
+            ["Claude 3 Haiku", "claude-3-haiku"]
+          ], prompt.model),
+          { include_blank: "Select a model" },
+          class: "form__select" %>
+    </div>
+
+    <div class="form__group">
+      <%= form.label :temperature, class: "form__label" %>
+      <%= form.number_field :temperature, class: "form__input", 
+          step: 0.1, min: 0, max: 2, placeholder: "0.7" %>
+      <div class="form__help">0-2 (default: 0.7)</div>
+    </div>
+
+    <div class="form__group">
+      <%= form.label :max_tokens, "Max Tokens", class: "form__label" %>
+      <%= form.number_field :max_tokens, class: "form__input", 
+          min: 1, placeholder: "500" %>
+      <div class="form__help">Maximum response length</div>
+    </div>
+  </div>
+
+  <div class="form__group">
+    <%= form.label :status, class: "form__label" %>
+    <%= form.select :status, 
+        options_for_select([
+          ["Draft", "draft"],
+          ["Active", "active"],
+          ["Archived", "archived"]
+        ], prompt.status),
+        {},
+        class: "form__select" %>
+  </div>
+
+  <div class="form__actions">
+    <%= link_to "Cancel", prompts_path, class: "btn btn--secondary btn--medium" %>
+    <%= form.submit prompt.new_record? ? "Create Prompt" : "Update Prompt", 
+        class: "btn btn--primary btn--medium" %>
+  </div>
+<% end %>
+
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const contentField = document.querySelector('[data-action="input->variable-detector#detectVariables"]');
+  const parametersSection = document.getElementById('parameters-section');
+  const parametersList = document.getElementById('parameters-list');
+  
+  // Store existing parameters data (for edit form)
+  const existingParameters = <%= raw((prompt.persisted? ? prompt.parameters : []).map { |p| {
+    name: p.name,
+    description: p.description,
+    parameter_type: p.parameter_type,
+    required: p.required,
+    default_value: p.default_value,
+    id: p.id
+  }}.to_json) %>;
+  
+  function detectVariables() {
+    const content = contentField.value;
+    const variablePattern = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
+    const matches = [...content.matchAll(variablePattern)];
+    const uniqueVariables = [...new Set(matches.map(match => match[1]))];
+    
+    if (uniqueVariables.length > 0) {
+      parametersSection.style.display = 'block';
+      updateParametersDisplay(uniqueVariables);
+    } else {
+      parametersSection.style.display = 'none';
+    }
+  }
+  
+  function updateParametersDisplay(variables) {
+    parametersList.innerHTML = '';
+    
+    // Add fields for parameters that should be kept
+    variables.forEach((variable, index) => {
+      const existingParam = existingParameters.find(p => p.name === variable);
+      const parameterItem = createParameterItem(variable, index, existingParam);
+      parametersList.appendChild(parameterItem);
+    });
+    
+    // Add hidden fields to destroy parameters that are no longer in content
+    let destroyIndex = variables.length;
+    existingParameters.forEach(param => {
+      if (!variables.includes(param.name)) {
+        const destroyField = document.createElement('div');
+        destroyField.style.display = 'none';
+        destroyField.innerHTML = `
+          <input type="hidden" name="prompt[parameters_attributes][${destroyIndex}][id]" value="${param.id}">
+          <input type="hidden" name="prompt[parameters_attributes][${destroyIndex}][_destroy]" value="1">
+        `;
+        parametersList.appendChild(destroyField);
+        destroyIndex++;
+      }
+    });
+  }
+  
+  function createParameterItem(variableName, index, existingData) {
+    const div = document.createElement('div');
+    div.className = 'parameter-item';
+    div.innerHTML = `
+      <div class="parameter-field">
+        <label>Name</label>
+        <span class="parameter-name">${variableName}</span>
+        <input type="hidden" name="prompt[parameters_attributes][${index}][name]" value="${variableName}">
+        ${existingData ? `<input type="hidden" name="prompt[parameters_attributes][${index}][id]" value="${existingData.id}">` : ''}
+      </div>
+      
+      <div class="parameter-field">
+        <label>Type</label>
+        <select name="prompt[parameters_attributes][${index}][parameter_type]" class="form__select form__select--small">
+          <option value="string" ${existingData?.parameter_type === 'string' ? 'selected' : ''}>String</option>
+          <option value="number" ${existingData?.parameter_type === 'number' ? 'selected' : ''}>Number</option>
+          <option value="boolean" ${existingData?.parameter_type === 'boolean' ? 'selected' : ''}>Boolean</option>
+          <option value="array" ${existingData?.parameter_type === 'array' ? 'selected' : ''}>Array</option>
+          <option value="object" ${existingData?.parameter_type === 'object' ? 'selected' : ''}>Object</option>
+        </select>
+      </div>
+      
+      <div class="parameter-field">
+        <label>Required</label>
+        <div class="parameter-checkbox">
+          <input type="hidden" name="prompt[parameters_attributes][${index}][required]" value="0">
+          <input type="checkbox" 
+                 name="prompt[parameters_attributes][${index}][required]" 
+                 value="1"
+                 ${existingData?.required !== false ? 'checked' : ''}>
+        </div>
+      </div>
+      
+      <div class="parameter-field">
+        <label>Default Value</label>
+        <input type="text" 
+               name="prompt[parameters_attributes][${index}][default_value]" 
+               class="form__input form__input--small"
+               placeholder="Optional"
+               value="${existingData?.default_value || ''}">
+      </div>
+      
+      <div class="parameter-field">
+        <label>Description</label>
+        <input type="text" 
+               name="prompt[parameters_attributes][${index}][description]" 
+               class="form__input form__input--small"
+               placeholder="Optional"
+               value="${existingData?.description || ''}">
+      </div>
+    `;
+    return div;
+  }
+  
+  if (contentField) {
+    contentField.addEventListener('input', detectVariables);
+    // Detect variables on page load
+    detectVariables();
+  }
+});
+</script>

data/app/views/prompt_engine/prompts/edit.html.erb

@@ -0,0 +1,9 @@
+<div class="admin-header">
+  <h1>Edit Prompt</h1>
+</div>
+
+<div class="card">
+  <div class="card__body">
+    <%= render "form", prompt: @prompt %>
+  </div>
+</div>

data/app/views/prompt_engine/prompts/index.html.erb

@@ -0,0 +1,80 @@
+<div class="admin-header">
+  <h1>Prompts</h1>
+  <%= link_to "New Prompt", new_prompt_path, class: "btn btn--primary btn--medium" %>
+</div>
+
+<div class="table-container">
+  <% if @prompts.any? %>
+    <table class="table">
+      <thead>
+        <tr class="table__row">
+          <th class="table__cell table__cell--header">Name</th>
+          <th class="table__cell table__cell--header table__cell--hide-mobile">Model</th>
+          <th class="table__cell table__cell--header table__cell--center">Version</th>
+          <th class="table__cell table__cell--header table__cell--center">Status</th>
+          <th class="table__cell table__cell--header table__cell--hide-mobile">Created</th>
+          <th class="table__cell table__cell--header table__cell--actions">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @prompts.each do |prompt| %>
+          <tr class="table__row">
+            <td class="table__cell">
+              <%= link_to prompt.name, prompt_path(prompt) %>
+              <% if prompt.description.present? %>
+                <div class="text-sm text-muted"><%= truncate(prompt.description, length: 60) %></div>
+              <% end %>
+            </td>
+            <td class="table__cell table__cell--hide-mobile">
+              <%= prompt.model || "Not set" %>
+            </td>
+            <td class="table__cell table__cell--center">
+              <% if prompt.current_version %>
+                <%= link_to "v#{prompt.current_version.version_number}", 
+                    prompt_versions_path(prompt), 
+                    class: "text-link" %>
+              <% else %>
+                <span class="text-muted">v1</span>
+              <% end %>
+            </td>
+            <td class="table__cell table__cell--center">
+              <span class="table__badge table__badge--<%= prompt.status %>">
+                <%= prompt.status %>
+              </span>
+            </td>
+            <td class="table__cell table__cell--hide-mobile text-muted">
+              <%= prompt.created_at.strftime("%b %d, %Y") %>
+            </td>
+            <td class="table__cell table__cell--actions">
+              <div class="btn-group">
+                <%= link_to "Edit", edit_prompt_path(prompt), class: "btn btn--secondary btn--small" %>
+                <%= button_to "Delete", prompt_path(prompt), method: :delete, 
+                    data: { confirm: "Are you sure you want to delete this prompt?" },
+                    class: "btn btn--danger btn--small" %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <div class="table__empty">
+      <div class="table__empty-title">No prompts yet</div>
+      <p class="table__empty-text">Get started by creating your first prompt.</p>
+      <%= link_to "Create First Prompt", new_prompt_path, class: "btn btn--primary btn--medium" %>
+    </div>
+  <% end %>
+</div>
+
+<style>
+  .admin-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xl);
+  }
+  
+  .admin-header h1 {
+    margin: 0;
+  }
+</style>

data/app/views/prompt_engine/prompts/new.html.erb

@@ -0,0 +1,9 @@
+<div class="admin-header">
+  <h1>New Prompt</h1>
+</div>
+
+<div class="card">
+  <div class="card__body">
+    <%= render "form", prompt: @prompt %>
+  </div>
+</div>