feat(web): Generate-panel inline API-key entry (feature gap #2)

Completes the original feature: a user who selects a provider with no stored
key can now enter it in the UI. Previously the backend secrets routes existed
and were tested, but the frontend never called them — there was no way to add
a key through the web app.

- index.html: inline key-entry row, shown only when the selected provider is
  keyed (adapter != bedrock) AND not yet available. Password input + 'Test &
  save' -> POST /api/content/secrets; on success clears the raw key from
  memory, re-fetches /providers so the option flips to enabled, shows a
  'verified & stored encrypted' confirmation; on 400/422 shows the provider's
  rejection message. needsKey / selectedProvider getters; keyEntry state reset
  on provider change.
- style.css: minimal feedback styles (key-error/key-ok/key-hint) using existing
  palette vars; password/text inputs styled to match selects.
- test_web_key_entry_e2e.py: 4 real-browser e2e (port 18582) — form shows for
  unavailable keyed provider, hidden for available one, save POSTs correct
  {provider,key} body + shows success, rejection shows error.

Gate: 4/4 new e2e + 10/10 existing content-gen e2e green. With #1/#3 (4f1425c)
the feature now works end-to-end: select provider -> enter missing key ->
tested + stored encrypted -> consumed at generation.

Author: taylaand

packages/studyloop/src/studyloop/web/static/index.html

@@ -802,14 +802,37 @@ <h2>Generate</h2>
               <select x-model="form.provider" @change="onProviderChange()">
                 <option value="">— pick a provider —</option>
                 <template x-for="p in providers" :key="p.slug">
-                  <option :value="p.slug" :disabled="!p.available">
+                  <option :value="p.slug">
                     <span x-text="p.label"></span>
-                    <span x-show="!p.available"> — set <span x-text="p.auth_env"></span> to enable</span>
+                    <span x-show="!p.available"> — needs API key</span>
                   </option>
                 </template>
               </select>
             </label>
 
+            <!-- Inline key-entry: shown when the chosen provider has no key and
+                 uses an API key (bedrock is AWS-SDK auth, never keyed here). -->
+            <div class="form-row api-key-entry"
+                 x-show="needsKey"
+                 x-transition>
+              <span>API key</span>
+              <div style="display:flex; flex-direction:column; gap:0.35rem;">
+                <div style="display:flex; gap:0.4rem;">
+                  <input type="password" x-model="keyEntry.value"
+                         :placeholder="'Paste your ' + (selectedProvider?.label || '') + ' API key'"
+                         autocomplete="off" spellcheck="false"
+                         style="flex:1;"
+                         @keydown.enter.prevent="saveKey()" />
+                  <button type="button" @click="saveKey()"
+                          :disabled="keyEntry.saving || !keyEntry.value.trim()"
+                          x-text="keyEntry.saving ? 'Testing…' : 'Test & save'"></button>
+                </div>
+                <small x-show="keyEntry.error" class="key-error" x-text="keyEntry.error"></small>
+                <small x-show="keyEntry.saved" class="key-ok">✓ Key verified and stored encrypted in ~/.config/studyloop/</small>
+                <small class="key-hint">Tested against the provider before saving. Stored encrypted; never leaves this machine.</small>
+              </div>
+            </div>
+
             <label class="form-row" x-show="form.provider">
               <span>Model</span>
               <select x-model="form.model">
@@ -1322,6 +1345,9 @@ <h2>Start a Study Session</h2>
       formError: '',
       conflictBanner: '',
 
+      // Inline API-key entry (shown when the chosen provider has no stored key).
+      keyEntry: { value: '', saving: false, error: '', saved: false },
+
       // Job state. `running` gates the form vs progress UI.
       running: false,
       jobId: '',
@@ -1335,6 +1361,18 @@ <h2>Start a Study Session</h2>
         return p ? p.models : [];
       },
 
