colana 1.0.0-beta.39 → 1.0.0-beta.40

package/package.json

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

package/public/app.js

@@ -1512,19 +1512,51 @@ async function sendPersonalChatMessage() {
     if (textSpan) textSpan.remove();
 
     assistantBubble.className = 'chat-bubble error';
-    const errorText = err.fix ? `${err.message} ${err.fix}` : (err.message || 'Failed to get response');
-    assistantBubble.textContent = errorText;
-
-    const catchSettingsLink = document.createElement('a');
-    catchSettingsLink.href = '#';
-    catchSettingsLink.className = 'chat-error-settings-link';
-    catchSettingsLink.textContent = 'Open Settings';
-    catchSettingsLink.addEventListener('click', (e) => {
-      e.preventDefault();
-      openSettingsModal();
-    });
-    assistantBubble.appendChild(document.createTextNode(' \u2014 '));
-    assistantBubble.appendChild(catchSettingsLink);
+
+    const isAuthError = err.code === 'GATEWAY_AUTH_FAILED' || err.code === 'GATEWAY_AUTH_MISSING';
+
+    if (isAuthError) {
+      // Auth-specific error: show actionable message with "Add API Key" button
+      const msgSpan = document.createElement('span');
+      msgSpan.textContent = err.message || 'No valid API key found for your model provider.';
+      assistantBubble.appendChild(msgSpan);
+
+      const addKeyBtn = document.createElement('button');
+      addKeyBtn.className = 'chat-error-action-btn';
+      addKeyBtn.textContent = 'Add API Key';
+      addKeyBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        openSettingsModal();
+        // Scroll to Personal AI Agents section after modal opens
+        setTimeout(() => {
+          const modelSection = document.getElementById('openclaw-model-config');
+          if (modelSection) modelSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }, 300);
+      });
+      assistantBubble.appendChild(addKeyBtn);
+
+      if (err.fix) {
+        const fixHint = document.createElement('div');
+        fixHint.className = 'chat-error-fix-hint';
+        fixHint.textContent = err.fix;
+        assistantBubble.appendChild(fixHint);
+      }
+    } else {
+      // Generic error: existing behavior
+      const errorText = err.fix ? `${err.message} ${err.fix}` : (err.message || 'Failed to get response');
+      assistantBubble.textContent = errorText;
+
+      const catchSettingsLink = document.createElement('a');
+      catchSettingsLink.href = '#';
+      catchSettingsLink.className = 'chat-error-settings-link';
+      catchSettingsLink.textContent = 'Open Settings';
+      catchSettingsLink.addEventListener('click', (e) => {
+        e.preventDefault();
+        openSettingsModal();
+      });
+      assistantBubble.appendChild(document.createTextNode(' \u2014 '));
+      assistantBubble.appendChild(catchSettingsLink);
+    }
 
     const time = document.createElement('span');
     time.className = 'chat-time';
@@ -7530,6 +7562,52 @@ async function loadOpenClawModelConfig() {
       setOpenClawModel(selectedModel, applyBtn);
     };
 
