rubyllm-observ 0.5.0

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

@@ -0,0 +1,273 @@
+@import 'variables';
+
+.observ-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  pointer-events: none;
+
+  &.open {
+    pointer-events: auto;
+
+    .observ-drawer__overlay {
+      opacity: 1;
+    }
+
+    .observ-drawer__panel {
+      transform: translateX(0);
+    }
+  }
+}
+
+.observ-drawer__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba($observ-black, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+.observ-drawer__panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 600px;
+  background-color: $observ-white;
+  box-shadow: $observ-shadow-lg;
+  transform: translateX(100%);
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  @media (max-width: $observ-breakpoint-md) {
+    max-width: 90%;
+  }
+}
+
+.observ-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: $observ-spacing-md;
+  padding: $observ-spacing-lg;
+  border-bottom: 1px solid $observ-gray-200;
+  background-color: $observ-white;
+  flex-shrink: 0;
+}
+
+.observ-drawer__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: $observ-gray-600;
+  cursor: pointer;
+  border-radius: $observ-border-radius-sm;
+  transition: $observ-transition;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: $observ-gray-100;
+    color: $observ-gray-900;
+  }
+
+  &:active {
+    background-color: $observ-gray-200;
+  }
+
+  svg {
+    display: block;
+  }
+}
+
+.observ-drawer__title {
+  margin: 0;
+  font-size: $observ-font-size-xl;
+  font-weight: 600;
+  color: $observ-gray-900;
+  flex: 1;
+  min-width: 0;
+
+  .observ-spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+.observ-drawer__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: $observ-spacing-lg;
+  background-color: $observ-white;
+}
+
+.observ-drawer__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $observ-spacing-2xl;
+  color: $observ-gray-500;
+
+  .observ-spinner {
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
+.observ-drawer__error {
+  padding: $observ-spacing-lg;
+  background-color: lighten($observ-danger, 45%);
+  color: darken($observ-danger, 10%);
+  border-radius: $observ-border-radius;
+  text-align: center;
+}
+
+// Text output specific styles
+.observ-drawer__text-output {
+  position: relative;
+  width: 100%;
+}
+
+.observ-drawer__textarea {
+  width: 100%;
+  min-height: 600px;
+  padding: $observ-spacing-md;
+  border: 1px solid $observ-gray-300;
+  border-radius: $observ-border-radius;
+  font-family: $observ-font-family-mono;
+  font-size: 12px;
+  line-height: 1.6;
+  resize: vertical;
+  background-color: $observ-gray-50;
+  color: $observ-gray-900;
+  
+  &:focus {
+    outline: none;
+    border-color: $observ-primary;
+    box-shadow: 0 0 0 3px rgba($observ-primary, 0.1);
+  }
+}
+
+.observ-drawer__copy-btn {
+  position: absolute;
+  top: $observ-spacing-sm;
+  right: $observ-spacing-sm;
+}
+
+.observ-drawer__instructions {
+  margin-bottom: $observ-spacing-md;
+  padding: $observ-spacing-sm;
+  background-color: lighten($observ-info, 45%);
+  border-left: 3px solid $observ-info;
+  border-radius: $observ-border-radius-sm;
+  font-size: $observ-font-size-sm;
+  color: $observ-gray-700;
+}
+
+.observ-drawer__help {
+  margin-top: $observ-spacing-md;
+  
+  details {
+    cursor: pointer;
+    
+    summary {
+      color: $observ-gray-600;
+      font-size: $observ-font-size-sm;
+      font-weight: 500;
+      padding: $observ-spacing-xs;
+      
+      &:hover {
+        color: $observ-gray-900;
+      }
+    }
+  }
+  
+  &-list {
+    margin-top: $observ-spacing-sm;
+    padding-left: $observ-spacing-lg;
+    font-size: $observ-font-size-sm;
+    color: $observ-gray-600;
+    
+    li {
+      margin-bottom: $observ-spacing-xs;
+    }
+  }
+}
+
+// Field styles for structured content display
+.observ-drawer__field {
+  margin-bottom: $observ-spacing-lg;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.observ-drawer__field-label {
+  display: block;
+  margin-bottom: $observ-spacing-xs;
+  font-size: $observ-font-size-sm;
+  font-weight: 600;
+  color: $observ-gray-700;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.observ-drawer__field-value {
+  display: flex;
+  align-items: center;
+  gap: $observ-spacing-sm;
+}
+
+// Metrics grid for displaying stats
+.observ-drawer__metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $observ-spacing-md;
+  margin-bottom: $observ-spacing-lg;
+  padding: $observ-spacing-md;
+  background-color: $observ-gray-50;
+  border-radius: $observ-border-radius;
+}
+
+.observ-drawer__metric {
+  text-align: center;
+}
+
+.observ-drawer__metric-label {
+  display: block;
+  font-size: $observ-font-size-xs;
+  color: $observ-gray-500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: $observ-spacing-xs;
+}
+
+.observ-drawer__metric-value {
+  display: block;
+  font-size: $observ-font-size-lg;
+  font-weight: 600;
+  color: $observ-gray-900;
+}
+
+// Actions footer
+.observ-drawer__actions {
+  display: flex;
+  gap: $observ-spacing-sm;
+  margin-top: $observ-spacing-lg;
+  padding-top: $observ-spacing-lg;
+  border-top: 1px solid $observ-gray-200;
+}

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

@@ -0,0 +1,120 @@
+// Custom JSON Viewer Styles
+// Fully custom implementation with proper newline handling
+
+.observ-json-viewer {
+  font-family: $observ-font-family-mono;
+  background-color: $observ-gray-900;
+  color: $observ-gray-100;
+  padding: $observ-spacing-md;
+  border-radius: $observ-border-radius;
+  overflow-x: auto;
+  font-size: $observ-font-size-sm;
+  line-height: 1.6;
+  margin: 0;
+
+  .json-container {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .json-line {
+    display: block;
+    
+    &.json-footer {
+      // Closing braces/brackets
+    }
+  }
+
+  .json-object,
+  .json-array {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .json-content {
+    display: block;
+  }
+
+  // Toggle buttons (▸/▾)
+  .json-toggle {
+    display: inline-block;
+    width: 1em;
+    margin-right: 0.25em;
+    color: $observ-gray-400;
+    cursor: pointer;
+    user-select: none;
+    
+    &:hover {
+      color: $observ-primary;
+    }
+  }
+
+  // Indentation
+  .json-indent {
+    display: inline-block;
+    white-space: pre;
+  }
+
+  // Item count when collapsed
+  .json-item-count {
+    color: $observ-gray-500;
+    font-style: italic;
+    font-size: 0.9em;
+    margin-left: 0.25em;
+  }
+
+  // Keys
+  .json-key {
+    color: $observ-info;
+    font-weight: 500;
+  }
+
+  // String values
+  .json-string {
+    color: $observ-success;
+    display: inline;
+    
+    .json-string-content {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    
+    .json-quote {
+      opacity: 0.7;
+    }
+  }
+
+  // Number values
+  .json-number {
+    color: #ff9800;
+  }
+
+  // Boolean values
+  .json-boolean {
+    color: #9c27b0;
+    font-weight: 500;
+  }
+
+  // Null values
+  .json-null {
+    color: $observ-gray-500;
+    font-style: italic;
+  }
+
+  // Punctuation (brackets, braces, colons, commas)
+  .json-punctuation {
+    color: $observ-gray-400;
+  }
+
+  // Unknown/fallback
+  .json-unknown {
+    color: $observ-warning;
+  }
+}
+
+// Compact variant for use in cards
+.observ-json-viewer--compact {
+  padding: $observ-spacing-sm;
+  font-size: $observ-font-size-xs;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,256 @@
+@import 'variables';
+
+.observ-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: $observ-gray-50;
+  font-family: $observ-font-family;
+  color: $observ-gray-900;
+  font-size: $observ-font-size-base;
+  line-height: 1.5;
+}
+
+.observ-nav {
+  background-color: $observ-white;
+  border-bottom: 1px solid $observ-gray-200;
+  box-shadow: $observ-shadow-sm;
+
+  &__container {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 $observ-spacing-lg;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+  }
+
+  &__brand {
+    font-size: $observ-font-size-xl;
+    font-weight: 600;
+  }
+
+  &__brand-link {
+    color: $observ-gray-900;
+    text-decoration: none;
+    transition: $observ-transition;
+
+    &:hover {
+      color: $observ-primary;
+    }
+  }
+
+  &__menu {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: $observ-spacing-md;
+  }
+
+  &__item {
+    margin: 0;
+
+    &--dropdown {
+      position: relative;
+    }
+  }
+
+  &__dropdown-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  &__dropdown-arrow {
+    margin-left: 4px;
+    font-size: 0.75em;
+    transition: transform 0.2s;
+  }
+
+  &__dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    background-color: $observ-white;
+    border: 1px solid $observ-gray-200;
+    border-radius: $observ-border-radius;
+    box-shadow: $observ-shadow-md;
+    list-style: none;
+    padding: $observ-spacing-xs 0;
+    min-width: 160px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all 0.2s ease;
+    z-index: 1000;
+
+    &--open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+
+    li {
+      margin: 0;
+    }
+  }
+
+  &__dropdown-link {
+    display: block;
+    padding: $observ-spacing-sm $observ-spacing-md;
+    color: $observ-gray-700;
+    text-decoration: none;
+    transition: $observ-transition;
+    font-weight: 500;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: $observ-gray-100;
+      color: $observ-gray-900;
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: $observ-spacing-sm $observ-spacing-md;
+    color: $observ-gray-600;
+    text-decoration: none;
+    border-radius: $observ-border-radius-sm;
+    transition: $observ-transition;
+    font-weight: 500;
+
+    &:hover {
+      background-color: $observ-gray-100;
+      color: $observ-gray-900;
+    }
+
+    &--active {
+      background-color: $observ-primary;
+      color: $observ-white;
+
+      &:hover {
+        background-color: darken($observ-primary, 5%);
+        color: $observ-white;
+      }
+    }
+
+    &--secondary {
+      color: $observ-gray-500;
+      font-size: $observ-font-size-sm;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: $observ-spacing-sm;
+  }
+}
+
+.observ-main {
+  flex: 1;
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+  padding: $observ-spacing-xl $observ-spacing-lg;
+}
+
+.observ-container {
+  display: flex;
+  flex-direction: column;
+  gap: $observ-spacing-xl;
+}
+
+.observ-footer {
+  background-color: $observ-white;
+  border-top: 1px solid $observ-gray-200;
+  margin-top: auto;
+
+  &__container {
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: $observ-spacing-lg;
+    text-align: center;
+  }
+
+  &__text {
+    color: $observ-gray-500;
+    font-size: $observ-font-size-sm;
+    margin: 0;
+  }
+}
+
+.observ-page-header {
+  margin-bottom: $observ-spacing-xl;
+  display: flex;
+  align-items: center;
+  gap: $observ-spacing-md;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $observ-spacing-md;
+    flex: 1;
+  }
+
+  &__breadcrumb {
+    color: $observ-gray-500;
+    font-size: $observ-font-size-sm;
+    margin-bottom: $observ-spacing-xs;
+  }
+
+  &__title {
+    font-size: $observ-font-size-3xl;
+    font-weight: 700;
+    margin: 0;
+    color: $observ-gray-900;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    gap: $observ-spacing-sm;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $observ-spacing-sm;
+    align-items: center;
+  }
+}
+
+.observ-alert {
+  padding: $observ-spacing-md;
+  border-radius: $observ-border-radius;
+  margin-bottom: $observ-spacing-lg;
+  font-size: $observ-font-size-sm;
+
+  &--success {
+    background-color: lighten($observ-success, 45%);
+    color: darken($observ-success, 20%);
+    border: 1px solid lighten($observ-success, 30%);
+  }
+
+  &--danger {
+    background-color: lighten($observ-danger, 45%);
+    color: darken($observ-danger, 20%);
+    border: 1px solid lighten($observ-danger, 30%);
+  }
+
+  &--warning {
+    background-color: lighten($observ-warning, 45%);
+    color: darken($observ-warning, 30%);
+    border: 1px solid lighten($observ-warning, 30%);
+  }
+
+  &--info {
+    background-color: lighten($observ-info, 45%);
+    color: darken($observ-info, 20%);
+    border: 1px solid lighten($observ-info, 30%);
+  }
+}