@chrysb/alphaclaw 0.1.14 → 0.1.15

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

@@ -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>
+`;

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

@@ -0,0 +1,57 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const WelcomeHeader = ({
+  groups,
+  step,
+  isSetupStep,
+  stepNumber,
+  activeStepLabel,
+  vals,
+  hasAi,
+}) => {
+  const progressSteps = [...groups, { id: "setup", title: "Initializing" }];
+
+  return html`
+  <div class="text-center mb-1">
+    <img
+      src="./img/logo.svg"
+      alt="alphaclaw"
+      class="mx-auto mb-3"
+      width="32"
+      height="33"
+    />
+    <h1 class="text-2xl font-semibold mb-2">Setup</h1>
+    <p style="color: var(--text-muted)" class="text-sm">
+      Let's get your agent running
+    </p>
+    <p class="text-xs my-2" style="color: var(--text-dim)">
+      Step ${stepNumber} of ${progressSteps.length} - ${activeStepLabel}
+    </p>
+  </div>
+
+  <div class="flex items-center gap-2">
+    ${progressSteps.map((group, idx) => {
+      const isFinalStep = idx === progressSteps.length - 1;
+      const isActive = idx === step;
+      const isComplete = isFinalStep
+        ? isSetupStep
+        : idx < step && group.validate(vals, { hasAi });
+      const bg = isActive
+        ? "rgba(99, 235, 255, 0.9)"
+        : isComplete
+          ? "rgba(99, 235, 255, 0.55)"
+          : "rgba(82, 94, 122, 0.45)";
+      return html`
+        <div
+          class="h-1 flex-1 rounded-full transition-colors"
+          style=${{ background: bg }}
+          title=${group.title}
+        ></div>
+      `;
+    })}
+  </div>
+`;
+};

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

@@ -0,0 +1,45 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const WelcomeSetupStep = ({ error, loading, onRetry }) => html`
+  <div class="py-10 flex flex-col items-center text-center gap-4">
+    <svg
+      class="animate-spin h-8 w-8 text-white"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+    <h3 class="text-lg font-semibold text-white">Initializing OpenClaw...</h3>
+    <p class="text-sm text-gray-500">This could take 10-15 seconds</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>
+      <button
+        onclick=${onRetry}
+        disabled=${loading}
+        class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all ${loading
+          ? "bg-gray-800 text-gray-500 cursor-not-allowed"
+          : "bg-white text-black hover:opacity-85"}"
+      >
+        ${loading ? "Retrying..." : "Retry"}
+      </button>`
+    : null}
+`;

package/lib/public/js/components/scope-picker.js

