heuristics recovery of editor

Author: MaxITService

.gitattributes

@@ -1,5 +1,5 @@
 # Normalize text files to LF in the repo and on checkout
-* text=auto eol=lf
+*           text=auto eol=lf
 # Keep CRLF for Windows batch files (avoid cmd.exe edge cases)
 *.bat       text eol=crlf
 *.cmd       text eol=crlf

code-notes.md

@@ -39,6 +39,13 @@ Current architectural reference for the OneClickPrompts Chrome extension (Manife
 - Manages keyboard shortcuts (Alt+1‒0) with idempotent listener registration and respects the `enableShortcuts` flag.
 - Cleans up resiliency timers and observers before re-running `publicStaticVoidMain()` to prevent duplicates.
 
+### 2.4 Selector Auto-Detection System
+- **Purpose**: Robustly handle DOM structure changes on AI websites by decoupling site scripts from direct DOM queries and implementing self-healing capabilities.
+- **`modules/selector-auto-detector/index.js`** ("The Brain"): Manages detection state, tracks failure counts/cooldowns, orchestrates the recovery workflow (Failure -> Wait -> Heuristics -> Notify), and persists new selectors.
+- **`modules/selector-auto-detector/selector-guard.js`** ("The Guard"): Adapter that replaces direct `document.querySelector` calls. Wraps lookups in a Promise, reporting success/failure to the Brain.
+- **`modules/selector-auto-detector/base-heuristics.js`**: Contains logic to "guess" new selectors when known ones fail (currently a stub).
+- **Integration**: Site-specific scripts (e.g., `buttons-clicking-grok.js`) use `SelectorGuard.findEditor()` and `findSendButton()` instead of direct queries.
+
 ## 3. UI Surfaces
 
 ### 3.1 Inline Toolbar & Buttons

manifest.json

@@ -3,14 +3,12 @@
   "name": "OneClickPrompts",
   "description": "One Click Prompts for AI chat interfaces",
   "version": "0.0.4.8",
-
   "icons": {
     "16": "icon16.png",
     "32": "icon32.png",
     "48": "icon48.png",
     "128": "icon128.png"
   },
-
   "action": {
     "default_popup": "popup.html",
     "default_icon": {
@@ -22,14 +20,14 @@
     "default_title": "OneClickPrompts: Open User Interface"
   },
   "options_page": "popup.html",
-
-  "permissions": ["storage", "contextMenus"],
-
+  "permissions": [
+    "storage",
+    "contextMenus"
+  ],
   "background": {
     "service_worker": "config.js",
     "type": "module"
   },
-
   "content_scripts": [
     {
       "matches": [
@@ -44,11 +42,17 @@
         "https://www.perplexity.ai/*",
         "https://perplexity.ai/*"
       ],
-      "css": ["floating-panel-files/floating-panel.css", "common-ui-elements/ocp_toast.css"],
+      "css": [
+        "floating-panel-files/floating-panel.css",
+        "common-ui-elements/ocp_toast.css"
+      ],
       "js": [
         "log.js",
-          "event-handlers.js",
-          "utils.js",
+        "event-handlers.js",
+        "utils.js",
+        "modules/selector-auto-detector/base-heuristics.js",
+        "modules/selector-auto-detector/index.js",
+        "modules/selector-auto-detector/selector-guard.js",
         "/modules/token-models/base.js",
         "/modules/token-models/registry.js",
         "/modules/token-models/model-simple.js",
@@ -88,8 +92,12 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["floating-panel-files/floating-panel.html"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "floating-panel-files/floating-panel.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ]
-}
+}

modules/selector-auto-detector/base-heuristics.js

@@ -0,0 +1,74 @@
+/**
+ * File: modules/selector-auto-detector/base-heuristics.js
+ * Version: 1.0
+ *
+ * Description:
+ * This module provides the base heuristics for detecting UI elements when standard selectors fail.
+ * Currently a stub that logs attempts and returns null.
+ * Future versions will implement real DOM analysis strategies.
+ */
+
+'use strict';
+
+window.OneClickPromptsSelectorAutoDetectorBase = {
+    /**
+     * Attempts to find the chat editor using heuristics.
+     * @returns {HTMLElement|null} The found editor element or null.
+     */
+    detectEditor: async function () {
+        logConCgp('[SelectorAutoDetector] Running editor heuristics...');
+
+        // 1. Find all potential candidates
+        const candidates = [
+            ...document.querySelectorAll('textarea'),
+            ...document.querySelectorAll('div[contenteditable="true"]')
+        ];
+
+        logConCgp(`[SelectorAutoDetector] Found ${candidates.length} initial candidates.`);
+
+        // 2. Filter for visibility and size
+        const visibleCandidates = candidates.filter(el => {
+            const rect = el.getBoundingClientRect();
+            const style = window.getComputedStyle(el);
+
+            const isVisible = style.display !== 'none' &&
+                style.visibility !== 'hidden' &&
+                style.opacity !== '0' &&
+                rect.width > 10 &&
+                rect.height > 10; // Arbitrary small size to filter out tiny hidden inputs
+
+            return isVisible;
+        });
+
+        logConCgp(`[SelectorAutoDetector] ${visibleCandidates.length} candidates after visibility filter.`);
+
+        if (visibleCandidates.length === 0) {
+            return null;
+        }
+
+        // 3. Sort by vertical position (lowest on page first)
+        // We use rect.top to determine vertical position. Higher value = lower on page.
+        visibleCandidates.sort((a, b) => {
+            const rectA = a.getBoundingClientRect();
+            const rectB = b.getBoundingClientRect();
+            return rectB.top - rectA.top;
+        });
+
+        const bestMatch = visibleCandidates[0];
+        logConCgp('[SelectorAutoDetector] Best match found:', bestMatch);
+
+        return bestMatch;
+    },
+
+    /**
+     * Attempts to find the send button using heuristics.
+     * @returns {HTMLElement|null} The found send button element or null.
+     */
+    detectSendButton: async function () {
+        logConCgp('[SelectorAutoDetector] Running send button heuristics...');
+        // Placeholder for future logic:
+        // 1. Find all buttons
+        // 2. Score based on icon (SVG), aria-label ('Send', 'Submit'), position relative to editor
+        return null;
+    }
+};

modules/selector-auto-detector/index.js

@@ -0,0 +1,115 @@
+/**
+ * File: modules/selector-auto-detector/index.js
+ * Version: 1.0
+ *
+ * Description:
+ * The "Brain" of the selector auto-detection system.
+ * Manages failure tracking, coordinates recovery attempts, and handles user notifications.
+ */
+
+'use strict';
+
+window.OneClickPromptsSelectorAutoDetector = {
+    state: {
+        editor: {
+            failures: 0,
+            lastFailure: 0,
+            recovering: false
+        },
+        sendButton: {
+            failures: 0,
+            lastFailure: 0,
+            recovering: false
+        }
+    },
+
+    config: {
+        failureThreshold: 1, // Number of failures before triggering recovery (can be >1 to debounce)
+        cooldownMs: 2000,    // Time to wait before re-alerting or re-trying
+    },
+
+    /**
+     * Reports a failure to find a specific element type.
+     * @param {string} type - 'editor' or 'sendButton'
+     * @param {Object} context - Additional context (e.g., selectors tried)
+     */
+    reportFailure: async function (type, context = {}) {
+        const now = Date.now();
+        const s = this.state[type];
+
+        if (!s) {
+            logConCgp(`[SelectorAutoDetector] Unknown type reported: ${type}`);
+            return null;
+        }
+
+        // Debounce/Cooldown check
+        if (s.recovering || (now - s.lastFailure < this.config.cooldownMs)) {
+            return null;
+        }
+
+        s.failures++;
+        s.lastFailure = now;
+
+        logConCgp(`[SelectorAutoDetector] ${type} failure reported. Count: ${s.failures}`, context);
+
+        if (s.failures >= this.config.failureThreshold) {
+            return await this.triggerRecovery(type);
+        }
+        return null;
+    },
+
+    /**
+     * Reports that an element was successfully found.
+     * Resets failure counters.
+     * @param {string} type - 'editor' or 'sendButton'
+     */
+    reportRecovery: function (type) {
+        const s = this.state[type];
+        if (s && s.failures > 0) {
+            logConCgp(`[SelectorAutoDetector] ${type} recovered. Resetting state.`);
+            s.failures = 0;
+            s.recovering = false;
+        }
+    },
+
+    /**
+     * Initiates the recovery process.
+     * @param {string} type - 'editor' or 'sendButton'
+     * @returns {Promise<HTMLElement|null>}
+     */
+    triggerRecovery: async function (type) {
+        const s = this.state[type];
+        s.recovering = true;
+
+        // Readable name for the type
+        const typeName = type === 'editor' ? 'Text input area' : 'send button';
+
+        // Notify user
+        if (window.showToast) {
+            window.showToast(`OneClickPrompts: ${typeName} not found. Trying to find it...`, 'info');
+        } else {
+            console.warn(`OneClickPrompts: ${typeName} not found. Analyzing page structure...`);
+        }
+
+        // Run Heuristics
+        let result = null;
+        if (type === 'editor') {
+            result = await window.OneClickPromptsSelectorAutoDetectorBase.detectEditor();
+        } else if (type === 'sendButton') {
+            result = await window.OneClickPromptsSelectorAutoDetectorBase.detectSendButton();
+        }
+
+        if (result) {
+            logConCgp(`[SelectorAutoDetector] Heuristics found new ${type}!`, result);
+            // TODO: Save new selector to storage
+            // Removed "Found!" toast to avoid false positives if the element turns out to be invalid.
+            s.failures = 0;
+        } else {
+            logConCgp(`[SelectorAutoDetector] Heuristics failed to find ${type}.`);
+            if (window.showToast) window.showToast(`OneClickPrompts: Could not find ${typeName}. Please report this issue.`, 'error');
+        }
+
+        s.recovering = false;
+        return result;
+    }
+};

modules/selector-auto-detector/selector-guard.js

@@ -0,0 +1,76 @@
+/**
+ * File: modules/selector-auto-detector/selector-guard.js
+ * Version: 1.0
+ *
+ * Description:
+ * The "Guard" adapter that replaces direct DOM queries.
+ * It acts as a proxy, trying standard selectors first, then reporting success/failure
+ * to the AutoDetector.
+ */
+
+'use strict';
+
+window.OneClickPromptsSelectorGuard = {
+    /**
+     * Tries to find the editor element using known selectors.
+     * @returns {Promise<HTMLElement|null>}
+     */
+    findEditor: async function () {
+        const selectors = window.InjectionTargetsOnWebsite?.selectors?.editors || [];
+
+        // 1. Try standard selectors
+        let element = this._querySelectors(selectors);
+
+        // 2. Handle Result
+        if (element) {
+            window.OneClickPromptsSelectorAutoDetector.reportRecovery('editor');
+            return element;
+        } else {
+            // Try to recover
+            return await window.OneClickPromptsSelectorAutoDetector.reportFailure('editor', { selectors });
+        }
+    },
+
+    /**
+     * Tries to find the send button element using known selectors.
+     * @returns {Promise<HTMLElement|null>}
+     */
+    findSendButton: async function () {
+        const selectors = window.InjectionTargetsOnWebsite?.selectors?.sendButtons || [];
+
+        // 1. Try standard selectors
+        let element = this._querySelectors(selectors);
+
+        // 2. Handle Result
+        if (element) {
+            window.OneClickPromptsSelectorAutoDetector.reportRecovery('sendButton');
+            return element;
+        } else {
+            // Try to recover
+            return await window.OneClickPromptsSelectorAutoDetector.reportFailure('sendButton', { selectors });
+        }
+    },
+
+    /**
+     * Helper to iterate selectors and find the first matching visible element.
+     * @param {string[]} selectors 
+     * @returns {HTMLElement|null}
+     */
+    _querySelectors: function (selectors) {
+        if (!selectors || selectors.length === 0) return null;
+
+        // Try to find a visible element first
+        // Some sites have multiple hidden textareas, we usually want the visible one
+        const candidates = selectors
+            .map(s => document.querySelectorAll(s))
+            .flatMap(nodeList => Array.from(nodeList));
+
+        // Filter for existence and basic visibility (offsetParent is a quick check for 'display: none')
+        const visibleCandidate = candidates.find(el => el && el.offsetParent !== null);
+
+        if (visibleCandidate) return visibleCandidate;
+
+        // Fallback to just existence if no visible candidate found (rare but possible)
+        return candidates.find(el => el) || null;
+    }
+};