rails-markup 1.2.0

data/app/models/rails_markup/annotation.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+require "securerandom"
+require "digest/sha1"
+
+module RailsMarkup
+  class Annotation < ActiveRecord::Base
+    self.table_name = RailsMarkup.config.table_name
+
+    INTENTS = %w[fix change question approve].freeze
+    SEVERITIES = %w[suggestion important blocking].freeze
+    STATUSES = %w[pending acknowledged resolved dismissed].freeze
+    BROWSER_ATTRIBUTES = %w[content intent severity selected_text target page_url].freeze
+    BROWSER_METADATA_KEYS = %w[tool url localId sessionId screenshot].freeze
+    CLIENT_UUID_PATTERN = /\A[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\z/
+    CLIENT_UUID_INPUT_PATTERN = /\A[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\z/i
+    LEGACY_SESSION_PATTERN = /\Arm-[0-9a-f]{16}\z/i
+    LEGACY_CLIENT_ID_LIMIT = 256
+    LEGACY_UUID_NAMESPACE = "265e7cf0-8be6-5e21-8f31-a582cfde8646"
+
+    # Optional user association — no FK constraint, engine doesn't know host users table
+    belongs_to :user, optional: true
+
+    # Works with both jsonb (PostgreSQL) and text (SQLite/MySQL) columns.
+    attribute :target, :json, default: {}
+    attribute :metadata, :json, default: {}
+    attribute :thread, :json, default: []
+
+    validates :content, presence: true, length: { maximum: 5000 }
+    validates :page_url, presence: true, length: { maximum: 2048 }
+    validates :selected_text, length: { maximum: 2000 }, allow_nil: true
+    before_validation :ensure_client_uuid
+
+    validates :client_uuid, presence: true, length: { maximum: 64 }, format: { with: CLIENT_UUID_PATTERN }
+    validates :intent, inclusion: { in: INTENTS }
+    validates :severity, inclusion: { in: SEVERITIES }
+    validates :status, inclusion: { in: STATUSES }
+    validate :thread_must_be_array
+
+    def self.valid_client_uuid?(value)
+      value.is_a?(String) && CLIENT_UUID_PATTERN.match?(value)
+    end
+
+    def self.normalize_client_uuid(value)
+      value.downcase if value.is_a?(String) && CLIENT_UUID_INPUT_PATTERN.match?(value)
+    end
+
+    def self.legacy_client_uuid(session_id:, legacy_client_id:)
+      session_id = session_id.to_s
+      legacy_client_id = legacy_client_id.to_s
+      unless LEGACY_SESSION_PATTERN.match?(session_id) && legacy_client_id.present? && legacy_client_id.bytesize <= LEGACY_CLIENT_ID_LIMIT
+        raise ArgumentError, "legacy client identity requires a valid session and client id"
+      end
+
+      namespace = [LEGACY_UUID_NAMESPACE.delete("-")].pack("H*")
+      bytes = Digest::SHA1.digest(namespace + "#{session_id}\0#{legacy_client_id}").bytes.first(16)
+      bytes[6] = (bytes[6] & 0x0f) | 0x50
+      bytes[8] = (bytes[8] & 0x3f) | 0x80
+      hex = bytes.pack("C*").unpack1("H*")
+      "#{hex[0, 8]}-#{hex[8, 4]}-#{hex[12, 4]}-#{hex[16, 4]}-#{hex[20, 12]}"
+    end
+
+    scope :pending, -> { where(status: "pending") }
+    scope :acknowledged, -> { where(status: "acknowledged") }
+    scope :resolved, -> { where(status: "resolved") }
+    scope :dismissed, -> { where(status: "dismissed") }
+    scope :active, -> { where(status: %w[pending acknowledged]) }
+    scope :for_page, ->(url) { where(page_url: url) }
+    scope :recent, -> { order(created_at: :desc, id: :desc) }
+
+    # Keyset (cursor) companion to :recent — rows strictly older than the
+    # (created_at, id) cursor. Avoids the offset-overlap that repeats a boundary
+    # row when annotations are inserted between "Load more" requests.
+    scope :before_cursor, ->(created_at, id) {
+      where("created_at < :t OR (created_at = :t AND id < :id)", t: created_at, id: id)
+    }
+
+    scope :search, ->(query) {
+      where("content LIKE :q OR selected_text LIKE :q", q: "%#{sanitize_sql_like(query)}%")
+    }
+
+    scope :by_author, ->(name) {
+      if connection.adapter_name.downcase.include?("postgres")
+        where("metadata->>'author' = ?", name)
+      else
+        where("json_extract(metadata, '$.author') = ?", name)
+      end
+    }
+
+    def self.distinct_authors
+      if connection.adapter_name.downcase.include?("postgres")
+        where("metadata->>'author' IS NOT NULL").distinct.pluck(Arel.sql("metadata->>'author'")).compact.sort
+      else
+        all.filter_map(&:author_name).uniq.sort
+      end
+    end
+
+    def author_name
+      metadata&.dig("author")
+    end
+
+    def apply_browser_state(attributes, dirty_fields: [])
+      assign_attributes(attributes.slice(*BROWSER_ATTRIBUTES))
+      self.metadata = (metadata || {}).merge(attributes.fetch("metadata", {}).slice(*BROWSER_METADATA_KEYS))
+      self.status = attributes["status"] if dirty_fields.include?("status")
+      self
+    end
+
+    def acknowledge!
+      raise "Cannot acknowledge a #{status} annotation" unless status == "pending"
+
+      update!(status: "acknowledged")
+    end
+
+    def resolve!(summary: nil)
+      raise "Cannot resolve a #{status} annotation" unless status.in?(%w[pending acknowledged])
+
+      transaction do
+        add_thread_entry(role: "agent", message: summary) if summary.present?
+        update!(status: "resolved")
+      end
+    end
+
+    def dismiss!(reason: nil)
+      raise "Cannot dismiss a #{status} annotation" unless status.in?(%w[pending acknowledged])
+
+      transaction do
+        add_thread_entry(role: "agent", message: reason) if reason.present?
+        update!(status: "dismissed")
+      end
+    end
+
+    def add_reply!(message:, role: "agent")
+      add_thread_entry(role: role, message: message)
+      save!
+    end
+
+    def as_api_json
+      {
+        id: id.to_s,
+        clientId: client_uuid,
+        userId: user_id,
+        authorName: author_name,
+        content: content,
+        intent: intent,
+        severity: severity,
+        status: status,
+        selectedText: selected_text,
+        pageUrl: page_url,
+        target: target,
+        metadata: metadata,
+        thread: thread,
+        createdAt: created_at&.iso8601,
+        updatedAt: updated_at&.iso8601
+      }
+    end
+
+    private
+
+    def ensure_client_uuid
+      self.client_uuid = if client_uuid.blank?
+        SecureRandom.uuid
+      else
+        self.class.normalize_client_uuid(client_uuid) || client_uuid
+      end
+    end
+
+    def add_thread_entry(role:, message:)
+      self.thread = thread + [{ "role" => role, "message" => message, "timestamp" => Time.current.iso8601 }]
+    end
+
+    def thread_must_be_array
+      errors.add(:thread, "must be an array") unless thread.is_a?(Array)
+    end
+  end
+end

data/app/views/layouts/rails_markup/application.html.erb

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= content_for?(:title) ? "#{yield(:title)} — Rails Markup" : "Rails Markup" %></title>
+  <style>
+    /* Reset */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f8f9fa; color: #1a1a2e; line-height: 1.5; }
+    a { color: #4361ee; text-decoration: none; }
+    a:hover { text-decoration: underline; }
+
+    /* Layout */
+    .rm-header { background: #1a1a2e; color: #fff; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
+    .rm-header h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
+    .rm-header h1 span { color: #818cf8; }
+    .rm-header nav { display: flex; gap: 16px; font-size: 13px; }
+    .rm-header nav a { color: #a5b4fc; }
+    .rm-header nav a:hover { color: #fff; text-decoration: none; }
+    .rm-container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
+
+    /* Flash */
+    .rm-flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
+    .rm-flash-notice { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
+    .rm-flash-alert { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
+
+    /* Stats bar */
+    .rm-stats { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
+    .rm-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; flex: 1; min-width: 120px; }
+    .rm-stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
+    .rm-stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
+
+    /* Filters */
+    .rm-filters { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
+    .rm-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; transition: all 0.15s; }
+    .rm-pill:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
+    .rm-pill-active { background: #4361ee; color: #fff; border-color: #4361ee; }
+    .rm-pill-active:hover { background: #3730a3; color: #fff; }
+    .rm-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 12px; background: #fff; color: #374151; cursor: pointer; max-width: 240px; }
+
+    /* Cards */
+    .rm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; transition: border-color 0.15s; position: relative; }
+    .rm-card:hover { border-color: #818cf8; }
+    .rm-card-link { display: block; color: inherit; }
+    .rm-card-link:hover { text-decoration: none; }
+    .rm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    .rm-card-content { font-size: 14px; color: #374151; line-height: 1.6; }
+    .rm-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: #9ca3af; }
+    .rm-card-meta code { font-size: 11px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #6b7280; }
+
+    /* Badges */
+    .rm-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
+    .rm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+    .rm-status-pending { background: #fef3c7; color: #92400e; }
+    .rm-status-acknowledged { background: #dbeafe; color: #1e40af; }
+    .rm-status-resolved { background: #d1fae5; color: #065f46; }
+    .rm-status-dismissed { background: #f3f4f6; color: #6b7280; }
+    .rm-dot-pending { background: #f59e0b; }
+    .rm-dot-acknowledged { background: #3b82f6; }
+    .rm-dot-resolved { background: #10b981; }
+    .rm-dot-dismissed { background: #9ca3af; }
+    .rm-intent-fix { background: #fef2f2; color: #991b1b; }
+    .rm-intent-change { background: #eff6ff; color: #1e40af; }
+    .rm-intent-question { background: #f5f3ff; color: #5b21b6; }
+    .rm-intent-approve { background: #ecfdf5; color: #065f46; }
+    .rm-severity-blocking { background: #fef2f2; color: #991b1b; font-weight: 700; }
+    .rm-severity-important { background: #fff7ed; color: #9a3412; }
+    .rm-severity-suggestion { background: #f3f4f6; color: #6b7280; }
+
+    /* Detail page */
+    .rm-detail { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; }
+    .rm-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+    .rm-detail-content { font-size: 15px; line-height: 1.7; margin-bottom: 24px; white-space: pre-wrap; }
+    .rm-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin-bottom: 24px; padding: 16px; background: #f9fafb; border-radius: 8px; }
+    .rm-detail-meta dt { color: #6b7280; font-weight: 500; }
+    .rm-detail-meta dd { color: #374151; }
+    .rm-detail-meta dd code { font-size: 12px; background: #e5e7eb; padding: 1px 5px; border-radius: 3px; }
+
+    /* Thread */
+    .rm-thread { margin-top: 24px; border-top: 1px solid #e5e7eb; padding-top: 20px; }
+    .rm-thread h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #374151; }
+    .rm-thread-entry { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
+    .rm-thread-agent { background: #eff6ff; border-left: 3px solid #3b82f6; }
+    .rm-thread-user { background: #f9fafb; border-left: 3px solid #e5e7eb; }
+    .rm-thread-role { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+    .rm-thread-time { font-size: 11px; color: #9ca3af; margin-top: 4px; }
+
+    /* Actions */
+    .rm-actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
+    .rm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; transition: all 0.15s; }
+    .rm-btn:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
+    .rm-btn-primary { background: #4361ee; color: #fff; border-color: #4361ee; }
+    .rm-btn-primary:hover { background: #3730a3; color: #fff; }
+    .rm-btn-success { background: #10b981; color: #fff; border-color: #10b981; }
+    .rm-btn-success:hover { background: #059669; color: #fff; }
+    .rm-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
+    .rm-btn-danger:hover { background: #dc2626; color: #fff; }
+
+    /* Forms */
+    .rm-form-group { margin-bottom: 12px; }
+    .rm-form-group label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 4px; }
+    .rm-input { width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
+    .rm-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
+
+    /* Back link */
+    .rm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #6b7280; margin-bottom: 16px; }
+    .rm-back:hover { color: #4361ee; text-decoration: none; }
+
+    /* Empty state */
+    .rm-empty { text-align: center; padding: 48px 24px; color: #9ca3af; }
+    .rm-empty-icon { font-size: 36px; margin-bottom: 12px; }
+    .rm-empty-text { font-size: 14px; }
+
+    /* Two-column layout */
+    .rm-layout { display: flex; gap: 24px; }
+    .rm-main { flex: 1; min-width: 0; }
+    .rm-panel { width: 420px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: #f8f9fa; }
+    .rm-panel .rm-detail { border-left: 3px solid #818cf8; }
+    .rm-card-active { border-color: #818cf8 !important; background: #f5f3ff; }
+    .rm-panel-empty { display: none; }
+
+    /* Responsive */
+    @media (max-width: 900px) {
+      .rm-layout { flex-direction: column; }
+      .rm-panel { width: 100%; position: static; max-height: none; background: #f8f9fa; }
+    }
+    @media (max-width: 640px) {
+      .rm-stats { flex-direction: column; }
+      .rm-stat { min-width: unset; }
+      .rm-filters { flex-direction: column; align-items: stretch; }
+      .rm-detail-header { flex-direction: column; align-items: flex-start; }
+    }
+  </style>
+</head>
+<body>
+  <header class="rm-header">
+    <h1><span>&#9670;</span> Rails Markup</h1>
+    <nav>
+      <a href="<%= rails_markup.root_path %>">Dashboard</a>
+      <% if RailsMarkup.config.return_url.present? %>
+        <a href="<%= RailsMarkup.config.return_url %>">&#8592; Back to app</a>
+      <% end %>
+    </nav>
+  </header>
+
+  <main class="rm-container">
+    <% if notice.present? %>
+      <div class="rm-flash rm-flash-notice"><%= notice %></div>
+    <% end %>
+    <% if alert.present? %>
+      <div class="rm-flash rm-flash-alert"><%= alert %></div>
+    <% end %>
+
+    <%= yield %>
+  </main>
+</body>
+</html>

data/app/views/rails_markup/dashboard/_annotation_card.html.erb

@@ -0,0 +1,25 @@
+<div class="rm-card" data-annotation-id="<%= annotation.id %>">
+  <a href="<%= rails_markup.annotation_path(annotation) %>"
+     data-turbo-frame="detail-panel"
+     class="rm-card-link">
+    <div class="rm-card-header">
+      <span class="rm-dot rm-dot-<%= annotation.status %>"></span>
+      <span class="rm-badge rm-status-<%= annotation.status %>"><%= annotation.status %></span>
+      <span class="rm-badge rm-intent-<%= annotation.intent %>"><%= annotation.intent %></span>
+      <% if annotation.severity != "suggestion" %>
+        <span class="rm-badge rm-severity-<%= annotation.severity %>"><%= annotation.severity %></span>
+      <% end %>
+    </div>
+    <div class="rm-card-content"><%= truncate(annotation.content, length: 200) %></div>
+    <div class="rm-card-meta">
+      <code><%= truncate(annotation.page_url, length: 50) %></code>
+      <% if annotation.author_name.present? %>
+        <span class="rm-author"><%= annotation.author_name %></span>
+      <% end %>
+      <span title="<%= annotation.created_at.strftime("%B %d, %Y at %H:%M") %>"><%= time_ago_in_words(annotation.created_at) %> ago</span>
+      <% if annotation.thread.any? %>
+        <span><%= annotation.thread.size %> replies</span>
+      <% end %>
+    </div>
+  </a>
+</div>

data/app/views/rails_markup/dashboard/_annotation_list.html.erb

@@ -0,0 +1,57 @@
+<% if @annotations.any? %>
+  <div id="rm-annotation-list">
+    <% @annotations.each do |annotation| %>
+      <%= render "annotation_card", annotation: annotation %>
+    <% end %>
+
+    <% if @next_page %>
+      <div class="rm-load-more">
+        <button class="rm-load-more-btn"
+                data-next-url="<%= rails_markup.load_more_path(status: @current_status, before_time: @next_time, before_id: @next_id, page_url: @current_page_url, q: @current_query, author: @current_author) %>"
+                onclick="rmLoadMore(this)">
+          Load more (<%= @remaining %> remaining)
+        </button>
+      </div>
+    <% end %>
+  </div>
+
+  <script>
+    function rmLoadMore(button) {
+      button.disabled = true;
+      button.textContent = "Loading\u2026";
+      var url = button.getAttribute("data-next-url");
+      var wrapper = button.closest(".rm-load-more");
+
+      fetch(url, { headers: { "X-Requested-With": "XMLHttpRequest" } })
+        .then(function(response) {
+          if (!response.ok) throw new Error("HTTP " + response.status);
+          return response.text();
+        })
+        .then(function(html) {
+          wrapper.insertAdjacentHTML("afterend", html);
+          wrapper.remove();
+        })
+        .catch(function() {
+          button.disabled = false;
+          button.textContent = "Error \u2014 click to retry";
+        });
+    }
+  </script>
+<% else %>
+  <div class="rm-empty">
+    <div class="rm-empty-icon">&#9670;</div>
+    <div class="rm-empty-text">
+      <% if @current_query.present? %>
+        No results for &ldquo;<%= @current_query %>&rdquo;.
+        <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, author: @current_author) %>">Clear search</a>
+      <% elsif @current_author.present? %>
+        No annotations by <%= @current_author %>.
+        <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url) %>">Clear filter</a>
+      <% elsif @current_status != "all" %>
+        No <%= @current_status %> annotations.
+      <% else %>
+        No annotations yet.<br>Use the toolbar to start annotating.
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/rails_markup/dashboard/_annotation_page.html.erb

@@ -0,0 +1,13 @@
+<% @annotations.each do |annotation| %>
+  <%= render "annotation_card", annotation: annotation %>
+<% end %>
+
+<% if @next_page %>
+  <div class="rm-load-more">
+    <button class="rm-load-more-btn"
+            data-next-url="<%= rails_markup.load_more_path(status: @current_status, before_time: @next_time, before_id: @next_id, page_url: params[:page_url], q: params[:q], author: params[:author]) %>"
+            onclick="rmLoadMore(this)">
+      Load more (<%= @remaining %> remaining)
+    </button>
+  </div>
+<% end %>

data/app/views/rails_markup/dashboard/_filters.html.erb

@@ -0,0 +1,75 @@
+<div class="rm-filters">
+  <%
+    statuses = [
+      ["all", "All"],
+      ["pending", "Pending"],
+      ["acknowledged", "Acknowledged"],
+      ["resolved", "Resolved"],
+      ["dismissed", "Dismissed"]
+    ]
+  %>
+  <% statuses.each do |value, label| %>
+    <a href="<%= rails_markup.root_path(status: value, page_url: @current_page_url, q: @current_query, author: @current_author) %>"
+       class="rm-pill <%= 'rm-pill-active' if @current_status == value %>">
+      <%= label %>
+    </a>
+  <% end %>
+
+  <% if @current_status.in?(%w[pending acknowledged]) && @annotations.any? %>
+    <%= form_tag(rails_markup.dismiss_all_path(status: @current_status), method: :post, style: "display:inline", data: { turbo_confirm: "Dismiss all #{@current_status} annotations?" }) do %>
+      <button type="submit" class="rm-pill" style="color: #ef4444; border-color: #fecaca;">Dismiss all <%= @current_status %></button>
+    <% end %>
+  <% end %>
+
+  <div style="margin-left: auto; display: flex; gap: 4px; align-items: center;">
+    <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>"
+       class="rm-pill <%= 'rm-pill-active' unless action_name == 'board' %>">List</a>
+    <a href="<%= rails_markup.board_path %>" class="rm-pill <%= 'rm-pill-active' if action_name == 'board' %>">Board</a>
+  </div>
+</div>
+
+<div class="rm-filters">
+  <%# Search %>
+  <form action="<%= rails_markup.root_path %>" method="get" style="display:flex;gap:6px;align-items:center;">
+    <input type="text" name="q" value="<%= @current_query %>" placeholder="Search annotations..." class="rm-select" style="min-width:180px;">
+    <input type="hidden" name="status" value="<%= @current_status %>">
+    <input type="hidden" name="page_url" value="<%= @current_page_url %>">
+    <input type="hidden" name="author" value="<%= @current_author %>">
+    <button type="submit" class="rm-pill">Search</button>
+    <% if @current_query.present? %>
+      <a href="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, author: @current_author) %>" class="rm-pill" style="color:#ef4444;">Clear</a>
+    <% end %>
+  </form>
+
+  <%# Page URL filter %>
+  <% if @page_urls.any? %>
+    <select class="rm-select" onchange="document.getElementById('annotations-content').src=this.value">
+      <option value="<%= rails_markup.root_path(status: @current_status == 'all' ? nil : @current_status, q: @current_query, author: @current_author) %>">All pages</option>
+      <% @page_urls.each do |url| %>
+        <option value="<%= rails_markup.root_path(status: @current_status == 'all' ? nil : @current_status, page_url: url, q: @current_query, author: @current_author) %>"
+                <%= 'selected' if @current_page_url == url %>>
+          <%= truncate(url, length: 60) %>
+        </option>
+      <% end %>
+    </select>
+  <% end %>
+
+  <%# Author filter %>
+  <% if @authors.any? %>
+    <select class="rm-select" onchange="window.location=this.value">
+      <option value="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query) %>">All authors</option>
+      <% @authors.each do |author| %>
+        <option value="<%= rails_markup.root_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: author) %>"
+                <%= 'selected' if @current_author == author %>>
+          <%= author %>
+        </option>
+      <% end %>
+    </select>
+  <% end %>
+
+  <%# Export %>
+  <div style="margin-left:auto;display:flex;gap:4px;">
+    <a href="<%= rails_markup.export_csv_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>" class="rm-pill">CSV</a>
+    <a href="<%= rails_markup.export_json_path(status: @current_status, page_url: @current_page_url, q: @current_query, author: @current_author) %>" class="rm-pill">JSON</a>
+  </div>
+</div>

data/app/views/rails_markup/dashboard/_stats.html.erb

@@ -0,0 +1,22 @@
+<div class="rm-stats">
+  <div class="rm-stat">
+    <div class="rm-stat-value"><%= @total_count %></div>
+    <div class="rm-stat-label">Total</div>
+  </div>
+  <div class="rm-stat">
+    <div class="rm-stat-value" style="color: #f59e0b;"><%= @pending_count %></div>
+    <div class="rm-stat-label">Pending</div>
+  </div>
+  <div class="rm-stat">
+    <div class="rm-stat-value" style="color: #3b82f6;"><%= @acknowledged_count %></div>
+    <div class="rm-stat-label">Acknowledged</div>
+  </div>
+  <div class="rm-stat">
+    <div class="rm-stat-value" style="color: #10b981;"><%= @resolved_count %></div>
+    <div class="rm-stat-label">Resolved</div>
+  </div>
+  <div class="rm-stat">
+    <div class="rm-stat-value" style="color: #9ca3af;"><%= @dismissed_count %></div>
+    <div class="rm-stat-label">Dismissed</div>
+  </div>
+</div>

data/app/views/rails_markup/dashboard/_styles.html.erb

@@ -0,0 +1,115 @@
+<style id="rm-dashboard-styles" data-turbo-permanent>
+  /* Rails Markup Dashboard Styles */
+  .rm-stats { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
+  .rm-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; flex: 1; min-width: 120px; }
+  .rm-stat-value { font-size: 28px; font-weight: 700; line-height: 1; }
+  .rm-stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
+
+  .rm-filters { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
+  .rm-pill { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; transition: all 0.15s; text-decoration: none; }
+  .rm-pill:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
+  .rm-pill-active { background: #4361ee; color: #fff; border-color: #4361ee; }
+  .rm-pill-active:hover { background: #3730a3; color: #fff; }
+  .rm-select { padding: 6px 12px; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 12px; background: #fff; color: #374151; cursor: pointer; max-width: 240px; }
+
+  .rm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; margin-bottom: 10px; transition: border-color 0.15s; position: relative; }
+  .rm-card:hover { border-color: #818cf8; }
+  .rm-card-link { display: block; color: inherit; }
+  .rm-card-link:hover { text-decoration: none; }
+  .rm-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+  .rm-card-content { font-size: 14px; color: #374151; line-height: 1.6; }
+  .rm-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: #9ca3af; }
+  .rm-card-meta code { font-size: 11px; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #6b7280; }
+
+  .rm-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
+  .rm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+  .rm-status-pending { background: #fef3c7; color: #92400e; }
+  .rm-status-acknowledged { background: #dbeafe; color: #1e40af; }
+  .rm-status-resolved { background: #d1fae5; color: #065f46; }
+  .rm-status-dismissed { background: #f3f4f6; color: #6b7280; }
+  .rm-dot-pending { background: #f59e0b; }
+  .rm-dot-acknowledged { background: #3b82f6; }
+  .rm-dot-resolved { background: #10b981; }
+  .rm-dot-dismissed { background: #9ca3af; }
+  .rm-intent-fix { background: #fef2f2; color: #991b1b; }
+  .rm-intent-change { background: #eff6ff; color: #1e40af; }
+  .rm-intent-question { background: #f5f3ff; color: #5b21b6; }
+  .rm-intent-approve { background: #ecfdf5; color: #065f46; }
+  .rm-severity-blocking { background: #fef2f2; color: #991b1b; font-weight: 700; }
+  .rm-severity-important { background: #fff7ed; color: #9a3412; }
+  .rm-severity-suggestion { background: #f3f4f6; color: #6b7280; }
+
+  .rm-detail { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 24px; }
+  .rm-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+  .rm-detail-content { font-size: 15px; line-height: 1.7; margin-bottom: 24px; white-space: pre-wrap; }
+  .rm-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin-bottom: 24px; padding: 16px; background: #f9fafb; border-radius: 8px; }
+  .rm-detail-meta dt { color: #6b7280; font-weight: 500; }
+  .rm-detail-meta dd { color: #374151; }
+  .rm-detail-meta dd code { font-size: 12px; background: #e5e7eb; padding: 1px 5px; border-radius: 3px; }
+
+  .rm-thread { margin-top: 24px; border-top: 1px solid #e5e7eb; padding-top: 20px; }
+  .rm-thread h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #374151; }
+  .rm-thread-entry { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
+  .rm-thread-agent { background: #eff6ff; border-left: 3px solid #3b82f6; }
+  .rm-thread-user { background: #f9fafb; border-left: 3px solid #e5e7eb; }
+  .rm-thread-role { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+  .rm-thread-time { font-size: 11px; color: #9ca3af; margin-top: 4px; }
+
+  .rm-actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
+  .rm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; transition: all 0.15s; }
+  .rm-btn:hover { border-color: #818cf8; color: #4361ee; text-decoration: none; }
+  .rm-btn-primary { background: #4361ee; color: #fff; border-color: #4361ee; }
+  .rm-btn-primary:hover { background: #3730a3; color: #fff; }
+  .rm-btn-success { background: #10b981; color: #fff; border-color: #10b981; }
+  .rm-btn-success:hover { background: #059669; color: #fff; }
+  .rm-btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
+  .rm-btn-danger:hover { background: #dc2626; color: #fff; }
+
+  .rm-form-group { margin-bottom: 12px; }
+  .rm-form-group label { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-bottom: 4px; }
+  .rm-input { width: 100%; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
+  .rm-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
+
+  .rm-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #6b7280; margin-bottom: 16px; border: none; background: none; cursor: pointer; }
+  .rm-back:hover { color: #4361ee; text-decoration: none; }
+
+  .rm-empty { text-align: center; padding: 48px 24px; color: #9ca3af; }
+  .rm-empty-icon { font-size: 36px; margin-bottom: 12px; }
+  .rm-empty-text { font-size: 14px; }
+
+  .rm-layout { display: flex; gap: 24px; }
+  .rm-main { flex: 1; min-width: 0; }
+  .rm-panel { width: 420px; flex-shrink: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
+  .rm-panel .rm-detail { border-left: 3px solid #818cf8; }
+  .rm-card-active { border-color: #818cf8 !important; background: #f5f3ff; }
+  .rm-panel-empty { display: none; }
+
+  .rm-author { font-weight: 500; color: #6b7280; }
+
+  .rm-load-more { text-align: center; margin-top: 16px; }
+  .rm-load-more-btn { width: 100%; padding: 10px; border-radius: 8px; font-size: 13px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: all 0.15s; }
+  .rm-load-more-btn:hover { border-color: #818cf8; color: #4361ee; background: #f5f3ff; }
+  .rm-load-more-btn:disabled { opacity: 0.6; cursor: wait; }
+
+  .rm-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-height: 400px; }
+  .rm-board-column { background: #f9fafb; border-radius: 12px; padding: 12px; min-height: 200px; }
+  .rm-board-column-header { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
+  .rm-board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
+  .rm-board-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; cursor: grab; font-size: 13px; transition: box-shadow 0.15s; }
+  .rm-board-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
+  .rm-board-card:active { cursor: grabbing; }
+  .rm-drag-over { background: #eff6ff; border: 2px dashed #818cf8; }
+
+  @media (max-width: 900px) {
+    .rm-layout { flex-direction: column; }
+    .rm-panel { width: 100%; position: static; max-height: none; }
+    .rm-board { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 640px) {
+    .rm-stats { flex-direction: column; }
+    .rm-stat { min-width: unset; }
+    .rm-filters { flex-direction: column; align-items: stretch; }
+    .rm-detail-header { flex-direction: column; align-items: flex-start; }
+    .rm-board { grid-template-columns: 1fr; }
+  }
+</style>