+    // "Update API key" link — always visible for available models
+    // Covers the case where OpenClaw CLI reports a model as available
+    // but the gateway auth-profiles.json has a stale or missing key
+    const updateKeyLink = document.createElement('a');
+    updateKeyLink.href = '#';
+    updateKeyLink.className = 'openclaw-update-key-link';
+    updateKeyLink.textContent = 'Update API key for this provider';
+    updateKeyLink.style.display = 'none';
+    updateKeyLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      const selectedModel = select.value;
+      const info = modelAvailability[selectedModel];
+      const authRowEl = document.getElementById('openclaw-auth-inline');
+      const envVar = (info && providerEnvMap) ? providerEnvMap[info.provider] : null;
+      if (envVar) {
+        document.getElementById('openclaw-auth-label').textContent = `${envVar}:`;
+        document.getElementById('openclaw-auth-key-input').value = '';
+        document.getElementById('openclaw-auth-key-input').placeholder = `Enter ${info.provider} API key...`;
+      }
+      authRowEl.classList.add('visible');
+      setTimeout(() => {
+        authRowEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        const keyInput = document.getElementById('openclaw-auth-key-input');
+        if (keyInput) keyInput.focus();
+      }, 50);
+    });
+    container.appendChild(updateKeyLink);
+
+    // Show/hide the update key link based on model selection
+    const updateKeyLinkVisibility = () => {
+      const selectedModel = select.value;
+      const info = modelAvailability[selectedModel];
+      // Show link when a model is selected and has a known provider with env var mapping,
+      // but only when the auth row is NOT already mandatorily visible (i.e. model is available)
+      const authRowEl = document.getElementById('openclaw-auth-inline');
+      const authVisible = authRowEl && authRowEl.classList.contains('visible');
+      if (info && info.available && providerEnvMap && providerEnvMap[info.provider]) {
+        updateKeyLink.style.display = authVisible ? 'none' : '';
+      } else {
+        updateKeyLink.style.display = 'none';
+      }
+    };
+    select.addEventListener('change', updateKeyLinkVisibility);
+    // Run once on initial render
+    setTimeout(updateKeyLinkVisibility, 0);
+
     // Save & Apply — save key then set model
     authSaveBtn.onclick = async () => {
       const selectedModel = select.value;

package/public/styles.css

@@ -7466,6 +7466,30 @@ select.form-input option {
   color: var(--accent-hover, #7c8aff);
 }
 
+.chat-error-action-btn {
+  display: inline-block;
+  margin: 8px 0 4px;
+  padding: 5px 14px;
+  background: var(--accent, #6366f1);
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.82em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.chat-error-action-btn:hover {
+  background: var(--accent-hover, #7c8aff);
+}
+
+.chat-error-fix-hint {
+  margin-top: 4px;
+  font-size: 0.78em;
+  color: var(--text-muted, #94a3b8);
+  font-style: italic;
+}
+
 /* --- Notification Bubbles --- */
 .chat-bubble.notification {
   align-self: flex-start;
@@ -7831,6 +7855,21 @@ select.form-input option {
   font-family: inherit;
 }
 
+.openclaw-update-key-link {
+  display: block;
+  margin: 6px 0 10px;
+  font-size: 0.75rem;
+  color: var(--accent, #6366f1);
+  cursor: pointer;
+  text-decoration: none;
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+.openclaw-update-key-link:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
 .openclaw-auth-hint {
   font-size: 0.72rem;
   color: var(--text-muted);

package/server/personal-agent-routes.js

@@ -130,8 +130,27 @@ export function registerPersonalAgentRoutes(app, { sensitiveLimiter }) {
           console.error(`[personal-agent] Gateway ${gatewayRes.status}: ${errText.slice(0, 500)}`);
         }
         const status = gatewayRes.status;
+
+        // For 401, extract provider from current model for actionable guidance
+        if (status === 401) {
+          const currentModel = getOpenClawDefaultModel() || '';
+          const slash = currentModel.indexOf('/');
+          const provider = slash > 0 ? currentModel.substring(0, slash).toLowerCase() : null;
+          const providerLabel = provider || null;
+          const envVar = provider ? PROVIDER_ENV_MAP[provider] : null;
+          return res.status(401).json({
+            error: providerLabel
+              ? `Authentication failed — your ${providerLabel} API key may be missing or invalid.`
+              : 'Authentication failed — your API key may be missing or invalid.',
+            code: 'GATEWAY_AUTH_FAILED',
+            fix: envVar
+              ? `Add or update your ${envVar} in Settings > Personal AI Agents.`
+              : `Add your API key in Settings > Personal AI Agents.`,
+            provider: provider || null,
+          });
+        }
+
         const friendlyMessages = {
-          401: 'Authentication failed — check your API key configuration',
           403: 'Access denied by gateway',
           429: 'Rate limit exceeded — please try again shortly',
           503: 'Personal agent is temporarily unavailable',