@chrysb/alphaclaw 0.1.14 → 0.1.16

package/lib/public/css/theme.css

@@ -10,6 +10,7 @@
   --text-dim: #383d47;
   --accent: #63ebff;
   --accent-dim: rgba(99, 235, 255, 0.4);
+  --accent-link: rgba(99, 235, 255, 0.6);
 }
 
 html, body { height: 100%; }

package/lib/public/js/app.js

@@ -257,17 +257,17 @@ function App() {
   useEffect(() => {
     if (!onboarded) return;
     let active = true;
-    const check = async () => {
+    const check = async (refresh = false) => {
       try {
-        const data = await fetchAlphaclawVersion(false);
+        const data = await fetchAlphaclawVersion(refresh);
         if (!active) return;
         setAcVersion(data.currentVersion || null);
         setAcLatest(data.latestVersion || null);
         setAcHasUpdate(!!data.hasUpdate);
       } catch {}
     };
-    check();
-    const id = setInterval(check, 5 * 60 * 1000);
+    check(true);
+    const id = setInterval(() => check(false), 5 * 60 * 1000);
     return () => { active = false; clearInterval(id); };
   }, [onboarded]);
 
@@ -366,11 +366,15 @@ function App() {
 
       <div class="app-content">
         <div class="max-w-2xl w-full mx-auto space-y-4">
-          ${tab === "general"
-            ? html`<${GeneralTab} onSwitchTab=${setTab} />`
-            : tab === "models"
-            ? html`<${Models} />`
-            : html`<${Envars} />`}
+          <div style=${{ display: tab === "general" ? "" : "none" }}>
+            <${GeneralTab} onSwitchTab=${setTab} />
+          </div>
+          <div style=${{ display: tab === "models" ? "" : "none" }}>
+            <${Models} />
+          </div>
+          <div style=${{ display: tab === "envars" ? "" : "none" }}>
+            <${Envars} />
+          </div>
         </div>
       </div>
 

package/lib/public/js/components/credentials-modal.js

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import { useState, useRef } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { saveGoogleCredentials } from "../lib/api.js";
+import { SecretInput } from "./secret-input.js";
 const html = htm.bind(h);
 
 export const CredentialsModal = ({ visible, onClose, onSaved }) => {
@@ -110,7 +111,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
               href="https://console.cloud.google.com/apis/credentials"
               target="_blank"
               class="hover:text-white"
-              style="color: var(--accent)"
+              style="color: rgba(99, 235, 255, 0.6)"
               >Create one →</a
             >
           </p>
@@ -148,7 +149,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/projectcreate"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Create a Google Cloud project</a
                         >${" "}(or use existing)
                       </li>
@@ -157,7 +158,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/auth/audience"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >OAuth consent screen</a
                         >${" "}→ set to <strong>External</strong>
                       </li>
@@ -166,7 +167,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/auth/audience"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Test users</a
                         >, <strong>add your own email</strong>
                       </li>
@@ -175,7 +176,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/apis/library"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Enable APIs</a
                         >${" "}for the services you selected below
                       </li>
@@ -184,7 +185,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/apis/credentials"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Credentials</a
                         >${" "}→ Create OAuth 2.0 Client ID (Web application)
                       </li>
@@ -195,7 +196,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                         Copy Client ID + Secret (or download credentials JSON)
                       </li>
                     </ol>
-                    <p class="mt-3" style="color: rgba(99, 235, 255, 0.6)">
+                    <p class="mt-3 text-yellow-500/80">
                       ⚠️ App will be in "Testing" mode. Only emails added as
                       Test Users can sign in (up to 100).
                     </p>
@@ -209,7 +210,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/projectcreate"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Create a Google Cloud project</a
                         >${" "}(or use existing)
                       </li>
@@ -218,7 +219,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/auth/audience"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >OAuth consent screen</a
                         >${" "}→ set to <strong>Internal</strong> (Workspace
                         only)
@@ -228,7 +229,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/apis/library"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Enable APIs</a
                         >${" "}for the services you selected below
                       </li>
@@ -237,7 +238,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                           href="https://console.cloud.google.com/apis/credentials"
                           target="_blank"
                           class="hover:text-white"
-                          style="color: var(--accent)"
+                          style="color: rgba(99, 235, 255, 0.6)"
                           >Credentials</a
                         >${" "}→ Create OAuth 2.0 Client ID (Web application)
                       </li>
@@ -248,7 +249,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
                         Copy Client ID + Secret (or download credentials JSON)
                       </li>
                     </ol>
-                    <p class="mt-3" style="color: rgba(99, 235, 255, 0.6)">
+                    <p class="mt-3 text-green-500/80">
                       ✓ Internal apps skip test users and verification. Only
                       users in your Workspace org can authorize this Google app.
                     </p>
@@ -285,24 +286,22 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
           </div>
           <div>
             <label class="text-sm text-gray-400 block mb-1">Client ID</label>
-            <input
-              type="text"
+            <${SecretInput}
               value=${clientId}
               onInput=${(e) => setClientId(e.target.value)}
               placeholder="xxxx.apps.googleusercontent.com"
-              class="w-full bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+              inputClass="flex-1 bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
             />
           </div>
           <div>
             <label class="text-sm text-gray-400 block mb-1"
               >Client Secret</label
             >
-            <input
-              type="password"
+            <${SecretInput}
               value=${clientSecret}
               onInput=${(e) => setClientSecret(e.target.value)}
               placeholder="GOCSPX-..."
-              class="w-full bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
+              inputClass="flex-1 bg-black/40 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-gray-500"
             />
           </div>
           <div>

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

@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars, saveEnvVars, restartGateway } from "../lib/api.js";
 import { showToast } from "./toast.js";
+import { SecretInput } from "./secret-input.js";
 const html = htm.bind(h);
 
 const kGroupLabels = {
@@ -15,22 +16,20 @@ const kGroupLabels = {
 const kGroupOrder = ["github", "channels", "tools", "custom"];
 
 const kHintByKey = {
-  ANTHROPIC_API_KEY: html`from <a href="https://console.anthropic.com" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">console.anthropic.com</a>`,
+  ANTHROPIC_API_KEY: html`from <a href="https://console.anthropic.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.anthropic.com</a>`,
   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: rgba(99, 235, 255, 0.6)">platform.openai.com</a>`,
-  GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">aistudio.google.com</a>`,
-  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: rgba(99, 235, 255, 0.6)">github settings</a>`,
+  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>`,
+  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: rgba(99, 235, 255, 0.6)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">full guide</a>`,
-  DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">full guide</a>`,
-  BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: rgba(99, 235, 255, 0.6)">brave.com/search/api</a> — free tier available`,
+  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>`,
+  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 EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
-  const [visible, setVisible] = useState(false);
-  const isSecret = !!envVar.value;
   const hint = getHintContent(envVar);
 
   return html`
@@ -45,23 +44,14 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1">
-          <input
-            type=${isSecret && !visible ? "password" : "text"}
+          <${SecretInput}
             value=${envVar.value}
-            placeholder=${envVar.value ? "" : "not set"}
             onInput=${(e) => onChange(envVar.key, e.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+            placeholder=${envVar.value ? "" : "not set"}
+            isSecret=${!!envVar.value}
+            inputClass="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
             disabled=${disabled}
           />
-          ${isSecret
-            ? html`<button
-                onclick=${() => setVisible(!visible)}
-                class="text-gray-500 hover:text-gray-300 px-1 text-xs shrink-0"
-                title=${visible ? "Hide" : "Show"}
-              >
-                ${visible ? "Hide" : "Show"}
-              </button>`
-            : null}
           ${envVar.group === "custom"
             ? html`<button
                 onclick=${() => onDelete(envVar.key)}

package/lib/public/js/components/onboarding/welcome-config.js

@@ -0,0 +1,108 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { kAllAiAuthFields } from "../../lib/model-config.js";
+
+const html = htm.bind(h);
+
+export const kWelcomeGroups = [
+  {
+    id: "ai",
+    title: "Primary Agent Model",
+    description: "Choose your main model and authenticate its provider",
+    fields: kAllAiAuthFields,
+    validate: (vals, ctx = {}) => !!(vals.MODEL_KEY && ctx.hasAi),
+  },
+  {
+    id: "github",
+    title: "GitHub",
+    description: "Backs up your agent's config and workspace",
+    fields: [
+      {
+        key: "GITHUB_WORKSPACE_REPO",
+        label: "Workspace Repo",
+        hint: "A new private repo will be created for you",
+        placeholder: "username/my-agent",
+        isText: true,
+      },
+      {
+        key: "GITHUB_TOKEN",
+        label: "Personal Access Token",
+        hint: html`Create a classic PAT on${" "}<a
+            href="https://github.com/settings/tokens"
+            target="_blank"
+            class="hover:underline"
+            style="color: var(--accent-link)"
+            >GitHub settings</a
+          >${" "}with${" "}<code class="text-xs bg-black/30 px-1 rounded"
+            >repo</code
+          >${" "}scope`,
+        placeholder: "ghp_...",
+      },
+    ],
+    validate: (vals) => !!(vals.GITHUB_TOKEN && vals.GITHUB_WORKSPACE_REPO),
+  },
+  {
+    id: "channels",
+    title: "Channels",
+    description: "At least one is required to talk to your agent",
+    fields: [
+      {
+        key: "TELEGRAM_BOT_TOKEN",
+        label: "Telegram Bot Token",
+        hint: 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
+          >`,
+        placeholder: "123456789:AAH...",
+      },
+      {
+        key: "DISCORD_BOT_TOKEN",
+        label: "Discord Bot Token",
+        hint: 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
+          >`,
+        placeholder: "MTQ3...",
+      },
+    ],
+    validate: (vals) => !!(vals.TELEGRAM_BOT_TOKEN || vals.DISCORD_BOT_TOKEN),
+  },
+  {
+    id: "tools",
+    title: "Tools (optional)",
+    description: "Enable extra capabilities for your agent",
+    fields: [
+      {
+        key: "BRAVE_API_KEY",
+        label: "Brave Search API Key",
+        hint: 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`,
+        placeholder: "BSA...",
+      },
+    ],
+    validate: () => true,
+  },
+];

package/lib/public/js/components/onboarding/welcome-form-step.js

@@ -0,0 +1,283 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { SecretInput } from "../secret-input.js";
+
+const html = htm.bind(h);
+
+export const WelcomeFormStep = ({
+  activeGroup,
+  vals,
+  hasAi,
+  setValue,
+  modelOptions,
+  modelsLoading,
+  modelsError,
+  canToggleFullCatalog,
+  showAllModels,
+  setShowAllModels,
+  selectedProvider,
+  codexLoading,
+  codexStatus,
+  startCodexAuth,
+  handleCodexDisconnect,
+  codexAuthStarted,
+  codexAuthWaiting,
+  codexManualInput,
+  setCodexManualInput,
+  completeCodexAuth,
+  codexExchanging,
+  visibleAiFieldKeys,
+  error,
+  step,
+  totalGroups,
+  currentGroupValid,
+  goBack,
+  goNext,
+  loading,
+  allValid,
+  handleSubmit,
+}) => html`
+  <div class="flex items-center justify-between">
+    <div>
+      <h2 class="text-sm font-medium text-gray-200">${activeGroup.title}</h2>
+      <p class="text-xs text-gray-500">${activeGroup.description}</p>
+    </div>
+    ${activeGroup.validate(vals, { hasAi })
+      ? html`<span
+          class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-900/50 text-green-400"
+          >✓</span
+        >`
+      : activeGroup.id !== "tools"
+        ? html`<span
+            class="text-xs font-medium px-2 py-0.5 rounded-full bg-yellow-900/50 text-yellow-400"
+            >Required</span
+          >`
+        : null}
+  </div>
+
+  ${activeGroup.id === "ai" &&
+  html`
+    <div class="space-y-1">
+      <label class="text-xs font-medium text-gray-400">Model</label>
+      <select
+        value=${vals.MODEL_KEY || ""}
+        onInput=${(e) => setValue("MODEL_KEY", e.target.value)}
+        class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
+      >
+        <option value="">Select a model</option>
+        ${modelOptions.map(
+          (model) => html`
+            <option value=${model.key}>${model.label || model.key}</option>
+          `,
+        )}
+      </select>
+      <p class="text-xs text-gray-600">
+        ${modelsLoading
+          ? "Loading model catalog..."
+          : modelsError
+            ? modelsError
+            : ""}
+      </p>
+      ${canToggleFullCatalog &&
+      html`
+        <button
+          type="button"
+          onclick=${() => setShowAllModels((prev) => !prev)}
+          class="text-xs text-gray-500 hover:text-gray-300"
+        >
+          ${showAllModels
+            ? "Show recommended models"
+            : "Show full model catalog"}
+        </button>
+      `}
+    </div>
+  `}
+  ${activeGroup.id === "ai" &&
+  selectedProvider === "openai-codex" &&
+  html`
+    <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs text-gray-400">Codex OAuth</span>
+        ${codexLoading
+          ? html`<span class="text-xs text-gray-500">Checking...</span>`
+          : codexStatus.connected
+            ? html`<span class="text-xs text-green-400">Connected</span>`
+            : html`<span class="text-xs text-yellow-400">Not connected</span>`}
+      </div>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          onclick=${startCodexAuth}
+          class="text-xs font-medium px-3 py-1.5 rounded-lg ${codexStatus.connected
+            ? "border border-border text-gray-300 hover:border-gray-500"
+            : "bg-white text-black hover:opacity-85"}"
+        >
+          ${codexStatus.connected ? "Reconnect Codex" : "Connect Codex OAuth"}
+        </button>
+        ${codexStatus.connected &&
+        html`
+          <button
+            type="button"
+            onclick=${handleCodexDisconnect}
+            class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+          >
+            Disconnect
+          </button>
+        `}
+      </div>
+      ${!codexStatus.connected &&
+      codexAuthStarted &&
+      html`
+        <div class="space-y-1 pt-1">
+          <p class="text-xs text-gray-500">
+            ${codexAuthWaiting
+              ? "Complete login in the popup, then paste the full redirect URL from the address bar (starts with "
+              : "Paste the full redirect URL from the address bar (starts with "}
+            <code class="text-xs bg-black/30 px-1 rounded"
+              >http://localhost:1455/auth/callback</code
+            >) ${codexAuthWaiting ? " to finish setup." : " to finish setup."}
+          </p>
+          <input
+            type="text"
+            value=${codexManualInput}
+            onInput=${(e) => setCodexManualInput(e.target.value)}
+            placeholder="http://localhost:1455/auth/callback?code=...&state=..."
+            class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
+          />
+          <button
+            type="button"
+            onclick=${completeCodexAuth}
+            disabled=${!codexManualInput.trim() || codexExchanging}
+            class="text-xs font-medium px-3 py-1.5 rounded-lg ${!codexManualInput.trim() ||
+            codexExchanging
+              ? "bg-gray-700 text-gray-400 cursor-not-allowed"
+              : "bg-white text-black hover:opacity-85"}"
+          >
+            ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
+          </button>
+        </div>
+      `}
+    </div>
+  `}
+  ${(activeGroup.id === "ai"
+    ? activeGroup.fields.filter((field) => visibleAiFieldKeys.has(field.key))
+    : activeGroup.fields
+  ).map(
+    (field) => html`
+      <div class="space-y-1" key=${field.key}>
+        <label class="text-xs font-medium text-gray-400">${field.label}</label>
+        <${SecretInput}
+          key=${field.key}
+          value=${vals[field.key] || ""}
+          onInput=${(e) => setValue(field.key, e.target.value)}
+          placeholder=${field.placeholder || ""}
+          isSecret=${!field.isText}
+          inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+        />
+        <p class="text-xs text-gray-600">${field.hint}</p>
+      </div>
+    `,
+  )}
+  ${error
+    ? html`<div
+        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+      >
+        ${error}
+      </div>`
+    : null}
+  ${step === totalGroups - 1 && (!vals.OPENAI_API_KEY || !vals.GEMINI_API_KEY)
+    ? html`
+        ${!vals.OPENAI_API_KEY
+          ? html`<div class="space-y-1">
+              <label class="text-xs font-medium text-gray-400"
+                >OpenAI API Key</label
+              >
+              <${SecretInput}
+                value=${vals.OPENAI_API_KEY || ""}
+                onInput=${(e) => setValue("OPENAI_API_KEY", e.target.value)}
+                placeholder="sk-..."
+                isSecret=${true}
+                inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+              />
+              <p class="text-xs text-gray-600">
+                Used for memory embeddings -${" "}
+                <a
+                  href="https://platform.openai.com"
+                  target="_blank"
+                  class="hover:underline"
+                  style="color: var(--accent-link)"
+                  >get key</a
+                >
+              </p>
+            </div>`
+          : null}
+        ${!vals.GEMINI_API_KEY
+          ? html`<div class="space-y-1">
+              <label class="text-xs font-medium text-gray-400"
+                >Gemini API Key</label
+              >
+              <${SecretInput}
+                value=${vals.GEMINI_API_KEY || ""}
+                onInput=${(e) => setValue("GEMINI_API_KEY", e.target.value)}
+                placeholder="AI..."
+                isSecret=${true}
+                inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+              />
+              <p class="text-xs text-gray-600">
+                Used for memory embeddings and Nano Banana -${" "}
+                <a
+                  href="https://aistudio.google.com"
+                  target="_blank"
+                  class="hover:underline"
+                  style="color: var(--accent-link)"
+                  >get key</a
+                >
+              </p>
+            </div>`
+          : null}
+      `
+    : null}
+
+  <div class="grid grid-cols-2 gap-2 pt-3">
+    ${step < totalGroups - 1
+      ? html`
+          ${step > 0
+            ? html`<button
+                onclick=${goBack}
+                class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+              >
+                Back
+              </button>`
+            : html`<div class="w-full"></div>`}
+          <button
+            onclick=${goNext}
+            disabled=${!currentGroupValid}
+            class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ${currentGroupValid
+              ? "bg-white text-black hover:opacity-85"
+              : "bg-gray-800 text-gray-500 cursor-not-allowed"}"
+          >
+            Next
+          </button>
+        `
+      : html`
+          ${step > 0
+            ? html`<button
+                onclick=${goBack}
+                class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+              >
+                Back
+              </button>`
+            : html`<div class="w-full"></div>`}
+          <button
+            onclick=${handleSubmit}
+            disabled=${!allValid || loading}
+            class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ${allValid &&
+            !loading
+              ? "bg-white text-black hover:opacity-85"
+              : "bg-gray-800 text-gray-500 cursor-not-allowed"}"
+          >
+            ${loading ? "Starting..." : "Complete Setup"}
+          </button>
+        `}
+  </div>
+`;