rubyllm-observ 0.5.1 → 0.6.0

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

@@ -0,0 +1,249 @@
+// Observ CSS Reset
+// ================
+// This file provides a scoped CSS reset for form elements within Observ
+// to ensure they are not affected by styles from the host application.
+// 
+// IMPORTANT: This reset is intentionally minimal and focused on FORM ELEMENTS ONLY.
+// Structural elements (lists, tables, headings) are styled by Observ's component stylesheets.
+
+@import 'variables';
+
+.observ-layout {
+  // ============================================
+  // Box Sizing Reset (applied to all elements)
+  // ============================================
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // ============================================
+  // Form Elements Reset
+  // ============================================
+  // These resets ensure form elements have consistent styling
+  // regardless of the host app's global CSS
+
+  // Labels - reset font to inherit from parent
+  label {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    text-transform: none;
+  }
+
+  // Buttons - full reset to prevent host app interference
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // Anchors - minimal reset (font only, let component classes control colors)
+  a {
+    font-family: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Fieldset and Legend - remove default browser styling
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  legend {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+  }
+
+  // Details and Summary - reset for consistent behavior
+  details {
+    font-family: inherit;
+  }
+
+  summary {
+    font-family: inherit;
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+    }
+  }
+
+  input,
+  select,
+  textarea {
+    font-family: $observ-font-family;
+    font-size: $observ-font-size-base;
+    line-height: 1.5;
+    color: $observ-text-primary;
+    background-color: $observ-bg-elevated;
+    border: 1px solid $observ-border-color;
+    border-radius: $observ-border-radius-sm;
+    margin: 0;
+
+    &:focus {
+      outline: none;
+      border-color: $observ-primary;
+      box-shadow: 0 0 0 3px rgba($observ-primary, 0.1);
+    }
+
+    // Placeholder styling - full reset with vendor prefixes
+    &::placeholder {
+      color: $observ-text-muted;
+      opacity: 1;
+      font-family: $observ-font-family;
+      font-style: normal;
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    &::-webkit-input-placeholder {
+      color: $observ-text-muted;
+      opacity: 1;
+      font-family: $observ-font-family;
+      font-style: normal;
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    &::-moz-placeholder {
+      color: $observ-text-muted;
+      opacity: 1;
+      font-family: $observ-font-family;
+      font-style: normal;
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    &:-ms-input-placeholder {
+      color: $observ-text-muted;
+      opacity: 1;
+      font-family: $observ-font-family;
+      font-style: normal;
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    &:disabled {
+      background-color: $observ-bg-surface;
+      color: $observ-text-muted;
+      cursor: not-allowed;
+    }
+  }
+
+  // Text inputs
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"] {
+    height: auto;
+    padding: $observ-spacing-sm $observ-spacing-md;
+    background-color: $observ-bg-elevated;
+    color: $observ-text-primary;
+  }
+
+  // Date inputs - ensure consistent styling
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"] {
+    color-scheme: dark;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0.6;
+      filter: invert(1);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Select elements
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding: $observ-spacing-sm $observ-spacing-md;
+    padding-right: calc(#{$observ-spacing-md} + 1.5rem);
+    background-color: $observ-bg-elevated;
+    color: $observ-text-primary;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right $observ-spacing-sm center;
+    cursor: pointer;
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    option {
+      background-color: $observ-bg-elevated;
+      color: $observ-text-primary;
+    }
+  }
+
+  // Textarea
+  textarea {
+    padding: $observ-spacing-sm $observ-spacing-md;
+    background-color: $observ-bg-elevated;
+    color: $observ-text-primary;
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  // Checkbox and Radio - minimal reset
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    accent-color: $observ-primary;
+    // Don't override background for checkboxes/radios as they have native styling
+    background-color: transparent;
+    border: none;
+  }
+}

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

@@ -1,53 +1,61 @@
 @import 'variables';
+@import 'namespace';
 
-.observ-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: $observ-font-size-sm;
-
-  &__header {
-    background-color: $observ-gray-50;
+@include observ-scoped {
+  .observ-table-container {
+    overflow-x: auto;
   }
 
-  &__row {
-    border-bottom: 1px solid $observ-gray-200;
-    transition: $observ-transition;
+  .observ-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: $observ-font-size-sm;
+    background-color: $observ-bg-surface;
 
-    &:hover {
-      background-color: $observ-gray-50;
+    &__header {
+      background-color: $observ-bg-elevated;
     }
-  }
 
-  &__cell {
-    padding: $observ-spacing-md;
-    text-align: left;
-    color: $observ-gray-700;
+    &__row {
+      border-bottom: 1px solid $observ-border-subtle;
+      transition: $observ-transition;
 
-    &--numeric {
-      text-align: right;
-      font-variant-numeric: tabular-nums;
+      &:hover {
+        background-color: $observ-bg-hover;
+      }
     }
 
-    &--actions {
-      text-align: right;
-      width: 1%;
-      white-space: nowrap;
+    &__cell {
+      padding: $observ-spacing-md;
+      text-align: left;
+      color: $observ-text-secondary;
+      vertical-align: middle;
+
+      &--numeric {
+        text-align: right;
+        font-variant-numeric: tabular-nums;
+      }
+
+      &--actions {
+        text-align: right;
+        width: 1%;
+        white-space: nowrap;
+      }
+
+      thead & {
+        font-weight: 600;
+        color: $observ-text-primary;
+        font-size: $observ-font-size-sm;
+        padding-top: $observ-spacing-sm;
+        padding-bottom: $observ-spacing-sm;
+        background-color: $observ-bg-elevated;
+      }
     }
 
-    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;
+    &--compact {
+      .observ-table__cell {
+        padding: $observ-spacing-sm $observ-spacing-md;
+      }
     }
   }
 }

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

@@ -1,9 +1,16 @@
+// =============================================================================
+// BRAND & ACCENT COLORS
+// =============================================================================
 $observ-primary: #3b82f6;
 $observ-success: #10b981;
 $observ-warning: #f59e0b;
 $observ-danger: #ef4444;
 $observ-info: #06b6d4;
+$observ-purple: #a78bfa;              // AI/special features accent
 
+// =============================================================================
+// GRAY SCALE
+// =============================================================================
 $observ-gray-50: #f9fafb;
 $observ-gray-100: #f3f4f6;
 $observ-gray-200: #e5e7eb;
@@ -18,6 +25,53 @@ $observ-gray-900: #111827;
 $observ-white: #ffffff;
 $observ-black: #000000;
 
+// =============================================================================
+// DARK THEME - Base Colors (Better Stack inspired)
+// =============================================================================
+$observ-dark-bg-page: #0d0d1a;        // Deep navy page background
+$observ-dark-bg-surface: #1a1a2e;     // Card/surface background
+$observ-dark-bg-elevated: #252540;    // Elevated elements (dropdowns, modals)
+$observ-dark-bg-hover: #2a2a45;       // Hover states
+
+// =============================================================================
+// DARK THEME - Borders
+// =============================================================================
+$observ-dark-border: #2a2a40;         // Standard border
+$observ-dark-border-subtle: #1f1f35;  // Subtle dividers
+$observ-dark-border-strong: #3a3a55;  // Emphasized borders
+
+// =============================================================================
+// DARK THEME - Text
+// =============================================================================
+$observ-dark-text-primary: #f3f4f6;   // Primary text (gray-100)
+$observ-dark-text-secondary: #9ca3af; // Secondary text (gray-400)
+$observ-dark-text-muted: #6b7280;     // Muted text (gray-500)
+
+// =============================================================================
+// SEMANTIC COLOR MAPPINGS (dark theme as default)
+// =============================================================================
+$observ-bg-page: $observ-dark-bg-page;
+$observ-bg-surface: $observ-dark-bg-surface;
+$observ-bg-elevated: $observ-dark-bg-elevated;
+$observ-bg-hover: $observ-dark-bg-hover;
+
+$observ-border-color: $observ-dark-border;
+$observ-border-subtle: $observ-dark-border-subtle;
+$observ-border-strong: $observ-dark-border-strong;
+
+$observ-text-primary: $observ-dark-text-primary;
+$observ-text-secondary: $observ-dark-text-secondary;
+$observ-text-muted: $observ-dark-text-muted;
+
+// =============================================================================
+// SYNTAX HIGHLIGHTING (for JSON viewer, code blocks)
+// =============================================================================
+$observ-syntax-number: #ff9800;           // Orange for numbers
+$observ-syntax-boolean: #c792ea;          // Purple for booleans
+
+// =============================================================================
+// SPACING
+// =============================================================================
 $observ-spacing-xs: 0.25rem;
 $observ-spacing-sm: 0.5rem;
 $observ-spacing-md: 1rem;

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

@@ -1,4 +1,6 @@
 @import 'variables';
+@import 'namespace';
+@import 'reset';
 @import 'layout';
 @import 'card';
 @import 'metrics';
@@ -11,5 +13,6 @@
 @import 'annotations';
 @import 'prompts';
 @import 'datasets';
+@import 'filters';
 @import 'json_viewer';
 @import 'pagination';

data/app/controllers/observ/dataset_run_items_controller.rb

@@ -19,7 +19,6 @@ module Observ
 
       score = @run_item.scores.find_or_initialize_by(name: "manual", source: :manual)
       score.assign_attributes(
-        trace: @run_item.trace,
         value: value,
         data_type: :boolean,
         comment: params[:comment],

data/app/controllers/observ/review_queue_controller.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Observ
+  class ReviewQueueController < ApplicationController
+    before_action :set_review_item, only: [ :show, :complete, :skip ]
+
+    def index
+      @review_items = Observ::ReviewItem
+        .actionable
+        .by_priority
+        .includes(:reviewable)
+        .page(params[:page])
+        .per(Observ.config.pagination_per_page)
+
+      @stats = queue_stats
+      @filter = :all
+    end
+
+    def sessions
+      @review_items = Observ::ReviewItem
+        .sessions
+        .actionable
+        .by_priority
+        .includes(:reviewable)
+        .page(params[:page])
+        .per(Observ.config.pagination_per_page)
+
+      @stats = queue_stats(scope: :sessions)
+      @filter = :sessions
+      render :index
+    end
+
+    def traces
+      @review_items = Observ::ReviewItem
+        .traces
+        .actionable
+        .by_priority
+        .includes(:reviewable)
+        .page(params[:page])
+        .per(Observ.config.pagination_per_page)
+
+      @stats = queue_stats(scope: :traces)
+      @filter = :traces
+      render :index
+    end
+
+    def show
+      @review_item.start_review!
+      @reviewable = @review_item.reviewable
+      @next_item = next_review_item
+      @queue_position = queue_position
+
+      # Load additional data for sessions
+      if @reviewable.is_a?(Observ::Session)
+        @session_metrics = @reviewable.session_metrics
+        @traces = @reviewable.traces.includes(:observations).order(start_time: :asc).limit(10)
+        @chat = @reviewable.chat if defined?(::Chat)
+      elsif @reviewable.is_a?(Observ::Trace)
+        @observations = @reviewable.observations.order(start_time: :asc).limit(5)
+      end
+    end
+
+    def complete
+      @review_item.complete!(by: params[:completed_by])
+
+      if params[:next] && (next_item = next_review_item)
+        redirect_to review_path(next_item), notice: "Review saved. Showing next item."
+      else
+        redirect_to reviews_path, notice: "Review completed."
+      end
+    end
+
+    def skip
+      @review_item.skip!(by: params[:completed_by])
+
+      if (next_item = next_review_item)
+        redirect_to review_path(next_item), notice: "Skipped. Showing next item."
+      else
+        redirect_to reviews_path, notice: "Item skipped. No more items to review."
+      end
+    end
+
+    def stats
+      @stats = detailed_stats
+    end
+
+    private
+
+    def set_review_item
+      @review_item = Observ::ReviewItem.find(params[:id])
+    end
+
+    def next_review_item
+      Observ::ReviewItem
+        .actionable
+        .by_priority
+        .where.not(id: @review_item&.id)
+        .first
+    end
+
+    def queue_position
+      return nil unless @review_item
+
+      # Convert enum string to integer for SQL comparison
+      priority_value = Observ::ReviewItem.priorities[@review_item.priority]
+
+      {
+        current: Observ::ReviewItem.actionable.where(
+          "priority > :priority OR (priority = :priority AND created_at < :created_at)",
+          priority: priority_value,
+          created_at: @review_item.created_at
+        ).count + 1,
+        total: Observ::ReviewItem.actionable.count
+      }
+    end
+
+    def queue_stats(scope: nil)
+      base = Observ::ReviewItem
+      base = base.send(scope) if scope
+
+      {
+        pending: base.pending.count,
+        in_progress: base.in_progress.count,
+        completed_today: base.completed.where("completed_at >= ?", Time.current.beginning_of_day).count,
+        completed_this_week: base.completed.where("completed_at >= ?", Time.current.beginning_of_week).count
+      }
+    end
+
+    def detailed_stats
+      completed = Observ::ReviewItem.completed
+
+      {
+        total_pending: Observ::ReviewItem.actionable.count,
+        total_completed: completed.count,
+        completed_today: completed.where("completed_at >= ?", Time.current.beginning_of_day).count,
+        completed_this_week: completed.where("completed_at >= ?", Time.current.beginning_of_week).count,
+        by_reason: Observ::ReviewItem.group(:reason).count,
+        by_priority: Observ::ReviewItem.group(:priority).count,
+        pass_rate: calculate_pass_rate
+      }
+    end
+
+    def calculate_pass_rate
+      completed_items = Observ::ReviewItem.completed.includes(:reviewable)
+      return nil if completed_items.empty?
+
+      passed = completed_items.count do |item|
+        item.reviewable&.manual_score&.passed?
+      end
+
+      (passed.to_f / completed_items.count * 100).round(1)
+    end
+  end
+end

data/app/controllers/observ/scores_controller.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Observ
+  class ScoresController < ApplicationController
+    before_action :set_scoreable
+
+    def create
+      value = parse_score_value(params[:value], params[:data_type])
+
+      @score = @scoreable.scores.find_or_initialize_by(
+        name: params[:name] || "manual",
+        source: :manual
+      )
+
+      @score.assign_attributes(
+        value: value,
+        data_type: params[:data_type] || :boolean,
+        comment: params[:comment],
+        created_by: params[:created_by]
+      )
+
+      if @score.save
+        respond_to do |format|
+          format.turbo_stream
+          format.html { redirect_back(fallback_location: root_path, notice: "Score saved.") }
+        end
+      else
+        respond_to do |format|
+          format.turbo_stream { render :create_error, status: :unprocessable_entity }
+          format.html { redirect_back(fallback_location: root_path, alert: "Failed to save score.") }
+        end
+      end
+    end
+
+    def destroy
+      @score = @scoreable.scores.find(params[:id])
+      @score.destroy
+
+      respond_to do |format|
+        format.turbo_stream { render turbo_stream: turbo_stream.remove("score_#{@score.id}") }
+        format.html { redirect_back(fallback_location: root_path, notice: "Score deleted.") }
+      end
+    end
+
+    private
+
+    def set_scoreable
+      if params[:session_id]
+        @scoreable = Observ::Session.find(params[:session_id])
+      elsif params[:trace_id]
+        @scoreable = Observ::Trace.find(params[:trace_id])
+      end
+    end
+
+    def parse_score_value(value, data_type)
+      case data_type&.to_sym
+      when :boolean
+        value.to_i == 1 ? 1.0 : 0.0
+      else
+        value.to_f
+      end
+    end
+  end
+end

data/app/controllers/observ/sessions_controller.rb

@@ -2,6 +2,7 @@ module Observ
   class SessionsController < ApplicationController
     def index
       @sessions = Observ::Session.order(start_time: :desc)
+      @agent_types = distinct_agent_types
       apply_filters if params[:filter].present?
       @sessions = @sessions.page(params[:page]).per(Observ.config.pagination_per_page)
     end
@@ -30,6 +31,15 @@ module Observ
 
     private
 
+    def distinct_agent_types
+      Observ::Session
+        .where.not(metadata: nil)
+        .pluck(:metadata)
+        .filter_map { |m| m&.dig("agent_type") }
+        .uniq
+        .sort
+    end
+
     def apply_filters
       @sessions = @sessions.where(user_id: params[:filter][:user_id]) if params[:filter][:user_id].present?
 
@@ -40,6 +50,19 @@ module Observ
       if params[:filter][:end_date].present?
         @sessions = @sessions.where("start_time <= ?", params[:filter][:end_date])
       end
+
+      if params[:filter][:status].present?
+        case params[:filter][:status]
+        when "completed"
+          @sessions = @sessions.where.not(end_time: nil)
+        when "in_progress"
+          @sessions = @sessions.where(end_time: nil)
+        end
+      end
+
+      if params[:filter][:agent_type].present?
+        @sessions = @sessions.where_json(:metadata, :agent_type, params[:filter][:agent_type])
+      end
     end
   end
 end