@199-bio/engram 0.7.2 → 0.8.0

package/src/web/server.ts

@@ -13,6 +13,7 @@ import { KnowledgeGraph } from "../graph/knowledge-graph.js";
 import { HybridSearch } from "../retrieval/hybrid.js";
 import { ChatHandler } from "./chat-handler.js";
 import { Consolidator } from "../consolidation/consolidator.js";
+import { loadSettings, saveSettings, hasAnthropicApiKey } from "../settings.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -240,9 +241,9 @@ export class EngramWebServer {
       const offset = parseInt(url.searchParams.get("offset") || "0");
 
       if (query) {
-        const results = await this.search.search(query, { limit });
+        const response = await this.search.search(query, { limit });
         res.end(JSON.stringify({
-          memories: results.map(r => ({
+          memories: response.results.map(r => ({
             ...r.memory,
             score: r.score,
             sources: r.sources,
@@ -379,13 +380,58 @@ export class EngramWebServer {
       return;
     }
 
+    // ============ Settings Endpoints ============
+
+    // GET /api/settings - get current settings (without exposing full API key)
+    if (pathname === "/api/settings" && method === "GET") {
+      const settings = loadSettings();
+      res.end(JSON.stringify({
+        has_api_key: hasAnthropicApiKey(),
+        api_key_preview: settings.anthropic_api_key
+          ? `${settings.anthropic_api_key.slice(0, 12)}...${settings.anthropic_api_key.slice(-4)}`
+          : null,
+        api_key_source: settings.anthropic_api_key
+          ? "settings"
+          : process.env.ANTHROPIC_API_KEY
+            ? "environment"
+            : null,
+      }));
+      return;
+    }
+
+    // POST /api/settings - update settings
+    if (pathname === "/api/settings" && method === "POST") {
+      const { anthropic_api_key } = body as { anthropic_api_key?: string };
+
+      if (anthropic_api_key !== undefined) {
+        const settings = loadSettings();
+        if (anthropic_api_key === "") {
+          // Clear the API key
+          delete settings.anthropic_api_key;
+        } else {
+          settings.anthropic_api_key = anthropic_api_key;
+        }
+        saveSettings(settings);
+
+        // Refresh the chat client
+        this.chat.refreshClient();
+        this.consolidator = new Consolidator(this.db); // Reinit consolidator
+      }
+
+      res.end(JSON.stringify({
+        success: true,
+        configured: this.chat.isConfigured(),
+      }));
+      return;
+    }
+
     // GET /api/chat/status - check if chat is configured
     if (pathname === "/api/chat/status" && method === "GET") {
       res.end(JSON.stringify({
         configured: this.chat.isConfigured(),
         message: this.chat.isConfigured()
           ? "Chat is ready"
-          : "Set ANTHROPIC_API_KEY environment variable to enable chat",
+          : "Configure API key in Settings",
       }));
       return;
     }

package/src/web/static/app.js

@@ -17,6 +17,7 @@ const views = {
   entities: document.getElementById('entities-view'),
   graph: document.getElementById('graph-view'),
   consolidation: document.getElementById('consolidation-view'),
+  settings: document.getElementById('settings-view'),
 };
 
 const statsEl = document.getElementById('stats');
@@ -352,6 +353,7 @@ function switchView(view) {
   if (view === 'entities') loadEntities(entityTypeFilter.value);
   if (view === 'graph') loadGraph();
   if (view === 'consolidation') loadConsolidation();
+  if (view === 'settings') loadSettings();
 }
 
 // ============ Consolidation ============
@@ -881,6 +883,104 @@ async function checkApiStatus() {
   }
 }
 
+// ============ Settings ============
+
+const apiStatusBadge = document.getElementById('api-status-badge');
+const apiKeyInput = document.getElementById('api-key-input');
+const toggleKeyVisibility = document.getElementById('toggle-key-visibility');
+const saveApiKeyBtn = document.getElementById('save-api-key');
+const clearApiKeyBtn = document.getElementById('clear-api-key');
+
+async function loadSettings() {
+  try {
+    const settings = await api('/api/settings');
+    updateSettingsUI(settings);
+  } catch (e) {
+    console.error('Failed to load settings', e);
+  }
+}
+
+function updateSettingsUI(settings) {
+  if (settings.has_api_key) {
+    apiStatusBadge.textContent = `Configured (${settings.api_key_source})`;
+    apiStatusBadge.className = 'status-badge configured';
+    apiKeyInput.placeholder = settings.api_key_preview || 'sk-ant-api03-...';
+    apiKeyInput.value = '';
+  } else {
+    apiStatusBadge.textContent = 'Not configured';
+    apiStatusBadge.className = 'status-badge not-configured';
+    apiKeyInput.placeholder = 'sk-ant-api03-...';
+  }
+}
+
+if (toggleKeyVisibility) {
+  toggleKeyVisibility.addEventListener('click', () => {
+    const type = apiKeyInput.type === 'password' ? 'text' : 'password';
+    apiKeyInput.type = type;
+    toggleKeyVisibility.textContent = type === 'password' ? '👁' : '🙈';
+  });
+}
+
+if (saveApiKeyBtn) {
+  saveApiKeyBtn.addEventListener('click', async () => {
+    const apiKey = apiKeyInput.value.trim();
+    if (!apiKey) {
+      alert('Please enter an API key');
+      return;
+    }
+
+    if (!apiKey.startsWith('sk-ant-')) {
+      alert('Invalid API key format. Should start with sk-ant-');
+      return;
+    }
+
+    try {
+      saveApiKeyBtn.disabled = true;
+      saveApiKeyBtn.textContent = 'Saving...';
+
+      const result = await api('/api/settings', {
+        method: 'POST',
+        body: { anthropic_api_key: apiKey },
+      });
+
+      if (result.success) {
+        apiKeyInput.value = '';
+        await loadSettings();
+        await checkApiStatus();
+        alert('API key saved successfully!');
+      } else {
+        alert('Failed to save API key');
+      }
+    } catch (e) {
+      console.error('Failed to save API key', e);
+      alert('Error saving API key');
+    } finally {
+      saveApiKeyBtn.disabled = false;
+      saveApiKeyBtn.textContent = 'Save API Key';
+    }
+  });
+}
+
+if (clearApiKeyBtn) {
+  clearApiKeyBtn.addEventListener('click', async () => {
+    if (!confirm('Are you sure you want to clear the API key?')) return;
+
+    try {
+      clearApiKeyBtn.disabled = true;
+      await api('/api/settings', {
+        method: 'POST',
+        body: { anthropic_api_key: '' },
+      });
+      await loadSettings();
+      await checkApiStatus();
+    } catch (e) {
+      console.error('Failed to clear API key', e);
+    } finally {
+      clearApiKeyBtn.disabled = false;
+    }
+  });
+}
+
 // Initialize
 checkApiStatus();
 loadStats();

package/src/web/static/index.html

@@ -14,6 +14,7 @@
       <button class="nav-btn" data-view="entities">Entities</button>
       <button class="nav-btn" data-view="graph">Graph</button>
       <button class="nav-btn" data-view="consolidation">Consolidation</button>
+      <button class="nav-btn" data-view="settings">Settings</button>
     </nav>
     <div class="stats" id="stats"></div>
     <div class="api-status" id="api-status" title="Anthropic API Status">
@@ -59,6 +60,40 @@
       <div id="graph-container"></div>
     </section>
 
+    <!-- Settings View -->
+    <section id="settings-view" class="view">
+      <div class="settings-container">
+        <h2>Settings</h2>
+
+        <div class="settings-section">
+          <h3>API Configuration</h3>
+          <p class="section-desc">Configure your Anthropic API key to enable Chat and Consolidation features.</p>
+
+          <div class="settings-row" id="api-key-status">
+            <label>Status:</label>
+            <span class="status-badge" id="api-status-badge">Checking...</span>
+          </div>
+
+          <div class="settings-row">
+            <label for="api-key-input">API Key:</label>
+            <div class="input-group">
+              <input type="password" id="api-key-input" placeholder="sk-ant-api03-..." autocomplete="off">
+              <button type="button" id="toggle-key-visibility" title="Show/hide">👁</button>
+            </div>
+          </div>
+
+          <div class="settings-row">
+            <button id="save-api-key" class="primary-btn">Save API Key</button>
+            <button id="clear-api-key" class="danger-btn">Clear</button>
+          </div>
+
+          <p class="help-text">
+            Get your API key from <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com</a>
+          </p>
+        </div>
+      </div>
+    </section>
+
     <!-- Consolidation View -->
     <section id="consolidation-view" class="view">
       <div class="consolidation-header">