feat: add HuggingFace token field, persist keys in sessionStorage for session only

Keys are saved to sessionStorage (survives refresh, cleared on browser close).
On reconnect/refresh, keys auto-restore and re-send via WebSocket so users
don't have to re-enter them. HuggingFace token is wired end-to-end through
the WebSocket handler and agent session.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dmpantiu

web/agent_wrapper.py

@@ -61,6 +61,7 @@ def _initialize(self):
         # Resolve API keys: user-provided take priority over env vars
         openai_key = self._api_keys.get("openai_api_key") or os.environ.get("OPENAI_API_KEY")
         arraylake_key = self._api_keys.get("arraylake_api_key") or os.environ.get("ARRAYLAKE_API_KEY")
+        hf_token = self._api_keys.get("hf_token") or os.environ.get("HF_TOKEN")
 
         if not arraylake_key:
             logger.warning("ARRAYLAKE_API_KEY not found")
@@ -69,6 +70,9 @@ def _initialize(self):
             # server-configured keys with user-provided ones in multi-user scenarios)
             os.environ["ARRAYLAKE_API_KEY"] = arraylake_key
 
+        if hf_token and not os.environ.get("HF_TOKEN"):
+            os.environ["HF_TOKEN"] = hf_token
+
         if not openai_key:
             logger.error("OPENAI_API_KEY not found")
             return

web/routes/api.py

@@ -60,6 +60,7 @@ async def keys_status():
     return {
         "openai": bool(os.environ.get("OPENAI_API_KEY")),
         "arraylake": bool(os.environ.get("ARRAYLAKE_API_KEY")),
+        "hf": bool(os.environ.get("HF_TOKEN")),
     }
 
 

web/routes/websocket.py

@@ -64,6 +64,7 @@ async def websocket_chat(websocket: WebSocket):
                 api_keys = {
                     "openai_api_key": data.get("openai_api_key", ""),
                     "arraylake_api_key": data.get("arraylake_api_key", ""),
+                    "hf_token": data.get("hf_token", ""),
                 }
                 session = create_session(connection_id, api_keys=api_keys)
                 ready = session.is_ready()

web/static/js/chat.js

@@ -26,6 +26,7 @@ class EurusChat {
         this.saveKeysBtn = document.getElementById('save-keys-btn');
         this.openaiKeyInput = document.getElementById('openai-key');
         this.arraylakeKeyInput = document.getElementById('arraylake-key');
+        this.hfKeyInput = document.getElementById('hf-key');
 
         marked.setOptions({
             highlight: (code, lang) => {
@@ -80,33 +81,77 @@ class EurusChat {
         this.saveKeysBtn.addEventListener('click', () => this.saveAndSendKeys());
 
         // Allow Enter in key fields to submit
-        [this.openaiKeyInput, this.arraylakeKeyInput].forEach(input => {
+        [this.openaiKeyInput, this.arraylakeKeyInput, this.hfKeyInput].forEach(input => {
             input.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter') {
                     e.preventDefault();
                     this.saveAndSendKeys();
                 }
             });
         });
+
+        // Restore keys from sessionStorage (survives refresh, cleared on browser close)
+        this.restoreSessionKeys();
+    }
+
+    restoreSessionKeys() {
+        const saved = sessionStorage.getItem('eurus-keys');
+        if (!saved) return;
+        try {
+            const keys = JSON.parse(saved);
+            if (keys.openai_api_key) this.openaiKeyInput.value = keys.openai_api_key;
+            if (keys.arraylake_api_key) this.arraylakeKeyInput.value = keys.arraylake_api_key;
+            if (keys.hf_token) this.hfKeyInput.value = keys.hf_token;
+        } catch (e) {
+            sessionStorage.removeItem('eurus-keys');
+        }
+    }
+
+    autoSendSessionKeys() {
+        // After WS connects, if we have session-stored keys and server has none, auto-send them
+        if (this.serverKeysPresent.openai || this.keysConfigured) return;
+        const saved = sessionStorage.getItem('eurus-keys');
+        if (!saved) return;
+        try {
+            const keys = JSON.parse(saved);
+            if (keys.openai_api_key && this.ws && this.ws.readyState === WebSocket.OPEN) {
+                this.ws.send(JSON.stringify({
+                    type: 'configure_keys',
+                    openai_api_key: keys.openai_api_key,
+                    arraylake_api_key: keys.arraylake_api_key || '',
+                    hf_token: keys.hf_token || '',
+                }));
+            }
+        } catch (e) {
+            sessionStorage.removeItem('eurus-keys');
+        }
     }
 
     saveAndSendKeys() {
         const openaiKey = this.openaiKeyInput.value.trim();
         const arraylakeKey = this.arraylakeKeyInput.value.trim();
+        const hfKey = this.hfKeyInput.value.trim();
 
         if (!openaiKey) {
             this.openaiKeyInput.focus();
             return;
         }
 
-        // Send keys via WebSocket (never saved to storage)
+        // Save to sessionStorage (cleared when browser closes, survives refresh)
+        const keysPayload = {
+            openai_api_key: openaiKey,
+            arraylake_api_key: arraylakeKey,
+            hf_token: hfKey,
+        };
+        sessionStorage.setItem('eurus-keys', JSON.stringify(keysPayload));
+
+        // Send keys via WebSocket
         if (this.ws && this.ws.readyState === WebSocket.OPEN) {
             this.saveKeysBtn.disabled = true;
             this.saveKeysBtn.textContent = 'Connecting...';
             this.ws.send(JSON.stringify({
                 type: 'configure_keys',
-                openai_api_key: openaiKey,
-                arraylake_api_key: arraylakeKey,
+                ...keysPayload,
             }));
         }
     }
@@ -154,6 +199,9 @@ class EurusChat {
 
                 if (this.serverKeysPresent.openai || this.keysConfigured) {
                     this.sendBtn.disabled = false;
+                } else {
+                    // Auto-send keys from sessionStorage on reconnect/refresh
+                    this.autoSendSessionKeys();
                 }
             };
 

web/templates/index.html

@@ -10,8 +10,8 @@
             <span>API Keys Required</span>
         </div>
         <div class="api-keys-body">
-            <p class="api-keys-note">Enter your API keys to use Eurus. Keys are stored in your browser only and never
-                saved on the server.</p>
+            <p class="api-keys-note">Enter your API keys to use Eurus. Keys are kept in your browser session only —
+                they are cleared when you close the browser.</p>
             <div class="api-key-field">
                 <label for="openai-key">OpenAI API Key <span class="required">*</span></label>
                 <input type="password" id="openai-key" placeholder="sk-..." autocomplete="off">
@@ -20,6 +20,10 @@
                 <label for="arraylake-key">Arraylake API Key</label>
                 <input type="password" id="arraylake-key" placeholder="ema_..." autocomplete="off">
             </div>
+            <div class="api-key-field">
+                <label for="hf-key">HuggingFace Token</label>
+                <input type="password" id="hf-key" placeholder="hf_..." autocomplete="off">
+            </div>
             <button id="save-keys-btn" class="save-keys-btn">Connect</button>
         </div>
     </div>
@@ -60,5 +64,5 @@ <h3>Cached Datasets</h3>
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/chat.js?v=20260218"></script>
+<script src="/static/js/chat.js?v=20260218b"></script>
 {% endblock %}