From 4c5c06e7d6a1e77a865981b83f0811cdb9dd17ea Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Tue, 7 Jul 2026 12:23:54 +0530
Subject: [PATCH 1/2] fix(ux): show inline validation feedback for empty api
 key

---
 src/popup.html |  3 +++
 src/popup.ts   | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/popup.html b/src/popup.html
index 89bba80c..d46df495 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -64,6 +64,9 @@ <h1 class="setup-title">Initialize Copilot</h1>
             </button>
           </div>
 
+          <span id="api-key-error" style="color: #ef4444; font-size: 12px; display: none; margin-top: 4px;">API key cannot be
+            empty</span>
+
           <button id="save-keys" class="setup-btn">
             <span>Save Configuration</span>
             <span class="btn-icon">→</span>
diff --git a/src/popup.ts b/src/popup.ts
index 756caabf..0dbd232d 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -105,6 +105,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     if (!apiKey) {
       shakeElement(apiKeyInput);
+      const errorMsg = document.getElementById('api-key-error');
+      if (errorMsg) errorMsg.style.display = 'block';
       return;
     }
     //Validation.
@@ -753,3 +755,14 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   });
 });
+
+// Clear error message when user starts typing
+const apiInputBox = document.getElementById('api-key-input');
+if (apiInputBox) {
+    apiInputBox.addEventListener('input', () => {
+        const errorMsg = document.getElementById('api-key-error');
+        if (errorMsg && errorMsg.style.display === 'block') {
+            errorMsg.style.display = 'none';
+        }
+    });
+}
\ No newline at end of file

From f1a8edc0e3f01b2ff61c4bfc25722ca618f6993c Mon Sep 17 00:00:00 2001
From: Abhi666-max <abhijeet666k@gmail.com>
Date: Tue, 7 Jul 2026 12:40:24 +0530
Subject: [PATCH 2/2] style: format files with prettier to pass CI

---
 src/popup.html |  7 +++++--
 src/popup.ts   | 20 ++++++++++----------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/popup.html b/src/popup.html
index d46df495..90ca7abc 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -64,8 +64,11 @@ <h1 class="setup-title">Initialize Copilot</h1>
             </button>
           </div>
 
-          <span id="api-key-error" style="color: #ef4444; font-size: 12px; display: none; margin-top: 4px;">API key cannot be
-            empty</span>
+          <span
+            id="api-key-error"
+            style="color: #ef4444; font-size: 12px; display: none; margin-top: 4px"
+            >API key cannot be empty</span
+          >
 
           <button id="save-keys" class="setup-btn">
             <span>Save Configuration</span>
diff --git a/src/popup.ts b/src/popup.ts
index 0dbd232d..c5a449f5 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -105,8 +105,8 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     if (!apiKey) {
       shakeElement(apiKeyInput);
-      const errorMsg = document.getElementById('api-key-error');
-      if (errorMsg) errorMsg.style.display = 'block';
+      const errorMsg = document.getElementById("api-key-error");
+      if (errorMsg) errorMsg.style.display = "block";
       return;
     }
     //Validation.
@@ -757,12 +757,12 @@ document.addEventListener("DOMContentLoaded", async () => {
 });
 
 // Clear error message when user starts typing
-const apiInputBox = document.getElementById('api-key-input');
+const apiInputBox = document.getElementById("api-key-input");
 if (apiInputBox) {
-    apiInputBox.addEventListener('input', () => {
-        const errorMsg = document.getElementById('api-key-error');
-        if (errorMsg && errorMsg.style.display === 'block') {
-            errorMsg.style.display = 'none';
-        }
-    });
-}
\ No newline at end of file
+  apiInputBox.addEventListener("input", () => {
+    const errorMsg = document.getElementById("api-key-error");
+    if (errorMsg && errorMsg.style.display === "block") {
+      errorMsg.style.display = "none";
+    }
+  });
+}