source_monitor 0.2.0 → 0.3.0

data/.claude/skills/hotwire-patterns/reference/stimulus.md

@@ -0,0 +1,307 @@
+# Stimulus Reference
+
+## Concept
+
+Stimulus is a modest JavaScript framework for adding behavior to HTML. It connects JavaScript objects (controllers) to DOM elements using data attributes.
+
+## Core Concepts
+
+| Concept | Purpose | Attribute |
+|---------|---------|-----------|
+| Controller | JavaScript class | `data-controller="name"` |
+| Action | Event handler | `data-action="event->controller#method"` |
+| Target | DOM reference | `data-controller-target="name"` |
+| Value | Reactive data | `data-controller-name-value="x"` |
+| Class | CSS class reference | `data-controller-name-class="x"` |
+| Outlet | Cross-controller reference | `data-controller-name-outlet=".selector"` |
+
+## Basic Controller
+
+```javascript
+// app/javascript/controllers/hello_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["output"]
+
+  greet() {
+    this.outputTarget.textContent = "Hello, Stimulus!"
+  }
+}
+```
+
+```erb
+<div data-controller="hello">
+  <button data-action="click->hello#greet">Greet</button>
+  <span data-hello-target="output"></span>
+</div>
+```
+
+## Controller Lifecycle
+
+```javascript
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  // Called when controller connects to DOM
+  connect() {
+    console.log("Connected!", this.element)
+  }
+
+  // Called when controller disconnects
+  disconnect() {
+    console.log("Disconnected!")
+  }
+
+  // Called when target is added
+  outputTargetConnected(element) {
+    console.log("Target connected:", element)
+  }
+
+  // Called when target is removed
+  outputTargetDisconnected(element) {
+    console.log("Target disconnected:", element)
+  }
+}
+```
+
+## Targets
+
+```javascript
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "output", "item"]
+
+  // Single target (first match)
+  copy() {
+    this.outputTarget.textContent = this.inputTarget.value
+  }
+
+  // Multiple targets (all matches)
+  clearAll() {
+    this.itemTargets.forEach(el => el.remove())
+  }
+
+  // Check if target exists
+  validate() {
+    if (this.hasOutputTarget) {
+      this.outputTarget.classList.add("validated")
+    }
+  }
+}
+```
+
+```erb
+<div data-controller="form">
+  <input data-form-target="input" type="text">
+  <div data-form-target="output"></div>
+  <div data-form-target="item">Item 1</div>
+  <div data-form-target="item">Item 2</div>
+</div>
+```
+
+## Values
+
+```javascript
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    count: { type: Number, default: 0 },
+    enabled: Boolean,
+    config: Object,
+    items: Array
+  }
+
+  connect() {
+    console.log(this.urlValue)      // String
+    console.log(this.countValue)    // Number
+    console.log(this.enabledValue)  // Boolean
+  }
+
+  // Called when value changes
+  countValueChanged(value, previousValue) {
+    console.log(`Count changed from ${previousValue} to ${value}`)
+  }
+
+  increment() {
+    this.countValue++  // Triggers countValueChanged
+  }
+}
+```
+
+```erb
+<div data-controller="counter"
+     data-counter-url-value="/api/count"
+     data-counter-count-value="5"
+     data-counter-enabled-value="true"
+     data-counter-config-value='{"max": 100}'>
+</div>
+```
+
+## Actions
+
+```javascript
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  // Basic action
+  submit() {
+    console.log("Submitted!")
+  }
+
+  // With event parameter
+  handleClick(event) {
+    event.preventDefault()
+    console.log("Clicked:", event.target)
+  }
+
+  // With params
+  delete(event) {
+    const id = event.params.id
+    console.log("Delete item:", id)
+  }
+}
+```
+
+```erb
+<div data-controller="items">
+  <%# Basic action %>
+  <button data-action="click->items#submit">Submit</button>
+
+  <%# Multiple events %>
+  <input data-action="input->items#validate focus->items#highlight">
+
+  <%# Shorthand (click is default for buttons) %>
+  <button data-action="items#submit">Submit</button>
+
+  <%# With params %>
+  <button data-action="items#delete" data-items-id-param="123">Delete</button>
+
+  <%# Prevent default %>
+  <form data-action="submit->items#handleSubmit:prevent">
+
+  <%# Stop propagation %>
+  <button data-action="click->items#handle:stop">Click</button>
+</div>
+```
+
+## Common Patterns
+
+### Toggle Visibility
+
+```javascript
+// toggle_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+  static classes = ["hidden"]
+
+  toggle() {
+    this.contentTarget.classList.toggle(this.hiddenClass)
+  }
+
+  show() {
+    this.contentTarget.classList.remove(this.hiddenClass)
+  }
+
+  hide() {
+    this.contentTarget.classList.add(this.hiddenClass)
+  }
+}
+```
+
+```erb
+<div data-controller="toggle" data-toggle-hidden-class="hidden">
+  <button data-action="toggle#toggle">Toggle</button>
+  <div data-toggle-target="content">Content here</div>
+</div>
+```
+
+### Form Validation
+
+```javascript
+// validation_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "error", "submit"]
+
+  validate() {
+    const isValid = this.inputTarget.value.length >= 3
+
+    this.errorTarget.textContent = isValid ? "" : "Minimum 3 characters"
+    this.submitTarget.disabled = !isValid
+  }
+}
+```
+
+### Debounced Search
+
+```javascript
+// search_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "results"]
+  static values = { url: String }
+
+  search() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.performSearch()
+    }, 300)
+  }
+
+  async performSearch() {
+    const query = this.inputTarget.value
+    const response = await fetch(`${this.urlValue}?q=${query}`)
+    this.resultsTarget.innerHTML = await response.text()
+  }
+}
+```
+
+### Clipboard
+
+```javascript
+// clipboard_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source"]
+  static values = { successMessage: { type: String, default: "Copied!" } }
+
+  copy() {
+    navigator.clipboard.writeText(this.sourceTarget.value)
+    this.showNotification()
+  }
+
+  showNotification() {
+    // Show temporary feedback
+  }
+}
+```
+
+## File Naming
+
+```
+app/javascript/controllers/
+├── application.js           # Auto-generated
+├── index.js                 # Auto-generated
+├── hello_controller.js      # data-controller="hello"
+├── clipboard_controller.js  # data-controller="clipboard"
+└── nested/
+    └── form_controller.js   # data-controller="nested--form"
+```
+
+## Debugging
+
+```javascript
+// Enable debug mode
+import { Application } from "@hotwired/stimulus"
+const application = Application.start()
+application.debug = true  // Logs controller lifecycle
+```

