rubyllm-observ 0.5.0

data/app/assets/javascripts/observ/controllers/json_viewer_controller.js

@@ -0,0 +1,260 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    data: String
+  }
+
+  connect() {
+    console.log('[Observ] json-viewer controller connected')
+    // Parse the JSON string to get the actual data
+    let data
+    try {
+      data = JSON.parse(this.dataValue)
+    } catch (error) {
+      console.error('Failed to parse JSON data:', error)
+      this.element.innerHTML = '<p style="color: red;">Error parsing JSON data</p>'
+      return
+    }
+    
+    // Clear any existing content
+    this.element.innerHTML = ''
+    
+    // Render the JSON
+    const container = document.createElement('div')
+    container.className = 'json-container'
+    container.appendChild(this.render(data, 0))
+    this.element.appendChild(container)
+  }
+
+  render(data, level) {
+    if (data === null) return this.renderNull()
+    if (Array.isArray(data)) return this.renderArray(data, level)
+    if (typeof data === 'object') return this.renderObject(data, level)
+    if (typeof data === 'string') return this.renderString(data)
+    if (typeof data === 'number') return this.renderNumber(data)
+    if (typeof data === 'boolean') return this.renderBoolean(data)
+    
+    // Fallback
+    return this.renderUnknown(data)
+  }
+
+  renderObject(obj, level) {
+    const keys = Object.keys(obj)
+    
+    if (keys.length === 0) {
+      return this.createSpan('json-punctuation', '{}')
+    }
+
+    const container = document.createElement('div')
+    container.className = 'json-object'
+    
+    // Opening brace
+    const header = document.createElement('div')
+    header.className = 'json-line'
+    
+    const toggle = this.createToggle(true)
+    const openBrace = this.createSpan('json-punctuation', '{')
+    const itemCount = this.createSpan('json-item-count', ` ${keys.length} ${keys.length === 1 ? 'item' : 'items'}`)
+    itemCount.style.display = 'none'
+    
+    header.appendChild(toggle)
+    header.appendChild(openBrace)
+    header.appendChild(itemCount)
+    container.appendChild(header)
+    
+    // Content
+    const content = document.createElement('div')
+    content.className = 'json-content'
+    
+    keys.forEach((key, index) => {
+      const line = document.createElement('div')
+      line.className = 'json-line'
+      
+      const indent = this.createIndent(level + 1)
+      const keySpan = this.createSpan('json-key', `"${key}"`)
+      const colon = this.createSpan('json-punctuation', ': ')
+      
+      line.appendChild(indent)
+      line.appendChild(keySpan)
+      line.appendChild(colon)
+      
+      const valueElement = this.render(obj[key], level + 1)
+      if (valueElement.classList && (valueElement.classList.contains('json-object') || valueElement.classList.contains('json-array'))) {
+        line.appendChild(valueElement)
+      } else {
+        line.appendChild(valueElement)
+      }
+      
+      if (index < keys.length - 1) {
+        line.appendChild(this.createSpan('json-punctuation', ','))
+      }
+      
+      content.appendChild(line)
+    })
+    
+    container.appendChild(content)
+    
+    // Closing brace
+    const footer = document.createElement('div')
+    footer.className = 'json-line json-footer'
+    footer.appendChild(this.createIndent(level))
+    footer.appendChild(this.createSpan('json-punctuation', '}'))
+    container.appendChild(footer)
+    
+    // Add toggle functionality
+    toggle.addEventListener('click', (e) => {
+      e.preventDefault()
+      this.toggleCollapse(toggle, content, itemCount, footer)
+    })
+    
+    return container
+  }
+
+  renderArray(arr, level) {
+    if (arr.length === 0) {
+      return this.createSpan('json-punctuation', '[]')
+    }
+
+    const container = document.createElement('div')
+    container.className = 'json-array'
+    
+    // Opening bracket
+    const header = document.createElement('div')
+    header.className = 'json-line'
+    
+    const toggle = this.createToggle(true)
+    const openBracket = this.createSpan('json-punctuation', '[')
+    const itemCount = this.createSpan('json-item-count', ` ${arr.length} ${arr.length === 1 ? 'item' : 'items'}`)
+    itemCount.style.display = 'none'
+    
+    header.appendChild(toggle)
+    header.appendChild(openBracket)
+    header.appendChild(itemCount)
+    container.appendChild(header)
+    
+    // Content
+    const content = document.createElement('div')
+    content.className = 'json-content'
+    
+    arr.forEach((item, index) => {
+      const line = document.createElement('div')
+      line.className = 'json-line'
+      
+      const indent = this.createIndent(level + 1)
+      line.appendChild(indent)
+      
+      const valueElement = this.render(item, level + 1)
+      line.appendChild(valueElement)
+      
+      if (index < arr.length - 1) {
+        line.appendChild(this.createSpan('json-punctuation', ','))
+      }
+      
+      content.appendChild(line)
+    })
+    
+    container.appendChild(content)
+    
+    // Closing bracket
+    const footer = document.createElement('div')
+    footer.className = 'json-line json-footer'
+    footer.appendChild(this.createIndent(level))
+    footer.appendChild(this.createSpan('json-punctuation', ']'))
+    container.appendChild(footer)
+    
+    // Add toggle functionality
+    toggle.addEventListener('click', (e) => {
+      e.preventDefault()
+      this.toggleCollapse(toggle, content, itemCount, footer)
+    })
+    
+    return container
+  }
+
+  renderString(str) {
+    // Unescape special characters
+    const unescaped = str.replace(/\\n/g, '\n')
+                         .replace(/\\t/g, '  ')
+                         .replace(/\\r/g, '')
+    
+    const span = document.createElement('span')
+    span.className = 'json-string'
+    
+    // Add opening quote
+    const openQuote = this.createSpan('json-quote', '"')
+    span.appendChild(openQuote)
+    
+    // Add the actual string content
+    const content = document.createElement('span')
+    content.className = 'json-string-content'
+    content.textContent = unescaped
+    span.appendChild(content)
+    
+    // Add closing quote
+    const closeQuote = this.createSpan('json-quote', '"')
+    span.appendChild(closeQuote)
+    
+    return span
+  }
+
+  renderNumber(num) {
+    return this.createSpan('json-number', num.toString())
+  }
+
+  renderBoolean(bool) {
+    return this.createSpan('json-boolean', bool.toString())
+  }
+
+  renderNull() {
+    return this.createSpan('json-null', 'null')
+  }
+
+  renderUnknown(data) {
+    return this.createSpan('json-unknown', String(data))
+  }
+
+  createSpan(className, text) {
+    const span = document.createElement('span')
+    span.className = className
+    span.textContent = text
+    return span
+  }
+
+  createIndent(level) {
+    const span = document.createElement('span')
+    span.className = 'json-indent'
+    span.textContent = '  '.repeat(level) // 2 spaces per level
+    return span
+  }
+
+  createToggle(expanded) {
+    const toggle = document.createElement('span')
+    toggle.className = 'json-toggle'
+    toggle.textContent = expanded ? '▾' : '▸'
+    toggle.style.cursor = 'pointer'
+    toggle.style.userSelect = 'none'
+    toggle.dataset.expanded = expanded
+    return toggle
+  }
+
+  toggleCollapse(toggle, content, itemCount, footer) {
+    const isExpanded = toggle.dataset.expanded === 'true'
+    
+    if (isExpanded) {
+      // Collapse
+      toggle.textContent = '▸'
+      toggle.dataset.expanded = 'false'
+      content.style.display = 'none'
+      footer.style.display = 'none'
+      itemCount.style.display = 'inline'
+    } else {
+      // Expand
+      toggle.textContent = '▾'
+      toggle.dataset.expanded = 'true'
+      content.style.display = 'block'
+      footer.style.display = 'block'
+      itemCount.style.display = 'none'
+    }
+  }
+}

