@chrysb/alphaclaw 0.1.14 → 0.1.16

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);