+      get selectedProvider() {
+        return this.providers.find((p) => p.slug === this.form.provider) || null;
+      },
+
+      get needsKey() {
+        // Show the key-entry form only for a chosen, keyed provider that is
+        // not yet available. Bedrock uses AWS-SDK auth (adapter === 'bedrock')
+        // and is never keyed here.
+        const p = this.selectedProvider;
+        return !!p && !p.available && p.adapter !== 'bedrock';
+      },
+
       async init() {
         // The tree is 3-level: publisher → course → lesson file. Load the
         // publishers (study-tree top level) and the LLM providers up front;
@@ -1394,6 +1432,47 @@ <h2>Start a Study Session</h2>
         // care about the openai_compat / anthropic_compat distinction.
         const p = this.providers.find((x) => x.slug === this.form.provider);
         this.form.backend = p ? p.adapter : '';
+        // Reset the key-entry form for the newly-selected provider.
+        this.keyEntry = { value: '', saving: false, error: '', saved: false };
+      },
+
+      async refreshProviders() {
+        // Re-fetch the provider list so `available` reflects a just-saved key.
+        try {
+          const r = await fetch('/api/content/providers');
+          if (r.ok) this.providers = await r.json();
+        } catch { /* keep the existing list */ }
+      },
+
+      async saveKey() {
+        const value = this.keyEntry.value.trim();
+        if (!value || this.keyEntry.saving) return;
+        this.keyEntry.saving = true;
+        this.keyEntry.error = '';
+        this.keyEntry.saved = false;
+        try {
+          const r = await fetch('/api/content/secrets', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ provider: this.form.provider, key: value }),
+          });
+          if (r.ok) {
+            // Tested + stored. Refresh providers so the option is enabled,
+            // clear the raw key from memory, and confirm.
+            this.keyEntry.value = '';
+            this.keyEntry.saved = true;
+            await this.refreshProviders();
+          } else {
+            // 400 = provider rejected the key; 422 = unknown/keyless provider.
+            let detail = 'Could not verify the key.';
+            try { detail = (await r.json()).detail || detail; } catch { /* keep default */ }
+            this.keyEntry.error = detail;
+          }
+        } catch (e) {
+          this.keyEntry.error = 'Network error testing the key. Is the server reachable?';
+        } finally {
+          this.keyEntry.saving = false;
+        }
       },
 
       canSubmit() {

packages/studyloop/src/studyloop/web/static/style.css

@@ -2666,6 +2666,21 @@ body[data-palette="everforest"] {
 }
 .generate-form select:focus,
 .generate-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+.generate-form input[type="password"],
+.generate-form input[type="text"] {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 0.9rem;
+}
+
+/* Inline API-key entry (shown when a chosen provider has no stored key). */
+.generate-form .api-key-entry .key-error { color: var(--danger, #e5534b); }
+.generate-form .api-key-entry .key-ok { color: var(--success, #3fb950); }
+.generate-form .api-key-entry .key-hint { color: var(--text-muted); opacity: 0.8; }
 
 .generate-banner {
   border-left: 3px solid var(--accent);

packages/studyloop/tests/test_web_key_entry_e2e.py

@@ -0,0 +1,202 @@
+"""E2E for the Generate-panel inline API-key entry (feature gap #2).
+
+Drives a real browser against a real ``studyloop web`` server. The provider
+list and the secrets POST are route-intercepted so the test is deterministic
+and never hits a real LLM provider — but the UI logic (show/hide the key form,
+POST the right body, reflect success) is exercised for real.
+
+Port 18582 (sisters use 18580 content-gen, 18581 struggling-topics).
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import subprocess
+import sys
+import time
+import urllib.error
+import urllib.request
+from collections.abc import Generator
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import Browser, Page
+
+pytestmark = [pytest.mark.e2e]
+
+WEB_PORT = 18582
+
+
+@pytest.fixture
+def stub_config(tmp_path: Path) -> Path:
+    cfg = tmp_path / "studyloop-keyentry.yaml"
+    cfg.write_text(
+        f"session_db: {tmp_path / 'sessions.db'}\n"
+        "card_generator:\n  backend: stub\n",
+        encoding="utf-8",
+    )
+    return cfg
+
+
+@pytest.fixture
+def server(stub_config: Path) -> Generator[subprocess.Popen, None, None]:
+    env = os.environ.copy()
+    env["STUDYLOOP_CONFIG"] = str(stub_config)
+    proc = subprocess.Popen(
+        [sys.executable, "-m", "studyloop.cli", "web", "--port", str(WEB_PORT)],
+        stdout=subprocess.DEVNULL,
+        stderr=subprocess.DEVNULL,
+        env=env,
+    )
+    for _ in range(40):
+        try:
+            urllib.request.urlopen(f"http://127.0.0.1:{WEB_PORT}/", timeout=1)
+            break
+        except urllib.error.HTTPError:
+            break
+        except Exception:
+            time.sleep(0.3)
+    else:
+        proc.kill()
+        raise RuntimeError(f"web server failed to start on {WEB_PORT}")
+    try:
+        yield proc
+    finally:
+        proc.terminate()
+        try:
+            proc.wait(timeout=10)
+        except Exception:
+            proc.kill()
+            proc.wait(timeout=5)
+
+
+# Provider list with anthropic NOT available (no key) — the trigger for the form.
+_PROVIDERS = [
+    {
+        "slug": "anthropic",
+        "label": "Anthropic",
+        "adapter": "anthropic_compat",
+        "auth_env": "ANTHROPIC_API_KEY",
+        "available": False,
+        "models": [{"id": "claude-haiku-4-5", "label": "Haiku", "cost_tier": "cheap", "thinking": False, "notes": ""}],
+    },
+    {
+        "slug": "openai",
+        "label": "OpenAI",
+        "adapter": "openai_compat",
+        "auth_env": "OPENAI_API_KEY",
+        "available": True,  # already has a key — form must NOT show
+        "models": [{"id": "gpt-x", "label": "GPT-X", "cost_tier": "balanced", "thinking": False, "notes": ""}],
+    },
+]
+
+
+def _route_providers(page: Page, *, anthropic_available: bool) -> None:
+    providers = json.loads(json.dumps(_PROVIDERS))
+    providers[0]["available"] = anthropic_available
+    page.route(
+        "**/api/content/providers",
+        lambda route: route.fulfill(
+            status=200, content_type="application/json", body=json.dumps(providers)
+        ),
+    )
+
+
+def _goto_generate(page: Page) -> None:
+    page.goto(f"http://127.0.0.1:{WEB_PORT}/#generate")
+    page.wait_for_load_state("domcontentloaded")
+    page.wait_for_function("() => !!window.Alpine", timeout=5000)
+    page.wait_for_function(
+        "() => window.Alpine.store('nav').current === 'generate'", timeout=3000
+    )
+
+
+@pytest.fixture
+def page(server, browser: Browser) -> Generator[Page, None, None]:
+    context = browser.new_context()
+    p = context.new_page()
+    try:
+        yield p
+    finally:
+        p.close()
+        context.close()
+
+
+class TestKeyEntryUI:
+    def test_key_form_appears_for_unavailable_keyed_provider(self, page: Page) -> None:
+        _route_providers(page, anthropic_available=False)
+        _goto_generate(page)
+        page.wait_for_function(
+            "() => window.Alpine.$data(document.querySelector('[x-data=\"generatePanel()\"]')).providers.length > 0",
+            timeout=3000,
+        )
+        # Select anthropic (no key) → the inline key form must appear.
+        page.select_option('select[x-model="form.provider"]', "anthropic")
+        page.wait_for_selector(".api-key-entry input[type='password']", state="visible", timeout=3000)
+        assert page.is_visible(".api-key-entry input[type='password']")
+
+    def test_key_form_hidden_for_available_provider(self, page: Page) -> None:
+        _route_providers(page, anthropic_available=False)
+        _goto_generate(page)
+        page.wait_for_function(
+            "() => window.Alpine.$data(document.querySelector('[x-data=\"generatePanel()\"]')).providers.length > 0",
+            timeout=3000,
+        )
+        # OpenAI is available → no key form.
+        page.select_option('select[x-model="form.provider"]', "openai")
+        page.wait_for_timeout(300)
+        assert not page.is_visible(".api-key-entry input[type='password']")
+
+    def test_save_key_posts_and_shows_success(self, page: Page) -> None:
+        _route_providers(page, anthropic_available=False)
+
+        posted: dict = {}
+
+        def handle_post(route):
+            req = route.request
+            posted["body"] = req.post_data_json
+            # After a successful save the UI re-fetches providers; flip anthropic
+            # to available so the success path is realistic.
+            _route_providers(page, anthropic_available=True)
+            route.fulfill(status=200, content_type="application/json", body=json.dumps({"ok": True}))
+
+        page.route("**/api/content/secrets", handle_post)
+
+        _goto_generate(page)
+        page.wait_for_function(
+            "() => window.Alpine.$data(document.querySelector('[x-data=\"generatePanel()\"]')).providers.length > 0",
+            timeout=3000,
+        )
+        page.select_option('select[x-model="form.provider"]', "anthropic")
+        page.wait_for_selector(".api-key-entry input[type='password']", state="visible", timeout=3000)
+        page.fill(".api-key-entry input[type='password']", "sk-test-12345")
+        page.click(".api-key-entry button")
+
+        # Success message appears.
+        page.wait_for_selector(".api-key-entry .key-ok", state="visible", timeout=3000)
+        assert page.is_visible(".api-key-entry .key-ok")
+        # The POST carried the right provider + key.
+        assert posted["body"] == {"provider": "anthropic", "key": "sk-test-12345"}
+
+    def test_save_key_shows_error_on_rejection(self, page: Page) -> None:
+        _route_providers(page, anthropic_available=False)
+        page.route(
+            "**/api/content/secrets",
+            lambda route: route.fulfill(
+                status=400,
+                content_type="application/json",
+                body=json.dumps({"detail": "Provider rejected the key (401)."}),
+            ),
+        )
+        _goto_generate(page)
+        page.wait_for_function(
+            "() => window.Alpine.$data(document.querySelector('[x-data=\"generatePanel()\"]')).providers.length > 0",
+            timeout=3000,
+        )
+        page.select_option('select[x-model="form.provider"]', "anthropic")
+        page.wait_for_selector(".api-key-entry input[type='password']", state="visible", timeout=3000)
+        page.fill(".api-key-entry input[type='password']", "bad-key")
+        page.click(".api-key-entry button")
+        page.wait_for_selector(".api-key-entry .key-error", state="visible", timeout=3000)
+        assert "rejected" in page.inner_text(".api-key-entry .key-error").lower()