headless_browser_tool 0.1.1

data/lib/headless_browser_tool/tools/right_click_tool.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+
+module HeadlessBrowserTool
+  module Tools
+    class RightClickTool < BaseTool
+      tool_name "right_click"
+      description "Right-click an element by CSS selector"
+
+      arguments do
+        required(:selector).filled(:string).description("CSS selector of the element to right-click")
+      end
+
+      def execute(selector:)
+        element = browser.find(selector)
+        element_info = {
+          tag_name: element.tag_name,
+          text: element.text.strip,
+          visible: element.visible?,
+          attributes: {
+            id: element[:id],
+            class: element[:class]
+          }.compact
+        }
+
+        browser.right_click(selector)
+
+        {
+          selector: selector,
+          element: element_info,
+          status: "right_clicked"
+        }
+      end
+    end
+  end
+end

data/lib/headless_browser_tool/tools/save_page_tool.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+
+module HeadlessBrowserTool
+  module Tools
+    class SavePageTool < BaseTool
+      tool_name "save_page"
+      description "Save the current page HTML"
+
+      arguments do
+        required(:file_path).filled(:string).description("Path where to save the HTML")
+      end
+
+      def execute(file_path:)
+        # Ensure directory exists
+        FileUtils.mkdir_p(File.dirname(file_path))
+
+        browser.save_page(file_path)
+
+        {
+          file_path: file_path,
+          file_size: File.size(file_path),
+          timestamp: Time.now.iso8601,
+          url: browser.current_url,
+          title: browser.title,
+          status: "saved"
+        }
+      end
+    end
+  end
+end

data/lib/headless_browser_tool/tools/screenshot_tool.rb

