@chrysb/alphaclaw 0.4.6-beta.5 → 0.4.6-beta.6

package/lib/public/js/components/envars.js

@@ -6,16 +6,44 @@ import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
 import { ActionButton } from "./action-button.js";
+import {
+  Brain2LineIcon,
+  ChatVoiceLineIcon,
+  ChevronDownIcon,
+  ImageAiLineIcon,
+  TextToSpeechLineIcon,
+} from "./icons.js";
+import { Tooltip } from "./tooltip.js";
 const html = htm.bind(h);
 
 const kGroupLabels = {
+  ai: "AI Provider Keys",
   github: "GitHub",
   channels: "Channels",
   tools: "Tools",
   custom: "Custom",
 };
 
-const kGroupOrder = ["github", "channels", "tools", "custom"];
+const kGroupOrder = ["ai", "github", "channels", "tools", "custom"];
+const kDefaultVisibleAiKeys = new Set(["OPENAI_API_KEY", "GEMINI_API_KEY"]);
+const kFeatureIconByName = {
+  Embeddings: {
+    Icon: Brain2LineIcon,
+    label: "Memory embeddings",
+  },
+  Image: {
+    Icon: ImageAiLineIcon,
+    label: "Image generation",
+  },
+  TTS: {
+    Icon: TextToSpeechLineIcon,
+    label: "Text to speech",
+  },
+  STT: {
+    Icon: ChatVoiceLineIcon,
+    label: "Speech to text",
+  },
+};
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
@@ -57,27 +85,80 @@ const kHintByKey = {
   ANTHROPIC_TOKEN: html`from <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
   OPENAI_API_KEY: html`from <a href="https://platform.openai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">platform.openai.com</a>`,
   GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">aistudio.google.com</a>`,
+  ELEVENLABS_API_KEY: html`from <a href="https://elevenlabs.io" target="_blank" class="hover:underline" style="color: var(--accent-link)">elevenlabs.io</a> · <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also supported`,
   GITHUB_TOKEN: html`classic PAT · <code class="text-xs bg-black/30 px-1 rounded">repo</code> scope · <a href="https://github.com/settings/tokens" target="_blank" class="hover:underline" style="color: var(--accent-link)">github settings</a>`,
   GITHUB_WORKSPACE_REPO: html`use <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or <code class="text-xs bg-black/30 px-1 rounded">https://github.com/owner/repo</code>`,
   TELEGRAM_BOT_TOKEN: html`from <a href="https://t.me/BotFather" target="_blank" class="hover:underline" style="color: var(--accent-link)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
   DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: var(--accent-link)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
+  MISTRAL_API_KEY: html`from <a href="https://console.mistral.ai" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.mistral.ai</a>`,
+  VOYAGE_API_KEY: html`from <a href="https://dash.voyageai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">dash.voyageai.com</a>`,
+  GROQ_API_KEY: html`from <a href="https://console.groq.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.groq.com</a>`,
+  DEEPGRAM_API_KEY: html`from <a href="https://console.deepgram.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.deepgram.com</a>`,
   BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: var(--accent-link)">brave.com/search/api</a> — free tier available`,
 };
 
 const getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || "";
 
+const getVisibleFeatureIcons = (envVar) =>
+  (Array.isArray(envVar?.features) ? envVar.features : []).filter(
+    (feature) => !!kFeatureIconByName[feature],
+  );
+
+const splitAiVars = (items) => {
+  const visible = [];
+  const hidden = [];
+  (items || []).forEach((item) => {
+    const hasValue = !!String(item?.value || "").trim();
+    if (kDefaultVisibleAiKeys.has(item?.key) || hasValue) {
+      visible.push(item);
+      return;
+    }
+    hidden.push(item);
+  });
+  return { visible, hidden };
+};
+
+const FeatureIcon = ({ feature }) => {
+  const entry = kFeatureIconByName[feature];
+  if (!entry) return null;
+  const { Icon, label } = entry;
+  return html`
+    <${Tooltip} text=${label} widthClass="w-auto" tooltipClassName="whitespace-nowrap">
+      <span
+        class="inline-flex items-center justify-center text-gray-500 hover:text-gray-300 focus-within:text-gray-300"
+        tabindex="0"
+        aria-label=${label}
+      >
+        <${Icon} className="w-3.5 h-3.5" />
+      </span>
+    </${Tooltip}>
+  `;
+};
+
 const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
   const hint = getHintContent(envVar);