data/.claude/skills/hotwire-patterns/reference/tailwind-integration.md

@@ -0,0 +1,112 @@
+# Tailwind CSS Integration with Hotwire
+
+## Principles
+
+- Mobile-first responsive design
+- Semantic HTML with accessibility
+- Consistent color palette and spacing
+- Focus states on all interactive elements
+
+## Responsive Breakpoints
+
+```
+sm:  640px+  (small tablets)
+md:  768px+  (tablets)
+lg:  1024px+ (desktops)
+xl:  1280px+ (large desktops)
+```
+
+## Common Patterns
+
+### Responsive Grid
+
+```erb
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <%= render @items %>
+</div>
+```
+
+### Button Variants
+
+```erb
+<%# Primary %>
+<%= link_to "Save", path, class: "bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors" %>
+
+<%# Secondary %>
+<%= link_to "Cancel", path, class: "bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-2 px-4 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors" %>
+
+<%# Danger %>
+<%= button_to "Delete", path, method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors" %>
+```
+
+### Form Fields
+
+```erb
+<div class="space-y-1">
+  <%= f.label :name, class: "block text-sm font-medium text-gray-700" %>
+  <%= f.text_field :name, class: "w-full px-3 py-2 rounded-md border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 transition-colors", placeholder: "Enter name..." %>
+</div>
+```
+
+### Cards
+
+```erb
+<div class="bg-white rounded-lg shadow-md p-6">
+  <h3 class="text-xl font-semibold text-gray-800 mb-2">Title</h3>
+  <p class="text-gray-600">Content</p>
+</div>
+```
+
+### Badges
+
+```erb
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Inactive</span>
+```
+
+### Alerts
+
+```erb
+<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-md" role="alert">
+  <p class="font-medium">Success!</p>
+</div>
+```
+
+## Turbo-Specific Styling
+
+### Turbo Frame Loading State
+
+```erb
+<turbo-frame id="comments" src="<%= comments_path %>" loading="lazy" class="space-y-4">
+  <div class="flex items-center justify-center p-8">
+    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+  </div>
+</turbo-frame>
+```
+
+### Skeleton Loader
+
+```erb
+<div class="animate-pulse space-y-4">
+  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML (`<nav>`, `<main>`, `<article>`, `<button>`)
+- Include `aria-label` for icon-only buttons
+- Ensure focus states with `focus:ring-` classes
+- Add `sr-only` class for screen-reader-only text
+- Minimum contrast ratio WCAG AA: 4.5:1
+
+## Color Usage
+
+| Color | Purpose |
+|-------|---------|
+| `blue-*` | Primary actions, links |
+| `green-*` | Success, confirmations |
+| `red-*` | Errors, destructive actions |
+| `yellow-*` | Warnings |
+| `gray-*` | Neutral, borders, disabled |

data/.claude/skills/hotwire-patterns/reference/turbo-frames.md

@@ -0,0 +1,158 @@
+# Turbo Frames Reference
+
+## Concept
+
+Turbo Frames scope navigation to a portion of the page. When a link or form inside a frame is activated, only that frame's content is replaced.
+
+## Basic Usage
+
+### Define a Frame
+
+```erb
+<%= turbo_frame_tag "user_profile" do %>
+  <h2><%= @user.name %></h2>
+  <%= link_to "Edit", edit_user_path(@user) %>
+<% end %>
+```
+
+### Match Frame in Response
+
+```erb
+<%# edit.html.erb - must have matching frame %>
+<%= turbo_frame_tag "user_profile" do %>
+  <%= form_with model: @user do |f| %>
+    <%= f.text_field :name %>
+    <%= f.submit %>
+  <% end %>
+<% end %>
+```
+
+## Frame Attributes
+
+| Attribute | Purpose | Example |
+|-----------|---------|---------|
+| `id` | Frame identifier | `turbo_frame_tag "posts"` |
+| `src` | Lazy load URL | `src: posts_path` |
+| `loading` | Load timing | `loading: :lazy` |
+| `target` | Navigation target | `target: "_top"` |
+| `disabled` | Disable frame | `disabled: true` |
+
+## Common Patterns
+
+### Lazy Loading
+
+```erb
+<%# Load content when frame enters viewport %>
+<%= turbo_frame_tag "comments",
+    src: post_comments_path(@post),
+    loading: :lazy do %>
+  <p>Loading comments...</p>
+<% end %>
+```
+
+### Breaking Out of Frame
+
+```erb
+<%# Link navigates full page, not just frame %>
+<%= link_to "View All", posts_path, data: { turbo_frame: "_top" } %>
+
+<%# Or in the frame tag %>
+<%= turbo_frame_tag "modal", target: "_top" do %>
+  ...
+<% end %>
+```
+
+### Targeting Different Frame
+
+```erb
+<%# Link updates a different frame %>
+<%= link_to "Details", post_path(@post), data: { turbo_frame: "post_details" } %>
+
+<%# This frame will be updated %>
+<%= turbo_frame_tag "post_details" do %>
+  <p>Select a post to see details</p>
+<% end %>
+```
+
+### Inline Editing Pattern
+
+```erb
+<%# Show mode %>
+<%= turbo_frame_tag dom_id(post) do %>
+  <div class="post">
+    <h3><%= post.title %></h3>
+    <p><%= post.body %></p>
+    <%= link_to "Edit", edit_post_path(post) %>
+  </div>
+<% end %>
+
+<%# Edit mode (edit.html.erb) %>
+<%= turbo_frame_tag dom_id(@post) do %>
+  <%= form_with model: @post, data: { turbo_frame: dom_id(@post) } do |f| %>
+    <%= f.text_field :title %>
+    <%= f.text_area :body %>
+    <%= f.submit "Save" %>
+    <%= link_to "Cancel", @post %>
+  <% end %>
+<% end %>
+```
+
+### Modal Pattern
+
+```erb
+<%# Trigger link %>
+<%= link_to "New Post", new_post_path, data: { turbo_frame: "modal" } %>
+
+<%# Modal frame (in layout) %>
+<%= turbo_frame_tag "modal" %>
+
+<%# new.html.erb %>
+<%= turbo_frame_tag "modal" do %>
+  <div class="modal-backdrop">
+    <div class="modal-content">
+      <h2>New Post</h2>
+      <%= form_with model: @post do |f| %>
+        ...
+      <% end %>
+      <%= link_to "Close", root_path, data: { turbo_frame: "modal" } %>
+    </div>
+  </div>
+<% end %>
+```
+
+### Tab Navigation
+
+```erb
+<nav>
+  <%= link_to "Details", post_details_path(@post), data: { turbo_frame: "tab_content" } %>
+  <%= link_to "Comments", post_comments_path(@post), data: { turbo_frame: "tab_content" } %>
+  <%= link_to "History", post_history_path(@post), data: { turbo_frame: "tab_content" } %>
+</nav>
+
+<%= turbo_frame_tag "tab_content" do %>
+  <%= render "details" %>
+<% end %>
+```
+
+## Frame Events
+
+```javascript
+// Listen for frame events
+document.addEventListener("turbo:frame-load", (event) => {
+  console.log("Frame loaded:", event.target.id)
+})
+
+document.addEventListener("turbo:frame-missing", (event) => {
+  console.log("Frame not found in response:", event.target.id)
+  event.preventDefault() // Handle gracefully
+})
+```
+
+## Troubleshooting
+
+| Issue | Cause | Solution |
+|-------|-------|----------|
+| Frame not updating | ID mismatch | Ensure frame IDs match exactly |
+| Full page reload | Missing frame in response | Add matching frame tag |
+| Content disappears | Empty frame returned | Check controller response |
+| Wrong frame updates | Multiple frames with same ID | Use unique IDs |