rubyllm-observ 0.5.1 → 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 (95) 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. metadata +30 -1
data/app/assets/stylesheets/observ/_datasets.scss CHANGED
@@ -1,697 +1,644 @@
1
1
  @import 'variables';
2
+ @import 'namespace';
2
3
 
3
- // Datasets Index Page - Filters
4
- .observ-datasets-filters {
5
- margin-bottom: var(--spacing-lg, 1.5rem);
4
+ @include observ-scoped {
5
+ // Datasets Table
6
+ .observ-datasets-table {
7
+ &__link {
8
+ font-weight: 500;
9
+ color: $observ-primary;
10
+ text-decoration: none;
11
+ transition: color 0.2s ease;
6
12
 
7
- &__form {
8
- display: flex;
9
- gap: var(--spacing-md, 1rem);
10
- align-items: flex-end;
13
+ &:hover {
14
+ color: darken($observ-primary, 10%);
15
+ text-decoration: underline;
16
+ }
17
+ }
18
+
19
+ &__description {
20
+ font-size: $observ-font-size-xs;
21
+ color: $observ-text-muted;
22
+ margin: $observ-spacing-xs 0 0;
23
+ }
24
+
25
+ &__action-group {
26
+ display: flex;
27
+ gap: var(--spacing-sm, 0.5rem);
28
+ }
11
29
  }
12
30
 
13
- &__field {
14
- display: flex;
15
- flex-direction: column;
31
+ // Dataset Show Page
32
+ .observ-datasets {
33
+ &__back-link {
34
+ display: inline-block;
35
+ margin-bottom: $observ-spacing-sm;
36
+ color: $observ-primary;
37
+ text-decoration: none;
38
+ font-weight: 500;
39
+ transition: $observ-transition;
16
40
 
17
- &--search {
18
- flex: 1;
41
+ &:hover {
42
+ color: darken($observ-primary, 10%);
43
+ }
19
44
  }
20
45
 
21
- &--status {
22
- width: 10rem;
46
+ &__info {
47
+ margin-bottom: $observ-spacing-lg;
23
48
  }
24
- }
25
49
 
26
- &__label {
27
- display: block;
28
- margin-bottom: var(--spacing-xs, 0.5rem);
29
- font-weight: 500;
30
- color: $observ-gray-900;
31
- font-size: $observ-font-size-sm;
32
- }
50
+ &__metadata {
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ gap: $observ-spacing-lg;
54
+ font-size: $observ-font-size-sm;
33
55
 
34
- &__input,
35
- &__select {
36
- width: 100%;
37
- padding: var(--spacing-sm, 0.5rem);
38
- border: 1px solid $observ-gray-300;
39
- border-radius: $observ-border-radius-sm;
40
- font-size: $observ-font-size-base;
41
- color: $observ-gray-900;
42
- transition: border-color 0.2s ease;
56
+ &--horizontal {
57
+ display: grid;
58
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
59
+ gap: $observ-spacing-lg;
60
+ }
61
+ }
43
62
 
44
- &:focus {
45
- outline: none;
46
- border-color: $observ-primary;
47
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
63
+ &__metadata-item {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: $observ-spacing-xs;
48
67
  }
49
68
 
50
- &::placeholder {
51
- color: $observ-gray-400;
69
+ &__metadata-label {
70
+ color: $observ-text-muted;
71
+ font-size: $observ-font-size-xs;
72
+ text-transform: uppercase;
73
+ letter-spacing: 0.05em;
74
+ font-weight: 600;
75
+ margin: 0;
52
76
  }
53
- }
54
77
 
55
- &__actions {
56
- display: flex;
57
- gap: var(--spacing-sm, 0.5rem);
58
- }
59
- }
78
+ &__metadata-value {
79
+ font-weight: 500;
80
+ color: $observ-text-primary;
81
+ margin: 0;
82
+ }
60
83
 
61
- // Datasets Table
62
- .observ-datasets-table {
63
- &__link {
64
- font-weight: 500;
65
- color: $observ-primary;
66
- text-decoration: none;
67
- transition: color 0.2s ease;
84
+ // Preview cells
85
+ &__cell--preview {
86
+ max-width: 300px;
87
+ }
68
88
 
69
- &:hover {
70
- color: darken($observ-primary, 10%);
71
- text-decoration: underline;
89
+ &__preview {
90
+ display: block;
91
+ font-size: $observ-font-size-xs;
92
+ background-color: $observ-bg-elevated;
93
+ padding: $observ-spacing-xs;
94
+ border-radius: $observ-border-radius-sm;
95
+ overflow: hidden;
96
+ text-overflow: ellipsis;
97
+ white-space: nowrap;
72
98
  }
73
- }
74
99
 
75
- &__description {
76
- font-size: $observ-font-size-xs;
77
- color: $observ-gray-500;
78
- margin: $observ-spacing-xs 0 0;
79
- }
100
+ // Run progress section
101
+ &__run-progress {
102
+ margin-bottom: $observ-spacing-lg;
103
+ padding-bottom: $observ-spacing-lg;
104
+ border-bottom: 1px solid $observ-border-subtle;
105
+ }
80
106
 
81
- &__action-group {
82
- display: flex;
83
- gap: var(--spacing-sm, 0.5rem);
84
- }
85
- }
107
+ &__run-progress-header {
108
+ display: flex;
109
+ align-items: center;
110
+ gap: $observ-spacing-md;
111
+ margin-bottom: $observ-spacing-sm;
112
+ }
86
113
 
87
- // Dataset Show Page
88
- .observ-datasets {
89
- &__back-link {
90
- display: inline-block;
91
- margin-bottom: $observ-spacing-sm;
92
- color: $observ-primary;
93
- text-decoration: none;
94
- font-weight: 500;
95
- transition: $observ-transition;
114
+ &__run-progress-stats {
115
+ font-size: $observ-font-size-sm;
116
+ color: $observ-text-secondary;
117
+ }
96
118
 
97
- &:hover {
98
- color: darken($observ-primary, 10%);
119
+ // Progress bar
120
+ &__progress {
121
+ display: flex;
122
+ align-items: center;
123
+ gap: $observ-spacing-md;
99
124
  }
100
- }
101
125
 
102
- &__info {
103
- margin-bottom: $observ-spacing-lg;
104
- }
126
+ &__progress-bar {
127
+ display: flex;
128
+ flex: 1;
129
+ height: 8px;
130
+ background-color: $observ-bg-elevated;
131
+ border-radius: 4px;
132
+ overflow: hidden;
133
+ }
105
134
 
106
- &__metadata {
107
- display: flex;
108
- flex-wrap: wrap;
109
- gap: $observ-spacing-lg;
110
- font-size: $observ-font-size-sm;
135
+ &__progress-fill {
136
+ height: 100%;
137
+ transition: width 0.3s ease;
111
138
 
112
- &--horizontal {
113
- display: grid;
114
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
115
- gap: $observ-spacing-lg;
139
+ &--success {
140
+ background-color: $observ-success;
141
+ }
142
+
143
+ &--danger {
144
+ background-color: $observ-danger;
145
+ }
146
+ }
147
+
148
+ &__progress-text {
149
+ font-size: $observ-font-size-xs;
150
+ color: $observ-text-secondary;
116
151
  }
117
152
  }
118
153
 
119
- &__metadata-item {
154
+ // Tabs
155
+ .observ-tabs {
120
156
  display: flex;
121
- flex-direction: column;
122
- gap: $observ-spacing-xs;
123
- }
157
+ gap: 0;
158
+ margin-bottom: $observ-spacing-lg;
159
+ border-bottom: 1px solid $observ-border-subtle;
124
160
 
125
- &__metadata-label {
126
- color: $observ-gray-500;
127
- font-size: $observ-font-size-xs;
128
- text-transform: uppercase;
129
- letter-spacing: 0.05em;
130
- font-weight: 600;
131
- margin: 0;
132
- }
161
+ &__tab {
162
+ padding: $observ-spacing-sm $observ-spacing-md;
163
+ color: $observ-text-secondary;
164
+ text-decoration: none;
165
+ font-weight: 500;
166
+ border-bottom: 2px solid transparent;
167
+ margin-bottom: -1px;
168
+ transition: $observ-transition;
133
169
 
134
- &__metadata-value {
135
- font-weight: 500;
136
- color: $observ-gray-900;
137
- margin: 0;
138
- }
170
+ &:hover {
171
+ color: $observ-text-primary;
172
+ }
139
173
 
140
- // Preview cells
141
- &__cell--preview {
142
- max-width: 300px;
174
+ &--active {
175
+ color: $observ-primary;
176
+ border-bottom-color: $observ-primary;
177
+ }
178
+ }
143
179
  }
144
180
 
145
- &__preview {
146
- display: block;
147
- font-size: $observ-font-size-xs;
148
- background-color: $observ-gray-50;
149
- padding: $observ-spacing-xs;
150
- border-radius: $observ-border-radius-sm;
151
- overflow: hidden;
152
- text-overflow: ellipsis;
153
- white-space: nowrap;
181
+ // Card danger zone
182
+ .observ-card--danger {
183
+ border-color: $observ-danger;
184
+
185
+ .observ-card__header {
186
+ background-color: rgba($observ-danger, 0.05);
187
+ }
188
+
189
+ .observ-card__title {
190
+ color: $observ-danger;
191
+ }
154
192
  }
155
193
 
156
- // Run progress section
157
- &__run-progress {
158
- margin-bottom: $observ-spacing-lg;
159
- padding-bottom: $observ-spacing-lg;
160
- border-bottom: 1px solid $observ-gray-200;
194
+ // Empty state subtext
195
+ .observ-card__empty-subtext {
196
+ font-size: $observ-font-size-sm;
197
+ color: $observ-text-muted;
198
+ margin-bottom: $observ-spacing-md;
161
199
  }
162
200
 
163
- &__run-progress-header {
164
- display: flex;
165
- align-items: center;
166
- gap: $observ-spacing-md;
167
- margin-bottom: $observ-spacing-sm;
201
+ // Text utilities
202
+ .observ-text--danger {
203
+ color: $observ-danger;
168
204
  }
169
205
 
170
- &__run-progress-stats {
171
- font-size: $observ-font-size-sm;
172
- color: $observ-gray-600;
206
+ // Badge sizes
207
+ .observ-badge--sm {
208
+ font-size: $observ-font-size-xs;
209
+ padding: 0.125rem 0.375rem;
173
210
  }
174
211
 
175
- // Progress bar
176
- &__progress {
212
+ // Page header actions
213
+ .observ-page-header__actions {
177
214
  display: flex;
215
+ gap: $observ-spacing-sm;
178
216
  align-items: center;
179
- gap: $observ-spacing-md;
180
217
  }
181
218
 
182
- &__progress-bar {
219
+ // Score buttons for manual scoring
220
+ .observ-datasets__score-buttons {
183
221
  display: flex;
184
- flex: 1;
185
- height: 8px;
186
- background-color: $observ-gray-200;
187
- border-radius: 4px;
188
- overflow: hidden;
222
+ gap: 1rem;
223
+ margin-top: 0.5rem;
189
224
  }
190
225
 
191
- &__progress-fill {
192
- height: 100%;
193
- transition: width 0.3s ease;
226
+ .observ-datasets__score-button {
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 0.5rem;
230
+ padding: 1rem 1.5rem;
231
+ border: 2px solid $observ-border-color;
232
+ border-radius: $observ-border-radius;
233
+ cursor: pointer;
234
+ transition: all 0.15s ease;
235
+ background: $observ-bg-elevated;
236
+ font-weight: 500;
237
+ color: $observ-text-primary;
194
238
 
195
- &--success {
196
- background-color: $observ-success;
239
+ &:hover {
240
+ border-color: $observ-primary;
241
+ background: rgba($observ-primary, 0.05);
197
242
  }
198
243
 
199
- &--danger {
200
- background-color: $observ-danger;
244
+ &:active {
245
+ transform: scale(0.98);
201
246
  }
202
- }
203
247
 
204
- &__progress-text {
205
- font-size: $observ-font-size-xs;
206
- color: $observ-gray-600;
207
- }
208
- }
209
-
210
- // Tabs
211
- .observ-tabs {
212
- display: flex;
213
- gap: 0;
214
- margin-bottom: $observ-spacing-lg;
215
- border-bottom: 1px solid $observ-gray-200;
216
-
217
- &__tab {
218
- padding: $observ-spacing-sm $observ-spacing-md;
219
- color: $observ-gray-600;
220
- text-decoration: none;
221
- font-weight: 500;
222
- border-bottom: 2px solid transparent;
223
- margin-bottom: -1px;
224
- transition: $observ-transition;
225
-
226
- &:hover {
227
- color: $observ-gray-900;
248
+ // Highlight when radio inside is checked (CSS :has selector)
249
+ &:has(input[type="radio"]:checked) {
250
+ border-color: $observ-primary;
251
+ background: rgba($observ-primary, 0.1);
252
+ box-shadow: 0 0 0 3px rgba($observ-primary, 0.15);
228
253
  }
229
254
 
230
- &--active {
231
- color: $observ-primary;
232
- border-bottom-color: $observ-primary;
255
+ input[type="radio"] {
256
+ position: absolute;
257
+ opacity: 0;
258
+ width: 0;
259
+ height: 0;
233
260
  }
234
261
  }
235
- }
236
262
 
237
- // Card danger zone
238
- .observ-card--danger {
239
- border-color: $observ-danger;
263
+ .observ-datasets__score-icon {
264
+ font-size: 1.25rem;
265
+ font-weight: bold;
240
266
 
241
- .observ-card__header {
242
- background-color: rgba($observ-danger, 0.05);
243
- }
267
+ &--pass {
268
+ color: $observ-success;
269
+ }
244
270
 
245
- .observ-card__title {
246
- color: $observ-danger;
271
+ &--fail {
272
+ color: $observ-danger;
273
+ }
247
274
  }
248
- }
249
275
 
250
- // Empty state subtext
251
- .observ-card__empty-subtext {
252
- font-size: $observ-font-size-sm;
253
- color: $observ-gray-500;
254
- margin-bottom: $observ-spacing-md;
255
- }
256
-
257
- // Text utilities
258
- .observ-text--danger {
259
- color: $observ-danger;
260
- }
261
-
262
- // Badge sizes
263
- .observ-badge--sm {
264
- font-size: $observ-font-size-xs;
265
- padding: 0.125rem 0.375rem;
266
- }
276
+ // Simple text-based scores list
277
+ .observ-scores-list {
278
+ list-style: none;
279
+ margin: 0;
280
+ padding: 0;
267
281
 
268
- // Page header actions
269
- .observ-page-header__actions {
270
- display: flex;
271
- gap: $observ-spacing-sm;
272
- align-items: center;
273
- }
282
+ &--compact {
283
+ .observ-scores-list__item {
284
+ padding: 0.125rem 0;
285
+ font-size: $observ-font-size-xs;
286
+ }
287
+ }
274
288
 
275
- // Score buttons for manual scoring
276
- .observ-datasets__score-buttons {
277
- display: flex;
278
- gap: 1rem;
279
- margin-top: 0.5rem;
280
- }
289
+ &__item {
290
+ display: flex;
291
+ align-items: center;
292
+ gap: 0.375rem;
293
+ padding: 0.25rem 0;
294
+ font-size: $observ-font-size-sm;
295
+ color: $observ-text-secondary;
296
+ }
281
297
 
282
- .observ-datasets__score-button {
283
- display: flex;
284
- align-items: center;
285
- gap: 0.5rem;
286
- padding: 1rem 1.5rem;
287
- border: 2px solid $observ-gray-300;
288
- border-radius: $observ-border-radius;
289
- cursor: pointer;
290
- transition: all 0.15s ease;
291
- background: $observ-white;
292
- font-weight: 500;
293
-
294
- &:hover {
295
- border-color: $observ-primary;
296
- background: rgba($observ-primary, 0.02);
297
- }
298
+ &__indicator {
299
+ font-weight: 600;
300
+ width: 1em;
301
+ text-align: center;
298
302
 
299
- &:active {
300
- transform: scale(0.98);
301
- }
303
+ &--pass {
304
+ color: $observ-success;
305
+ }
302
306
 
303
- // Highlight when radio inside is checked (CSS :has selector)
304
- &:has(input[type="radio"]:checked) {
305
- border-color: $observ-primary;
306
- background: rgba($observ-primary, 0.1);
307
- box-shadow: 0 0 0 3px rgba($observ-primary, 0.15);
308
- }
307
+ &--fail {
308
+ color: $observ-danger;
309
+ }
310
+ }
309
311
 
310
- input[type="radio"] {
311
- position: absolute;
312
- opacity: 0;
313
- width: 0;
314
- height: 0;
315
- }
316
- }
312
+ &__name {
313
+ font-weight: 500;
314
+ color: $observ-text-primary;
315
+ }
317
316
 
318
- .observ-datasets__score-icon {
319
- font-size: 1.25rem;
320
- font-weight: bold;
317
+ &__value {
318
+ color: $observ-text-secondary;
321
319
 
322
- &--pass {
323
- color: $observ-success;
324
- }
320
+ &::before {
321
+ content: '·';
322
+ margin-right: 0.375rem;
323
+ color: $observ-text-muted;
324
+ }
325
+ }
325
326
 
326
- &--fail {
327
- color: $observ-danger;
328
- }
329
- }
327
+ &__source {
328
+ color: $observ-text-muted;
329
+ font-size: $observ-font-size-xs;
330
330
 
331
- // Simple text-based scores list
332
- .observ-scores-list {
333
- list-style: none;
334
- margin: 0;
335
- padding: 0;
331
+ &::before {
332
+ content: '·';
333
+ margin-right: 0.375rem;
334
+ }
335
+ }
336
336
 
337
- &--compact {
338
- .observ-scores-list__item {
339
- padding: 0.125rem 0;
337
+ &__comment {
338
+ display: block;
339
+ width: 100%;
340
+ margin-left: 1.375rem;
340
341
  font-size: $observ-font-size-xs;
342
+ color: $observ-text-muted;
343
+ font-style: italic;
341
344
  }
342
- }
343
345
 
344
- &__item {
345
- display: flex;
346
- align-items: center;
347
- gap: 0.375rem;
348
- padding: 0.25rem 0;
349
- font-size: $observ-font-size-sm;
350
- color: $observ-gray-700;
346
+ &__more {
347
+ color: $observ-text-muted;
348
+ font-size: $observ-font-size-xs;
349
+ }
351
350
  }
352
351
 
353
- &__indicator {
354
- font-weight: 600;
355
- width: 1em;
356
- text-align: center;
352
+ // Score context in drawer
353
+ .observ-datasets__score-context {
354
+ margin-bottom: 1.5rem;
357
355
 
358
- &--pass {
359
- color: $observ-success;
356
+ h4 {
357
+ margin-bottom: 0.5rem;
360
358
  }
361
359
 
362
- &--fail {
363
- color: $observ-danger;
360
+ pre {
361
+ max-height: 150px;
362
+ overflow-y: auto;
364
363
  }
365
364
  }
366
365
 
367
- &__name {
368
- font-weight: 500;
369
- color: $observ-gray-900;
370
- }
366
+ // Existing scores section
367
+ .observ-datasets__existing-scores {
368
+ margin-top: 2rem;
369
+ padding-top: 1.5rem;
370
+ border-top: 1px solid $observ-border-subtle;
371
371
 
372
- &__value {
373
- color: $observ-gray-600;
374
-
375
- &::before {
376
- content: '·';
377
- margin-right: 0.375rem;
378
- color: $observ-gray-400;
372
+ h4 {
373
+ margin-bottom: 0.75rem;
379
374
  }
380
375
  }
381
376
 
382
- &__source {
383
- color: $observ-gray-400;
384
- font-size: $observ-font-size-xs;
385
-
386
- &::before {
387
- content: '·';
388
- margin-right: 0.375rem;
389
- }
377
+ // Score result display
378
+ .observ-datasets__score-result {
379
+ margin: 1rem 0;
390
380
  }
391
381
 
392
- &__comment {
382
+ // Text label utility
383
+ .observ-text--label {
393
384
  display: block;
394
- width: 100%;
395
- margin-left: 1.375rem;
396
- font-size: $observ-font-size-xs;
397
- color: $observ-gray-500;
398
- font-style: italic;
399
- }
400
-
401
- &__more {
402
- color: $observ-gray-400;
403
- font-size: $observ-font-size-xs;
404
- }
405
- }
406
-
407
- // Score context in drawer
408
- .observ-datasets__score-context {
409
- margin-bottom: 1.5rem;
410
-
411
- h4 {
412
385
  margin-bottom: 0.5rem;
386
+ font-weight: 600;
387
+ color: $observ-text-secondary;
388
+ font-size: $observ-font-size-sm;
389
+ text-transform: uppercase;
390
+ letter-spacing: 0.025em;
413
391
  }
414
392
 
415
- pre {
416
- max-height: 150px;
417
- overflow-y: auto;
418
- }
419
- }
420
-
421
- // Existing scores section
422
- .observ-datasets__existing-scores {
423
- margin-top: 2rem;
424
- padding-top: 1.5rem;
425
- border-top: 1px solid $observ-gray-200;
393
+ // Form styles for scoring
394
+ .observ-form__textarea {
395
+ width: 100%;
396
+ padding: 0.75rem;
397
+ border: 1px solid $observ-border-color;
398
+ border-radius: $observ-border-radius-sm;
399
+ font-size: $observ-font-size-base;
400
+ font-family: inherit;
401
+ resize: vertical;
402
+ min-height: 80px;
403
+ background-color: $observ-bg-elevated;
404
+ color: $observ-text-primary;
426
405
 
427
- h4 {
428
- margin-bottom: 0.75rem;
406
+ &:focus {
407
+ outline: none;
408
+ border-color: $observ-primary;
409
+ box-shadow: 0 0 0 3px rgba($observ-primary, 0.1);
410
+ }
429
411
  }
430
- }
431
-
432
- // Score result display
433
- .observ-datasets__score-result {
434
- margin: 1rem 0;
435
- }
436
-
437
- // Text label utility
438
- .observ-text--label {
439
- display: block;
440
- margin-bottom: 0.5rem;
441
- font-weight: 600;
442
- color: $observ-gray-700;
443
- font-size: $observ-font-size-sm;
444
- text-transform: uppercase;
445
- letter-spacing: 0.025em;
446
- }
447
412
 
448
- // Form styles for scoring
449
- .observ-form__textarea {
450
- width: 100%;
451
- padding: 0.75rem;
452
- border: 1px solid $observ-gray-300;
453
- border-radius: $observ-border-radius-sm;
454
- font-size: $observ-font-size-base;
455
- font-family: inherit;
456
- resize: vertical;
457
- min-height: 80px;
458
-
459
- &:focus {
460
- outline: none;
461
- border-color: $observ-primary;
462
- box-shadow: 0 0 0 3px rgba($observ-primary, 0.1);
413
+ .observ-form__group {
414
+ margin-bottom: 1.5rem;
463
415
  }
464
- }
465
-
466
- .observ-form__group {
467
- margin-bottom: 1.5rem;
468
- }
469
-
470
- .observ-form__label {
471
- display: block;
472
- margin-bottom: 0.5rem;
473
- font-weight: 500;
474
- color: $observ-gray-700;
475
- }
476
416
 
477
- .observ-form__actions {
478
- display: flex;
479
- gap: 0.75rem;
480
- margin-top: 1.5rem;
481
- }
482
-
483
- // Review Mode Styles
484
- .observ-review {
485
- &__progress-section {
486
- background: $observ-white;
487
- padding: $observ-spacing-lg;
488
- border-radius: $observ-border-radius;
489
- margin-bottom: $observ-spacing-lg;
490
- box-shadow: $observ-shadow-sm;
417
+ .observ-form__label {
418
+ display: block;
419
+ margin-bottom: 0.5rem;
420
+ font-weight: 500;
421
+ color: $observ-text-secondary;
491
422
  }
492
423
 
493
- &__progress-header {
424
+ .observ-form__actions {
494
425
  display: flex;
495
- justify-content: space-between;
496
- align-items: center;
497
- margin-bottom: $observ-spacing-sm;
498
- }
499
-
500
- &__progress-label {
501
- font-size: $observ-font-size-sm;
502
- color: $observ-gray-600;
426
+ gap: 0.75rem;
427
+ margin-top: 1.5rem;
428
+ }
429
+
430
+ // Review Mode Styles
431
+ .observ-review {
432
+ &__progress-section {
433
+ background: $observ-bg-surface;
434
+ padding: $observ-spacing-lg;
435
+ border-radius: $observ-border-radius;
436
+ margin-bottom: $observ-spacing-lg;
437
+ border: 1px solid $observ-border-color;
438
+ }
503
439
 
504
- strong {
505
- color: $observ-gray-900;
440
+ &__progress-header {
441
+ display: flex;
442
+ justify-content: space-between;
443
+ align-items: center;
444
+ margin-bottom: $observ-spacing-sm;
506
445
  }
507
- }
508
446
 
509
- &__progress-percent {
510
- font-size: $observ-font-size-lg;
511
- font-weight: 600;
512
- color: $observ-success;
513
- }
447
+ &__progress-label {
448
+ font-size: $observ-font-size-sm;
449
+ color: $observ-text-secondary;
514
450
 
515
- &__card {
516
- background: $observ-white;
517
- box-shadow: $observ-shadow-md;
518
- }
451
+ strong {
452
+ color: $observ-text-primary;
453
+ }
454
+ }
519
455
 
520
- &__data-grid {
521
- display: grid;
522
- gap: $observ-spacing-lg;
523
- margin-bottom: $observ-spacing-xl;
456
+ &__progress-percent {
457
+ font-size: $observ-font-size-lg;
458
+ font-weight: 600;
459
+ color: $observ-success;
460
+ }
524
461
 
525
- @media (min-width: 1024px) {
526
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
462
+ &__card {
463
+ background: $observ-bg-surface;
464
+ border: 1px solid $observ-border-color;
527
465
  }
528
- }
529
466
 
530
- &__data-section {
531
- background: $observ-gray-50;
532
- border-radius: $observ-border-radius;
533
- padding: $observ-spacing-md;
534
- border: 1px solid $observ-gray-200;
467
+ &__data-grid {
468
+ display: grid;
469
+ gap: $observ-spacing-lg;
470
+ margin-bottom: $observ-spacing-xl;
535
471
 
536
- &--highlight {
537
- background: rgba($observ-primary, 0.03);
538
- border-color: $observ-primary;
472
+ @media (min-width: 1024px) {
473
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
474
+ }
539
475
  }
540
- }
541
476
 
542
- &__data-label {
543
- font-size: $observ-font-size-xs;
544
- font-weight: 600;
545
- text-transform: uppercase;
546
- letter-spacing: 0.05em;
547
- color: $observ-gray-500;
548
- margin: 0 0 $observ-spacing-sm;
549
- }
477
+ &__data-section {
478
+ background: $observ-bg-elevated;
479
+ border-radius: $observ-border-radius;
480
+ padding: $observ-spacing-md;
481
+ border: 1px solid $observ-border-subtle;
550
482
 
551
- &__code-block {
552
- max-height: 250px;
553
- overflow-y: auto;
554
- margin: 0;
555
- font-size: $observ-font-size-sm;
556
- }
483
+ &--highlight {
484
+ background: rgba($observ-primary, 0.05);
485
+ border-color: $observ-primary;
486
+ }
487
+ }
557
488
 
558
- &__existing-scores {
559
- margin-bottom: $observ-spacing-xl;
560
- padding: $observ-spacing-md;
561
- background: $observ-gray-50;
562
- border-radius: $observ-border-radius;
563
- }
489
+ &__data-label {
490
+ font-size: $observ-font-size-xs;
491
+ font-weight: 600;
492
+ text-transform: uppercase;
493
+ letter-spacing: 0.05em;
494
+ color: $observ-text-muted;
495
+ margin: 0 0 $observ-spacing-sm;
496
+ }
564
497
 
565
- &__scores-list {
566
- display: flex;
567
- flex-wrap: wrap;
568
- gap: $observ-spacing-sm;
569
- margin-top: $observ-spacing-sm;
570
- }
498
+ &__code-block {
499
+ max-height: 250px;
500
+ overflow-y: auto;
501
+ margin: 0;
502
+ font-size: $observ-font-size-sm;
503
+ }
571
504
 
572
- &__form {
573
- border-top: 1px solid $observ-gray-200;
574
- padding-top: $observ-spacing-xl;
575
- }
505
+ &__existing-scores {
506
+ margin-bottom: $observ-spacing-xl;
507
+ padding: $observ-spacing-md;
508
+ background: $observ-bg-elevated;
509
+ border-radius: $observ-border-radius;
510
+ }
576
511
 
577
- &__scoring-section {
578
- margin-bottom: $observ-spacing-xl;
579
- }
512
+ &__scores-list {
513
+ display: flex;
514
+ flex-wrap: wrap;
515
+ gap: $observ-spacing-sm;
516
+ margin-top: $observ-spacing-sm;
517
+ }
580
518
 
581
- &__scoring-label {
582
- font-size: $observ-font-size-lg;
583
- font-weight: 600;
584
- color: $observ-gray-900;
585
- margin: 0 0 $observ-spacing-md;
586
- }
519
+ &__form {
520
+ border-top: 1px solid $observ-border-subtle;
521
+ padding-top: $observ-spacing-xl;
522
+ }
587
523
 
588
- &__score-buttons {
589
- display: flex;
590
- gap: $observ-spacing-lg;
591
- margin-bottom: $observ-spacing-lg;
592
- }
524
+ &__scoring-section {
525
+ margin-bottom: $observ-spacing-xl;
526
+ }
593
527
 
594
- &__score-button {
595
- flex: 1;
596
- display: flex;
597
- flex-direction: column;
598
- align-items: center;
599
- justify-content: center;
600
- padding: $observ-spacing-xl $observ-spacing-lg;
601
- border: 3px solid $observ-gray-300;
602
- border-radius: $observ-border-radius-lg;
603
- cursor: pointer;
604
- transition: all 0.2s ease;
605
- background: $observ-white;
606
- max-width: 200px;
528
+ &__scoring-label {
529
+ font-size: $observ-font-size-lg;
530
+ font-weight: 600;
531
+ color: $observ-text-primary;
532
+ margin: 0 0 $observ-spacing-md;
533
+ }
607
534
 
608
- &:hover {
609
- transform: translateY(-2px);
610
- box-shadow: $observ-shadow-md;
535
+ &__score-buttons {
536
+ display: flex;
537
+ gap: $observ-spacing-lg;
538
+ margin-bottom: $observ-spacing-lg;
611
539
  }
612
540
 
613
- &--pass {
541
+ &__score-button {
542
+ flex: 1;
543
+ display: flex;
544
+ flex-direction: column;
545
+ align-items: center;
546
+ justify-content: center;
547
+ padding: $observ-spacing-xl $observ-spacing-lg;
548
+ border: 3px solid $observ-border-color;
549
+ border-radius: $observ-border-radius-lg;
550
+ cursor: pointer;
551
+ transition: all 0.2s ease;
552
+ background: $observ-bg-elevated;
553
+ max-width: 200px;
554
+
614
555
  &:hover {
615
- border-color: $observ-success;
616
- background: rgba($observ-success, 0.05);
556
+ transform: translateY(-2px);
617
557
  }
618
558
 
619
- &:has(input[type="radio"]:checked) {
620
- border-color: $observ-success;
621
- background: rgba($observ-success, 0.1);
622
- box-shadow: 0 0 0 4px rgba($observ-success, 0.2);
559
+ &--pass {
560
+ &:hover {
561
+ border-color: $observ-success;
562
+ background: rgba($observ-success, 0.1);
563
+ }
564
+
565
+ &:has(input[type="radio"]:checked) {
566
+ border-color: $observ-success;
567
+ background: rgba($observ-success, 0.15);
568
+ box-shadow: 0 0 0 4px rgba($observ-success, 0.2);
569
+ }
623
570
  }
624
- }
625
571
 
626
- &--fail {
627
- &:hover {
628
- border-color: $observ-danger;
629
- background: rgba($observ-danger, 0.05);
572
+ &--fail {
573
+ &:hover {
574
+ border-color: $observ-danger;
575
+ background: rgba($observ-danger, 0.1);
576
+ }
577
+
578
+ &:has(input[type="radio"]:checked) {
579
+ border-color: $observ-danger;
580
+ background: rgba($observ-danger, 0.15);
581
+ box-shadow: 0 0 0 4px rgba($observ-danger, 0.2);
582
+ }
630
583
  }
631
584
 
632
- &:has(input[type="radio"]:checked) {
633
- border-color: $observ-danger;
634
- background: rgba($observ-danger, 0.1);
635
- box-shadow: 0 0 0 4px rgba($observ-danger, 0.2);
585
+ input[type="radio"] {
586
+ position: absolute;
587
+ opacity: 0;
588
+ width: 0;
589
+ height: 0;
636
590
  }
637
591
  }
638
592
 
639
- input[type="radio"] {
640
- position: absolute;
641
- opacity: 0;
642
- width: 0;
643
- height: 0;
644
- }
645
- }
593
+ &__score-icon {
594
+ font-size: 2.5rem;
595
+ font-weight: bold;
596
+ margin-bottom: $observ-spacing-sm;
646
597
 
647
- &__score-icon {
648
- font-size: 2.5rem;
649
- font-weight: bold;
650
- margin-bottom: $observ-spacing-sm;
598
+ .observ-review__score-button--pass & {
599
+ color: $observ-success;
600
+ }
651
601
 
652
- .observ-review__score-button--pass & {
653
- color: $observ-success;
602
+ .observ-review__score-button--fail & {
603
+ color: $observ-danger;
604
+ }
654
605
  }
655
606
 
656
- .observ-review__score-button--fail & {
657
- color: $observ-danger;
607
+ &__score-text {
608
+ font-size: $observ-font-size-lg;
609
+ font-weight: 600;
610
+ color: $observ-text-primary;
658
611
  }
659
- }
660
612
 
661
- &__score-text {
662
- font-size: $observ-font-size-lg;
663
- font-weight: 600;
664
- color: $observ-gray-900;
665
- }
613
+ &__score-shortcut {
614
+ font-size: $observ-font-size-xs;
615
+ color: $observ-text-muted;
616
+ margin-top: $observ-spacing-xs;
617
+ }
666
618
 
667
- &__score-shortcut {
668
- font-size: $observ-font-size-xs;
669
- color: $observ-gray-400;
670
- margin-top: $observ-spacing-xs;
671
- }
619
+ &__comment-group {
620
+ max-width: 500px;
621
+ }
672
622
 
673
- &__comment-group {
674
- max-width: 500px;
675
- }
623
+ &__actions {
624
+ display: flex;
625
+ gap: $observ-spacing-md;
626
+ align-items: center;
627
+ }
676
628
 
677
- &__actions {
678
- display: flex;
679
- gap: $observ-spacing-md;
680
- align-items: center;
629
+ &__action-shortcut {
630
+ font-size: $observ-font-size-xs;
631
+ color: rgba(255, 255, 255, 0.7);
632
+ margin-left: $observ-spacing-sm;
633
+ background: rgba(0, 0, 0, 0.2);
634
+ padding: 0.125rem 0.375rem;
635
+ border-radius: $observ-border-radius-sm;
636
+ }
681
637
  }
682
638
 
683
- &__action-shortcut {
684
- font-size: $observ-font-size-xs;
685
- color: rgba(255, 255, 255, 0.7);
686
- margin-left: $observ-spacing-sm;
687
- background: rgba(0, 0, 0, 0.2);
688
- padding: 0.125rem 0.375rem;
689
- border-radius: $observ-border-radius-sm;
639
+ // Button size modifier
640
+ .observ-button--lg {
641
+ padding: 0.75rem 1.5rem;
642
+ font-size: $observ-font-size-base;
690
643
  }
691
644
  }
692
-
693
- // Button size modifier
694
- .observ-button--lg {
695
- padding: 0.75rem 1.5rem;
696
- font-size: $observ-font-size-base;
697
- }