+  const featureIcons = getVisibleFeatureIcons(envVar);
 
   return html`
     <div class="flex items-start gap-4 px-4 py-3">
-      <div class="shrink-0 flex items-center gap-2 pt-1.5" style="width: 200px">
-        <span
-          class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
-            ? "bg-green-500"
-            : "bg-gray-600"}"
-        />
-        <code class="text-sm truncate">${envVar.key}</code>
+      <div class="shrink-0" style="width: 200px">
+        <div class="flex items-center gap-2 pt-1.5">
+          <span
+            class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
+              ? "bg-green-500"
+              : "bg-gray-600"}"
+          />
+          <code class="text-sm truncate">${envVar.key}</code>
+        </div>
+        ${featureIcons.length > 0
+          ? html`
+              <div class="flex items-center gap-2 mt-1 pl-3.5">
+                ${featureIcons.map(
+                  (feature) => html`<${FeatureIcon} key=${feature} feature=${feature} />`,
+                )}
+              </div>
+            `
+          : null}
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1">
@@ -114,6 +195,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const [secretMaskEpoch, setSecretMaskEpoch] = useState(0);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [showAllAiKeys, setShowAllAiKeys] = useState(false);
   const [newKey, setNewKey] = useState("");
   const baselineSignatureRef = useRef("[]");
 
@@ -310,6 +392,61 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const pendingAtBottom = grouped.custom.filter((item) => pending.has(item.key));
     grouped.custom = [...nonPending, ...pendingAtBottom];
   }
+  const aiSplit = splitAiVars(grouped.ai || []);
+  const renderEnvRows = (items) =>
+    items.map(
+      (v) =>
+        html`<${EnvRow}
+          key=${`${secretMaskEpoch}:${v.key}`}
+          envVar=${v}
+          onChange=${handleChange}
+          onDelete=${handleDelete}
+          disabled=${saving}
+        />`,
+    );
+  const renderGroupCard = (groupKey) => {
+    const items = grouped[groupKey] || [];
+    if (!items.length) return null;
+    if (groupKey === "ai") {
+      const { visible, hidden } = aiSplit;
+      const expanded = showAllAiKeys && hidden.length > 0;
+      return html`
+        <div class="bg-surface border border-border rounded-xl overflow-hidden">
+          <h3 class="card-label text-xs px-4 pt-3 pb-2">
+            ${kGroupLabels[groupKey] || groupKey}
+          </h3>
+          <div class="divide-y divide-border">${renderEnvRows(visible)}</div>
+          ${hidden.length > 0
+            ? html`
+                <div class="border-t border-border px-4 py-2">
+                  <button
+                    type="button"
+                    onclick=${() => setShowAllAiKeys((prev) => !prev)}
+                    class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-300"
+                  >
+                    <${ChevronDownIcon}
+                      className=${`transition-transform ${expanded ? "rotate-180" : ""}`}
+                    />
+                    ${expanded ? "Show fewer" : `Show more (${hidden.length})`}
+                  </button>
+                </div>
+              `
+            : null}
+          ${expanded
+            ? html`<div class="divide-y divide-border border-t border-border">${renderEnvRows(hidden)}</div>`
+            : null}
+        </div>
+      `;
+    }
+    return html`
+      <div class="bg-surface border border-border rounded-xl overflow-hidden">
+        <h3 class="card-label text-xs px-4 pt-3 pb-2">
+          ${kGroupLabels[groupKey] || groupKey}
+        </h3>
+        <div class="divide-y divide-border">${renderEnvRows(items)}</div>
+      </div>
+    `;
+  };
 
   return html`
     <div class="space-y-4">
@@ -331,27 +468,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
-        .map(
-          (g) => html`
-            <div class="bg-surface border border-border rounded-xl overflow-hidden">
-              <h3 class="card-label text-xs px-4 pt-3 pb-2">
-                ${kGroupLabels[g] || g}
-              </h3>
-              <div class="divide-y divide-border">
-                ${grouped[g].map(
-                  (v) =>
-                    html`<${EnvRow}
-                      key=${`${secretMaskEpoch}:${v.key}`}
-                      envVar=${v}
-                      onChange=${handleChange}
-                      onDelete=${handleDelete}
-                      disabled=${saving}
-                    />`,
-                )}
-              </div>
-            </div>
-          `,
-        )}
+        .map((g) => renderGroupCard(g))}
 
       <div class="bg-surface border border-border rounded-xl overflow-hidden">
         <div class="flex items-center justify-between px-4 pt-3 pb-2">

package/lib/public/js/components/features.js

