From 983d1e3fcf67d91926c1a38b9bf407d9e253c7b9 Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Thu, 2 Apr 2026 00:14:00 +0200
Subject: [PATCH] In the options page is shown if a special prompt is using a
 specific API. see #676

---
 _locales/en/messages.json       |  9 +++++
 options/mzta-options-default.js |  2 +-
 options/mzta-options.css        | 10 ++++-
 options/mzta-options.html       | 18 ++++++---
 options/mzta-options.js         | 66 ++++++++++++++++++++++++++++++++-
 5 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 23520466..66c771a6 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1902,6 +1902,15 @@
     "message": "To use this feature, you need an API integration rather than the ChatGPT Web Integration. You can define a specific API in the feature settings page by first checking the checkbox above and then clicking the button on the left.",
     "description": ""
   },
+  "prefs_specific_api_indicator": {
+    "message": "[Using $1]",
+    "description": "Indicator near settings button when a special prompt uses a specific API.",
+    "placeholders": {
+      "1": {
+        "content": "$1"
+      }
+    }
+  },
   "prefs_google_gemini_thinking_budget": {
     "message": "Thinking Budget",
     "description": ""
diff --git a/options/mzta-options-default.js b/options/mzta-options-default.js
index 8776c8b6..e1f2eddb 100644
--- a/options/mzta-options-default.js
+++ b/options/mzta-options-default.js
@@ -16,7 +16,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-const special_prompts_with_integration = ['add_tags', 'spamfilter', 'summarize', 'get_calendar_event', 'get_task', 'translate'];
+export const special_prompts_with_integration = ['add_tags', 'spamfilter', 'summarize', 'get_calendar_event', 'get_task', 'translate'];
 
 export const integration_options_config = {
     chatgpt: {
diff --git a/options/mzta-options.css b/options/mzta-options.css
index 0602e2f7..36de23ba 100644
--- a/options/mzta-options.css
+++ b/options/mzta-options.css
@@ -18,7 +18,6 @@ table#miczPrefs {
     font-size: 13px;
     padding: 10px;
     border-spacing: 0px;
-    
 }
 
 table#miczPrefs td{
@@ -101,6 +100,14 @@ div#miczTranslate{
     font-weight: bold;
 }
 
+.specific_api_indicator{
+    display: none;
+    font-size: 0.75em;
+    margin-left: 0.5em;
+    padding: 0.15em 0.5em;
+    border-radius: 0.8em;
+}
+
 #no_sparks td{
     text-align: center;
     padding: 1em !important;
@@ -281,4 +288,5 @@ label:has(input[type="checkbox"]) {
     #thstats div{
         background: rgb(41, 70, 70);
     }
+
 }
\ No newline at end of file
diff --git a/options/mzta-options.html b/options/mzta-options.html
index 139b9c8e..ba3391c7 100644
--- a/options/mzta-options.html
+++ b/options/mzta-options.html
@@ -172,7 +172,8 @@
       </tr>
       <tr class="add_tags_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_add_tags__</span>
-        <br><button id="btnManageTagsInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTagsInfo__</button></td>
+        <br><button id="btnManageTagsInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTagsInfo__</button>
+        <span class="specific_api_indicator" id="add_tags_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="add_tags" name="add_tags" class="option-input" />
@@ -183,7 +184,8 @@
       </tr>
       <tr class="spamfilter_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_spamfilter__</span>
-        <br><button id="btnManageSpamFilterInfo" class="btn_small">__MSG_prefs_OptionText_btnManageSpamFilterInfo__</button></td>
+        <br><button id="btnManageSpamFilterInfo" class="btn_small">__MSG_prefs_OptionText_btnManageSpamFilterInfo__</button>
+        <span class="specific_api_indicator" id="spamfilter_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="spamfilter" name="spamfilter" class="option-input" />
@@ -194,7 +196,8 @@
       </tr>
       <tr class="summarize_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_summarize__</span>
-        <br><button id="btnManageSummarizeInfo" class="btn_small">__MSG_prefs_OptionText_btnManageSummarizeInfo__</button></td>
+        <br><button id="btnManageSummarizeInfo" class="btn_small">__MSG_prefs_OptionText_btnManageSummarizeInfo__</button>
+        <span class="specific_api_indicator" id="summarize_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="summarize" name="summarize" class="option-input" />
@@ -205,7 +208,8 @@
       </tr>
       <tr class="translate_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_translate__</span>
-        <br><button id="btnManageTranslateInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTranslateInfo__</button></td>
+        <br><button id="btnManageTranslateInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTranslateInfo__</button>
+        <span class="specific_api_indicator" id="translate_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="translate" name="translate" class="option-input" />
@@ -216,7 +220,8 @@
       </tr>
       <tr class="get_calendar_event_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_get_calendar_event__</span>
