rubyllm-observ 0.5.0

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

@@ -0,0 +1,155 @@
+<% content_for :title, "Compare Versions" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Prompt", prompt_path(@prompt_name), style: "display: inline-block; margin-bottom: 0.5rem; color: #2563eb;" %>
+      <h1 class="observ-page-header__title">Compare Versions</h1>
+      <p style="color: #6b7280; margin-top: 0.25rem;"><%= @prompt_name %></p>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <!-- Version Selector -->
+  <div class="observ-card" style="margin-bottom: 1.5rem;">
+    <div class="observ-card__body">
+      <%= form_with url: compare_prompt_path(@prompt_name), method: :get, style: "display: flex; gap: 1rem; align-items: flex-end;" do |f| %>
+
+        <div style="flex: 1;">
+          <%= f.label :from, "From Version", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+          <%= f.select :from,
+            options_for_select(
+              Observ::Prompt.where(name: @prompt_name).order(version: :desc).map { |v|
+                ["v#{v.version} (#{v.state})", v.version]
+              },
+              params[:from]
+            ),
+            {},
+            style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" %>
+        </div>
+
+        <div style="flex: 1;">
+          <%= f.label :to, "To Version", style: "display: block; margin-bottom: 0.5rem; font-weight: 500;" %>
+          <%= f.select :to,
+            options_for_select(
+              Observ::Prompt.where(name: @prompt_name).order(version: :desc).map { |v|
+                ["v#{v.version} (#{v.state})", v.version]
+              },
+              params[:to]
+            ),
+            {},
+            style: "width: 100%; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem;" %>
+        </div>
+
+        <%= f.submit "Compare", class: "observ-button observ-button--primary" %>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Metadata Comparison -->
+  <div class="observ-card" style="margin-bottom: 1.5rem;">
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #e5e7eb;">
+      <div style="padding: 1.5rem; border-right: 1px solid #e5e7eb;">
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
+          <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Version <%= @from_version.version %></h2>
+          <span class="observ-badge <%= case @from_version.state
+              when 'draft' then 'observ-badge--warning'
+              when 'production' then 'observ-badge--success'
+              when 'archived' then 'observ-badge--default'
+              end %>" style="font-size: 0.75rem;">
+            <%= @from_version.state %>
+          </span>
+        </div>
+
+        <dl style="display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+          <div>
+            <dt style="color: #6b7280;">Created</dt>
+            <dd style="font-weight: 500; margin-top: 0.125rem;"><%= @from_version.created_at.strftime("%b %d, %Y %I:%M %p") %></dd>
+          </div>
+          <div>
+            <dt style="color: #6b7280;">Created By</dt>
+            <dd style="font-weight: 500; margin-top: 0.125rem;"><%= @from_version.created_by || "system" %></dd>
+          </div>
+          <% if @from_version.commit_message.present? %>
+            <div>
+              <dt style="color: #6b7280;">Commit Message</dt>
+              <dd style="font-weight: 500; margin-top: 0.125rem; font-style: italic;">"<%= @from_version.commit_message %>"</dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+
+      <div style="padding: 1.5rem;">
+        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
+          <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Version <%= @to_version.version %></h2>
+          <span class="observ-badge <%= case @to_version.state
+              when 'draft' then 'observ-badge--warning'
+              when 'production' then 'observ-badge--success'
+              when 'archived' then 'observ-badge--default'
+              end %>" style="font-size: 0.75rem;">
+            <%= @to_version.state %>
+          </span>
+        </div>
+
+        <dl style="display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+          <div>
+            <dt style="color: #6b7280;">Created</dt>
+            <dd style="font-weight: 500; margin-top: 0.125rem;"><%= @to_version.created_at.strftime("%b %d, %Y %I:%M %p") %></dd>
+          </div>
+          <div>
+            <dt style="color: #6b7280;">Created By</dt>
+            <dd style="font-weight: 500; margin-top: 0.125rem;"><%= @to_version.created_by || "system" %></dd>
+          </div>
+          <% if @to_version.commit_message.present? %>
+            <div>
+              <dt style="color: #6b7280;">Commit Message</dt>
+              <dd style="font-weight: 500; margin-top: 0.125rem; font-style: italic;">"<%= @to_version.commit_message %>"</dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    </div>
+  </div>
+
+  <!-- Side-by-Side Diff -->
+  <div class="observ-card">
+    <div class="observ-card__header">
+      <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Prompt Content Comparison</h2>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #e5e7eb;">
+      <!-- Left: From Version -->
+      <div style="padding: 1.5rem; border-right: 1px solid #e5e7eb;">
+        <div style="background-color: #f9fafb; padding: 1rem; border-radius: 0.375rem; overflow-x: auto;">
+          <pre style="margin: 0; font-family: monospace; font-size: 0.875rem; white-space: pre-wrap;"><%= render "diff_content", content: @from_version.prompt, diff: @diff, side: :from %></pre>
+        </div>
+      </div>
+
+      <!-- Right: To Version -->
+      <div style="padding: 1.5rem;">
+        <div style="background-color: #f9fafb; padding: 1rem; border-radius: 0.375rem; overflow-x: auto;">
+          <pre style="margin: 0; font-family: monospace; font-size: 0.875rem; white-space: pre-wrap;"><%= render "diff_content", content: @to_version.prompt, diff: @diff, side: :to %></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Config Comparison -->
+  <% if @from_version.config.present? || @to_version.config.present? %>
+    <div class="observ-card" style="margin-top: 1.5rem;">
+      <div class="observ-card__header">
+        <h2 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Configuration Comparison</h2>
+      </div>
+
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #e5e7eb;">
+        <div style="padding: 1.5rem; border-right: 1px solid #e5e7eb;">
+          <pre style="background-color: #f9fafb; padding: 1rem; border-radius: 0.375rem; overflow-x: auto; font-size: 0.875rem; margin: 0;"><%= JSON.pretty_generate(@from_version.config) %></pre>
+        </div>
+        <div style="padding: 1.5rem;">
+          <pre style="background-color: #f9fafb; padding: 1rem; border-radius: 0.375rem; overflow-x: auto; font-size: 0.875rem; margin: 0;"><%= JSON.pretty_generate(@to_version.config) %></pre>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,17 @@
+<% content_for :title, "Edit Prompt Draft" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Prompt", prompt_path(@prompt.name), style: "display: inline-block; margin-bottom: 0.5rem; color: #2563eb;" %>
+      <h1 class="observ-page-header__title">Edit Prompt Draft</h1>
+      <p style="color: #6b7280; margin-top: 0.25rem;">
+        Editing <%= @prompt.name %> (v<%= @prompt.version %> - Draft)
+      </p>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container" style="max-width: 56rem; margin-left: auto; margin-right: auto;">
+  <%= render "form", prompt: @prompt %>
+</div>

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