@@ -61,7 +61,7 @@ export const Features = ({ onSwitchTab }) => {
                         href="#"
                         onclick=${(e) => {
                           e.preventDefault();
-                          onSwitchTab?.("providers");
+                          onSwitchTab?.("envars");
                         }}
                         class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
                       >Add provider</a>

package/lib/public/js/components/icons.js

@@ -119,6 +119,58 @@ export const Image2FillIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const ImageAiLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM2.9918 3H14V5H4V19L14 9L20 15V11H22V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
+    />
+  </svg>
+`;
+
+export const Brain2LineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M7 6C7 6.23676 7.04072 6.46184 7.11469 6.66999C7.22686 6.98559 7.17357 7.33638 6.97276 7.60444C6.77194 7.8725 6.45026 8.02222 6.11585 8.00327C6.0776 8.0011 6.03898 8 6 8C4.89543 8 4 8.89543 4 10C4 10.5129 4.19174 10.9786 4.50903 11.3331C4.84885 11.7128 4.84885 12.2872 4.50903 12.6669C4.19174 13.0214 4 13.4871 4 14C4 14.8842 4.57447 15.6369 5.37327 15.9001C5.84924 16.057 6.1356 16.5419 6.04308 17.0345C6.01489 17.1846 6 17.3401 6 17.5C6 18.8807 7.11929 20 8.5 20C9.75862 20 10.8015 19.069 10.9746 17.8583C10.9806 17.8165 10.9891 17.7756 11 17.7358V6C11 4.89543 10.1046 4 9 4C7.89543 4 7 4.89543 7 6ZM13 17.7358C13.0109 17.7756 13.0194 17.8165 13.0254 17.8583C13.1985 19.069 14.2414 20 15.5 20C16.8807 20 18 18.8807 18 17.5C18 17.3401 17.9851 17.1846 17.9569 17.0345C17.8644 16.5419 18.1508 16.057 18.6267 15.9001C19.4255 15.6369 20 14.8842 20 14C20 13.4871 19.8083 13.0214 19.491 12.6669C19.1511 12.2872 19.1511 11.7128 19.491 11.3331C19.8083 10.9786 20 10.5129 20 10C20 8.89543 19.1046 8 18 8C17.961 8 17.9224 8.0011 17.8841 8.00327C17.5497 8.02222 17.2281 7.8725 17.0272 7.60444C16.8264 7.33638 16.7731 6.98559 16.8853 6.66999C16.9593 6.46184 17 6.23676 17 6C17 4.89543 16.1046 4 15 4C13.8954 4 13 4.89543 13 6V17.7358ZM9 2C10.1947 2 11.2671 2.52376 12 3.35418C12.7329 2.52376 13.8053 2 15 2C17.2091 2 19 3.79086 19 6C19 6.04198 18.9994 6.08382 18.9981 6.12552C20.7243 6.56889 22 8.13546 22 10C22 10.728 21.8049 11.4116 21.4646 12C21.8049 12.5884 22 13.272 22 14C22 15.4817 21.1949 16.7734 19.9999 17.4646L20 17.5C20 19.9853 17.9853 22 15.5 22C14.0859 22 12.8248 21.3481 12 20.3285C11.1752 21.3481 9.91405 22 8.5 22C6.01472 22 4 19.9853 4 17.5L4.00014 17.4646C2.80512 16.7734 2 15.4817 2 14C2 13.272 2.19513 12.5884 2.53536 12C2.19513 11.4116 2 10.728 2 10C2 8.13546 3.27573 6.56889 5.00194 6.12552C5.00065 6.08382 5 6.04198 5 6C5 3.79086 6.79086 2 9 2Z"
+    />
+  </svg>
+`;
+
+export const TextToSpeechLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M14.5 5H6C4.89543 5 4 5.89543 4 7V17C4 18.1046 4.89543 19 6 19H18C19.1046 19 20 18.1046 20 17V14.5H22V17C22 19.2091 20.2091 21 18 21H6C3.79086 21 2 19.2091 2 17V7C2 4.79086 3.79086 3 6 3H14.5V5ZM14 11H11V17H9V11H6V9H14V11ZM20.6572 1.34277C22.1049 2.79049 23 4.79086 23 7C23 9.20914 22.1049 11.2095 20.6572 12.6572L19.2422 11.2422C20.328 10.1564 21 8.65685 21 7C21 5.34315 20.328 3.8436 19.2422 2.75781L20.6572 1.34277ZM17.8281 4.17188C18.552 4.89573 19 5.89543 19 7C19 8.10457 18.552 9.10427 17.8281 9.82812L16.4141 8.41406C16.776 8.05213 17 7.55228 17 7C17 6.44772 16.776 5.94787 16.4141 5.58594L17.8281 4.17188Z"
+    />
+  </svg>
+`;
+
+export const ChatVoiceLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22H2L4.92893 19.0711C3.11929 17.2614 2 14.7614 2 12ZM6.82843 20H12C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 14.1524 4.85124 16.1649 6.34315 17.6569L7.75736 19.0711L6.82843 20ZM11 6H13V18H11V6ZM7 9H9V15H7V9ZM15 9H17V15H15V9Z"
+    />
+  </svg>
+`;
+
 export const FileMusicLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/info-tooltip.js

@@ -1,18 +1,15 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { Tooltip } from "./tooltip.js";
 
 const html = htm.bind(h);
 
 export const InfoTooltip = ({ text = "", widthClass = "w-64" }) => html`
-  <span class="relative group inline-flex items-center cursor-default select-none">
+  <${Tooltip} text=${text} widthClass=${widthClass}>
     <span
-      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default"
+      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default select-none"
       aria-label=${text}
       >?</span
     >
-    <span
-      class=${`pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg group-hover:block ${widthClass}`}
-      >${text}</span
-    >
-  </span>
+  </${Tooltip}>
 `;

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -309,14 +309,14 @@ export const ProviderAuthCard = ({
                 >${mode.label}</label
               >
               ${hasMultipleModes && isActive
-                ? html`<${Badge} tone="cyan">Active</${Badge}>`
+                ? html`<${Badge} tone="cyan">Primary</${Badge}>`
                 : null}
               ${hasMultipleModes && !isActive && fieldValue
                 ? html`<button
                     onclick=${() => handleSetActive(mode)}
                     class="text-xs px-1.5 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
                   >
-                    Set active
+                    Set primary
                   </button>`
                 : null}
               ${mode.url && !fieldValue

package/lib/public/js/components/models.js

@@ -268,7 +268,7 @@ export const Models = () => {
       : selectedModelProvider === "openai"
       ? !!getKeyVal(envVars, "OPENAI_API_KEY")
       : selectedModelProvider === "openai-codex"
-      ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
+      ? !!codexStatus.connected
       : selectedModelProvider === "google"
       ? !!getKeyVal(envVars, "GEMINI_API_KEY")
       : false;

package/lib/public/js/components/providers.js

@@ -232,7 +232,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
       : selectedModelProvider === "openai"
         ? !!getKeyVal(envVars, "OPENAI_API_KEY")
         : selectedModelProvider === "openai-codex"
-          ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
+          ? !!codexStatus.connected
           : selectedModelProvider === "google"
             ? !!getKeyVal(envVars, "GEMINI_API_KEY")
             : false;

package/lib/public/js/components/tooltip.js

@@ -0,0 +1,106 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { createPortal } from "https://esm.sh/preact/compat";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const kViewportPadding = 8;
+const kTooltipOffset = 8;
+
+const getTooltipPosition = (triggerEl, tooltipEl) => {
+  if (!triggerEl) return null;
+  const triggerRect = triggerEl.getBoundingClientRect();
+  const tooltipRect = tooltipEl?.getBoundingClientRect?.() || {
+    width: 0,
+    height: 0,
+  };
+  const minLeft = kViewportPadding + tooltipRect.width / 2;
+  const maxLeft = window.innerWidth - kViewportPadding - tooltipRect.width / 2;
+  const centeredLeft = triggerRect.left + triggerRect.width / 2;
+  const left = tooltipRect.width
+    ? Math.min(Math.max(centeredLeft, minLeft), maxLeft)
+    : centeredLeft;
+
+  let top = triggerRect.bottom + kTooltipOffset;
+  const canRenderAbove =
+    triggerRect.top - kTooltipOffset - tooltipRect.height >= kViewportPadding;
+  const wouldOverflowBelow =
+    top + tooltipRect.height + kViewportPadding > window.innerHeight;
+  if (wouldOverflowBelow && canRenderAbove) {
+    top = triggerRect.top - kTooltipOffset - tooltipRect.height;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${Math.max(kViewportPadding, top)}px`,
+  };
+};
+
+export const Tooltip = ({
+  text = "",
+  widthClass = "w-64",
+  tooltipClassName = "",
+  children = null,
+  disabled = false,
+}) => {
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [positionStyle, setPositionStyle] = useState(null);
+
+  useEffect(() => {
+    if (!open || disabled || !text) return undefined;
+
+    const updatePosition = () => {
+      const nextStyle = getTooltipPosition(triggerRef.current, tooltipRef.current);
+      if (nextStyle) setPositionStyle(nextStyle);
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, disabled, text]);
+
+  const handleOpen = () => {
+    if (disabled || !text) return;
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+
+  return html`
+    <span
+      ref=${triggerRef}
+      class="inline-flex"
+      onMouseEnter=${handleOpen}
+      onMouseLeave=${handleClose}
+      onFocusIn=${handleOpen}
+      onFocusOut=${(event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        handleClose();
+      }}
+    >
+      ${children}
+      ${open && !disabled && text && typeof document !== "undefined"
+        ? createPortal(
+            html`
+              <span
+                ref=${tooltipRef}
+                role="tooltip"
+                class=${`pointer-events-none fixed left-0 top-0 z-[80] -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg ${widthClass} ${tooltipClassName}`.trim()}
+                style=${positionStyle || { visibility: "hidden" }}
+              >
+                ${text}
+              </span>
+            `,
+            document.body,
+          )
+        : null}
+    </span>
+  `;
+};

package/lib/public/js/components/welcome.js

@@ -101,7 +101,7 @@ export const Welcome = ({ onComplete }) => {
         : selectedProvider === "google"
           ? !!vals.GEMINI_API_KEY
           : selectedProvider === "openai-codex"
-            ? !!(codexStatus.connected || vals.OPENAI_API_KEY)
+            ? !!codexStatus.connected
             : false;
 
   const allValid = kWelcomeGroups.every((g) => g.validate(vals, { hasAi }));

package/lib/public/js/lib/model-config.js

@@ -158,6 +158,7 @@ export const kFeatureDefs = [
 ];
 
 export const getVisibleAiFieldKeys = (provider) => {
+  if (provider === "openai-codex") return new Set();
   const authProvider = getAuthProviderFromModelProvider(provider);
   const fields = kProviderAuthFields[authProvider] || [];
   return new Set(fields.map((field) => field.key));

package/lib/server/auth-profiles.js

@@ -3,6 +3,15 @@ const path = require("path");
 const { AUTH_PROFILES_PATH, CODEX_PROFILE_ID, OPENCLAW_DIR } = require("./constants");
 
 const kDefaultAgentId = "main";
+const kApiKeyEnvVarByProvider = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  google: "GEMINI_API_KEY",
+  mistral: "MISTRAL_API_KEY",
+  voyage: "VOYAGE_API_KEY",
+  groq: "GROQ_API_KEY",
+  deepgram: "DEEPGRAM_API_KEY",
+};
 
 const normalizeSecret = (raw) =>
   String(raw ?? "")
@@ -15,6 +24,14 @@ const credentialMode = (credential) => {
   return "oauth";
 };
 
+const getEnvVarForApiKeyProvider = (provider) =>
+  kApiKeyEnvVarByProvider[String(provider || "").trim()] || "";
+
+const getDefaultProfileIdForApiKeyProvider = (provider) => {
+  const normalized = String(provider || "").trim();
+  return normalized ? `${normalized}:default` : "";
+};
+
 const resolveAgentDir = (agentId = kDefaultAgentId) =>
   path.join(OPENCLAW_DIR, "agents", agentId, "agent");
 
@@ -24,6 +41,9 @@ const resolveAuthProfilesPath = (agentId = kDefaultAgentId) =>
 const resolveOpenclawConfigPath = () =>
   path.join(OPENCLAW_DIR, "openclaw.json");
 
+const hasCompletedOnboardingConfig = (cfg) =>
+  String(cfg?.agents?.defaults?.model?.primary || "").trim().includes("/");
+
 const loadAuthStore = (agentId = kDefaultAgentId) => {
   const storePath = resolveAuthProfilesPath(agentId);
   let store = { version: 1, profiles: {} };
@@ -79,6 +99,17 @@ const loadOpenclawConfig = () => {
   }
 };
 
+const canSyncOpenclawAuthReferences = () => {
+  const configPath = resolveOpenclawConfigPath();
+  if (!fs.existsSync(configPath)) return false;
+  try {
+    const cfg = JSON.parse(fs.readFileSync(configPath, "utf8"));
+    return hasCompletedOnboardingConfig(cfg);
+  } catch {
+    return false;
+  }
+};
+
 const saveOpenclawConfig = (cfg) => {
   const configPath = resolveOpenclawConfigPath();
   fs.writeFileSync(configPath, JSON.stringify(cfg, null, 2));
@@ -142,6 +173,7 @@ const createAuthProfiles = () => {
     store.profiles[profileId] = sanitized;
     saveAuthStore(agentId, store);
 
+    if (!canSyncOpenclawAuthReferences()) return;
     const cfg = loadOpenclawConfig();
     const updated = syncConfigAuthReference(cfg, profileId, sanitized);
     saveOpenclawConfig(updated);
@@ -153,6 +185,7 @@ const createAuthProfiles = () => {
     delete store.profiles[profileId];
     saveAuthStore(agentId, store);
 
+    if (!canSyncOpenclawAuthReferences()) return true;
     const cfg = loadOpenclawConfig();
     const updated = removeConfigAuthReference(cfg, profileId);
     saveOpenclawConfig(updated);
@@ -167,6 +200,7 @@ const createAuthProfiles = () => {
   };
 
   const syncConfigAuthReferencesForAgent = (agentId = kDefaultAgentId) => {
+    if (!canSyncOpenclawAuthReferences()) return;
     const store = loadAuthStore(agentId);
     let cfg = loadOpenclawConfig();
     for (const [profileId, credential] of Object.entries(store.profiles || {})) {
@@ -176,6 +210,34 @@ const createAuthProfiles = () => {
     saveOpenclawConfig(cfg);
   };
 
+  const upsertApiKeyProfileForEnvVar = (
+    provider,
+    rawValue,
+    agentId = kDefaultAgentId,
+  ) => {
+    const key = normalizeSecret(rawValue);
+    if (!provider || !key) return false;
+    upsertProfile(
+      getDefaultProfileIdForApiKeyProvider(provider),
+      {
+        type: "api_key",
+        provider,
+        key,
+      },
+      agentId,
+    );
+    return true;
+  };
+
+  const removeApiKeyProfileForEnvVar = (provider, agentId = kDefaultAgentId) => {
+    const profileId = getDefaultProfileIdForApiKeyProvider(provider);
+    if (!profileId) return false;
+    const existing = getProfile(profileId, agentId);
+    if (!existing) return false;
+    if (existing.type !== "api_key" || existing.provider !== provider) return false;
+    return removeProfile(profileId, agentId);
+  };
+
   // ── Model config operations ──
 
   const getModelConfig = () => {
@@ -240,6 +302,7 @@ const createAuthProfiles = () => {
     }
     if (changed) {
       saveAuthStore(kDefaultAgentId, store);
+      if (!canSyncOpenclawAuthReferences()) return changed;
       let cfg = loadOpenclawConfig();
       for (const [id, cred] of Object.entries(cfg.auth?.profiles || {})) {
         if (cred?.provider === "openai-codex") {
@@ -259,6 +322,10 @@ const createAuthProfiles = () => {
     removeProfile,
     setAuthOrder,
     syncConfigAuthReferencesForAgent,
+    upsertApiKeyProfileForEnvVar,
+    removeApiKeyProfileForEnvVar,
+    getEnvVarForApiKeyProvider,
+    getDefaultProfileIdForApiKeyProvider,
     getModelConfig,
     setModelConfig,
     getCodexProfile,

package/lib/server/constants.js

@@ -153,26 +153,38 @@ const kKnownVars = [
   {
     key: "ANTHROPIC_API_KEY",
     label: "Anthropic API Key",
-    group: "models",
+    group: "ai",
     hint: "From console.anthropic.com",
+    features: ["Models"],
   },
   {
     key: "ANTHROPIC_TOKEN",
     label: "Anthropic Setup Token",
-    group: "models",
+    group: "ai",
     hint: "From claude setup-token",
+    features: ["Models"],
+    visibleInEnvars: false,
   },
   {
     key: "OPENAI_API_KEY",
     label: "OpenAI API Key",
-    group: "models",
+    group: "ai",
     hint: "From platform.openai.com",
+    features: ["Models", "Embeddings", "TTS", "STT"],
   },
   {
     key: "GEMINI_API_KEY",
     label: "Gemini API Key",
-    group: "models",
+    group: "ai",
     hint: "From aistudio.google.com",
+    features: ["Models", "Embeddings", "Image", "STT"],
+  },
+  {
+    key: "ELEVENLABS_API_KEY",
+    label: "ElevenLabs API Key",
+    group: "ai",
+    hint: "From elevenlabs.io (XI_API_KEY also works)",
+    features: ["TTS"],
   },
   {
     key: "GITHUB_TOKEN",
@@ -201,26 +213,30 @@ const kKnownVars = [
   {
     key: "MISTRAL_API_KEY",
     label: "Mistral API Key",
-    group: "models",
+    group: "ai",
     hint: "From console.mistral.ai",
+    features: ["Models", "Embeddings", "STT"],
   },
   {
     key: "VOYAGE_API_KEY",
     label: "Voyage API Key",
-    group: "models",
+    group: "ai",
     hint: "From dash.voyageai.com",
+    features: ["Embeddings"],
   },
   {
     key: "GROQ_API_KEY",
     label: "Groq API Key",
-    group: "models",
+    group: "ai",
     hint: "From console.groq.com",
+    features: ["Models", "STT"],
   },
   {
     key: "DEEPGRAM_API_KEY",
     label: "Deepgram API Key",
-    group: "models",
+    group: "ai",
     hint: "From console.deepgram.com",
+    features: ["STT"],
   },
   {
     key: "BRAVE_API_KEY",

package/lib/server/doctor/service.js

@@ -230,9 +230,6 @@ const createDoctorService = ({
       }
       const stdoutText = String(result.stdout || "");
       const stderrText = String(result.stderr || "");
-      console.log(
-        `[doctor] run ${runId} command result ok=${result.ok} code=${result.code ?? 0} stdout_chars=${stdoutText.length} stderr_chars=${stderrText.length}`,
-      );
       let normalizedResult = null;
       try {
         normalizedResult = normalizeDoctorResult(stdoutText);

package/lib/server/gateway.js

@@ -45,7 +45,19 @@ const gatewayEnv = () => ({
   XDG_CONFIG_HOME: OPENCLAW_DIR,
 });
 
-const isOnboarded = () => fs.existsSync(`${OPENCLAW_DIR}/openclaw.json`);
+const isOnboarded = () => {
+  const configPath = `${OPENCLAW_DIR}/openclaw.json`;
+  if (!fs.existsSync(configPath)) return false;
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
+    const primaryModel = String(
+      config?.agents?.defaults?.model?.primary || "",
+    ).trim();
+    return primaryModel.includes("/");
+  } catch {
+    return false;
+  }
+};
 
 const isGatewayRunning = () =>
   new Promise((resolve) => {
@@ -133,6 +145,19 @@ const launchGatewayProcess = () => {
   return child;
 };
 
+const markManagedGatewayExitExpected = () => {
+  if (
+    !gatewayChild ||
+    gatewayChild.exitCode !== null ||
+    gatewayChild.killed ||
+    !gatewayChild.pid
+  ) {
+    return false;
+  }
+  expectedExitPids.add(gatewayChild.pid);
+  return true;
+};
+
 const startGateway = async () => {
   if (!isOnboarded()) {
     console.log("[alphaclaw] Not onboarded yet — skipping gateway start");
@@ -148,34 +173,8 @@ const startGateway = async () => {
 
 const restartGateway = (reloadEnv) => {
   reloadEnv();
-  if (gatewayChild && gatewayChild.exitCode === null && !gatewayChild.killed) {
-    console.log("[alphaclaw] Stopping managed gateway process...");
-    try {
-      expectedExitPids.add(gatewayChild.pid);
-      gatewayChild.kill("SIGTERM");
-      gatewayChild = null;
-    } catch (e) {
-      console.log(
-        `[alphaclaw] Failed to stop managed gateway process: ${e.message}`,
-      );
-      runGatewayCmd("stop");
-    }
-  } else {
-    runGatewayCmd("stop");
-  }
-  runGatewayCmd("start");
-  const launchWhenReady = async () => {
-    const waitUntil = Date.now() + 8000;
-    while (Date.now() < waitUntil) {
-      if (!(await isGatewayRunning())) break;
-      await new Promise((resolve) => setTimeout(resolve, 250));
-    }
-    console.log(
-      "[alphaclaw] Starting openclaw gateway with refreshed environment...",
-    );
-    launchGatewayProcess();
-  };
-  void launchWhenReady();
+  markManagedGatewayExitExpected();
+  runGatewayCmd("--force");
 };
 
 const attachGatewaySignalHandlers = () => {

package/lib/server/onboarding/index.js

@@ -29,6 +29,7 @@ const createOnboardingService = ({
   resolveGithubRepoUrl,
   resolveModelProvider,
   hasCodexOauthProfile,
+  authProfiles,
   ensureGatewayProxyConfig,
   getBaseUrl,
   startGateway,
@@ -148,6 +149,7 @@ const createOnboardingService = ({
     } catch {}
 
     writeSanitizedOpenclawConfig({ fs, openclawDir: OPENCLAW_DIR, varMap });
+    authProfiles?.syncConfigAuthReferencesForAgent?.();
     ensureGatewayProxyConfig(getBaseUrl(req));
 
     installControlUiSkill({

package/lib/server/onboarding/validation.js

@@ -46,7 +46,7 @@ const validateOnboardingInput = ({ vars, modelKey, resolveModelProvider, hasCode
   const hasAiByProvider = {
     anthropic: !!(varMap.ANTHROPIC_API_KEY || varMap.ANTHROPIC_TOKEN),
     openai: !!varMap.OPENAI_API_KEY,
-    "openai-codex": !!(hasCodexOauth || varMap.OPENAI_API_KEY),
+    "openai-codex": !!hasCodexOauth,
     google: !!varMap.GEMINI_API_KEY,
   };
   const hasAnyAi = !!(
@@ -68,7 +68,7 @@ const validateOnboardingInput = ({ vars, modelKey, resolveModelProvider, hasCode
       return {
         ok: false,
         status: 400,
-        error: "Connect OpenAI Codex OAuth or provide OPENAI_API_KEY before continuing",
+        error: "Connect OpenAI Codex OAuth before continuing",
       };
     }
     return {

package/lib/server/routes/models.js

@@ -19,7 +19,49 @@ const registerModelRoutes = ({
   parseJsonFromNoisyOutput,
   normalizeOnboardingModels,
   authProfiles,
+  readEnvFile,
+  writeEnvFile,
+  reloadEnv,
 }) => {
+  const upsertEnvVar = (items, key, value) => {
+    const next = Array.isArray(items) ? [...items] : [];
+    const existing = next.find((entry) => entry.key === key);
+    if (existing) {
+      existing.value = value;
+      return next;
+    }
+    next.push({ key, value });
+    return next;
+  };
+
+  const syncEnvVarsForProfiles = (profiles) => {
+    if (
+      !Array.isArray(profiles) ||
+      typeof readEnvFile !== "function" ||
+      typeof writeEnvFile !== "function" ||
+      typeof reloadEnv !== "function"
+    ) {
+      return;
+    }
+    let nextEnvVars = readEnvFile();
+    let changed = false;
+    for (const profile of profiles) {
+      if (profile?.type !== "api_key") continue;
+      const envKey = authProfiles.getEnvVarForApiKeyProvider?.(profile.provider);
+      const envValue = String(profile?.key || "").trim();
+      if (!envKey || !envValue) continue;
+      const prevValue = String(
+        nextEnvVars.find((entry) => entry.key === envKey)?.value || "",
+      );
+      if (prevValue === envValue) continue;
+      nextEnvVars = upsertEnvVar(nextEnvVars, envKey, envValue);
+      changed = true;
+    }
+    if (!changed) return;
+    writeEnvFile(nextEnvVars);
+    reloadEnv();
+  };
+
   // ── Existing CLI-backed catalog/status routes ──
 
   app.get("/api/models", async (req, res) => {
@@ -134,6 +176,7 @@ const registerModelRoutes = ({
             authProfiles.upsertProfile(profileId, credential, agentId);
           }
         }
+        syncEnvVarsForProfiles(profiles);
       }
 
       if (authOrder && typeof authOrder === "object") {
@@ -200,6 +243,7 @@ const registerModelRoutes = ({
     try {
       const agentId = req.query.agentId || undefined;
       authProfiles.upsertProfile(profileId, credential, agentId);
+      syncEnvVarsForProfiles([{ id: profileId, ...credential }]);
       res.json({ ok: true });
     } catch (err) {
       res

package/lib/server/routes/onboarding.js

@@ -71,6 +71,7 @@ const registerOnboardingRoutes = ({
   resolveGithubRepoUrl,
   resolveModelProvider,
   hasCodexOauthProfile,
+  authProfiles,
   ensureGatewayProxyConfig,
   getBaseUrl,
   startGateway,
@@ -85,6 +86,7 @@ const registerOnboardingRoutes = ({
     resolveGithubRepoUrl,
     resolveModelProvider,
     hasCodexOauthProfile,
+    authProfiles,
     ensureGatewayProxyConfig,
     getBaseUrl,
     startGateway,

package/lib/server/routes/system.js

@@ -21,6 +21,7 @@ const registerSystemRoutes = ({
   OPENCLAW_DIR,
   restartRequiredState,
   topicRegistry,
+  authProfiles,
 }) => {
   let envRestartPending = false;
   const kEnvVarsReservedForUserInput = new Set([
@@ -93,6 +94,34 @@ const registerSystemRoutes = ({
     }
     return key || "Session";
   };
+  const syncApiKeyAuthProfilesFromEnvVars = (nextEnvVars) => {
+    if (!authProfiles) return;
+    const envMap = new Map(
+      (nextEnvVars || []).map((entry) => [
+        String(entry?.key || "").trim(),
+        String(entry?.value || ""),
+      ]),
+    );
+    const providers = [
+      "anthropic",
+      "openai",
+      "google",
+      "mistral",
+      "voyage",
+      "groq",
+      "deepgram",
+    ];
+    for (const provider of providers) {
+      const envKey = authProfiles.getEnvVarForApiKeyProvider?.(provider);
+      if (!envKey) continue;
+      const value = envMap.get(envKey) || "";
+      if (!value.trim()) {
+        authProfiles.removeApiKeyProfileForEnvVar?.(provider);
+        continue;
+      }
+      authProfiles.upsertApiKeyProfileForEnvVar(provider, value);
+    }
+  };
   const listSendableAgentSessions = async () => {
     const result = await clawCmd("sessions --json", { quiet: true });
     if (!result.ok) {
@@ -168,6 +197,7 @@ const registerSystemRoutes = ({
     }
     return getSystemCronStatus();
   };
+  const isVisibleInEnvars = (def) => def?.visibleInEnvars !== false;
 
   app.get("/api/env", (req, res) => {
     const fileVars = readEnvFile();
@@ -175,6 +205,7 @@ const registerSystemRoutes = ({
 
     for (const def of kKnownVars) {
       if (isReservedUserEnvVar(def.key)) continue;
+      if (!isVisibleInEnvars(def)) continue;
       const fileEntry = fileVars.find((v) => v.key === def.key);
       const value = fileEntry?.value || "";
       merged.push({
@@ -183,6 +214,7 @@ const registerSystemRoutes = ({
         label: def.label,
         group: def.group,
         hint: def.hint,
+        features: def.features,
         source: fileEntry?.value ? "env_file" : "unset",
         editable: true,
       });
@@ -232,10 +264,19 @@ const registerSystemRoutes = ({
     const existingLockedVars = readEnvFile().filter((v) =>
       isReservedUserEnvVar(v.key),
     );
-    const nextEnvVars = [...filtered, ...existingLockedVars];
+    const hiddenKnownVarKeys = new Set(
+      kKnownVars
+        .filter((def) => !isReservedUserEnvVar(def.key) && !isVisibleInEnvars(def))
+        .map((def) => def.key),
+    );
+    const existingHiddenKnownVars = readEnvFile().filter((v) =>
+      hiddenKnownVarKeys.has(v.key),
+    );
+    const nextEnvVars = [...filtered, ...existingHiddenKnownVars, ...existingLockedVars];
     syncChannelConfig(nextEnvVars, "remove");
     writeEnvFile(nextEnvVars);
     const changed = reloadEnv();
+    syncApiKeyAuthProfilesFromEnvVars(nextEnvVars);
     if (changed && isOnboarded()) {
       envRestartPending = true;
     }

package/lib/server.js

@@ -204,6 +204,9 @@ registerModelRoutes({
   parseJsonFromNoisyOutput,
   normalizeOnboardingModels,
   authProfiles,
+  readEnvFile,
+  writeEnvFile,
+  reloadEnv,
 });
 registerOnboardingRoutes({
   app,
@@ -217,6 +220,7 @@ registerOnboardingRoutes({
   resolveGithubRepoUrl,
   resolveModelProvider,
   hasCodexOauthProfile: authProfiles.hasCodexOauthProfile,
+  authProfiles,
   ensureGatewayProxyConfig,
   getBaseUrl,
   startGateway,
@@ -242,6 +246,7 @@ registerSystemRoutes({
   OPENCLAW_DIR: constants.OPENCLAW_DIR,
   restartRequiredState,
   topicRegistry,
+  authProfiles,
 });
 registerBrowseRoutes({
   app,

package/lib/setup/env.template

@@ -6,6 +6,7 @@ ANTHROPIC_API_KEY=
 ANTHROPIC_TOKEN=
 OPENAI_API_KEY=
 GEMINI_API_KEY=
+ELEVENLABS_API_KEY=
 
 # --- GitHub (required) ---
 GITHUB_TOKEN=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.4.6-beta.5",
+  "version": "0.4.6-beta.6",
   "publishConfig": {
     "access": "public"
   },