Validate API keys with a tiny round-trip from the Settings page

When the user fills in an API key, give them an immediate ✓/✗ instead of
waiting until a 4xx surfaces mid-pipeline. Each provider's lightest
authenticated endpoint is hit:

  Canvas    → GET /api/v1/users/self     (uses cfg-canvas-url)
  OpenAI    → GET /v1/models
  Anthropic → GET /v1/models?limit=1     (x-api-key + anthropic-version)
  Gemini    → GET /v1beta/models?key=…   (OpenAI-compat layer)
  DeepSeek  → GET /models
  Grok      → GET /v1/models
  Mistral   → GET /v1/models

These are auth-only — no completion tokens consumed, so repeated tests
don't cost anything. 401/403 surfaces as "Auth failed"; 4xx with a JSON
error body (e.g. DeepSeek "Insufficient balance") forwards the message
verbatim.

UI: each credential field gains an inline "Test" button that updates a
status pill below it; a "Test all keys" button fires every non-empty
field in parallel; Save All Settings auto-runs the same fan-out so the
user sees the result without an extra click.

Author: nodeeeeee

electron/main.js

@@ -968,13 +968,118 @@ function rmRecursive(dirPath) {
   fs.rmSync(dirPath, { recursive: true, force: true });
 }
 
+// ── Credential validation ─────────────────────────────────────────────────────
+// Send a tiny authenticated round-trip to each provider's lightest endpoint
+// to confirm the key reaches the API and decodes. We hit list-models routes
+// (`GET /models` or equivalent) wherever possible — they exercise the same
+// auth path as a real completion call but consume zero output tokens, so
+// repeated tests don't cost anything.
+function httpRequest(method, urlStr, headers, body, timeoutMs) {
+  return new Promise((resolve) => {
+    let parsed;
+    try { parsed = new URL(urlStr); } catch (e) {
+      return resolve({ ok: false, status: 0, body: '', error: 'Invalid URL' });
+    }
+    const mod = parsed.protocol === 'https:' ? https : http;
+    const opts = {
+      method,
+      hostname: parsed.hostname,
+      port:     parsed.port || (parsed.protocol === 'https:' ? 443 : 80),
+      path:     parsed.pathname + parsed.search,
+      headers:  headers || {},
+    };
+    const req = mod.request(opts, (res) => {
+      let buf = '';
+      res.on('data', d => { buf += d; });
+      res.on('end', () => resolve({
+        ok: res.statusCode >= 200 && res.statusCode < 300,
+        status: res.statusCode,
+        body: buf,
+      }));
+    });
+    req.on('error', (err) => resolve({ ok: false, status: 0, body: '', error: String(err.message || err) }));
+    req.setTimeout(timeoutMs || 8000, () => {
+      req.destroy();
+      resolve({ ok: false, status: 0, body: '', error: 'Request timed out' });
+    });
+    if (body) req.write(body);
+    req.end();
+  });
+}
+
+async function testCredential(provider, key, extra) {
+  if (!key || !String(key).trim()) {
+    return { ok: false, message: 'No key entered' };
+  }
+  key = String(key).trim();
+  let url, headers, method = 'GET', body = null;
+  switch (provider) {
+    case 'canvas': {
+      let baseUrl = (extra && extra.canvasUrl ? String(extra.canvasUrl) :
+                     (loadConfig().CANVAS_URL || '')).trim().replace(/\/$/, '');
+      if (!baseUrl) return { ok: false, message: 'Set Canvas URL first' };
+      if (!baseUrl.startsWith('http')) baseUrl = 'https://' + baseUrl;
+      url = `${baseUrl}/api/v1/users/self`;
+      headers = { 'Authorization': `Bearer ${key}` };
+      break;
+    }
+    case 'openai':
+      url = 'https://api.openai.com/v1/models';
+      headers = { 'Authorization': `Bearer ${key}` };
+      break;
+    case 'anthropic':
+      url = 'https://api.anthropic.com/v1/models?limit=1';
+      headers = { 'x-api-key': key, 'anthropic-version': '2023-06-01' };
+      break;
+    case 'gemini':
+      // Gemini auth-check via OpenAI-compat layer — matches what we use
+      // at runtime in note_generation._make_client.
+      url = `https://generativelanguage.googleapis.com/v1beta/models?key=${encodeURIComponent(key)}&pageSize=1`;
+      headers = {};
+      break;
+    case 'deepseek':
+      url = 'https://api.deepseek.com/models';
+      headers = { 'Authorization': `Bearer ${key}` };
+      break;
+    case 'grok':
+      url = 'https://api.x.ai/v1/models';
+      headers = { 'Authorization': `Bearer ${key}` };
+      break;
+    case 'mistral':
+      url = 'https://api.mistral.ai/v1/models';
+      headers = { 'Authorization': `Bearer ${key}` };
+      break;
+    default:
+      return { ok: false, message: `Unknown provider: ${provider}` };
+  }
+  const r = await httpRequest(method, url, headers, body, 8000);
+  if (r.ok) return { ok: true, message: 'Key valid' };
+  if (r.error) return { ok: false, message: r.error };
+  if (r.status === 401 || r.status === 403) {
+    return { ok: false, message: `Auth failed (${r.status})` };
+  }
+  if (r.status === 404 && provider === 'canvas') {
+    return { ok: false, message: '404 — check Canvas URL' };
+  }
+  // Surface a tail of the body so DeepSeek's "Insufficient balance" /
+  // OpenAI's "incorrect_api_key" messages reach the user verbatim.
+  let detail = '';
+  try {
+    const j = JSON.parse(r.body || '');
+    detail = (j.error && (j.error.message || j.error)) || j.message || '';
+  } catch { detail = (r.body || '').slice(0, 120); }
+  return { ok: false, message: `HTTP ${r.status}${detail ? ': ' + String(detail).slice(0, 160) : ''}` };
+}
+
 // ── IPC handlers ──────────────────────────────────────────────────────────────
 function registerIpc() {
   ipcMain.handle('config:get',      ()       => loadConfig());
   ipcMain.handle('config:set',      (_, d)   => { saveConfig(d); return true; });
 
   ipcMain.handle('credentials:get', ()       => loadCredentials());
   ipcMain.handle('credentials:set', (_, d)   => { saveCredentials(d); return true; });
+  ipcMain.handle('credentials:test', (_, { provider, key, extra }) =>
+    testCredential(provider, key, extra || {}));
 
   ipcMain.handle('courses:fetch',   ()       => fetchCoursesFromCanvas());
 

electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-note",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "AutoNote — lecture notes generator from Canvas recordings",
   "homepage": "https://github.com/nodeeeeee/Auto-Note",
   "author": {

electron/preload.js

@@ -10,6 +10,8 @@ contextBridge.exposeInMainWorld('api', {
   // ── Credentials ───────────────────────────────────────────────────────────
   getCredentials: ()     => ipcRenderer.invoke('credentials:get'),
   setCredentials: (data) => ipcRenderer.invoke('credentials:set', data),
+  testCredential: (provider, key, extra) =>
+    ipcRenderer.invoke('credentials:test', { provider, key, extra }),
 
   // ── Courses (Canvas API) ──────────────────────────────────────────────────
   fetchCourses:   ()     => ipcRenderer.invoke('courses:fetch'),

electron/renderer/app.js

@@ -274,19 +274,86 @@ function mkCheckbox(id, label, checked = true) {
   </label>`;
 }
 
-function mkRevealField(id, placeholder, value = '') {
+function mkRevealField(id, placeholder, value = '', provider = '') {
+  // When `provider` is set, render an extra "Test" button that fires a tiny
+  // authenticated round-trip against that provider's API to verify the key
+  // is reachable + valid before the user runs a real pipeline.
+  const testBtn = provider
+    ? `<button class="test-btn" id="${id}-test" data-provider="${provider}"
+         data-target="${id}" title="Test connection">Test</button>`
+    : '';
+  const status = provider
+    ? `<span class="key-status" id="${id}-status"></span>`
+    : '';
   return `<div class="reveal-wrap">
     <input type="password" id="${id}" class="input-text"
       placeholder="${esc(placeholder)}" value="${esc(value)}">
     <button class="reveal-btn" onclick="toggleReveal('${id}')">👁</button>
-  </div>`;
+    ${testBtn}
+  </div>${status}`;
 }
 
 function toggleReveal(id) {
   const el = document.getElementById(id);
   if (el) el.type = el.type === 'password' ? 'text' : 'password';
 }
 
+async function testAllCredentials() {
+  // Fan out one test per non-empty field. Skips fields the user hasn't
+  // filled in — testing an empty Anthropic key when the user only uses
+  // OpenAI would just produce noise.
+  const btn = document.getElementById('test-all-keys-btn');
+  if (btn) btn.disabled = true;
+  const buttons = document.querySelectorAll('.test-btn');
+  const tests = [];
+  for (const b of buttons) {
+    const tid = b.dataset.target;
+    const v = (document.getElementById(tid)?.value || '').trim();
+    if (!v) continue;   // skip empty fields silently
+    tests.push(testCredentialField(b));
+  }
+  await Promise.all(tests);
+  if (btn) btn.disabled = false;
+}
+
+async function testCredentialField(btn) {
+  const provider = btn.dataset.provider;
+  const targetId = btn.dataset.target;
+  const input    = document.getElementById(targetId);
+  const status   = document.getElementById(`${targetId}-status`);
+  if (!input || !status) return;
+  const key = (input.value || '').trim();
+  if (!key) {
+    status.textContent = '— enter a key first';
+    status.className   = 'key-status warn';
+    return;
+  }
+  // Canvas needs the URL too; pull it straight from the form so the user
+  // doesn't have to Save All before testing.
+  const extra = {};
+  if (provider === 'canvas') {
+    extra.canvasUrl = (document.getElementById('cfg-canvas-url')?.value || '').trim();
+  }
+  btn.disabled = true;
+  status.textContent = 'Testing…';
+  status.className   = 'key-status pending';
+  try {
+    const r = await window.api.testCredential(provider, key, extra);
+    if (r.ok) {
+      status.textContent = '✓ ' + r.message;
+      status.className   = 'key-status ok';
+    } else {
+      status.textContent = '✗ ' + r.message;
+      status.className   = 'key-status err';
+    }
+  } catch (e) {
+    status.textContent = '✗ ' + (e.message || e);
+    status.className   = 'key-status err';
+  } finally {
+    btn.disabled = false;
+  }
+}
+
 // ── Run pipeline command ───────────────────────────────────────────────────────
 function runCmd(cmd, label = '') {
   if (State.running) {
@@ -1284,27 +1351,41 @@ async function loadSettingsData() {
     keysEl.innerHTML = `
       <div class="row">
         <div class="col expand"><label class="label">Canvas Token</label>
-          ${mkRevealField('cred-canvas', 'Canvas API token', creds.canvas)}</div>
+          ${mkRevealField('cred-canvas', 'Canvas API token', creds.canvas, 'canvas')}</div>
       </div>
       <div class="row">
         <div class="col expand"><label class="label">OpenAI API Key</label>
-          ${mkRevealField('cred-openai', 'sk-…', creds.openai)}</div>
+          ${mkRevealField('cred-openai', 'sk-…', creds.openai, 'openai')}</div>
         <div class="col expand"><label class="label">Anthropic API Key</label>
-          ${mkRevealField('cred-anthropic', 'sk-ant-…', creds.anthropic)}</div>
+          ${mkRevealField('cred-anthropic', 'sk-ant-…', creds.anthropic, 'anthropic')}</div>
       </div>
       <div class="row">
         <div class="col expand"><label class="label">Gemini API Key</label>
-          ${mkRevealField('cred-gemini', 'AIza…', creds.gemini)}</div>
+          ${mkRevealField('cred-gemini', 'AIza…', creds.gemini, 'gemini')}</div>
         <div class="col expand"><label class="label">DeepSeek API Key</label>
-          ${mkRevealField('cred-deepseek', 'sk-…', creds.deepseek)}</div>
+          ${mkRevealField('cred-deepseek', 'sk-…', creds.deepseek, 'deepseek')}</div>
       </div>
       <div class="row">
         <div class="col expand"><label class="label">xAI (Grok) API Key</label>
-          ${mkRevealField('cred-grok', 'xai-…', creds.grok)}</div>
+          ${mkRevealField('cred-grok', 'xai-…', creds.grok, 'grok')}</div>
         <div class="col expand"><label class="label">Mistral API Key</label>
-          ${mkRevealField('cred-mistral', 'key…', creds.mistral)}</div>
+          ${mkRevealField('cred-mistral', 'key…', creds.mistral, 'mistral')}</div>
+      </div>
+      <div class="row">
+        <div class="col expand">
+          <button class="btn-secondary" id="test-all-keys-btn">Test all keys</button>
+          <span class="hint">Each "Test" button sends a single auth-only
+            request to the provider — no completion tokens are billed.</span>
+        </div>
       </div>
     `;
+    // Wire up per-field Test buttons + the bulk "Test all" button. Use
+    // event delegation so dynamically-rendered buttons work.
+    keysEl.addEventListener('click', (e) => {
+      const btn = e.target.closest('.test-btn');
+      if (btn) testCredentialField(btn);
+    });
+    document.getElementById('test-all-keys-btn')?.addEventListener('click', testAllCredentials);
   }
 
   // Venv status
@@ -1391,6 +1472,13 @@ async function saveAllSettings() {
 
   if (btn) btn.disabled = false;
 
+  // Verify each API key the user just saved by firing a tiny auth-only
+  // round-trip per provider. Failures show inline next to the field; we
+  // don't block the save — the user might be deliberately offline.
+  if (typeof testAllCredentials === 'function') {
+    testAllCredentials().catch(() => {});
+  }
+
   if (errors.length) {
     snack('Errors: ' + errors.join('; '), false);
   } else {

electron/renderer/style.css

@@ -361,6 +361,35 @@ input, select, textarea { font: inherit; }
 }
 .reveal-btn:hover { color: var(--c-white-88); }
 
+/* When a Test button sits next to the eye, push the eye left so they
+   don't overlap. The Test button is rendered after the reveal button. */
+.reveal-wrap .test-btn ~ * {}  /* placeholder for spec hierarchy */
+.reveal-wrap:has(.test-btn) .reveal-btn { right: 56px; }
+.test-btn {
+  position: absolute; right: 6px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--c-white-20, rgba(255, 255, 255, 0.2));
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--c-white-88, #ddd);
+  font-size: 11px;
+  padding: 2px 8px;
+  transition: background var(--transition);
+}
+.test-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
+.test-btn:disabled { opacity: 0.5; cursor: wait; }
+
+.key-status {
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+.key-status.ok      { color: var(--c-success, #6BCB6B); }
+.key-status.err     { color: var(--c-error, #FF6B6B); }
+.key-status.warn    { color: var(--c-warn, #FFB347); }
+.key-status.pending { color: var(--c-white-45, rgba(255,255,255,0.45)); }
+
 .textarea-ctrl {
   resize: vertical;
   min-height: 80px;