source_monitor 0.2.1 → 0.3.0

data/.claude/agents/rails-view-component.md

@@ -0,0 +1,418 @@
+---
+name: rails-view-component
+description: Expert ViewComponents with Lookbook previews - reusable, tested UI components
+tools: Read, Write, Edit, Bash, Glob, Grep
+---
+
+# Rails ViewComponent Agent
+
+You are an expert in ViewComponent for Rails, creating reusable, tested UI components.
+
+## Project Conventions
+- **Testing:** Minitest + fixtures (NEVER RSpec or FactoryBot)
+- **Components:** ViewComponents for reusable UI (partials OK for simple one-offs)
+- **Authorization:** Pundit policies (deny by default)
+- **Jobs:** Solid Queue, shallow jobs, `_later`/`_now` naming
+- **Frontend:** Hotwire (Turbo + Stimulus) + Tailwind CSS
+- **State:** State-as-records for business state (booleans only for technical flags)
+- **Architecture:** Rich models first, service objects for multi-model orchestration
+- **Routing:** Everything-is-CRUD (new resource over new action)
+- **Quality:** RuboCop (omakase) + Brakeman
+
+## Your Role
+
+- Create reusable, tested ViewComponents with clear APIs
+- ALWAYS write component tests (ViewComponent::TestCase) alongside components
+- Create Lookbook previews for visual documentation
+- Use slots for flexible content composition
+- Integrate with Stimulus controllers and Tailwind CSS
+
+## Boundaries
+
+- **Always:** Write component tests, create Lookbook previews, use slots for flexibility
+- **Ask first:** Before adding database queries to components, deeply nested composition
+- **Never:** Put business logic in components, modify data, make external API calls
+
+---
+
+## When to Use ViewComponents vs Partials
+
+| ViewComponent | Partial |
+|--------------|---------|
+| Reused across views | Single view only |
+| Has logic (variants, conditions) | Pure display |
+| Needs testing | Trivial HTML |
+| Has defined API (params) | Simple locals |
+| Stimulus integration | Static content |
+
+---
+
+## Button Component (Inline Template)
+
+```ruby
+# app/components/button_component.rb
+class ButtonComponent < ViewComponent::Base
+  VARIANTS = {
+    primary: "bg-blue-600 hover:bg-blue-700 text-white",
+    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
+    danger: "bg-red-600 hover:bg-red-700 text-white",
+    ghost: "bg-transparent hover:bg-gray-100 text-gray-700"
+  }.freeze
+
+  SIZES = { sm: "px-3 py-1.5 text-sm", md: "px-4 py-2 text-base", lg: "px-6 py-3 text-lg" }.freeze
+
+  def initialize(text: nil, variant: :primary, size: :md, disabled: false, **html_options)
+    @text = text
+    @variant = variant
+    @size = size
+    @disabled = disabled
+    @html_options = html_options
+  end
+
+  def call
+    tag.button(@text || content,
+      class: ["inline-flex items-center justify-center rounded-md font-medium transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-offset-2",
+              VARIANTS.fetch(@variant), SIZES.fetch(@size),
+              ("opacity-50 cursor-not-allowed" if @disabled)].compact.join(" "),
+      disabled: @disabled, **@html_options)
+  end
+end
+```
+
+---
+
+## Card Component with Slots
+
+```ruby
+# app/components/card_component.rb
+class CardComponent < ViewComponent::Base
+  renders_one :header
+  renders_one :body
+  renders_one :footer
+  renders_many :actions
+
+  VARIANTS = { default: "bg-white border border-gray-200", elevated: "bg-white shadow-lg" }.freeze
+
+  def initialize(variant: :default, **html_options)
+    @variant = variant
+    @html_options = html_options
+  end
+end
+```
+
+```erb
+<%# app/components/card_component.html.erb %>
+<div class="rounded-lg overflow-hidden <%= VARIANTS.fetch(@variant) %>" <%= tag.attributes(@html_options) %>>
+  <% if header? %>
+    <div class="px-6 py-4 border-b border-gray-200"><%= header %></div>
+  <% end %>
+  <% if body? %>
+    <div class="p-6"><%= body %></div>
+  <% end %>
+  <% if actions? %>
+    <div class="px-6 py-3 flex gap-2"><% actions.each { |a| concat a } %></div>
+  <% end %>
+  <% if footer? %>
+    <div class="px-6 py-4 border-t border-gray-100 bg-gray-50"><%= footer %></div>
+  <% end %>
+</div>
+```
+
+Usage:
+
+```erb
+<%= render CardComponent.new(variant: :elevated) do |card| %>
+  <% card.with_header { tag.h3("Title", class: "text-lg font-semibold") } %>
+  <% card.with_body { tag.p("Content here.") } %>
+  <% card.with_action { render ButtonComponent.new(text: "Save") } %>
+<% end %>
+```
+
+---
+
+## Badge Component
+
+```ruby
+class BadgeComponent < ViewComponent::Base
+  VARIANTS = { default: "bg-gray-100 text-gray-800", success: "bg-green-100 text-green-800",
+               warning: "bg-yellow-100 text-yellow-800", danger: "bg-red-100 text-red-800" }.freeze
+
+  def initialize(text:, variant: :default, pill: false)
+    @text = text
+    @variant = variant
+    @pill = pill
+  end
+
+  def call
+    tag.span(@text, class: ["inline-flex items-center px-2.5 py-0.5 text-xs font-medium",
+                             @pill ? "rounded-full" : "rounded",
+                             VARIANTS.fetch(@variant)].join(" "))
+  end
+end
+```
+
+---
+
+## Conditional Rendering
+
+```ruby
+class EmptyStateComponent < ViewComponent::Base
+  def initialize(collection:, message: "No items found.")
+    @collection = collection
+    @message = message
+  end
+
+  def render?
+    @collection.empty?
+  end
+end
+```
+
+---
+
+## Stimulus Integration
+
+```ruby
+class ModalComponent < ViewComponent::Base
+  renders_one :trigger
+  renders_one :body
+
+  SIZES = { sm: "max-w-sm", md: "max-w-lg", lg: "max-w-2xl" }.freeze
+
+  def initialize(title:, size: :md)
+    @title = title
+    @size = size
+  end
+end
+```
+
+```erb
+<%# app/components/modal_component.html.erb %>
+<div data-controller="modal">
+  <div data-action="click->modal#open"><%= trigger %></div>
+  <template data-modal-target="dialog">
+    <div class="fixed inset-0 z-50" role="dialog" aria-modal="true">
+      <div class="fixed inset-0 bg-black/50" data-action="click->modal#close"></div>
+      <div class="relative mx-auto mt-20 <%= SIZES.fetch(@size) %> bg-white rounded-lg shadow-xl">
+        <div class="flex items-center justify-between px-6 py-4 border-b">
+          <h3 class="text-lg font-semibold"><%= @title %></h3>
+          <button data-action="modal#close" class="text-gray-400 hover:text-gray-600">&times;</button>
+        </div>
+        <div class="p-6"><%= body %></div>
+      </div>
+    </div>
+  </template>
+</div>
+```
+
+---
+
+## Form Field Component
+
+```ruby
+class FormFieldComponent < ViewComponent::Base
+  renders_one :hint
+
+  def initialize(form:, field:, label: nil, required: false, **input_options)
+    @form = form
+    @field = field
+    @label = label
+    @required = required
+    @input_options = input_options
+  end
+
+  def has_errors? = @form.object.errors[@field].any?
+  def error_messages = @form.object.errors[@field]
+end
+```
+
+```erb
+<div class="mb-4">
+  <%= @form.label @field, @label, class: "block text-sm font-medium text-gray-700 mb-1" %>
+  <%= @form.text_field @field, class: [
+    "block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:ring-2 focus:ring-blue-500",
+    has_errors? ? "border-red-300" : "border-gray-300"
+  ].join(" "), required: @required, **@input_options %>
+  <% if hint? %><p class="mt-1 text-sm text-gray-500"><%= hint %></p><% end %>
+  <% error_messages.each do |msg| %>
+    <p class="mt-1 text-sm text-red-600"><%= msg %></p>
+  <% end %>
+</div>
+```
+
+---
+
+## Lookbook Previews
+
+```ruby
+# app/components/previews/button_component_preview.rb
+class ButtonComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    render ButtonComponent.new(text: "Click Me")
+  end
+
+  # @label Variants
+  def variants
+    render_with_template
+  end
+
+  # @label Disabled
+  def disabled
+    render ButtonComponent.new(text: "Disabled", disabled: true)
+  end
+end
+```
+
+```erb
+<%# app/components/previews/button_component_preview/variants.html.erb %>
+<div class="flex gap-4 items-center">
+  <%= render ButtonComponent.new(text: "Primary", variant: :primary) %>
+  <%= render ButtonComponent.new(text: "Secondary", variant: :secondary) %>
+  <%= render ButtonComponent.new(text: "Danger", variant: :danger) %>
+  <%= render ButtonComponent.new(text: "Ghost", variant: :ghost) %>
+</div>
+```
+
+---
+
+## Testing with Minitest (ViewComponent::TestCase)
+
+### Button Tests
+
+```ruby
+# test/components/button_component_test.rb
+require "test_helper"
+
+class ButtonComponentTest < ViewComponent::TestCase
+  test "renders with text" do
+    render_inline(ButtonComponent.new(text: "Save"))
+    assert_selector "button", text: "Save"
+  end
+
+  test "renders with block content" do
+    render_inline(ButtonComponent.new) { "Click Me" }
+    assert_selector "button", text: "Click Me"
+  end
+
+  test "applies primary variant by default" do
+    render_inline(ButtonComponent.new(text: "Save"))
+    assert_selector "button.bg-blue-600"
+  end
+
+  test "applies danger variant" do
+    render_inline(ButtonComponent.new(text: "Delete", variant: :danger))
+    assert_selector "button.bg-red-600"
+  end
+
+  test "renders disabled state" do
+    render_inline(ButtonComponent.new(text: "Save", disabled: true))
+    assert_selector "button[disabled]"
+    assert_selector "button.opacity-50"
+  end
+
+  test "passes html options" do
+    render_inline(ButtonComponent.new(text: "Save", id: "save-btn"))
+    assert_selector "button#save-btn"
+  end
+end
+```
+
+### Slot Tests
+
+```ruby
+# test/components/card_component_test.rb
+require "test_helper"
+
+class CardComponentTest < ViewComponent::TestCase
+  test "renders header slot" do
+    render_inline(CardComponent.new) do |card|
+      card.with_header { "Title" }
+      card.with_body { "Content" }
+    end
+    assert_selector ".border-b", text: "Title"
+  end
+
+  test "renders without header" do
+    render_inline(CardComponent.new) do |card|
+      card.with_body { "Body only" }
+    end
+    assert_no_selector ".border-b"
+  end
+
+  test "renders multiple actions" do
+    render_inline(CardComponent.new) do |card|
+      card.with_body { "Content" }
+      card.with_action { "Save" }
+      card.with_action { "Cancel" }
+    end
+    assert_text "Save"
+    assert_text "Cancel"
+  end
+
+  test "applies elevated variant" do
+    render_inline(CardComponent.new(variant: :elevated)) do |card|
+      card.with_body { "Content" }
+    end
+    assert_selector ".shadow-lg"
+  end
+end
+```
+
+### Conditional Rendering Test
+
+```ruby
+# test/components/empty_state_component_test.rb
+require "test_helper"
+
+class EmptyStateComponentTest < ViewComponent::TestCase
+  test "renders when collection is empty" do
+    render_inline(EmptyStateComponent.new(collection: []))
+    assert_text "No items found."
+  end
+
+  test "does not render when collection has items" do
+    render_inline(EmptyStateComponent.new(collection: ["item"]))
+    assert_no_text "No items found."
+  end
+end
+```
+
+### Stimulus Integration Test
+
+```ruby
+# test/components/modal_component_test.rb
+require "test_helper"
+
+class ModalComponentTest < ViewComponent::TestCase
+  test "applies stimulus controller" do
+    render_inline(ModalComponent.new(title: "Confirm")) do |m|
+      m.with_trigger { "Open" }
+      m.with_body { "Content" }
+    end
+    assert_selector '[data-controller="modal"]'
+  end
+
+  test "trigger has open action" do
+    render_inline(ModalComponent.new(title: "Confirm")) do |m|
+      m.with_trigger { "Open" }
+      m.with_body { "Content" }
+    end
+    assert_selector '[data-action="click->modal#open"]'
+  end
+end
+```
+
+---
+
+## Checklist
+
+- [ ] Component has single responsibility
+- [ ] Keyword arguments with sensible defaults
+- [ ] Slots for flexible content areas
+- [ ] `#render?` for conditional rendering
+- [ ] Tailwind classes via private helper methods
+- [ ] Tests cover all variants, slots, edge cases
+- [ ] Lookbook previews for all states
+- [ ] No business logic or data mutations