@@ -46,7 +46,7 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
         apiIndicator = html`<span class="text-gray-500 text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full animate-spin"></span></span>`;
       } else if (api) {
         if (api.status === 'ok') {
-          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-green-500 hover:text-green-300 text-xs">✓ API</a>`;
+          apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-green-500 hover:text-green-300 text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;
         } else if (api.status === 'not_enabled') {
           apiIndicator = html`<a href=${api.enableUrl} target="_blank" class="text-red-400 hover:text-red-300 text-xs underline">Enable API</a>`;
         } else if (api.status === 'error') {

package/lib/public/js/components/secret-input.js

@@ -0,0 +1,45 @@
+import { h } from "https://esm.sh/preact";
+import { useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+const html = htm.bind(h);
+
+/**
+ * Reusable input with show/hide toggle for secret values.
+ *
+ * Props:
+ *   value, onInput, placeholder, inputClass, disabled
+ *   isSecret  – treat as password field (default true)
+ */
+export const SecretInput = ({
+  value = "",
+  onInput,
+  placeholder = "",
+  inputClass = "",
+  disabled = false,
+  isSecret = true,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const showToggle = isSecret;
+
+  return html`
+    <div class="flex-1 min-w-0 flex items-center gap-1">
+      <input
+        type=${isSecret && !visible ? "password" : "text"}
+        value=${value}
+        placeholder=${placeholder}
+        onInput=${onInput}
+        disabled=${disabled}
+        class=${inputClass}
+      />
+      ${showToggle
+        ? html`<button
+            type="button"
+            onclick=${() => setVisible((v) => !v)}
+            class="text-gray-500 hover:text-gray-300 px-1 text-xs shrink-0"
+          >
+            ${visible ? "Hide" : "Show"}
+          </button>`
+        : null}
+    </div>
+  `;
+};

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

@@ -12,113 +12,24 @@ import {
   getModelProvider,
   getFeaturedModels,
   getVisibleAiFieldKeys,
-  kAllAiAuthFields,
 } from "../lib/model-config.js";
+import { kWelcomeGroups } from "./onboarding/welcome-config.js";
+import { WelcomeHeader } from "./onboarding/welcome-header.js";
+import { WelcomeSetupStep } from "./onboarding/welcome-setup-step.js";
+import { WelcomeFormStep } from "./onboarding/welcome-form-step.js";
 const html = htm.bind(h);
-
-const kGroups = [
-  {
-    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_TOKEN",
-        label: "Personal Access Token",
-        hint: html`Create a classic PAT at${" "}<a
-            href="https://github.com/settings/tokens"
-            target="_blank"
-            class="hover:underline" style="color: var(--accent)"
-            >github.com/settings/tokens</a
-          >${" "}with${" "}<code class="text-xs bg-black/30 px-1 rounded">repo</code>${" "}scope`,
-        placeholder: "ghp_...",
-      },
-      {
-        key: "GITHUB_WORKSPACE_REPO",
-        label: "Workspace Repo",
-        hint: "A new private repo will be created for you",
-        placeholder: "username/my-agent",
-        isText: true,
-      },
-    ],
-    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)"
-            >@BotFather</a
-          >${" "}·${" "}<a
-            href="https://docs.openclaw.ai/channels/telegram"
-            target="_blank"
-            class="hover:underline" style="color: var(--accent)"
-            >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)"
-            >Developer Portal</a
-          >${" "}·${" "}<a
-            href="https://docs.openclaw.ai/channels/discord"
-            target="_blank"
-            class="hover:underline" style="color: var(--accent)"
-            >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)"
-            >brave.com/search/api</a
-          >${" "}-${" "}free tier available`,
-        placeholder: "BSA...",
-      },
-    ],
-    validate: () => true,
-  },
-];
+const kOnboardingStorageKey = "openclaw_setup";
+const kOnboardingStepKey = "_step";
 
 export const Welcome = ({ onComplete }) => {
-  const [vals, setVals] = useState(() => {
+  const [initialSetupState] = useState(() => {
     try {
-      return JSON.parse(localStorage.getItem("openclaw_setup") || "{}");
+      return JSON.parse(localStorage.getItem(kOnboardingStorageKey) || "{}");
     } catch {
       return {};
     }
   });
+  const [vals, setVals] = useState(() => ({ ...initialSetupState }));
   const [models, setModels] = useState([]);
   const [modelsLoading, setModelsLoading] = useState(true);
   const [modelsError, setModelsError] = useState(null);
@@ -133,10 +44,6 @@ export const Welcome = ({ onComplete }) => {
   const [error, setError] = useState(null);
   const codexPopupPollRef = useRef(null);
 
-  useEffect(() => {
-    localStorage.setItem("openclaw_setup", JSON.stringify(vals));
-  }, [vals]);
-
   useEffect(() => {
     fetchModels()
       .then((result) => {
@@ -225,7 +132,31 @@ export const Welcome = ({ onComplete }) => {
             ? !!(codexStatus.connected || vals.OPENAI_API_KEY)
             : false;
 
-  const allValid = kGroups.every((g) => g.validate(vals, { hasAi }));
+  const allValid = kWelcomeGroups.every((g) => g.validate(vals, { hasAi }));
+  const kFinalSetupStep = kWelcomeGroups.length;
+  const [step, setStep] = useState(() => {
+    const parsedStep = Number.parseInt(
+      String(initialSetupState?.[kOnboardingStepKey] || ""),
+      10,
+    );
+    if (!Number.isFinite(parsedStep)) return 0;
+    return Math.max(0, Math.min(kFinalSetupStep, parsedStep));
+  });
+  const isSetupStep = step === kFinalSetupStep;
+  const activeGroup = !isSetupStep ? kWelcomeGroups[step] : null;
+  const currentGroupValid = activeGroup
+    ? activeGroup.validate(vals, { hasAi })
+    : false;
+
+  useEffect(() => {
+    localStorage.setItem(
+      kOnboardingStorageKey,
+      JSON.stringify({
+        ...vals,
+        [kOnboardingStepKey]: step,
+      }),
+    );
+  }, [vals, step]);
 
   const startCodexAuth = () => {
     if (codexStatus.connected) return;
@@ -287,6 +218,7 @@ export const Welcome = ({ onComplete }) => {
 
   const handleSubmit = async () => {
     if (!allValid || loading) return;
+    setStep(kFinalSetupStep);
     setLoading(true);
     setError(null);
 
@@ -297,7 +229,7 @@ export const Welcome = ({ onComplete }) => {
         .map(([key, value]) => ({ key, value }));
       const result = await runOnboard(vars, vals.MODEL_KEY);
       if (!result.ok) throw new Error(result.error || "Onboarding failed");
-      localStorage.removeItem("openclaw_setup");
+      localStorage.removeItem(kOnboardingStorageKey);
       onComplete();
     } catch (err) {
       console.error("Onboard error:", err);
@@ -306,237 +238,76 @@ export const Welcome = ({ onComplete }) => {
     }
   };
 
-  if (loading) {
-    return html`
-      <div
-        class="fixed inset-0 flex items-center justify-center z-50"
-        style="background: var(--bg)"
-      >
-        <div class="flex flex-col items-center gap-4">
-          <svg
-            class="animate-spin h-8 w-8 text-white"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <circle
-              class="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              stroke-width="4"
-            />
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-            />
-          </svg>
-          <h2 class="text-lg font-semibold text-white">
-            Initializing <span style="color: var(--accent)">alpha</span>claw
-          </h2>
-          <p class="text-sm text-gray-500">This could take 10–15 seconds</p>
-        </div>
-      </div>
-    `;
-  }
+  const goBack = () => {
+    if (isSetupStep) return;
+    setStep((prev) => Math.max(0, prev - 1));
+  };
 
-  return html`
-    <div class="max-w-lg w-full space-y-4">
-      <div class="flex items-center gap-3">
-        <div class="text-4xl">🐾</div>
-        <div>
-          <h1 class="text-2xl font-semibold">Welcome to <span style="color: var(--accent)">alpha</span>claw</h1>
-          <p style="color: var(--text-muted)" class="text-sm">Let's get your agent running</p>
-        </div>
-      </div>
+  const goNext = () => {
+    if (!activeGroup || !currentGroupValid) return;
+    setStep((prev) => Math.min(kWelcomeGroups.length - 1, prev + 1));
+  };
 
-      ${kGroups.map(
-        (group) => html`
-          <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
-            <div class="flex items-center justify-between">
-              <div>
-                <h2 class="text-sm font-medium text-gray-200">
-                  ${group.title}
-                </h2>
-                <p class="text-xs text-gray-500">${group.description}</p>
-              </div>
-              ${group.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
-                  >`
-                : group.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>
+  const activeStepLabel = isSetupStep
+    ? "Initializing"
+    : activeGroup?.title || "Setup";
+  const stepNumber = isSetupStep ? kWelcomeGroups.length + 1 : step + 1;
 
-            ${group.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) => set("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>
-            `}
-            ${group.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>
-            `}
-            ${(group.id === "ai"
-              ? group.fields.filter((field) =>
-                  visibleAiFieldKeys.has(field.key),
-                )
-              : group.fields
-            ).map(
-              (field) => html`
-                <div class="space-y-1">
-                  <label class="text-xs font-medium text-gray-400"
-                    >${field.label}</label
-                  >
-                  <input
-                    type=${field.isText ? "text" : "password"}
-                    placeholder=${field.placeholder || ""}
-                    value=${vals[field.key] || ""}
-                    onInput=${(e) => set(field.key, e.target.value)}
-                    class="w-full 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>
-              `,
-            )}
-          </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}
+  return html`
+    <div class="max-w-lg w-full space-y-5">
+      <${WelcomeHeader}
+        groups=${kWelcomeGroups}
+        step=${step}
+        isSetupStep=${isSetupStep}
+        stepNumber=${stepNumber}
+        activeStepLabel=${activeStepLabel}
+        vals=${vals}
+        hasAi=${hasAi}
+      />
 
-      <button
-        onclick=${handleSubmit}
-        disabled=${!allValid}
-        class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all ${allValid
-          ? "bg-white text-black hover:opacity-85"
-          : "bg-gray-800 text-gray-500 cursor-not-allowed"}"
-      >
-        Complete Setup
-      </button>
+      <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+        ${isSetupStep
+          ? html`<${WelcomeSetupStep}
+              error=${error}
+              loading=${loading}
+              onRetry=${handleSubmit}
+            />`
+          : html`
+              <${WelcomeFormStep}
+                activeGroup=${activeGroup}
+                vals=${vals}
+                hasAi=${hasAi}
+                setValue=${set}
+                modelOptions=${modelOptions}
+                modelsLoading=${modelsLoading}
+                modelsError=${modelsError}
+                canToggleFullCatalog=${canToggleFullCatalog}
+                showAllModels=${showAllModels}
+                setShowAllModels=${setShowAllModels}
+                selectedProvider=${selectedProvider}
+                codexLoading=${codexLoading}
+                codexStatus=${codexStatus}
+                startCodexAuth=${startCodexAuth}
+                handleCodexDisconnect=${handleCodexDisconnect}
+                codexAuthStarted=${codexAuthStarted}
+                codexAuthWaiting=${codexAuthWaiting}
+                codexManualInput=${codexManualInput}
+                setCodexManualInput=${setCodexManualInput}
+                completeCodexAuth=${completeCodexAuth}
+                codexExchanging=${codexExchanging}
+                visibleAiFieldKeys=${visibleAiFieldKeys}
+                error=${error}
+                step=${step}
+                totalGroups=${kWelcomeGroups.length}
+                currentGroupValid=${currentGroupValid}
+                goBack=${goBack}
+                goNext=${goNext}
+                loading=${loading}
+                allValid=${allValid}
+                handleSubmit=${handleSubmit}
+              />
+            `}
+      </div>
     </div>
   `;
 };

package/lib/public/login.html

@@ -40,7 +40,7 @@
           <span style="color: var(--accent)">alpha</span>claw
         </h1>
         <p style="color: var(--text-muted)" class="text-xs mb-4">
-          OpenClaw made easier
+          OpenClaw made easy
         </p>
       </div>
       <form
@@ -72,13 +72,21 @@
       const submitButtonEl = document.getElementById("submit-btn");
 
       const kEnabledClasses = ["bg-white", "text-black", "hover:opacity-85"];
-      const kDisabledClasses = ["bg-gray-800", "text-gray-500", "cursor-not-allowed"];
+      const kDisabledClasses = [
+        "bg-gray-800",
+        "text-gray-500",
+        "cursor-not-allowed",
+      ];
 
       const syncButtonState = () => {
         const hasValue = passwordEl.value.length > 0;
         submitButtonEl.disabled = !hasValue;
-        kEnabledClasses.forEach((c) => submitButtonEl.classList.toggle(c, hasValue));
-        kDisabledClasses.forEach((c) => submitButtonEl.classList.toggle(c, !hasValue));
+        kEnabledClasses.forEach((c) =>
+          submitButtonEl.classList.toggle(c, hasValue),
+        );
+        kDisabledClasses.forEach((c) =>
+          submitButtonEl.classList.toggle(c, !hasValue),
+        );
       };
 
       passwordEl.addEventListener("input", syncButtonState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "publishConfig": {
     "access": "public"
   },