@@ -0,0 +1,108 @@
+<% content_for :title, "Prompt Management" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <h1 class="observ-page-header__title">Prompt Management</h1>
+    <%= link_to "New Prompt", new_prompt_path, class: "observ-button observ-button--primary" %>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <!-- Search and Filters -->
+  <section class="observ-card observ-prompts-filters">
+    <div class="observ-card__body">
+      <%= form_with url: prompts_path, method: :get, class: "observ-prompts-filters__form" do |f| %>
+        <div class="observ-prompts-filters__field observ-prompts-filters__field--search">
+          <%= f.label :search, "Search prompts", class: "observ-prompts-filters__label" %>
+          <%= f.text_field :search,
+            value: params[:search],
+            placeholder: "Search by name...",
+            class: "observ-prompts-filters__input" %>
+        </div>
+
+        <div class="observ-prompts-filters__field observ-prompts-filters__field--state">
+          <%= f.label :state, "Filter by state", class: "observ-prompts-filters__label" %>
+          <%= f.select :state,
+            options_for_select(
+              [["All States", ""], ["Draft", "draft"], ["Production", "production"], ["Archived", "archived"]],
+              params[:state]
+            ),
+            {},
+            class: "observ-prompts-filters__select" %>
+        </div>
+
+        <div class="observ-prompts-filters__actions">
+          <%= f.submit "Filter", class: "observ-button observ-button--secondary" %>
+          <%= link_to "Clear", prompts_path, class: "observ-button" %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Prompts Table -->
+  <section class="observ-card">
+    <div class="observ-card__body">
+      <% if @prompt_data.any? %>
+        <table class="observ-table">
+          <thead class="observ-table__header">
+            <tr class="observ-table__row">
+              <th class="observ-table__cell">Name</th>
+              <th class="observ-table__cell observ-table__cell--numeric">Versions</th>
+              <th class="observ-table__cell">Production</th>
+              <th class="observ-table__cell">Latest</th>
+              <th class="observ-table__cell">Last Updated</th>
+              <th class="observ-table__cell observ-table__cell--actions"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @prompt_data.each do |data| %>
+              <tr class="observ-table__row">
+                <td class="observ-table__cell">
+                  <%= link_to data[:name], prompt_path(data[:name]), class: "observ-prompts-table__link" %>
+                </td>
+                <td class="observ-table__cell observ-table__cell--numeric">
+                  <%= data[:total_versions] %>
+                </td>
+                <td class="observ-table__cell">
+                  <% if data[:production_version] %>
+                    <span class="observ-badge observ-badge--success">
+                      v<%= data[:production_version] %>
+                    </span>
+                  <% else %>
+                    <span class="observ-text--muted">None</span>
+                  <% end %>
+                </td>
+                <td class="observ-table__cell">
+                  <span class="observ-badge <%= case data[:latest_state]
+                    when 'draft' then 'observ-badge--warning'
+                    when 'production' then 'observ-badge--success'
+                    when 'archived' then 'observ-badge--default'
+                    end %>">
+                    v<%= data[:latest_version] %> · <%= data[:latest_state] %>
+                  </span>
+                </td>
+                <td class="observ-table__cell">
+                  <%= time_ago_in_words(data[:last_updated]) %> ago
+                </td>
+                <td class="observ-table__cell observ-table__cell--actions">
+                  <div class="observ-prompts-table__action-group">
+                    <%= link_to "View", prompt_path(data[:name]), class: "observ-button observ-button--sm" %>
+                    <%= link_to "History", versions_prompt_path(data[:name]), class: "observ-button observ-button--sm" %>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      <% else %>
+        <div class="observ-card__empty">
+          <p class="observ-card__empty-text">No prompts found</p>
+          <%= link_to "Create your first prompt", new_prompt_path, class: "observ-button observ-button--primary" %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Pagination -->
+  <%= observ_pagination(@prompts) %>
+</div>

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