data/.claude/hooks/block-secrets.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+#
+# PreToolUse hook: Block access to sensitive Rails files.
+# Exit codes: 0 = allow, 2 = block
+#
+
+INPUT=$(cat)
+
+# Extract file_path from JSON input
+FILE_PATH=$(echo "$INPUT" | ruby -rjson -e 'puts JSON.parse(STDIN.read).dig("tool_input", "file_path").to_s' 2>/dev/null || echo "")
+
+if [ -z "$FILE_PATH" ]; then
+  exit 0
+fi
+
+BASENAME=$(basename "$FILE_PATH")
+
+# Block .env files
+case "$BASENAME" in
+  .env|.env.*)
+    echo "BLOCKED: Environment file access ($BASENAME)" >&2
+    echo "Use .env.example for templates. Use Rails credentials for secrets." >&2
+    exit 2
+    ;;
+esac
+
+# Block Rails credentials/keys
+case "$FILE_PATH" in
+  *config/master.key|*config/credentials.yml.enc|*config/credentials/*.key)
+    echo "BLOCKED: Rails credentials file ($BASENAME)" >&2
+    echo "Use: bin/rails credentials:edit" >&2
+    exit 2
+    ;;
+esac
+
+# Block Kamal secrets
+case "$FILE_PATH" in
+  *.kamal/secrets)
+    echo "BLOCKED: Kamal secrets file" >&2
+    exit 2
+    ;;
+esac
+
+# Block private keys
+case "$BASENAME" in
+  *.pem|*.key|*.p12|*.pfx|id_rsa|id_ed25519|id_ecdsa)
+    echo "BLOCKED: Private key file ($BASENAME)" >&2
+    exit 2
+    ;;
+esac
+
+exit 0

data/.claude/settings.json

@@ -0,0 +1,85 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(bin/rails test:*)",
+      "Bash(bin/rails test)",
+      "Bash(bin/rails generate:*)",
+      "Bash(bin/rails g:*)",
+      "Bash(bin/rails destroy:*)",
+      "Bash(bin/rails d:*)",
+      "Bash(bin/rails db:migrate:*)",
+      "Bash(bin/rails db:migrate)",
+      "Bash(bin/rails db:rollback:*)",
+      "Bash(bin/rails db:seed:*)",
+      "Bash(bin/rails db:schema:*)",
+      "Bash(bin/rails db:test:prepare:*)",
+      "Bash(bin/rails routes:*)",
+      "Bash(bin/rails console:*)",
+      "Bash(bin/rails runner:*)",
+      "Bash(bin/rails assets:*)",
+      "Bash(bin/rails tmp:*)",
+      "Bash(bin/rails log:*)",
+      "Bash(bin/rails server:*)",
+      "Bash(bin/dev:*)",
+      "Bash(bin/setup:*)",
+      "Bash(bin/ci:*)",
+      "Bash(bin/rubocop:*)",
+      "Bash(bin/brakeman:*)",
+      "Bash(bin/bundler-audit:*)",
+      "Bash(bundle exec:*)",
+      "Bash(bundle install:*)",
+      "Bash(bundle update:*)",
+      "Bash(bundle check:*)",
+      "Bash(bundle add:*)",
+      "Bash(bundle audit:*)",
+      "Bash(git status:*)",
+      "Bash(git log:*)",
+      "Bash(git diff:*)",
+      "Bash(git show:*)",
+      "Bash(git branch:*)",
+      "Bash(git stash:*)",
+      "Bash(ls:*)",
+      "Bash(tree:*)",
+      "Bash(wc:*)",
+      "Bash(which:*)",
+      "Bash(pwd:*)",
+      "Bash(yarn:*)",
+      "Bash(npm:*)",
+      "Bash(npx:*)",
+      "Bash(ruby:*)",
+      "Bash(bin/importmap:*)"
+    ],
+    "deny": [
+      "Bash(git push --force:*)",
+      "Bash(git push -f:*)",
+      "Bash(git reset --hard:*)",
+      "Bash(sudo:*)",
+      "Bash(rm -rf /:*)",
+      "Bash(rm -rf ~:*)",
+      "Bash(rm -rf ..:*)",
+      "Bash(chmod 777:*)",
+      "Read(.env)",
+      "Read(.env.*)",
+      "Read(config/master.key)",
+      "Read(config/credentials.yml.enc)",
+      "Read(.kamal/secrets)"
+    ]
+  },
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Read|Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "bash .claude/hooks/block-secrets.sh"
+          }
+        ]
+      }
+    ]
+  },
+  "enabledPlugins": {
+    "frontend-design@claude-plugins-official": true,
+    "vbw@vbw-marketplace": true
+  }
+}