rubyllm-observ 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +54 -6
  3. data/app/assets/stylesheets/observ/_annotations.scss +114 -103
  4. data/app/assets/stylesheets/observ/_card.scss +58 -49
  5. data/app/assets/stylesheets/observ/_chat.scss +247 -155
  6. data/app/assets/stylesheets/observ/_components.scss +622 -340
  7. data/app/assets/stylesheets/observ/_dashboard.scss +31 -28
  8. data/app/assets/stylesheets/observ/_datasets.scss +494 -547
  9. data/app/assets/stylesheets/observ/_drawer.scss +250 -228
  10. data/app/assets/stylesheets/observ/_filters.scss +139 -0
  11. data/app/assets/stylesheets/observ/_json_viewer.scss +103 -97
  12. data/app/assets/stylesheets/observ/_layout.scss +443 -178
  13. data/app/assets/stylesheets/observ/_metrics.scss +79 -76
  14. data/app/assets/stylesheets/observ/_namespace.scss +18 -0
  15. data/app/assets/stylesheets/observ/_observations.scss +122 -119
  16. data/app/assets/stylesheets/observ/_pagination.scss +129 -112
  17. data/app/assets/stylesheets/observ/_prompts.scss +485 -269
  18. data/app/assets/stylesheets/observ/_reset.scss +249 -0
  19. data/app/assets/stylesheets/observ/_table.scss +46 -38
  20. data/app/assets/stylesheets/observ/_variables.scss +54 -0
  21. data/app/assets/stylesheets/observ/application.scss +3 -0
  22. data/app/controllers/observ/dataset_run_items_controller.rb +0 -1
  23. data/app/controllers/observ/review_queue_controller.rb +154 -0
  24. data/app/controllers/observ/scores_controller.rb +64 -0
  25. data/app/controllers/observ/sessions_controller.rb +23 -0
  26. data/app/helpers/observ/application_helper.rb +1 -0
  27. data/app/helpers/observ/reviews_helper.rb +33 -0
  28. data/app/models/concerns/observ/json_queryable.rb +138 -0
  29. data/app/models/concerns/observ/reviewable.rb +41 -0
  30. data/app/models/concerns/observ/scoreable.rb +34 -0
  31. data/app/models/observ/dataset_run_item.rb +3 -13
  32. data/app/models/observ/review_item.rb +48 -0
  33. data/app/models/observ/score.rb +38 -6
  34. data/app/models/observ/session.rb +5 -1
  35. data/app/models/observ/trace.rb +3 -0
  36. data/app/services/observ/evaluators/base_evaluator.rb +0 -1
  37. data/app/services/observ/guardrail_service.rb +128 -0
  38. data/app/views/kaminari/_first_page.html.erb +1 -1
  39. data/app/views/kaminari/_gap.html.erb +1 -1
  40. data/app/views/kaminari/_last_page.html.erb +1 -1
  41. data/app/views/kaminari/_next_page.html.erb +1 -1
  42. data/app/views/kaminari/_page.html.erb +1 -1
  43. data/app/views/kaminari/_paginator.html.erb +1 -1
  44. data/app/views/kaminari/_prev_page.html.erb +1 -1
  45. data/app/views/kaminari/observ/_first_page.html.erb +1 -1
  46. data/app/views/kaminari/observ/_gap.html.erb +1 -1
  47. data/app/views/kaminari/observ/_last_page.html.erb +1 -1
  48. data/app/views/kaminari/observ/_next_page.html.erb +1 -1
  49. data/app/views/kaminari/observ/_page.html.erb +1 -1
  50. data/app/views/kaminari/observ/_paginator.html.erb +1 -1
  51. data/app/views/kaminari/observ/_prev_page.html.erb +1 -1
  52. data/app/views/layouts/observ/application.html.erb +96 -58
  53. data/app/views/observ/annotations/_form.html.erb +5 -5
  54. data/app/views/observ/annotations/index.html.erb +4 -4
  55. data/app/views/observ/annotations/sessions_index.html.erb +9 -9
  56. data/app/views/observ/annotations/traces_index.html.erb +9 -9
  57. data/app/views/observ/chats/_form.html.erb +7 -7
  58. data/app/views/observ/datasets/index.html.erb +6 -6
  59. data/app/views/observ/messages/_form.html.erb +11 -12
  60. data/app/views/observ/observations/index.html.erb +3 -4
  61. data/app/views/observ/prompts/_form.html.erb +37 -38
  62. data/app/views/observ/prompts/_new_form.html.erb +37 -38
  63. data/app/views/observ/prompts/compare.html.erb +59 -55
  64. data/app/views/observ/prompts/edit.html.erb +3 -3
  65. data/app/views/observ/prompts/index.html.erb +9 -9
  66. data/app/views/observ/prompts/new.html.erb +3 -3
  67. data/app/views/observ/prompts/show.html.erb +2 -2
  68. data/app/views/observ/prompts/versions.html.erb +22 -22
  69. data/app/views/observ/review_queue/_item.html.erb +39 -0
  70. data/app/views/observ/review_queue/_stats.html.erb +18 -0
  71. data/app/views/observ/review_queue/index.html.erb +49 -0
  72. data/app/views/observ/review_queue/show.html.erb +76 -0
  73. data/app/views/observ/review_queue/stats.html.erb +100 -0
  74. data/app/views/observ/scores/_form.html.erb +39 -0
  75. data/app/views/observ/scores/create.turbo_stream.erb +10 -0
  76. data/app/views/observ/sessions/_chat.html.erb +59 -0
  77. data/app/views/observ/sessions/_metadata.html.erb +17 -0
  78. data/app/views/observ/sessions/_metrics.html.erb +81 -0
  79. data/app/views/observ/sessions/_traces.html.erb +92 -0
  80. data/app/views/observ/sessions/annotations_drawer.turbo_stream.erb +8 -1
  81. data/app/views/observ/sessions/index.html.erb +60 -4
  82. data/app/views/observ/sessions/show.html.erb +4 -217
  83. data/app/views/observ/traces/_details.html.erb +47 -0
  84. data/app/views/observ/traces/_input.html.erb +10 -0
  85. data/app/views/observ/traces/_metadata.html.erb +10 -0
  86. data/app/views/observ/traces/_observations.html.erb +172 -0
  87. data/app/views/observ/traces/_output.html.erb +10 -0
  88. data/app/views/observ/traces/annotations_drawer.turbo_stream.erb +8 -1
  89. data/app/views/observ/traces/index.html.erb +3 -4
  90. data/app/views/observ/traces/show.html.erb +5 -232
  91. data/config/routes.rb +14 -0
  92. data/db/migrate/015_refactor_scores_to_polymorphic.rb +27 -0
  93. data/db/migrate/016_create_observ_review_items.rb +25 -0
  94. data/lib/observ/version.rb +1 -1
  95. data/lib/rubyllm-observ.rb +1 -0
  96. metadata +31 -1
