fix(options): surface provider sign-in feedback as a visible toast

Status messages rendered into an off-screen #status element at the bottom
of the page and auto-hid after 2.2s, so feedback from provider panels lower
on the page was never seen — the Claude OAuth "Finish" button looked like it
did nothing. Make #status a fixed, always-visible toast, add a busy state to
the Finish button, surface the empty-paste case, and keep errors on screen
long enough to read.

Author: New1Direction

options.html

@@ -417,8 +417,19 @@
         background: var(--accent-deep-hover);
       }
       #status {
-        font-size: 12px;
-        margin-top: 12px;
+        position: fixed;
+        left: 50%;
+        bottom: 24px;
+        transform: translateX(-50%);
+        max-width: min(90vw, 520px);
+        font-size: 13px;
+        line-height: 1.4;
+        padding: 12px 18px;
+        border-radius: 12px;
+        background: var(--surface, #1b1b22);
+        border: 1px solid var(--border, #3a3a44);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+        z-index: 9999;
         display: none;
       }
 

src/options.js

@@ -520,13 +520,16 @@ anyCompatConnected().then((on) => {
   }
 });
 
-function showStatus(msg, color) {
+let _statusHideTimer = null;
+function showStatus(msg, color, durationMs = 2600) {
   statusEl.textContent = msg;
   statusEl.style.color = color;
   statusEl.style.display = 'block';
-  setTimeout(() => {
+  if (_statusHideTimer) clearTimeout(_statusHideTimer);
+  _statusHideTimer = setTimeout(() => {
     statusEl.style.display = 'none';
-  }, 2200);
+    _statusHideTimer = null;
+  }, durationMs);
 }
 
 function openTab(url) {
@@ -895,21 +898,31 @@ document.getElementById('anthropic-oauth-start')?.addEventListener('click', asyn
 });
 
 document.getElementById('save-anthropic-oauth')?.addEventListener('click', async () => {
+  const btn = document.getElementById('save-anthropic-oauth');
   const input = document.getElementById('anthropicOAuthCode');
   const authCode = input.value.trim();
-  if (!authCode) return;
+  if (!authCode) {
+    showStatus('Paste the Claude code first.', '#f87171');
+    input.focus();
+    return;
+  }
   try {
+    setButtonBusy(btn, true, 'Finishing…');
     const s = await chrome.storage.local.get(ANTHROPIC_OAUTH_VERIFIER_KEY);
     const verifier = s[ANTHROPIC_OAUTH_VERIFIER_KEY];
-    if (!verifier) throw new Error('Start Claude sign-in first.');
+    if (!verifier) throw new Error('Start Claude sign-in first, then paste the code.');
     const tokens = await exchangeAnthropicCode({ authCode, verifier });
     await saveAnthropicOAuthTokens(tokens);
     await chrome.storage.local.remove(['anthropicKey', ANTHROPIC_OAUTH_VERIFIER_KEY]);
     input.value = '';
     setConnected('anthropic', tokens.access, { method: 'oauth' });
     showStatus('✓ Connected to Claude', '#4ade80');
   } catch (err) {
-    showStatus('✗ Claude sign-in: ' + (err?.message || err), '#f87171');
+    // Keep the real reason on screen long enough to read — Claude codes are
+    // short-lived, so an expired/reused code is the most common failure here.
+    showStatus('✗ Claude sign-in: ' + (err?.message || err), '#f87171', 7000);
+  } finally {
+    setButtonBusy(btn, false);
   }
 });