@@ -0,0 +1,17 @@
+<% content_for :title, "Create New Prompt" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Prompts", prompts_path, style: "display: inline-block; margin-bottom: 0.5rem; color: #2563eb;" %>
+      <h1 class="observ-page-header__title">Create New Prompt</h1>
+      <p style="color: #6b7280; margin-top: 0.25rem;">
+        Create a new prompt version. All new prompts start as drafts.
+      </p>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container" style="max-width: 56rem; margin-left: auto; margin-right: auto;">
+  <%= render "new_form", form: @form %>
+</div>

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

@@ -0,0 +1,138 @@
+<% content_for :title, @prompt.name %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Prompts", prompts_path, class: "prompt-page-header__back-link" %>
+      <h1 class="observ-page-header__title"><%= @prompt.name %></h1>
+      <p class="prompt-page-header__subtitle">
+        Currently viewing version <%= @prompt.version %>
+      </p>
+    </div>
+    <%= render "prompt_actions", prompt: @prompt %>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <div class="prompt-details">
+    <!-- Left Sidebar: Version List -->
+    <aside>
+      <div class="observ-card prompt-versions__sidebar">
+        <div class="prompt-versions__header">
+          <h2 class="prompt-versions__title">Versions</h2>
+        </div>
+        <div class="prompt-versions__list">
+            <% @all_versions.each do |version| %>
+              <%= link_to prompt_path(@prompt_name, version: version.version),
+                class: "prompt-versions__item #{version.id == @prompt.id ? 'prompt-versions__item--active' : ''}" do %>
+
+                <div class="prompt-versions__item-header">
+                  <span class="prompt-versions__version-number">v<%= version.version %></span>
+
+                  <span class="observ-badge <%= case version.state
+                      when 'draft' then 'observ-badge--warning'
+                      when 'production' then 'observ-badge--success'
+                      when 'archived' then 'observ-badge--default'
+                      end %>">
+                    <%= version.state %>
+                  </span>
+                </div>
+
+                <% if version.commit_message.present? %>
+                  <p class="prompt-versions__commit-message">
+                    <%= version.commit_message %>
+                  </p>
+                <% end %>
+
+                <p class="prompt-versions__timestamp">
+                  <%= time_ago_in_words(version.created_at) %> ago
+                </p>
+              <% end %>
+            <% end %>
+        </div>
+        <div class="prompt-versions__footer">
+          <%= link_to "Compare Versions",
+            compare_prompt_path(@prompt_name, from: @production_version&.version, to: @prompt.version),
+            class: "observ-button observ-button--sm" %>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Right Panel: Version Details -->
+    <div class="observ-card">
+        <div class="observ-card__header prompt-detail__header">
+          <!-- Badges and Actions Section -->
+          <div class="prompt-detail__header-section">
+            <div class="prompt-detail__badges-row">
+              <div class="prompt-detail__badges">
+                <span class="observ-badge <%= case @prompt.state
+                    when 'draft' then 'observ-badge--warning'
+                    when 'production' then 'observ-badge--success'
+                    when 'archived' then 'observ-badge--default'
+                    end %>">
+                  <%= @prompt.state.titleize %>
+                </span>
+                <% if @prompt.production? %>
+                  <span class="observ-badge observ-badge--info">
+                    Currently in Use
+                  </span>
+                <% end %>
+              </div>
+              <%= render "version_actions", prompt: @prompt %>
+            </div>
+          </div>
+
+          <!-- Metadata Section -->
+          <div class="prompt-detail__header-section">
+            <dl class="prompt-detail__metadata">
+              <div class="prompt-detail__metadata-item">
+                <dt class="prompt-detail__metadata-label">Version</dt>
+                <dd class="prompt-detail__metadata-value"><%= @prompt.version %></dd>
+              </div>
+              <div class="prompt-detail__metadata-item">
+                <dt class="prompt-detail__metadata-label">Created</dt>
+                <dd class="prompt-detail__metadata-value"><%= @prompt.created_at.strftime("%b %d, %Y at %I:%M %p") %></dd>
+              </div>
+              <div class="prompt-detail__metadata-item">
+                <dt class="prompt-detail__metadata-label">Created By</dt>
+                <dd class="prompt-detail__metadata-value"><%= @prompt.created_by || "system" %></dd>
+              </div>
+              <div class="prompt-detail__metadata-item">
+                <dt class="prompt-detail__metadata-label">Last Updated</dt>
+                <dd class="prompt-detail__metadata-value"><%= time_ago_in_words(@prompt.updated_at) %> ago</dd>
+              </div>
+            </dl>
+          </div>
+
+          <!-- Commit Message Section -->
+          <% if @prompt.commit_message.present? %>
+            <div class="prompt-detail__header-section">
+              <div class="prompt-detail__commit">
+                <p class="prompt-detail__commit-title">Commit Message:</p>
+                <p class="prompt-detail__commit-message"><%= @prompt.commit_message %></p>
+              </div>
+            </div>
+          <% end %>
+        </div>
+
+        <!-- Prompt Content -->
+        <div class="observ-card__body prompt-detail__body-section">
+          <h3 class="prompt-detail__section-title">Prompt Content</h3>
+          <div class="prompt-detail__content-block">
+            <pre><%= render "prompt_content_highlighted", content: @prompt.prompt %></pre>
+          </div>
+        </div>
+
+        <!-- Configuration -->
+        <div class="observ-card__body">
+          <h3 class="prompt-detail__section-title">Configuration</h3>
+          <% if @prompt.config.present? %>
+            <pre class="prompt-detail__config-block"><%= JSON.pretty_generate(@prompt.config) %></pre>
+          <% else %>
+            <p class="prompt-detail__no-config">No configuration specified</p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,87 @@
+<% content_for :title, "Version History" %>
+
+<% content_for :page_header do %>
+  <div class="observ-page-header__content">
+    <div>
+      <%= link_to "← Back to Prompt", prompt_path(@prompt_name), style: "display: inline-block; margin-bottom: 0.5rem; color: #2563eb;" %>
+      <h1 class="observ-page-header__title">Version History</h1>
+      <p style="color: #6b7280; margin-top: 0.25rem;"><%= @prompt_name %></p>
+    </div>
+  </div>
+<% end %>
+
+<div class="observ-container">
+  <!-- Timeline View -->
+  <div class="observ-card">
+    <div class="observ-card__body">
+      <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+        <% @versions.each_with_index do |version, index| %>
+          <div style="display: flex; gap: 1rem;">
+            <!-- Timeline Line -->
+            <div style="display: flex; flex-direction: column; align-items: center;">
+              <div style="width: 1rem; height: 1rem; border-radius: 50%; <%= case version.state
+                  when 'production' then 'background-color: #10b981;'
+                  when 'draft' then 'background-color: #f59e0b;'
+                  when 'archived' then 'background-color: #9ca3af;'
+                  end %>">
+              </div>
+              <% unless index == @versions.count - 1 %>
+                <div style="width: 2px; height: 100%; background-color: #d1d5db; flex: 1; margin: 0.25rem 0;"></div>
+              <% end %>
+            </div>
+
+            <!-- Version Card -->
+            <div style="flex: 1; padding-bottom: 1.5rem;">
+              <div style="border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; transition: box-shadow 0.2s;">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem;">
+                  <div style="flex: 1;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
+                      <h3 style="font-size: 1.125rem; font-weight: 600; margin: 0;">Version <%= version.version %></h3>
+                      <span class="observ-badge <%= case version.state
+                          when 'draft' then 'observ-badge--warning'
+                          when 'production' then 'observ-badge--success'
+                          when 'archived' then 'observ-badge--default'
+                          end %>" style="font-size: 0.75rem;">
+                        <%= version.state.titleize %>
+                      </span>
+                    </div>
+
+                    <p style="font-size: 0.875rem; color: #6b7280; margin: 0;">
+                      <%= version.created_at.strftime("%B %d, %Y at %I:%M %p") %>
+                      <% if version.created_by.present? %>
+                        by <span style="font-weight: 500;"><%= version.created_by %></span>
+                      <% end %>
+                    </p>
+
+                    <% if version.commit_message.present? %>
+                      <p style="font-size: 0.875rem; color: #374151; margin: 0.5rem 0 0; font-style: italic;">
+                        "<%= version.commit_message %>"
+                      </p>
+                    <% end %>
+                  </div>
+
+                  <div style="display: flex; gap: 0.5rem;">
+                    <%= link_to "View", prompt_path(@prompt_name, version: version.version), class: "observ-button observ-button--sm observ-button--secondary" %>
+
+                    <% if @production_version && version != @production_version %>
+                      <%= link_to "Compare with Production",
+                        compare_prompt_path(@prompt_name,
+                          from: @production_version.version,
+                          to: version.version),
+                        class: "observ-button observ-button--sm" %>
+                    <% end %>
+                  </div>
+                </div>
+
+                <!-- Preview -->
+                <div style="margin-top: 0.75rem; padding: 0.75rem; background-color: #f9fafb; border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                  <%= truncate(version.prompt, length: 200) %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/observ/sessions/annotations_drawer.turbo_stream.erb

