rubyllm-observ 0.5.0

data/app/assets/stylesheets/observ/_prompts.scss

@@ -0,0 +1,365 @@
+@import 'variables';
+
+// Prompts Index Page - Filters
+.observ-prompts-filters {
+  margin-bottom: var(--spacing-lg, 1.5rem);
+
+  &__form {
+    display: flex;
+    gap: var(--spacing-md, 1rem);
+    align-items: flex-end;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+
+    &--search {
+      flex: 1;
+    }
+
+    &--state {
+      width: 12rem;
+    }
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: var(--spacing-xs, 0.5rem);
+    font-weight: 500;
+    color: $observ-gray-900;
+    font-size: $observ-font-size-sm;
+  }
+
+  &__input,
+  &__select {
+    width: 100%;
+    padding: var(--spacing-sm, 0.5rem);
+    border: 1px solid $observ-gray-300;
+    border-radius: $observ-border-radius-sm;
+    font-size: $observ-font-size-base;
+    color: $observ-gray-900;
+    transition: border-color 0.2s ease;
+
+    &:focus {
+      outline: none;
+      border-color: $observ-primary;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &::placeholder {
+      color: $observ-gray-400;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--spacing-sm, 0.5rem);
+  }
+}
+
+// Prompts Table - Link Styling
+.observ-prompts-table {
+  &__link {
+    font-weight: 500;
+    color: $observ-primary;
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: darken($observ-primary, 10%);
+      text-decoration: underline;
+    }
+  }
+
+  &__action-group {
+    display: flex;
+    gap: var(--spacing-sm, 0.5rem);
+  }
+}
+
+// Prompts Pagination
+.observ-prompts-pagination {
+  margin-top: var(--spacing-lg, 1.5rem);
+}
+
+// Empty State
+.observ-card__empty-text {
+  margin-bottom: var(--spacing-md, 1rem);
+}
+
+// Prompt Show Page - Version Details Layout
+.prompt-details {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: $observ-spacing-lg;
+
+  @media (max-width: $observ-breakpoint-md) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Prompt Versions Sidebar
+.prompt-versions {
+  &__sidebar {
+    position: sticky;
+    top: $observ-spacing-md;
+  }
+
+  &__header {
+    padding: $observ-spacing-lg;
+    border-bottom: 1px solid $observ-gray-200;
+  }
+
+  &__title {
+    font-size: $observ-font-size-lg;
+    font-weight: 600;
+    margin: 0;
+    color: $observ-gray-900;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  &__item {
+    display: block;
+    padding: 0.75rem $observ-spacing-md;
+    border-bottom: 1px solid $observ-gray-200;
+    text-decoration: none;
+    color: inherit;
+    transition: $observ-transition;
+
+    &:hover {
+      background-color: $observ-gray-50;
+    }
+
+    &--active {
+      background-color: #eff6ff;
+      border-left: 3px solid $observ-primary;
+    }
+  }
+
+  &__item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $observ-spacing-xs;
+  }
+
+  &__version-number {
+    font-weight: 500;
+    color: $observ-gray-900;
+  }
+
+  &__commit-message {
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-500;
+    margin: $observ-spacing-xs 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__timestamp {
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-400;
+    margin: $observ-spacing-xs 0 0;
+  }
+
+  &__footer {
+    padding: 0.75rem $observ-spacing-md;
+  }
+}
+
+// Prompt Details Panel
+.prompt-detail {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: $observ-spacing-md;
+  }
+
+  &__header-section {
+    width: 100%;
+    padding-bottom: $observ-spacing-md;
+    border-bottom: 1px solid $observ-gray-200;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+  }
+
+  &__badges-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__badges {
+    display: flex;
+    align-items: center;
+    gap: $observ-spacing-sm;
+  }
+
+  &__metadata {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $observ-spacing-lg;
+    font-size: $observ-font-size-sm;
+
+    @media (max-width: $observ-breakpoint-lg) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: $observ-breakpoint-sm) {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &__metadata-item {
+    display: flex;
+    flex-direction: column;
+    gap: $observ-spacing-xs;
+  }
+
+  &__metadata-label {
+    color: $observ-gray-500;
+    font-size: $observ-font-size-xs;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  &__metadata-value {
+    font-weight: 500;
+    color: $observ-gray-900;
+    margin: 0;
+  }
+
+  &__commit {
+    padding: 0.75rem;
+    background-color: $observ-gray-50;
+    border-radius: $observ-border-radius-sm;
+  }
+
+  &__commit-title {
+    font-size: $observ-font-size-sm;
+    font-weight: 600;
+    margin: 0 0 $observ-spacing-xs 0;
+    color: $observ-gray-900;
+  }
+
+  &__commit-message {
+    font-size: $observ-font-size-sm;
+    color: $observ-gray-700;
+    margin: 0;
+  }
+
+  &__section-title {
+    font-size: $observ-font-size-lg;
+    font-weight: 600;
+    margin: 0 0 0.75rem;
+    color: $observ-gray-900;
+  }
+
+  &__content-block {
+    background-color: $observ-gray-50;
+    padding: $observ-spacing-md;
+    border-radius: $observ-border-radius-sm;
+    overflow-x: auto;
+
+    pre {
+      margin: 0;
+      font-family: $observ-font-family-mono;
+      font-size: $observ-font-size-sm;
+      white-space: pre-wrap;
+    }
+  }
+
+  &__config-block {
+    background-color: $observ-gray-50;
+    padding: $observ-spacing-md;
+    border-radius: $observ-border-radius-sm;
+    overflow-x: auto;
+
+    pre {
+      font-size: $observ-font-size-sm;
+      margin: 0;
+    }
+  }
+
+  &__no-config {
+    color: $observ-gray-500;
+    font-size: $observ-font-size-sm;
+  }
+
+  &__body-section {
+    border-bottom: 1px solid $observ-gray-200;
+  }
+}
+
+// Page Header Customizations for Prompts
+.prompt-page-header {
+  &__back-link {
+    display: inline-block;
+    margin-bottom: $observ-spacing-sm;
+    color: $observ-primary;
+    text-decoration: none;
+    font-weight: 500;
+    transition: $observ-transition;
+
+    &:hover {
+      color: darken($observ-primary, 10%);
+    }
+  }
+
+  &__subtitle {
+    color: $observ-gray-500;
+    margin-top: $observ-spacing-xs;
+    font-size: $observ-font-size-sm;
+  }
+}
+
+// Badge modifier for "default" state
+.observ-badge--default {
+  background-color: $observ-gray-100;
+  color: $observ-gray-600;
+}
+
+// Prompt Actions Component
+.prompt-actions {
+  display: flex;
+  gap: $observ-spacing-sm;
+  align-items: center;
+
+  // Ensure button_to forms display inline and don't affect layout
+  form {
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  // Ensure all buttons (both links and actual buttons) have same height
+  .observ-button,
+  button.observ-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  // Reset button element defaults
+  button.observ-button {
+    border: 1px solid $observ-gray-300;
+    font-family: inherit;
+  }
+}

data/app/assets/stylesheets/observ/_table.scss

@@ -0,0 +1,53 @@
+@import 'variables';
+
+.observ-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: $observ-font-size-sm;
+
+  &__header {
+    background-color: $observ-gray-50;
+  }
+
+  &__row {
+    border-bottom: 1px solid $observ-gray-200;
+    transition: $observ-transition;
+
+    &:hover {
+      background-color: $observ-gray-50;
+    }
+  }
+
+  &__cell {
+    padding: $observ-spacing-md;
+    text-align: left;
+    color: $observ-gray-700;
+
+    &--numeric {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+
+    &--actions {
+      text-align: right;
+      width: 1%;
+      white-space: nowrap;
+    }
+
+    thead & {
+      font-weight: 600;
+      color: $observ-gray-900;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-size: $observ-font-size-xs;
+      padding-top: $observ-spacing-sm;
+      padding-bottom: $observ-spacing-sm;
+    }
+  }
+
+  &--compact {
+    .observ-table__cell {
+      padding: $observ-spacing-sm $observ-spacing-md;
+    }
+  }
+}

data/app/assets/stylesheets/observ/_variables.scss

@@ -0,0 +1,53 @@
+$observ-primary: #3b82f6;
+$observ-success: #10b981;
+$observ-warning: #f59e0b;
+$observ-danger: #ef4444;
+$observ-info: #06b6d4;
+
+$observ-gray-50: #f9fafb;
+$observ-gray-100: #f3f4f6;
+$observ-gray-200: #e5e7eb;
+$observ-gray-300: #d1d5db;
+$observ-gray-400: #9ca3af;
+$observ-gray-500: #6b7280;
+$observ-gray-600: #4b5563;
+$observ-gray-700: #374151;
+$observ-gray-800: #1f2937;
+$observ-gray-900: #111827;
+
+$observ-white: #ffffff;
+$observ-black: #000000;
+
+$observ-spacing-xs: 0.25rem;
+$observ-spacing-sm: 0.5rem;
+$observ-spacing-md: 1rem;
+$observ-spacing-lg: 1.5rem;
+$observ-spacing-xl: 2rem;
+$observ-spacing-2xl: 3rem;
+
+$observ-border-radius: 0.5rem;
+$observ-border-radius-sm: 0.25rem;
+$observ-border-radius-lg: 0.75rem;
+
+$observ-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$observ-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+$observ-font-size-xs: 0.75rem;
+$observ-font-size-sm: 0.875rem;
+$observ-font-size-base: 1rem;
+$observ-font-size-lg: 1.125rem;
+$observ-font-size-xl: 1.25rem;
+$observ-font-size-2xl: 1.5rem;
+$observ-font-size-3xl: 1.875rem;
+
+$observ-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$observ-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$observ-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+$observ-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+
+$observ-transition: all 0.15s ease-in-out;
+
+$observ-breakpoint-sm: 640px;
+$observ-breakpoint-md: 768px;
+$observ-breakpoint-lg: 1024px;
+$observ-breakpoint-xl: 1280px;

data/app/assets/stylesheets/observ/application.scss

@@ -0,0 +1,15 @@
+@import 'variables';
+@import 'layout';
+@import 'card';
+@import 'metrics';
+@import 'dashboard';
+@import 'table';
+@import 'components';
+@import 'observations';
+@import 'chat';
+@import 'drawer';
+@import 'annotations';
+@import 'prompts';
+@import 'datasets';
+@import 'json_viewer';
+@import 'pagination';

data/app/controllers/observ/annotations_controller.rb

@@ -0,0 +1,144 @@
+module Observ
+  class AnnotationsController < ApplicationController
+    before_action :set_annotatable, except: [ :sessions_index, :traces_index, :export ]
+
+  def index
+    @annotations = @annotatable.annotations
+  end
+
+  def sessions_index
+    @sessions = Observ::Session.joins(:annotations)
+      .distinct
+      .order(created_at: :desc)
+      .page(params[:page])
+      .per(Observ.config.pagination_per_page)
+
+    @annotations = Observ::Annotation
+      .where(annotatable_type: "Observ::Session")
+      .includes(:annotatable)
+      .order(created_at: :desc)
+      .page(params[:page])
+      .per(Observ.config.pagination_per_page)
+  end
+
+  def traces_index
+    @traces = Observ::Trace.joins(:annotations)
+      .distinct
+      .order(created_at: :desc)
+      .page(params[:page])
+      .per(Observ.config.pagination_per_page)
+
+    @annotations = Observ::Annotation
+      .where(annotatable_type: "Observ::Trace")
+      .includes(:annotatable)
+      .order(created_at: :desc)
+      .page(params[:page])
+      .per(Observ.config.pagination_per_page)
+  end
+
+  def export
+    @annotations = case params[:type]
+    when "sessions"
+      Observ::Annotation.where(annotatable_type: "Observ::Session").includes(:annotatable).order(created_at: :desc)
+    when "traces"
+      Observ::Annotation.where(annotatable_type: "Observ::Trace").includes(:annotatable).order(created_at: :desc)
+    else
+      Observ::Annotation.all.includes(:annotatable).order(created_at: :desc)
+    end
+
+    respond_to do |format|
+      format.csv do
+        send_data generate_csv(@annotations),
+                  filename: "annotations_#{params[:type] || 'all'}_#{Time.current.strftime('%Y%m%d_%H%M%S')}.csv",
+                  type: "text/csv"
+      end
+    end
+  end
+
+    def create
+      @annotation = @annotatable.annotations.build(annotation_params)
+
+      if @annotation.save
+        respond_to do |format|
+          format.turbo_stream do
+            streams = [
+              turbo_stream.prepend(
+                "annotations-list",
+                partial: "observ/annotations/annotation",
+                locals: { annotation: @annotation, annotatable: @annotatable }
+              ),
+              turbo_stream.replace(
+                "annotation-form",
+                partial: "observ/annotations/form",
+                locals: { annotatable: @annotatable, annotation: @annotatable.annotations.build }
+              ),
+              turbo_stream.update("annotations-count", @annotatable.annotations.count)
+            ]
+
+            empty_state = helpers.content_tag(:div, id: "annotations-empty-state")
+            streams << turbo_stream.remove("annotations-empty-state") if @annotatable.annotations.count == 1
+
+            render turbo_stream: streams
+          end
+          format.html { redirect_back(fallback_location: root_path, notice: "Annotation added successfully.") }
+        end
+      else
+        respond_to do |format|
+          format.turbo_stream do
+            render turbo_stream: turbo_stream.replace(
+              "annotation-form",
+              partial: "observ/annotations/form",
+              locals: { annotatable: @annotatable, annotation: @annotation }
+            )
+          end
+          format.html { redirect_back(fallback_location: root_path, alert: "Failed to add annotation.") }
+        end
+      end
+    end
+
+  def destroy
+    @annotation = @annotatable.annotations.find(params[:id])
+    @annotation.destroy
+
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: turbo_stream.remove("annotation_#{@annotation.id}")
+      end
+      format.html { redirect_back(fallback_location: root_path, notice: "Annotation deleted.") }
+    end
+  end
+
+  private
+
+  def set_annotatable
+    if params[:session_id]
+      @annotatable = Observ::Session.find(params[:session_id])
+    elsif params[:trace_id]
+      @annotatable = Observ::Trace.find(params[:trace_id])
+    else
+      redirect_to root_path, alert: "Invalid resource"
+    end
+  end
+
+  def annotation_params
+    params.require(:annotation).permit(:content)
+  end
+
+  def generate_csv(annotations)
+    CSV.generate(headers: true) do |csv|
+      csv << [ "ID", "Content", "Annotatable Type", "Annotatable ID", "Created At", "Updated At" ]
+
+      annotations.each do |annotation|
+        csv << [
+          annotation.id,
+          annotation.content,
+          annotation.annotatable_type,
+          annotation.annotatable_id,
+          annotation.created_at.iso8601,
+          annotation.updated_at.iso8601
+        ]
+      end
+    end
+    end
+  end
+end

data/app/controllers/observ/application_controller.rb

@@ -0,0 +1,8 @@
+module Observ
+  class ApplicationController < ::ApplicationController
+    layout "observ/application"
+
+    # Engine-specific configuration
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/observ/chats_controller.rb

@@ -0,0 +1,58 @@
+module Observ
+  class ChatsController < ApplicationController
+    before_action :set_chat, only: [ :show ]
+
+    def index
+      @chats = ::Chat.order(created_at: :desc)
+        .page(params[:page])
+        .per(Observ.config.pagination_per_page)
+    end
+
+    def new
+      @chat = ::Chat.new
+    end
+
+    def create
+      @chat = ::Chat.new(params_chat)
+
+      # Set prompt name from agent if applicable
+      set_prompt_info_from_agent
+
+      if @chat.save
+        redirect_to chat_path(@chat), notice: "Chat was successfully created."
+      else
+        render :new, status: :unprocessable_content
+      end
+    end
+
+    def show
+      @message = @chat.messages.build
+    end
+
+    private
+
+    def params_chat
+      params.require(:chat).permit(:agent_class_name, :prompt_version)
+    end
+
+    def set_prompt_info_from_agent
+      return unless @chat.agent_class_name.present?
+
+      agent_class = @chat.agent_class_name.constantize
+
+      # Check if agent uses prompt management
+      if agent_class.included_modules.include?(Observ::PromptManagement) &&
+         agent_class.respond_to?(:prompt_management_enabled?) &&
+         agent_class.prompt_management_enabled?
+        @chat.prompt_name = agent_class.prompt_config[:prompt_name]
+      end
+    rescue NameError => e
+      Rails.logger.warn("Agent class not found: #{@chat.agent_class_name} - #{e.message}")
+      # Agent class not found, continue without setting prompt_name
+    end
+
+    def set_chat
+      @chat = ::Chat.find(params[:id])
+    end
+  end
+end