@@ -0,0 +1,199 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+require "time"
+
+module HeadlessBrowserTool
+  module Tools
+    class ScreenshotTool < BaseTool
+      tool_name "screenshot"
+      description "Take a screenshot of the current page"
+
+      arguments do
+        optional(:filename).filled(:string).description("Filename for the screenshot (auto-generated if not provided)")
+        optional(:highlight_selectors).array(:string).description("CSS selectors to highlight in red boxes")
+        optional(:annotate).filled(:bool).description("Add element annotations with data-testid and common selectors")
+        optional(:full_page).filled(:bool).description("Capture entire page instead of just viewport (default: false)")
+      end
+
+      def execute(filename: nil, highlight_selectors: [], annotate: false, full_page: false)
+        screenshots_dir = "./.hbt/screenshots"
+        timestamp = Time.now.strftime("%Y%m%d_%H%M%S_%L")
+
+        # Generate filename with timestamp
+        if filename
+          # Remove .png extension if present to add timestamp before it
+          base_name = filename.sub(/\.png$/i, "")
+          filename = "#{base_name}_#{timestamp}.png"
+        else
+          filename = "screenshot_#{timestamp}.png"
+        end
+
+        file_path = File.join(screenshots_dir, filename)
+
+        # Inject JavaScript to highlight elements
+        inject_highlight_script(highlight_selectors, annotate) if highlight_selectors.any? || annotate
+
+        # Take screenshot
+        if full_page
+          take_full_page_screenshot(file_path)
+        else
+          browser.save_screenshot(file_path)
+        end
+
+        # Remove highlights
+        browser.execute_script("document.querySelectorAll('.ai-highlight').forEach(el => el.remove());")
+
+        # Get file info
+        file_size = File.size(file_path)
+
+        {
+          file_path: file_path,
+          filename: filename,
+          file_size: file_size,
+          file_size_human: "#{(file_size / 1024.0).round(2)} KB",
+          timestamp: timestamp,
+          full_page: full_page,
+          highlighted_elements: highlight_selectors.size,
+          annotated: annotate,
+          url: browser.current_url,
+          title: browser.title
+        }
+      end
+
+      private
+
+      def take_full_page_screenshot(file_path)
+        # Get the full page dimensions
+        dimensions = browser.execute_script(<<~JS)
+          return {
+            width: Math.max(
+              document.body.scrollWidth,
+              document.body.offsetWidth,
+              document.documentElement.clientWidth,
+              document.documentElement.scrollWidth,
+              document.documentElement.offsetWidth
+            ),
+            height: Math.max(
+              document.body.scrollHeight,
+              document.body.offsetHeight,
+              document.documentElement.clientHeight,
+              document.documentElement.scrollHeight,
+              document.documentElement.offsetHeight
+            ),
+            devicePixelRatio: window.devicePixelRatio || 1
+          };
+        JS
+
+        # Handle nil dimensions
+        if dimensions.nil?
+          # Fallback to just taking a regular screenshot
+          browser.save_screenshot(file_path)
+          return
+        end
+
+        # Store original window size
+        original_size = browser.current_window.size
+
+        # Resize window to full page dimensions
+        # Add some padding to ensure everything is captured
+        browser.current_window.resize_to(
+          (dimensions["width"] || 1280) + 100,
+          (dimensions["height"] || 720) + 100
+        )
+
+        # Small delay to ensure resize is complete
+        sleep 0.5
+
+        # Take the screenshot
+        browser.save_screenshot(file_path)
+
+        # Restore original window size
+        browser.current_window.resize_to(original_size[0], original_size[1])
+      end
+
+      def inject_highlight_script(selectors, annotate)
+        script = <<~JS
+          // Remove any existing highlights
+          document.querySelectorAll('.ai-highlight').forEach(el => el.remove());
+
+          // Add highlight styles
+          const style = document.createElement('style');
+          style.textContent = `
+            .ai-highlight {
+              position: absolute;
+              border: 3px solid red;
+              background: rgba(255, 0, 0, 0.1);
+              pointer-events: none;
+              z-index: 10000;
+            }
+            .ai-annotation {
+              position: absolute;
+              background: red;
+              color: white;
+              padding: 2px 6px;
+              font-size: 12px;
+              font-family: monospace;
+              border-radius: 3px;
+              z-index: 10001;
+            }
+          `;
+          document.head.appendChild(style);
+
+          // Highlight specific selectors
+          #{selectors.map { |sel| highlight_selector(sel) }.join("\n")}
+
+          // Annotate interactive elements if requested
+          #{annotate ? annotate_elements : ""}
+        JS
+
+        browser.execute_script(script)
+        sleep 0.1 # Give time for rendering
+      end
+
+      def highlight_selector(selector)
+        <<~JS
+          try {
+            document.querySelectorAll('#{selector}').forEach((el, index) => {
+              const rect = el.getBoundingClientRect();
+              const highlight = document.createElement('div');
+              highlight.className = 'ai-highlight';
+              highlight.style.top = rect.top + window.scrollY + 'px';
+              highlight.style.left = rect.left + window.scrollX + 'px';
+              highlight.style.width = rect.width + 'px';
+              highlight.style.height = rect.height + 'px';
+              document.body.appendChild(highlight);
+            });
+          } catch(e) {}
+        JS
+      end
+
+      def annotate_elements
+        <<~JS
+          // Find and annotate interactive elements
+          const interactiveSelectors = ['button', 'a', 'input', 'select', 'textarea', '[onclick]', '[role="button"]'];
+          let annotationIndex = 1;
+
+          interactiveSelectors.forEach(selector => {
+            document.querySelectorAll(selector).forEach(el => {
+              if (el.offsetWidth > 0 && el.offsetHeight > 0) { // Only visible elements
+                const rect = el.getBoundingClientRect();
+                const annotation = document.createElement('div');
+                annotation.className = 'ai-annotation';
+                annotation.textContent = annotationIndex;
+                annotation.style.top = rect.top + window.scrollY - 20 + 'px';
+                annotation.style.left = rect.left + window.scrollX + 'px';
+
+                // Store selector info
+                el.setAttribute('data-ai-index', annotationIndex);
+
+                document.body.appendChild(annotation);
+                annotationIndex++;
+              }
+            });
+          });
+        JS
+      end
+    end
+  end
+end

