rubyllm-observ 0.5.0

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

@@ -0,0 +1,697 @@
+@import 'variables';
+
+// Datasets Index Page - Filters
+.observ-datasets-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;
+    }
+
+    &--status {
+      width: 10rem;
+    }
+  }
+
+  &__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);
+  }
+}
+
+// Datasets Table
+.observ-datasets-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;
+    }
+  }
+
+  &__description {
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-500;
+    margin: $observ-spacing-xs 0 0;
+  }
+
+  &__action-group {
+    display: flex;
+    gap: var(--spacing-sm, 0.5rem);
+  }
+}
+
+// Dataset Show Page
+.observ-datasets {
+  &__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%);
+    }
+  }
+
+  &__info {
+    margin-bottom: $observ-spacing-lg;
+  }
+
+  &__metadata {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $observ-spacing-lg;
+    font-size: $observ-font-size-sm;
+
+    &--horizontal {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: $observ-spacing-lg;
+    }
+  }
+
+  &__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;
+  }
+
+  // Preview cells
+  &__cell--preview {
+    max-width: 300px;
+  }
+
+  &__preview {
+    display: block;
+    font-size: $observ-font-size-xs;
+    background-color: $observ-gray-50;
+    padding: $observ-spacing-xs;
+    border-radius: $observ-border-radius-sm;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Run progress section
+  &__run-progress {
+    margin-bottom: $observ-spacing-lg;
+    padding-bottom: $observ-spacing-lg;
+    border-bottom: 1px solid $observ-gray-200;
+  }
+
+  &__run-progress-header {
+    display: flex;
+    align-items: center;
+    gap: $observ-spacing-md;
+    margin-bottom: $observ-spacing-sm;
+  }
+
+  &__run-progress-stats {
+    font-size: $observ-font-size-sm;
+    color: $observ-gray-600;
+  }
+
+  // Progress bar
+  &__progress {
+    display: flex;
+    align-items: center;
+    gap: $observ-spacing-md;
+  }
+
+  &__progress-bar {
+    display: flex;
+    flex: 1;
+    height: 8px;
+    background-color: $observ-gray-200;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__progress-fill {
+    height: 100%;
+    transition: width 0.3s ease;
+
+    &--success {
+      background-color: $observ-success;
+    }
+
+    &--danger {
+      background-color: $observ-danger;
+    }
+  }
+
+  &__progress-text {
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-600;
+  }
+}
+
+// Tabs
+.observ-tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: $observ-spacing-lg;
+  border-bottom: 1px solid $observ-gray-200;
+
+  &__tab {
+    padding: $observ-spacing-sm $observ-spacing-md;
+    color: $observ-gray-600;
+    text-decoration: none;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    transition: $observ-transition;
+
+    &:hover {
+      color: $observ-gray-900;
+    }
+
+    &--active {
+      color: $observ-primary;
+      border-bottom-color: $observ-primary;
+    }
+  }
+}
+
+// Card danger zone
+.observ-card--danger {
+  border-color: $observ-danger;
+
+  .observ-card__header {
+    background-color: rgba($observ-danger, 0.05);
+  }
+
+  .observ-card__title {
+    color: $observ-danger;
+  }
+}
+
+// Empty state subtext
+.observ-card__empty-subtext {
+  font-size: $observ-font-size-sm;
+  color: $observ-gray-500;
+  margin-bottom: $observ-spacing-md;
+}
+
+// Text utilities
+.observ-text--danger {
+  color: $observ-danger;
+}
+
+// Badge sizes
+.observ-badge--sm {
+  font-size: $observ-font-size-xs;
+  padding: 0.125rem 0.375rem;
+}
+
+// Page header actions
+.observ-page-header__actions {
+  display: flex;
+  gap: $observ-spacing-sm;
+  align-items: center;
+}
+
+// Score buttons for manual scoring
+.observ-datasets__score-buttons {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.observ-datasets__score-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  border: 2px solid $observ-gray-300;
+  border-radius: $observ-border-radius;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: $observ-white;
+  font-weight: 500;
+
+  &:hover {
+    border-color: $observ-primary;
+    background: rgba($observ-primary, 0.02);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  // Highlight when radio inside is checked (CSS :has selector)
+  &:has(input[type="radio"]:checked) {
+    border-color: $observ-primary;
+    background: rgba($observ-primary, 0.1);
+    box-shadow: 0 0 0 3px rgba($observ-primary, 0.15);
+  }
+
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.observ-datasets__score-icon {
+  font-size: 1.25rem;
+  font-weight: bold;
+
+  &--pass {
+    color: $observ-success;
+  }
+
+  &--fail {
+    color: $observ-danger;
+  }
+}
+
+// Simple text-based scores list
+.observ-scores-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &--compact {
+    .observ-scores-list__item {
+      padding: 0.125rem 0;
+      font-size: $observ-font-size-xs;
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0;
+    font-size: $observ-font-size-sm;
+    color: $observ-gray-700;
+  }
+
+  &__indicator {
+    font-weight: 600;
+    width: 1em;
+    text-align: center;
+
+    &--pass {
+      color: $observ-success;
+    }
+
+    &--fail {
+      color: $observ-danger;
+    }
+  }
+
+  &__name {
+    font-weight: 500;
+    color: $observ-gray-900;
+  }
+
+  &__value {
+    color: $observ-gray-600;
+
+    &::before {
+      content: '·';
+      margin-right: 0.375rem;
+      color: $observ-gray-400;
+    }
+  }
+
+  &__source {
+    color: $observ-gray-400;
+    font-size: $observ-font-size-xs;
+
+    &::before {
+      content: '·';
+      margin-right: 0.375rem;
+    }
+  }
+
+  &__comment {
+    display: block;
+    width: 100%;
+    margin-left: 1.375rem;
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-500;
+    font-style: italic;
+  }
+
+  &__more {
+    color: $observ-gray-400;
+    font-size: $observ-font-size-xs;
+  }
+}
+
+// Score context in drawer
+.observ-datasets__score-context {
+  margin-bottom: 1.5rem;
+
+  h4 {
+    margin-bottom: 0.5rem;
+  }
+
+  pre {
+    max-height: 150px;
+    overflow-y: auto;
+  }
+}
+
+// Existing scores section
+.observ-datasets__existing-scores {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid $observ-gray-200;
+
+  h4 {
+    margin-bottom: 0.75rem;
+  }
+}
+
+// Score result display
+.observ-datasets__score-result {
+  margin: 1rem 0;
+}
+
+// Text label utility
+.observ-text--label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: $observ-gray-700;
+  font-size: $observ-font-size-sm;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+// Form styles for scoring
+.observ-form__textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid $observ-gray-300;
+  border-radius: $observ-border-radius-sm;
+  font-size: $observ-font-size-base;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+
+  &:focus {
+    outline: none;
+    border-color: $observ-primary;
+    box-shadow: 0 0 0 3px rgba($observ-primary, 0.1);
+  }
+}
+
+.observ-form__group {
+  margin-bottom: 1.5rem;
+}
+
+.observ-form__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: $observ-gray-700;
+}
+
+.observ-form__actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+// Review Mode Styles
+.observ-review {
+  &__progress-section {
+    background: $observ-white;
+    padding: $observ-spacing-lg;
+    border-radius: $observ-border-radius;
+    margin-bottom: $observ-spacing-lg;
+    box-shadow: $observ-shadow-sm;
+  }
+
+  &__progress-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: $observ-spacing-sm;
+  }
+
+  &__progress-label {
+    font-size: $observ-font-size-sm;
+    color: $observ-gray-600;
+
+    strong {
+      color: $observ-gray-900;
+    }
+  }
+
+  &__progress-percent {
+    font-size: $observ-font-size-lg;
+    font-weight: 600;
+    color: $observ-success;
+  }
+
+  &__card {
+    background: $observ-white;
+    box-shadow: $observ-shadow-md;
+  }
+
+  &__data-grid {
+    display: grid;
+    gap: $observ-spacing-lg;
+    margin-bottom: $observ-spacing-xl;
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
+  }
+
+  &__data-section {
+    background: $observ-gray-50;
+    border-radius: $observ-border-radius;
+    padding: $observ-spacing-md;
+    border: 1px solid $observ-gray-200;
+
+    &--highlight {
+      background: rgba($observ-primary, 0.03);
+      border-color: $observ-primary;
+    }
+  }
+
+  &__data-label {
+    font-size: $observ-font-size-xs;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: $observ-gray-500;
+    margin: 0 0 $observ-spacing-sm;
+  }
+
+  &__code-block {
+    max-height: 250px;
+    overflow-y: auto;
+    margin: 0;
+    font-size: $observ-font-size-sm;
+  }
+
+  &__existing-scores {
+    margin-bottom: $observ-spacing-xl;
+    padding: $observ-spacing-md;
+    background: $observ-gray-50;
+    border-radius: $observ-border-radius;
+  }
+
+  &__scores-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $observ-spacing-sm;
+    margin-top: $observ-spacing-sm;
+  }
+
+  &__form {
+    border-top: 1px solid $observ-gray-200;
+    padding-top: $observ-spacing-xl;
+  }
+
+  &__scoring-section {
+    margin-bottom: $observ-spacing-xl;
+  }
+
+  &__scoring-label {
+    font-size: $observ-font-size-lg;
+    font-weight: 600;
+    color: $observ-gray-900;
+    margin: 0 0 $observ-spacing-md;
+  }
+
+  &__score-buttons {
+    display: flex;
+    gap: $observ-spacing-lg;
+    margin-bottom: $observ-spacing-lg;
+  }
+
+  &__score-button {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $observ-spacing-xl $observ-spacing-lg;
+    border: 3px solid $observ-gray-300;
+    border-radius: $observ-border-radius-lg;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: $observ-white;
+    max-width: 200px;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: $observ-shadow-md;
+    }
+
+    &--pass {
+      &:hover {
+        border-color: $observ-success;
+        background: rgba($observ-success, 0.05);
+      }
+
+      &:has(input[type="radio"]:checked) {
+        border-color: $observ-success;
+        background: rgba($observ-success, 0.1);
+        box-shadow: 0 0 0 4px rgba($observ-success, 0.2);
+      }
+    }
+
+    &--fail {
+      &:hover {
+        border-color: $observ-danger;
+        background: rgba($observ-danger, 0.05);
+      }
+
+      &:has(input[type="radio"]:checked) {
+        border-color: $observ-danger;
+        background: rgba($observ-danger, 0.1);
+        box-shadow: 0 0 0 4px rgba($observ-danger, 0.2);
+      }
+    }
+
+    input[type="radio"] {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &__score-icon {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: $observ-spacing-sm;
+
+    .observ-review__score-button--pass & {
+      color: $observ-success;
+    }
+
+    .observ-review__score-button--fail & {
+      color: $observ-danger;
+    }
+  }
+
+  &__score-text {
+    font-size: $observ-font-size-lg;
+    font-weight: 600;
+    color: $observ-gray-900;
+  }
+
+  &__score-shortcut {
+    font-size: $observ-font-size-xs;
+    color: $observ-gray-400;
+    margin-top: $observ-spacing-xs;
+  }
+
+  &__comment-group {
+    max-width: 500px;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $observ-spacing-md;
+    align-items: center;
+  }
+
+  &__action-shortcut {
+    font-size: $observ-font-size-xs;
+    color: rgba(255, 255, 255, 0.7);
+    margin-left: $observ-spacing-sm;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.125rem 0.375rem;
+    border-radius: $observ-border-radius-sm;
+  }
+}
+
+// Button size modifier
+.observ-button--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: $observ-font-size-base;
+}