-        <br><button id="btnManageCalendarEventInfo" class="btn_small">__MSG_prefs_OptionText_btnManageCalendarEventInfo__</button></td>
+        <br><button id="btnManageCalendarEventInfo" class="btn_small">__MSG_prefs_OptionText_btnManageCalendarEventInfo__</button>
+        <span class="specific_api_indicator" id="get_calendar_event_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="get_calendar_event" name="get_calendar_event" class="option-input" />
@@ -226,7 +231,8 @@
       </tr>
       <tr class="get_task_tr">
         <td><span class="opt_title">__MSG_prefs_OptionText_get_task__</span>
-        <br><button id="btnManageTaskInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTaskInfo__</button></td>
+        <br><button id="btnManageTaskInfo" class="btn_small">__MSG_prefs_OptionText_btnManageTaskInfo__</button>
+        <span class="specific_api_indicator" id="get_task_specific_api_indicator"></span></td>
         <td>
           <label>
             <input type="checkbox" id="get_task" name="get_task" class="option-input" />
diff --git a/options/mzta-options.js b/options/mzta-options.js
index caafc539..0567e870 100644
--- a/options/mzta-options.js
+++ b/options/mzta-options.js
@@ -16,7 +16,12 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { prefs_default, getDynamicSettingsDefaults } from './mzta-options-default.js';
+import {
+  prefs_default,
+  getDynamicSettingsDefaults,
+  getDynamicSettingValue,
+  special_prompts_with_integration
+} from './mzta-options-default.js';
 import { taLogger } from '../js/mzta-logger.js';
 import {
   ChatGPTWeb_models,
@@ -123,6 +128,51 @@ async function restoreOptions() {
   setCurrentChoice(getting);
 }
 
+function getConnectionTypeLabel(value) {
+  const select = document.getElementById('connection_type');
+  if (select) {
+    const option = select.querySelector(`option[value="${value}"]`);
+    if (option) return option.textContent;
+  }
+  return value;
+}
+
+function getConnectionTypeColor(value) {
+  const row = document.querySelector(`tr.conntype_${value}`);
+  if (row) return getComputedStyle(row).backgroundColor;
+  return '';
+}
+
+function getContrastTextColor(bgColor) {
+  const match = bgColor.match(/\d+/g);
+  if (!match || match.length < 3) return '';
+  const [r, g, b] = match.map(Number);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? '#222' : '#eee';
+}
+
+function updateSpecificApiIndicators(prefs_opt) {
+  for (const prefix of special_prompts_with_integration) {
+    const indicator = document.getElementById(`${prefix}_specific_api_indicator`);
+    if (!indicator) continue;
+    const useSpecific = getDynamicSettingValue(prefs_opt, prefix, 'use_specific_integration');
+    if (useSpecific) {
+      const connType = getDynamicSettingValue(prefs_opt, prefix, 'connection_type');
+      const apiName = getConnectionTypeLabel(connType);
+      const bgColor = getConnectionTypeColor(connType);
+      indicator.textContent = browser.i18n.getMessage('prefs_specific_api_indicator', [apiName]);
+      indicator.style.backgroundColor = bgColor;
+      indicator.style.color = getContrastTextColor(bgColor);
+      indicator.style.display = 'inline-block';
+    } else {
+      indicator.textContent = '';
+      indicator.style.backgroundColor = '';
+      indicator.style.color = '';
+      indicator.style.display = 'none';
+    }
+  }
+}
+
 function disable_MaxPromptLength(){
   let maxPromptLength = document.getElementById('max_prompt_length');
   let conntype_select = document.getElementById("connection_type");
@@ -416,6 +466,20 @@ document.addEventListener('DOMContentLoaded', async () => {
   disable_Summarize(prefs_opt);
   disable_Translate(prefs_opt);
   disable_GetCalendarEvent();
+  updateSpecificApiIndicators(prefs_opt);
+
+  browser.storage.onChanged.addListener(async (changes, area) => {
+    if (area !== 'sync') return;
+    const hasRelevantChange = Object.keys(changes).some(key =>
+      key.endsWith('_use_specific_integration') || key.endsWith('_connection_type')
+    );
+    if (hasRelevantChange) {
+      prefs_opt = await browser.storage.sync.get({
+        ...getDynamicSettingsDefaults(['use_specific_integration', 'connection_type'])
+      });
+      updateSpecificApiIndicators(prefs_opt);
+    }
+  });
 
   document.getElementById('reset_max_prompt_length').addEventListener('click', resetMaxPromptLength);