data/lib/headless_browser_tool/tools/search_page_tool.rb

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+
+module HeadlessBrowserTool
+  module Tools
+    class SearchPageTool < BaseTool
+      tool_name "search_page"
+      description "Search for text or patterns in the current page content"
+
+      arguments do
+        required(:query).filled(:string).description("Text or regex pattern to search for")
+        optional(:case_sensitive).filled(:bool)
+                                 .description("Whether the search should be case sensitive (default: false)")
+        optional(:regex).filled(:bool).description("Treat query as regex pattern (default: false)")
+        optional(:context_lines).filled(:integer).description("Number of lines to show around matches (default: 2)")
+        optional(:highlight).filled(:bool).description("Highlight matches in the browser (default: false)")
+      end
+
+      def execute(query:, case_sensitive: false, regex: false, context_lines: 2, highlight: false)
+        # Get page text content
+        page_text = browser.text
+        lines = page_text.split("\n")
+
+        # Build search pattern
+        pattern = if regex
+                    Regexp.new(query, case_sensitive ? nil : Regexp::IGNORECASE)
+                  else
+                    escaped_query = Regexp.escape(query)
+                    Regexp.new(escaped_query, case_sensitive ? nil : Regexp::IGNORECASE)
+                  end
+
+        # Find matches with line numbers
+        matches = []
+        lines.each_with_index do |line, index|
+          next unless line =~ pattern
+
+          match_info = {
+            line_number: index + 1,
+            line: line,
+            matches: line.scan(pattern)
+          }
+
+          # Add context
+          if context_lines.positive?
+            start_idx = [0, index - context_lines].max
+            end_idx = [lines.length - 1, index + context_lines].min
+            match_info[:context] = {
+              before: lines[start_idx...index],
+              after: lines[(index + 1)..end_idx]
+            }
+          end
+
+          matches << match_info
+        end
+
+        # Highlight in browser if requested
+        if highlight && matches.any?
+          highlight_script = build_highlight_script(query, regex, case_sensitive)
+          browser.execute_script(highlight_script)
+        end
+
+        # Build result
+        result = {
+          query: query,
+          total_matches: matches.size,
+          matches: matches.map do |match|
+            output = {
+              line_number: match[:line_number],
+              line: match[:line].strip,
+              occurrences: match[:matches].size
+            }
+
+            if match[:context]
+              output[:context] = {
+                before: match[:context][:before].map(&:strip),
+                after: match[:context][:after].map(&:strip)
+              }
+            end
+
+            output
+          end
+        }
+
+        # Also search in HTML attributes and hidden text if no matches in visible text
+        if matches.empty?
+          html_matches = search_html(pattern)
+          result[:html_matches] = html_matches if html_matches.any?
+        end
+
+        result
+      end
+
+      private
+
+      def search_html(pattern)
+        # Search in page source for hidden content, attributes, etc.
+        page_source = browser.html
+        matches = []
+
+        # Search in common attributes
+        attribute_patterns = [
+          /<[^>]+\s+(?:title|alt|placeholder|aria-label|data-[^=]+)="([^"]*#{pattern}[^"]*)"/i,
+          /<[^>]+\s+(?:href|src|action)="([^"]*#{pattern}[^"]*)"/i,
+          /<meta[^>]+content="([^"]*#{pattern}[^"]*)"/i
+        ]
+
+        attribute_patterns.each do |attr_pattern|
+          page_source.scan(attr_pattern) do |match|
+            matches << {
+              type: "attribute",
+              content: match[0],
+              context: ::Regexp.last_match(0)[0..200] # First 200 chars of the matching element
+            }
+          end
+        end
+
+        # Search in script tags
+        page_source.scan(%r{<script[^>]*>(.*?)</script>}mi) do |script_content|
+          if script_content[0] =~ pattern
+            matches << {
+              type: "script",
+              content: script_content[0][0..200],
+              match_count: script_content[0].scan(pattern).size
+            }
+          end
+        end
+
+        matches
+      end
+
+      def build_highlight_script(query, regex, case_sensitive)
+        <<~JS
+          (function() {
+            // Remove any existing highlights
+            document.querySelectorAll('.hbt-search-highlight').forEach(el => {
+              const parent = el.parentNode;
+              parent.replaceChild(document.createTextNode(el.textContent), el);
+              parent.normalize();
+            });
+
+            // Add highlight styles
+            if (!document.getElementById('hbt-search-styles')) {
+              const style = document.createElement('style');
+              style.id = 'hbt-search-styles';
+              style.textContent = `
+                .hbt-search-highlight {
+                  background-color: yellow;
+                  color: black;
+                  font-weight: bold;
+                  padding: 0 2px;
+                  border-radius: 2px;
+                }
+              `;
+              document.head.appendChild(style);
+            }
+
+            // Create search pattern
+            const flags = #{case_sensitive ? "'g'" : "'gi'"};
+            const pattern = #{regex ? "new RegExp('#{query.gsub("'", "\\\\'")}')" : "new RegExp('#{Regexp.escape(query).gsub("'", "\\\\'")}')"} + ', ' + flags + ')';
+
+            // Function to highlight text nodes
+            function highlightTextNode(textNode) {
+              const text = textNode.textContent;
+              const matches = text.matchAll(pattern);
+              const matchArray = Array.from(matches);
+
+              if (matchArray.length > 0) {
+                const fragment = document.createDocumentFragment();
+                let lastIndex = 0;
+
+                matchArray.forEach(match => {
+                  // Add text before match
+                  if (match.index > lastIndex) {
+                    fragment.appendChild(
+                      document.createTextNode(text.substring(lastIndex, match.index))
+                    );
+                  }
+
+                  // Add highlighted match
+                  const span = document.createElement('span');
+                  span.className = 'hbt-search-highlight';
+                  span.textContent = match[0];
+                  fragment.appendChild(span);
+
+                  lastIndex = match.index + match[0].length;
+                });
+
+                // Add remaining text
+                if (lastIndex < text.length) {
+                  fragment.appendChild(
+                    document.createTextNode(text.substring(lastIndex))
+                  );
+                }
+
+                textNode.parentNode.replaceChild(fragment, textNode);
+              }
+            }
+
+            // Walk through all text nodes
+            function walkTextNodes(node) {
+              if (node.nodeType === Node.TEXT_NODE) {
+                highlightTextNode(node);
+              } else if (node.nodeType === Node.ELEMENT_NODE &&
+                         !['SCRIPT', 'STYLE', 'NOSCRIPT'].includes(node.tagName)) {
+                for (let child of Array.from(node.childNodes)) {
+                  walkTextNodes(child);
+                }
+              }
+            }
+
+            walkTextNodes(document.body);
+
+            // Scroll to first match
+            const firstHighlight = document.querySelector('.hbt-search-highlight');
+            if (firstHighlight) {
+              firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+          })();
+        JS
+      end
+    end
+  end
+end

data/lib/headless_browser_tool/tools/search_source_tool.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+
+module HeadlessBrowserTool
+  module Tools
+    class SearchSourceTool < BaseTool
+      tool_name "search_source"
+      description "Search the page's HTML source code"
+
+      arguments do
+        required(:query).filled(:string).description("Text or regex pattern to search for")
+        optional(:case_sensitive).filled(:bool)
+                                 .description("Whether the search should be case sensitive (default: false)")
+        optional(:regex).filled(:bool).description("Treat query as regex pattern (default: false)")
+        optional(:context_lines).filled(:integer).description("Number of lines to show around matches (default: 2)")
+        optional(:show_line_numbers).filled(:bool).description("Show line numbers in results (default: true)")
+      end
+
+      def execute(query:, case_sensitive: false, regex: false, context_lines: 2, show_line_numbers: true)
+        # Get page source
+        source = browser.html
+        lines = source.split("\n")
+
+        # Build search pattern
+        pattern = if regex
+                    Regexp.new(query, case_sensitive ? nil : Regexp::IGNORECASE)
+                  else
+                    escaped_query = Regexp.escape(query)
+                    Regexp.new(escaped_query, case_sensitive ? nil : Regexp::IGNORECASE)
+                  end
+
+        # Find all matches with line context
+        matches = []
+        lines.each_with_index do |line, index|
+          next unless line =~ pattern
+
+          # Get context lines
+          start_idx = [0, index - context_lines].max
+          end_idx = [lines.length - 1, index + context_lines].min
+
+          # Build match entry
+          match_entry = {
+            line_number: index + 1,
+            line: line,
+            match_count: line.scan(pattern).size
+          }
+
+          # Add context with line numbers
+          if context_lines.positive?
+            context_before = []
+            context_after = []
+
+            (start_idx...index).each do |i|
+              context_line = show_line_numbers ? "#{i + 1}: #{lines[i]}" : lines[i]
+              context_before << context_line
+            end
+
+            ((index + 1)..end_idx).each do |i|
+              context_line = show_line_numbers ? "#{i + 1}: #{lines[i]}" : lines[i]
+              context_after << context_line
+            end
+
+            match_entry[:context] = {
+              before: context_before,
+              after: context_after
+            }
+          end
+
+          # Highlight matches in the line
+          highlighted_line = line.gsub(pattern) { |match| ">>#{match}<<" }
+          match_entry[:highlighted] = highlighted_line
+
+          matches << match_entry
+        end
+
+        # Analyze match types
+        match_analysis = analyze_matches(matches, lines, pattern)
+
+        # Build result
+        {
+          query: query,
+          total_matches: matches.sum { |m| m[:match_count] },
+          total_lines_with_matches: matches.size,
+          matches: matches.map do |match|
+            result = {
+              line_number: match[:line_number],
+              line: match[:line].strip,
+              highlighted: match[:highlighted].strip,
+              occurrences: match[:match_count]
+            }
+
+            result[:context] = match[:context] if match[:context]
+
+            result
+          end,
+          analysis: match_analysis
+        }
+      end
+
+      private
+
+      def analyze_matches(matches, _lines, pattern)
+        analysis = {
+          tags: {},
+          attributes: {},
+          scripts: 0,
+          styles: 0,
+          comments: 0,
+          text_content: 0
+        }
+
+        matches.each do |match|
+          line = match[:line]
+
+          # Detect what type of content contains the match
+          case line
+          when /<script/i
+            analysis[:scripts] += match[:match_count]
+          when /<style/i
+            analysis[:styles] += match[:match_count]
+          when /<!--/
+            analysis[:comments] += match[:match_count]
+          when /<(\w+)[^>]*>/
+            tag_name = ::Regexp.last_match(1).downcase
+            analysis[:tags][tag_name] ||= 0
+            analysis[:tags][tag_name] += match[:match_count]
+
+            # Check if match is in an attribute
+            # Use the pattern to check for attribute matches
+            line.scan(/(\w+)=["'][^"']*/) do |attr_match|
+              attr_name = attr_match[0].downcase
+              attr_value = ::Regexp.last_match(0)
+              if attr_value =~ pattern
+                analysis[:attributes][attr_name] ||= 0
+                analysis[:attributes][attr_name] += 1
+              end
+            end
+          else
+            analysis[:text_content] += match[:match_count] if line !~ /^\s*</
+          end
+        end
+
+        analysis
+      end
+    end
+  end
+end

data/lib/headless_browser_tool/tools/select_tool.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative "base_tool"
+
+module HeadlessBrowserTool
+  module Tools
+    class SelectTool < BaseTool
+      tool_name "select"
+      description "Select an option from a dropdown"
+
+      arguments do
+        required(:value).filled(:string).description("Value or text to select")
+        required(:dropdown_selector).filled(:string).description("CSS selector of the dropdown")
+      end
+
+      def execute(value:, dropdown_selector:)
+        dropdown = browser.find(dropdown_selector)
+
+        # Get all options
+        options = dropdown.all("option").map.with_index do |opt, index|
+          {
+            selector: "#{dropdown_selector} option:nth-of-type(#{index + 1})",
+            value: opt.value,
+            text: opt.text,
+            selected: opt.selected?
+          }
+        end
+
+        browser.select(value, dropdown_selector)
+
+        # Find the newly selected option
+        selected_option = dropdown.all("option").find(&:selected?)
+
+        {
+          dropdown_selector: dropdown_selector,
+          selected_value: selected_option&.value,
+          selected_text: selected_option&.text,
+          options: options,
+          status: "selected"
+        }
+      end
+    end
+  end
+end