data/app/assets/javascripts/observ/controllers/message_form_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "submit", "loadingIndicator"]
+  static values = { loading: { type: Boolean, default: false } }
+
+  connect() {
+    console.log('[Observ] message-form controller connected')
+    this.toggleSubmit()
+    this.boundHandleTurboSubmit = this.handleTurboSubmit.bind(this)
+    this.boundHandleTurboRender = this.handleTurboRender.bind(this)
+    
+    this.element.addEventListener('turbo:submit-start', this.boundHandleTurboSubmit)
+    document.addEventListener('turbo:before-stream-render', this.boundHandleTurboRender)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('turbo:submit-start', this.boundHandleTurboSubmit)
+    document.removeEventListener('turbo:before-stream-render', this.boundHandleTurboRender)
+  }
+
+  loadingValueChanged() {
+    this.updateUI()
+  }
+
+  toggleSubmit() {
+    this.updateUI()
+  }
+
+  updateUI() {
+    const hasContent = this.inputTarget.value.trim().length > 0
+    const canSubmit = hasContent && !this.loadingValue
+    
+    this.submitTarget.disabled = !canSubmit
+    
+    if (this.hasLoadingIndicatorTarget) {
+      this.loadingIndicatorTarget.style.display = this.loadingValue ? 'inline-flex' : 'none'
+    }
+    
+    this.submitTarget.style.display = this.loadingValue ? 'none' : 'inline-flex'
+  }
+
+  handleTurboSubmit(event) {
+    if (this.inputTarget.value.trim().length > 0) {
+      this.loadingValue = true
+    }
+  }
+
+  handleTurboRender(event) {
+    const streamElement = event.target
+    if (streamElement.target === 'new_message' || streamElement.target === 'messages') {
+      setTimeout(() => {
+        this.loadingValue = false
+        this.toggleSubmit()
+      }, 100)
+    }
+  }
+}