@@ -1,156 +1,248 @@
1
- .observ-chat-messages {
2
- display: flex;
3
- flex-direction: column;
4
- gap: 1rem;
5
- margin-bottom: 1.875rem;
6
- }
7
-
8
- .observ-chat-message {
9
- border-left: 3px solid #e5e7eb;
10
- padding: 1rem;
11
- background-color: #f9fafb;
12
- border-radius: 0.25rem;
13
- transition: all 0.15s ease-in-out;
14
- }
15
-
16
- .observ-chat-message:hover {
17
- background-color: #f3f4f6;
18
- }
19
-
20
- .observ-chat-message--user {
21
- border-left-color: #3b82f6;
22
- }
23
-
24
- .observ-chat-message--assistant {
25
- border-left-color: #10b981;
26
- }
27
-
28
- .observ-chat-message--system {
29
- border-left-color: #6b7280;
30
- }
31
-
32
- .observ-chat-message--tool {
33
- border-left-color: #f59e0b;
34
- }
35
-
36
- .observ-chat-message__header {
37
- display: flex;
38
- align-items: center;
39
- gap: 1rem;
40
- margin-bottom: 0.75rem;
41
- flex-wrap: wrap;
42
- }
43
-
44
- .observ-chat-message__trace-link {
45
- font-size: 0.75rem;
46
- padding: 0.25rem 0.5rem;
47
- background-color: #3b82f6;
48
- color: #fff;
49
- text-decoration: none;
50
- border-radius: 0.25rem;
51
- font-weight: 600;
52
- transition: all 0.15s ease-in-out;
53
- }
54
-
55
- .observ-chat-message__trace-link:hover {
56
- background-color: #2563eb;
57
- }
58
-
59
- .observ-chat-message__role {
60
- font-size: 0.75rem;
61
- font-weight: 600;
62
- color: #4b5563;
63
- text-transform: uppercase;
64
- letter-spacing: 0.05em;
65
- }
66
-
67
- .observ-chat-message__time {
68
- font-size: 0.75rem;
69
- color: #9ca3af;
70
- }
71
-
72
- .observ-chat-message__tokens {
73
- display: flex;
74
- align-items: center;
75
- gap: 0.75rem;
76
- font-size: 0.75rem;
77
- color: #6b7280;
78
- margin-left: auto;
79
- }
80
-
81
- .observ-chat-message__tokens span {
82
- display: flex;
83
- align-items: center;
84
- gap: 0.25rem;
85
- padding: 0.125rem 0.5rem;
86
- background-color: #e5e7eb;
87
- border-radius: 0.25rem;
88
- font-variant-numeric: tabular-nums;
89
- }
90
-
91
- .observ-chat-message__content {
92
- color: #111827;
93
- font-size: 0.875rem;
94
- line-height: 1.6;
95
- word-wrap: break-word;
96
- overflow-wrap: break-word;
97
- }
98
-
99
- .observ-chat-message__content p {
100
- margin: 0 0 0.5rem 0;
101
- }
102
-
103
- .observ-chat-message__content p:last-child {
104
- margin-bottom: 0;
105
- }
106
-
107
- .observ-chat-message__content code {
108
- font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
109
- background-color: #e5e7eb;
110
- padding: 0.125rem 0.375rem;
111
- border-radius: 0.25rem;
112
- font-size: 0.875em;
113
- }
114
-
115
- .observ-chat-message__content pre {
116
- background-color: #1f2937;
117
- color: #f9fafb;
118
- padding: 1rem;
119
- border-radius: 0.375rem;
120
- overflow-x: auto;
121
- margin: 0.5rem 0;
122
- }
123
-
124
- .observ-chat-message__content pre code {
125
- background-color: transparent;
126
- padding: 0;
127
- color: inherit;
128
- }
129
-
130
- .observ-chat-message__tool-calls {
131
- margin-top: 0.75rem;
132
- display: flex;
133
- flex-direction: column;
134
- gap: 0.5rem;
135
- }
136
-
137
- .observ-chat-message__tool-calls-label {
138
- font-size: 0.75rem;
139
- font-weight: 600;
140
- color: #6b7280;
141
- text-transform: uppercase;
142
- letter-spacing: 0.05em;
143
- }
144
-
145
- .observ-chat-message__tool-call {
146
- background: #f3f4f6;
147
- padding: 0.5rem;
148
- border-radius: 0.375rem;
149
- font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
150
- font-size: 0.875rem;
151
- border-left: 3px solid #f59e0b;
152
- }
153
-
154
- .observ-chat-message__tool-call-name {
155
- font-weight: 600;
1
+ @import 'variables';
2
+ @import 'namespace';
3
+
4
+ @include observ-scoped {
5
+ .observ-chat-messages {
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 1rem;
9
+ margin-bottom: 1.875rem;
10
+ }
11
+
12
+ .observ-chat-message {
13
+ border-left: 3px solid $observ-border-color;
14
+ padding: 1rem;
15
+ background-color: $observ-bg-surface;
16
+ border-radius: $observ-border-radius-sm;
17
+ transition: all 0.15s ease-in-out;
18
+
19
+ &:hover {
20
+ border-left-width: 4px;
21
+ }
22
+
23
+ &--user {
24
+ border-left-color: $observ-primary;
25
+ }
26
+
27
+ &--assistant {
28
+ border-left-color: $observ-success;
29
+ }
30
+
31
+ &--system {
32
+ border-left-color: $observ-text-muted;
33
+ }
34
+
35
+ &--tool {
36
+ border-left-color: $observ-warning;
37
+ }
38
+
39
+ &__header {
40
+ display: flex;
41
+ align-items: center;
42
+ gap: 1rem;
43
+ margin-bottom: 0.75rem;
44
+ flex-wrap: wrap;
45
+ }
46
+
47
+ &__trace-link {
48
+ font-size: $observ-font-size-xs;
49
+ padding: 0.25rem 0.5rem;
50
+ background-color: $observ-primary;
51
+ color: $observ-white;
52
+ text-decoration: none;
53
+ border-radius: $observ-border-radius-sm;
54
+ font-weight: 600;
55
+ transition: all 0.15s ease-in-out;
56
+
57
+ &:hover {
58
+ background-color: darken($observ-primary, 10%);
59
+ }
60
+ }
61
+
62
+ &__role {
63
+ font-size: $observ-font-size-xs;
64
+ font-weight: 600;
65
+ color: $observ-text-secondary;
66
+ text-transform: uppercase;
67
+ letter-spacing: 0.05em;
68
+ }
69
+
70
+ &__time {
71
+ font-size: $observ-font-size-xs;
72
+ color: $observ-text-muted;
73
+ }
74
+
75
+ &__tokens {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 0.75rem;
79
+ font-size: $observ-font-size-xs;
80
+ color: $observ-text-secondary;
81
+ margin-left: auto;
82
+
83
+ span {
84
+ display: flex;
85
+ align-items: center;
86
+ gap: 0.25rem;
87
+ padding: 0.125rem 0.5rem;
88
+ background-color: $observ-bg-elevated;
89
+ border-radius: $observ-border-radius-sm;
90
+ font-variant-numeric: tabular-nums;
91
+ }
92
+ }
93
+
94
+ &__content {
95
+ color: $observ-text-primary;
96
+ font-size: $observ-font-size-sm;
97
+ line-height: 1.6;
98
+ word-wrap: break-word;
99
+ overflow-wrap: break-word;
100
+
101
+ p {
102
+ margin: 0 0 0.5rem 0;
103
+
104
+ &:last-child {
105
+ margin-bottom: 0;
106
+ }
107
+ }
108
+
109
+ code {
110
+ font-family: $observ-font-family-mono;
111
+ background-color: $observ-bg-elevated;
112
+ padding: 0.125rem 0.375rem;
113
+ border-radius: $observ-border-radius-sm;
114
+ font-size: 0.875em;
115
+ }
116
+
117
+ pre {
118
+ background-color: $observ-bg-page;
119
+ color: $observ-text-primary;
120
+ padding: 1rem;
121
+ border-radius: $observ-border-radius;
122
+ overflow-x: auto;
123
+ margin: 0.5rem 0;
124
+ border: 1px solid $observ-border-subtle;
125
+
126
+ code {
127
+ background-color: transparent;
128
+ padding: 0;
129
+ color: inherit;
130
+ }
131
+ }
132
+ }
133
+
134
+ &__tool-calls {
135
+ margin-top: 0.75rem;
136
+ display: flex;
137
+ flex-direction: column;
138
+ gap: 0.5rem;
139
+ }
140
+
141
+ &__tool-calls-label {
142
+ font-size: $observ-font-size-xs;
143
+ font-weight: 600;
144
+ color: $observ-text-secondary;
145
+ text-transform: uppercase;
146
+ letter-spacing: 0.05em;
147
+ }
148
+
149
+ &__tool-call {
150
+ background: $observ-bg-elevated;
151
+ padding: 0.5rem;
152
+ border-radius: $observ-border-radius;
153
+ font-family: $observ-font-family-mono;
154
+ font-size: $observ-font-size-sm;
155
+ border-left: 3px solid $observ-warning;
156
+ }
157
+
158
+ &__tool-call-name {
159
+ font-weight: 600;
160
+ }
161
+ }
162
+
163
+ // ==========================================================================
164
+ // MESSAGE FORM (chat input)
165
+ // ==========================================================================
166
+ .observ-message-form {
167
+ padding: $observ-spacing-lg;
168
+ background: $observ-bg-elevated;
169
+ border-top: 1px solid $observ-border-color;
170
+ box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
171
+
172
+ &__group {
173
+ display: flex;
174
+ gap: $observ-spacing-md;
175
+ align-items: flex-end;
176
+ }
177
+
178
+ &__input {
179
+ flex: 1;
180
+ padding: $observ-spacing-md $observ-spacing-lg;
181
+ border: 2px solid $observ-border-color;
182
+ border-radius: $observ-border-radius;
183
+ background: $observ-bg-surface;
184
+ resize: vertical;
185
+ min-height: 60px;
186
+ max-height: 200px;
187
+ font-family: $observ-font-family;
188
+ font-size: $observ-font-size-base;
189
+ font-weight: 400;
190
+ color: $observ-text-primary;
191
+ line-height: 1.6;
192
+ transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
193
+
194
+ &:hover {
195
+ border-color: $observ-border-strong;
196
+ background: lighten($observ-bg-surface, 2%);
197
+ }
198
+
199
+ &:focus {
200
+ outline: none;
201
+ border-color: $observ-primary;
202
+ background: lighten($observ-bg-surface, 3%);
203
+ box-shadow: 0 0 0 3px rgba($observ-primary, 0.15);
204
+ }
205
+
206
+ // Placeholder styling - vendor prefixes for cross-browser support
207
+ &::placeholder {
208
+ color: $observ-text-muted;
209
+ font-style: italic;
210
+ opacity: 1;
211
+ }
212
+
213
+ &::-webkit-input-placeholder {
214
+ color: $observ-text-muted;
215
+ font-style: italic;
216
+ opacity: 1;
217
+ }
218
+
219
+ &::-moz-placeholder {
220
+ color: $observ-text-muted;
221
+ font-style: italic;
222
+ opacity: 1;
223
+ }
224
+
225
+ &:-ms-input-placeholder {
226
+ color: $observ-text-muted;
227
+ font-style: italic;
228
+ opacity: 1;
229
+ }
230
+ }
231
+
232
+ .observ-button {
233
+ min-width: 100px;
234
+ padding: $observ-spacing-md $observ-spacing-xl;
235
+ font-size: $observ-font-size-base;
236
+ flex-shrink: 0;
237
+ }
238
+
239
+ &__loading {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: $observ-spacing-sm;
243
+ margin-top: $observ-spacing-sm;
244
+ color: $observ-text-secondary;
245
+ font-size: $observ-font-size-sm;
246
+ }
247
+ }
156
248
  }