colana 1.0.0-beta.76 → 1.0.0-beta.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colana",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.77",
   "description": "Agent-First. Multiplied. Multi-agent command center for AI coding agents.",
   "type": "module",
   "main": "server/index.js",

package/public/app.js

@@ -325,8 +325,8 @@ function renderPersonalStrip() {
   const preview = document.getElementById('personal-preview');
   const launchBtn = document.getElementById('personal-launch-btn');
 
-  // Discovery state: not installed or not configured
-  const needsSetup = !pa.installed || !pa.configured;
+  // Discovery state: not installed AND not configured (truly needs setup)
+  const needsSetup = !pa.installed && !pa.configured;
   strip.classList.toggle('needs-setup', needsSetup && pa.status !== 'running' && pa.status !== 'waiting');
 
   // Status dot
@@ -342,7 +342,7 @@ function renderPersonalStrip() {
 
   // Preview text
   if (preview) {
-    if (!pa.installed) {
+    if (!pa.installed && !pa.configured) {
       preview.textContent = 'Personal AI — Set up';
     } else if (!pa.chatEnabled) {
       preview.textContent = 'Personal AI — Add API key';
@@ -660,8 +660,8 @@ async function openPersonalPanel() {
   const clearChatBtn = document.getElementById('personal-panel-clear-chat');
   const composer = document.getElementById('personal-panel-composer');
 
-  // --- Inline Setup Mode: installed but no API key ---
-  if (pa.installed && !pa.chatEnabled) {
+  // --- Inline Setup Mode: installed/configured but no API key ---
+  if ((pa.installed || pa.configured) && !pa.chatEnabled) {
     if (modeToggle) modeToggle.style.display = 'none';
     if (clearChatBtn) clearChatBtn.style.display = 'none';
     if (composer) composer.classList.add('hidden');
@@ -830,7 +830,7 @@ async function launchPersonalAgent() {
   // shows "Add API key" with a "Set up" button that opens the panel with an
   // inline key input card. Don't spawn (would hit preflight GATEWAY_AUTH_MISSING)
   // and don't auto-open anything — let the user initiate via the strip/button.
-  if (state.personalAgent.installed && !state.personalAgent.chatEnabled) {
+  if ((state.personalAgent.installed || state.personalAgent.configured) && !state.personalAgent.chatEnabled) {
     return;
   }
   // Guard: don't launch if another launch call is already in-flight
@@ -1287,9 +1287,10 @@ function renderPersonalPanelSetup() {
     closePersonalPanel();
     openSettingsModal();
     setTimeout(() => {
-      const section = document.getElementById('settings-personal-agents');
+      const section = document.getElementById('settings-personal-api-keys')
+                   || document.getElementById('settings-personal-agents');
       if (section) section.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }, 300);
+    }, 400);
   };
   settingsLink.appendChild(settingsAnchor);
   card.appendChild(settingsLink);
@@ -1561,20 +1562,17 @@ async function sendPersonalChatMessage() {
       addKeyBtn.textContent = 'Add API Key';
       addKeyBtn.addEventListener('click', async (e) => {
         e.preventDefault();
-        resetModelConfigReady();
         openSettingsModal();
-        await _modelConfigReady;
-        // Scroll to the key input (Quick Setup on fresh install, or auth row otherwise)
-        const keyInput = document.getElementById('openclaw-auth-key-input')
-                      || document.querySelector('.openclaw-quick-setup input[type="password"]');
-        const modelSection = document.getElementById('openclaw-model-config')
-                          || document.getElementById('settings-openclaw-model');
-        if (keyInput) {
-          keyInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          setTimeout(() => keyInput.focus(), 300);
-        } else if (modelSection) {
-          modelSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
+        // Scroll to the dedicated API Keys section
+        setTimeout(() => {
+          const apiKeysSection = document.getElementById('settings-personal-api-keys');
+          if (apiKeysSection) {
+            apiKeysSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            // Focus the first key input for quick entry
+            const firstInput = apiKeysSection.querySelector('.personal-api-key-input');
+            if (firstInput) setTimeout(() => firstInput.focus(), 300);
+          }
+        }, 400);
       });
       assistantBubble.appendChild(addKeyBtn);
 
@@ -7221,6 +7219,9 @@ async function openSettingsModal() {
     // Integration Hub status (non-blocking)
     renderIntegrationsGrid();
 
+    // Personal Agent API keys (non-blocking)
+    renderPersonalApiKeys();
+
     // OpenClaw model config (non-blocking)
     loadOpenClawModelConfig();
   } catch (error) {
@@ -7283,6 +7284,145 @@ async function installCliAgent(provider, btn) {
   }
 }
 
+// =========================================================================
+// Personal Agent API Key Management (Settings)
+// =========================================================================
+
+/**
+ * Render the API Keys section in Settings > Personal AI Agents.
+ * Always visible — shows provider key status and input for adding/updating keys.
+ * Uses the same /openclaw/models/auth endpoint as the inline panel setup.
+ */
+async function renderPersonalApiKeys() {
+  const container = document.getElementById('settings-personal-api-keys');
+  if (!container) return;
+
+  const providers = [
+    { id: 'anthropic', label: 'Anthropic', envVar: 'ANTHROPIC_API_KEY', placeholder: 'sk-ant-...', defaultModel: 'anthropic/claude-sonnet-4-20250514' },
+    { id: 'openai', label: 'OpenAI', envVar: 'OPENAI_API_KEY', placeholder: 'sk-...', defaultModel: 'openai/gpt-4o' },
+    { id: 'google', label: 'Google', envVar: 'GOOGLE_API_KEY', placeholder: 'AIza...', defaultModel: 'google/gemini-2.0-flash' },
+    { id: 'groq', label: 'Groq', envVar: 'GROQ_API_KEY', placeholder: 'gsk_...', defaultModel: 'groq/llama-3.3-70b-versatile' },
+    { id: 'xai', label: 'xAI', envVar: 'XAI_API_KEY', placeholder: 'xai-...', defaultModel: 'xai/grok-3-mini' },
+    { id: 'mistral', label: 'Mistral', envVar: 'MISTRAL_API_KEY', placeholder: 'Paste key...', defaultModel: 'mistral/mistral-large-latest' },
+  ];
+
+  // Fetch current auth status to show which providers have keys configured
+  let authProviders = null;
+  try {
+    const data = await api('/openclaw/models/status');
+    authProviders = data.authProviders;
+  } catch { /* best-effort */ }
+
+  container.textContent = '';
+
+  const grid = document.createElement('div');
+  grid.className = 'personal-api-keys-grid';
+
+  for (const p of providers) {
+    // Check if this provider has a key configured (from authProviders or env)
+    const hasKey = authProviders
+      ? (authProviders[p.id]?.authenticated === true || authProviders[p.id]?.status === 'authenticated')
+      : false;
+
+    const row = document.createElement('div');
+    row.className = 'personal-api-key-row';
+
+    const infoDiv = document.createElement('div');
+    infoDiv.className = 'personal-api-key-info';
+
+    const nameSpan = document.createElement('span');
+    nameSpan.className = 'personal-api-key-name';
+    nameSpan.textContent = p.label;
+    infoDiv.appendChild(nameSpan);
+
+    const statusSpan = document.createElement('span');
+    statusSpan.className = 'personal-api-key-status';
+    if (hasKey) {
+      statusSpan.classList.add('configured');
+      statusSpan.textContent = 'Configured';
+    } else {
+      statusSpan.textContent = 'Not configured';
+    }
+    infoDiv.appendChild(statusSpan);
+
+    const actionDiv = document.createElement('div');
+    actionDiv.className = 'personal-api-key-action';
+
+    const keyInput = document.createElement('input');
+    keyInput.type = 'password';
+    keyInput.className = 'personal-api-key-input';
+    keyInput.placeholder = hasKey ? 'Enter new key to update...' : p.placeholder;
+
+    const saveBtn = document.createElement('button');
+    saveBtn.type = 'button';
+    saveBtn.className = 'btn btn-sm btn-primary personal-api-key-save';
+    saveBtn.textContent = hasKey ? 'Update' : 'Save';
+
+    saveBtn.onclick = async () => {
+      const keyValue = keyInput.value.trim();
+      if (!keyValue) { showToast('Enter an API key', 'error'); return; }
+      saveBtn.disabled = true;
+      saveBtn.textContent = 'Saving...';
+
+      try {
+        await api('/openclaw/models/auth', {
+          method: 'POST',
+          body: JSON.stringify({ provider: p.id, apiKey: keyValue }),
+        });
+
+        // Auto-set a default model if this is the first key being added
+        if (!hasKey && p.defaultModel) {
+          saveBtn.textContent = 'Setting model...';
+          try {
+            await api('/openclaw/models/set', {
+              method: 'POST',
+              body: JSON.stringify({ model: p.defaultModel }),
+            });
+          } catch {
+            // Model set failed — non-fatal, user can set manually
+          }
+        }
+
+        showToast(`${p.label} API key saved`, 'success');
+        keyInput.value = '';
+
+        // Refresh the section and model config after gateway picks up the key
+        setTimeout(() => {
+          renderPersonalApiKeys();
+          loadOpenClawModelConfig();
+          loadPersonalAgentStatus();
+        }, 2500);
+      } catch (err) {
+        showToast('Failed to save: ' + err.message, 'error');
+      } finally {
+        saveBtn.disabled = false;
+        saveBtn.textContent = hasKey ? 'Update' : 'Save';
+      }
+    };
+
+    // Submit on Enter key
+    keyInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); saveBtn.click(); }
+    });
+
+    actionDiv.appendChild(keyInput);
+    actionDiv.appendChild(saveBtn);
+
+    row.appendChild(infoDiv);
+    row.appendChild(actionDiv);
+    grid.appendChild(row);
+  }
+
+  container.appendChild(grid);
+
+  // Hint text
+  const hint = document.createElement('p');
+  hint.className = 'settings-hint';
+  hint.style.cssText = 'margin-top: 8px; font-size: 0.78rem;';
+  hint.textContent = 'Keys are encrypted and stored locally. Only one provider key is needed to get started.';
+  container.appendChild(hint);
+}
+
 // =========================================================================
 // OpenClaw Model Configuration
 // =========================================================================
@@ -7902,7 +8042,7 @@ async function loadPersonalAgentStatus() {
       const hint = document.createElement('p');
       hint.className = 'settings-hint personal-auth-hint';
       hint.style.cssText = 'margin-top: 6px; color: var(--warning, #e8a838); font-size: 0.82rem;';
-      hint.textContent = 'Configure a model API key in Model Configuration below to enable chat.';
+      hint.textContent = 'Add an API key in the API Keys section below to enable chat.';
       container.appendChild(hint);
     }
 
@@ -10547,10 +10687,10 @@ function initEventListeners() {
       const pa = state.personalAgent;
       if (pa.panelOpen) {
         closePersonalPanel();
-      } else if (pa.installed && !pa.chatEnabled) {
-        // Installed but no API key — open panel with inline setup
+      } else if ((pa.installed || pa.configured) && !pa.chatEnabled) {
+        // Installed/configured but no API key — open panel with inline setup
         openPersonalPanel();
-      } else if (pa.sessionId) {
+      } else if (pa.sessionId || pa.chatEnabled) {
         openPersonalPanel();
       }
     });
@@ -10561,8 +10701,8 @@ function initEventListeners() {
     personalLaunchBtn.addEventListener('click', (e) => {
       e.stopPropagation();
       const pa = state.personalAgent;
-      if (!pa.installed) {
-        // Not installed — open Settings scrolled to Personal AI Agents section
+      if (!pa.installed && !pa.configured) {
+        // Not installed and not configured — open Settings scrolled to Personal AI Agents section
         openSettingsModal();
         setTimeout(() => {
           const section = document.getElementById('settings-personal-agents');
@@ -10571,7 +10711,7 @@ function initEventListeners() {
         return;
       }
       if (!pa.chatEnabled) {
-        // Installed but no API key — open panel with inline setup
+        // Installed/configured but no API key — open panel with inline setup
         openPersonalPanel();
         return;
       }

package/public/index.html

@@ -910,6 +910,12 @@
             <!-- Populated dynamically by app.js — personal agents only -->
           </div>
 
+          <div class="settings-section-title">API Keys</div>
+          <p class="settings-hint" style="margin-bottom: 10px;">Add or update API keys to connect your Personal Agent to AI providers.</p>
+          <div id="settings-personal-api-keys" class="personal-api-keys-section">
+            <!-- Populated dynamically by app.js -->
+          </div>
+
           <div class="settings-section-title">Model Configuration</div>
           <p class="settings-hint" style="margin-bottom: 10px;">Configure the default AI model for your Personal Agent.</p>
           <div id="settings-openclaw-model" class="openclaw-model-config">

package/public/styles.css

@@ -7751,6 +7751,91 @@ select.form-input option {
   background: var(--bg-secondary);
 }
 
+/* --- Settings: Personal Agent API Keys --- */
+.personal-api-keys-section {
+  margin: 8px 0;
+}
+
+.personal-api-keys-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.personal-api-key-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--bg-secondary, #1a1a2e);
+  border: 1px solid var(--border-color, #2a2a4a);
+  border-radius: 8px;
+  transition: border-color 0.15s ease;
+}
+
+.personal-api-key-row:hover {
+  border-color: var(--border-hover, #3a3a5a);
+}
+
+.personal-api-key-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 100px;
+  flex-shrink: 0;
+}
+
+.personal-api-key-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.personal-api-key-status {
+  font-size: 0.75rem;
+  color: var(--text-muted, #888);
+}
+
+.personal-api-key-status.configured {
+  color: var(--success, #4caf50);
+}
+
+.personal-api-key-action {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.personal-api-key-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #2a2a4a);
+  background: var(--bg-primary, #0d0d1a);
+  color: var(--text-primary, #e0e0e0);
+  font-size: 0.82rem;
+  font-family: inherit;
+  transition: border-color 0.15s ease;
+}
+
+.personal-api-key-input:focus {
+  outline: none;
+  border-color: var(--accent, #7c4dff);
+}
+
+.personal-api-key-input::placeholder {
+  color: var(--text-muted, #666);
+}
+
+.personal-api-key-save {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
 /* --- Settings: OpenClaw Model Config --- */
 .openclaw-model-config {
   margin: 8px 0;