data/app/assets/javascripts/observ/controllers/prompt_variables_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Stimulus controller for detecting and displaying {{variable}} patterns in prompt content.
+ * 
+ * Targets:
+ *   - input: The textarea containing the prompt content
+ *   - preview: The container element for the variables preview
+ *   - list: The element that will contain the list of detected variables
+ * 
+ * Actions:
+ *   - detectVariables: Triggered on input to scan for {{variable}} patterns
+ * 
+ * Usage:
+ *   <div data-controller="observ--prompt-variables">
+ *     <textarea data-observ--prompt-variables-target="input" 
+ *               data-action="input->observ--prompt-variables#detectVariables"></textarea>
+ *     <div data-observ--prompt-variables-target="preview">
+ *       <div data-observ--prompt-variables-target="list"></div>
+ *     </div>
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["input", "preview", "list"]
+
+  connect() {
+    console.log('[Observ] prompt-variables controller connected')
+    // Detect variables on initial load
+    this.detectVariables()
+  }
+
+  detectVariables() {
+    const text = this.inputTarget.value
+    const matches = text.match(/\{\{([^}]+)\}\}/g)
+
+    if (matches && matches.length > 0) {
+      const uniqueVars = [...new Set(matches)]
+      this.displayVariables(uniqueVars)
+      this.showPreview()
+    } else {
+      this.hidePreview()
+    }
+  }
+
+  displayVariables(variables) {
+    this.listTarget.innerHTML = variables.map(v =>
+      `<span class="observ-badge observ-badge--info" style="font-size: 0.75rem;">${this.escapeHtml(v)}</span>`
+    ).join('')
+  }
+
+  showPreview() {
+    this.previewTarget.style.display = 'block'
+  }
+
+  hidePreview() {
+    this.previewTarget.style.display = 'none'
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div')
+    div.textContent = text
+    return div.innerHTML
+  }
+}

data/app/assets/javascripts/observ/controllers/text_select_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["text"]
+
+  connect() {
+    console.log('[Observ] text-select controller connected')
+  }
+
+  select(event) {
+    event.preventDefault()
+    this.textTarget.select()
+  }
+}

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

@@ -0,0 +1,127 @@
+.observ-drawer__section {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--observ-border-color, #e5e7eb);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.observ-drawer__section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--observ-text-primary, #111827);
+  margin: 0 0 1rem 0;
+}
+
+.observ-annotation-form {
+  .observ-form-field {
+    margin-bottom: 1rem;
+  }
+
+  .observ-form-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--observ-text-primary, #111827);
+    margin-bottom: 0.5rem;
+  }
+
+  .observ-form-textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--observ-border-color, #d1d5db);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:focus {
+      outline: none;
+      border-color: var(--observ-primary-color, #3b82f6);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+  }
+
+  .observ-form-error {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--observ-error-color, #ef4444);
+    margin-top: 0.25rem;
+  }
+
+  .observ-form-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.observ-annotations-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.observ-annotation {
+  padding: 1rem;
+  background: var(--observ-surface-color, #f9fafb);
+  border: 1px solid var(--observ-border-color, #e5e7eb);
+  border-radius: 0.5rem;
+}
+
+.observ-annotation__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--observ-border-color, #e5e7eb);
+}
+
+.observ-annotation__time {
+  font-size: 0.75rem;
+  color: var(--observ-text-secondary, #6b7280);
+}
+
+.observ-annotation__delete {
+  background: none;
+  border: none;
+  color: var(--observ-error-color, #ef4444);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.15s ease-in-out;
+
+  &:hover {
+    background-color: rgba(239, 68, 68, 0.1);
+  }
+}
+
+.observ-annotation__content {
+  font-size: 0.875rem;
+  color: var(--observ-text-primary, #111827);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  p {
+    margin: 0 0 0.5rem 0;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.observ-empty-state {
+  padding: 2rem;
+  text-align: center;
+}
+
+.observ-empty-state__text {
+  font-size: 0.875rem;
+  color: var(--observ-text-secondary, #6b7280);
+  margin: 0;
+}

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

@@ -0,0 +1,52 @@
+@import 'variables';
+
+.observ-card {
+  background-color: $observ-white;
+  border-radius: $observ-border-radius;
+  box-shadow: $observ-shadow;
+  overflow: hidden;
+
+  &__header {
+    padding: $observ-spacing-lg;
+    border-bottom: 1px solid $observ-gray-200;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-size: $observ-font-size-xl;
+    font-weight: 600;
+    margin: 0;
+    color: $observ-gray-900;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $observ-spacing-sm;
+  }
+
+  &__body {
+    padding: $observ-spacing-lg;
+  }
+
+  &__footer {
+    padding: $observ-spacing-lg;
+    border-top: 1px solid $observ-gray-200;
+    background-color: $observ-gray-50;
+  }
+
+  &__empty {
+    text-align: center;
+    padding: $observ-spacing-2xl;
+    color: $observ-gray-500;
+  }
+
+  &--span-2 {
+    grid-column: span 2;
+  }
+
+  &--highlighted {
+    border: 2px solid $observ-primary;
+  }
+}