@@ -0,0 +1,25 @@
+<%= turbo_stream.update "drawer-header-title" do %>
+  Session Annotations
+<% end %>
+
+<%= turbo_stream.update "drawer-content" do %>
+  <div class="observ-drawer__section">
+    <%= render "observ/annotations/form", annotatable: @session, annotation: @annotation %>
+  </div>
+
+  <div class="observ-drawer__section">
+    <h3 class="observ-drawer__section-title">
+      Annotations (<span id="annotations-count"><%= @annotations.count %></span>)
+    </h3>
+    
+    <div id="annotations-list" class="observ-annotations-list">
+      <% if @annotations.any? %>
+        <%= render partial: "observ/annotations/annotation", collection: @annotations, locals: { annotatable: @session } %>
+      <% else %>
+        <div id="annotations-empty-state" class="observ-empty-state">
+          <p class="observ-empty-state__text">No annotations yet</p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/observ/sessions/drawer_test.turbo_stream.erb

@@ -0,0 +1,49 @@
+<%= turbo_stream.update "drawer-header-title" do %>
+  Test Drawer - Session <%= truncate_id(@session.session_id, 12) %>
+<% end %>
+
+<%= turbo_stream.update "drawer-content" do %>
+  <div class="observ-card">
+    <header class="observ-card__header">
+      <h2 class="observ-card__title">Lorem Ipsum Content</h2>
+    </header>
+    <div class="observ-card__body">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      
+      <h3 style="margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600;">Session Details</h3>
+      <dl class="observ-definition-list">
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Session ID</dt>
+          <dd class="observ-definition-list__definition"><code class="observ-code observ-code--inline"><%= @session.session_id %></code></dd>
+        </div>
+        <div class="observ-definition-list__item">
+          <dt class="observ-definition-list__term">Started</dt>
+          <dd class="observ-definition-list__definition"><%= observ_timestamp(@session.start_time) %></dd>
+        </div>
+        <% if @session.end_time %>
+          <div class="observ-definition-list__item">
+            <dt class="observ-definition-list__term">Ended</dt>
+            <dd class="observ-definition-list__definition"><%= observ_timestamp(@session.end_time) %></dd>
+          </div>
+        <% end %>
+      </dl>
+
+      <p style="margin-top: 1.5rem;">
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+
+      <p style="margin-top: 1rem;">
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+      </p>
+
+      <div style="margin-top: 1.5rem;">
+        <%= link_to "View Full Session", session_path(@session), class: "observ-button observ-button--primary" %>
+      </div>
+    </div>
+  </div>
+<% end %>