@chrysb/alphaclaw 0.1.20 → 0.1.21

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

@@ -0,0 +1,173 @@
+import { h } from "https://esm.sh/preact";
+import { useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { Badge } from "../badge.js";
+
+const html = htm.bind(h);
+
+const kChannelMeta = {
+  telegram: {
+    label: "Telegram",
+    iconSrc: "/assets/icons/telegram.svg",
+  },
+  discord: {
+    label: "Discord",
+    iconSrc: "/assets/icons/discord.svg",
+  },
+};
+
+const PairingRow = ({ pairing, onApprove, onReject }) => {
+  const [busyAction, setBusyAction] = useState("");
+
+  const handleApprove = async () => {
+    setBusyAction("approve");
+    try {
+      await onApprove(pairing.id, pairing.channel);
+    } finally {
+      setBusyAction("");
+    }
+  };
+
+  const handleReject = async () => {
+    setBusyAction("reject");
+    try {
+      await onReject(pairing.id, pairing.channel);
+    } finally {
+      setBusyAction("");
+    }
+  };
+
+  return html`
+    <div class="bg-black/30 rounded-lg p-3 mb-2">
+      <div class="flex items-center justify-between gap-2 mb-2">
+        <div class="font-medium text-sm">
+          ${pairing.code || pairing.id || "Pending request"}
+        </div>
+        <span class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400">
+          Request
+        </span>
+      </div>
+      <p class="text-xs text-gray-500 mb-3">
+        Approve to connect this account and finish setup.
+      </p>
+      <div class="flex gap-2">
+        <button
+          onclick=${handleApprove}
+          disabled=${!!busyAction}
+          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-60 cursor-not-allowed" : ""}"
+        >
+          ${busyAction === "approve" ? "Approving..." : "Approve"}
+        </button>
+        <button
+          onclick=${handleReject}
+          disabled=${!!busyAction}
+          class="bg-gray-800 text-gray-300 text-xs px-3 py-1.5 rounded-lg hover:bg-gray-700 ${busyAction ? "opacity-60 cursor-not-allowed" : ""}"
+        >
+          ${busyAction === "reject" ? "Rejecting..." : "Reject"}
+        </button>
+      </div>
+    </div>
+  `;
+};
+
+export const WelcomePairingStep = ({
+  channel,
+  pairings,
+  channels,
+  loading,
+  error,
+  onApprove,
+  onReject,
+  canFinish,
+  onContinue,
+}) => {
+  const channelMeta = kChannelMeta[channel] || {
+    label: channel ? channel.charAt(0).toUpperCase() + channel.slice(1) : "Channel",
+    iconSrc: "",
+  };
+  const channelInfo = channels?.[channel];
+
+  if (!channel) {
+    return html`
+      <div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
+        Missing channel configuration. Go back and add a Telegram or Discord bot token.
+      </div>
+    `;
+  }
+
+  if (canFinish) {
+    return html`
+      <div class="min-h-[300px] pb-6 px-6 flex flex-col">
+        <div class="flex-1 flex items-center justify-center text-center">
+          <div class="space-y-3 max-w-xl mx-auto">
+            <p class="text-sm font-medium text-green-300 mb-12">🎉 Setup complete</p>
+            <p class="text-xs text-gray-300">
+              Your ${channelMeta.label} channel is connected. You can switch to ${channelMeta.label} and start using your agent now.
+            </p>
+            <p class="text-xs text-gray-500 font-normal opacity-85">
+              Continue to the dashboard to explore extras like Google Workspace and additional integrations.
+            </p>
+          </div>
+        </div>
+        <button
+          onclick=${onContinue}
+          class="w-full max-w-xl mx-auto text-sm font-medium px-4 py-2.5 rounded-xl transition-all ac-btn-cyan mt-3"
+        >
+          Continue to dashboard
+        </button>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="min-h-[300px] pb-6 flex flex-col gap-3">
+      <div class="flex items-center justify-end gap-2">
+        <${Badge} tone="warning"
+          >${loading
+            ? "Checking..."
+            : pairings.length > 0
+              ? "Pairing request detected"
+              : "Awaiting pairing"}</${Badge}
+        >
+      </div>
+
+      ${pairings.length > 0
+        ? html`<div class="flex-1 flex items-center">
+            <div class="w-full">
+              ${pairings.map(
+                (pairing) =>
+                  html`<${PairingRow}
+                    key=${pairing.id}
+                    pairing=${pairing}
+                    onApprove=${onApprove}
+                    onReject=${onReject}
+                  />`,
+              )}
+            </div>
+          </div>`
+        : html`<div class="flex-1 flex items-center justify-center text-center py-4">
+            <div class="space-y-4">
+            ${channelMeta.iconSrc
+              ? html`<img
+                  src=${channelMeta.iconSrc}
+                  alt=${channelMeta.label}
+                  class="w-8 h-8 mx-auto rounded-md"
+                />`
+              : null}
+            <p class="text-gray-300 text-sm">
+              Send a message to your ${channelMeta.label} bot
+            </p>
+            <p class="text-gray-600 text-xs">
+              The pairing request will appear here in 5-10 seconds
+            </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}
+    </div>
+  `;
+};

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

@@ -1,45 +1,117 @@
 import { h } from "https://esm.sh/preact";
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 
 const html = htm.bind(h);
+const kSetupTips = [
+  {
+    label: "🛡️ Safety tip",
+    text: "Be careful what you give access to. Read access is always safer than write access.",
+  },
+  {
+    label: "🧠 Best practice",
+    text: "Trust but verify. Your agent may not always know what it's doing, so check the results.",
+  },
+  {
+    label: "💡 Idea",
+    text: "Ask your agent to create a morning briefing for you.",
+  },
+  {
+    label: "🧠 Best practice",
+    text: "Ask your agent to review its own code and make sure it's doing what you want it to do.",
+  },
+  {
+    label: "💡 Idea",
+    text: "Tell your agent to review the latest news and provide a summary.",
+  },
+  {
+    label: "🛡️ Safety tip",
+    text: "Be incredibly careful installing skills from the internet - they may contain malicious code.",
+  },
+];
 
-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>
+export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
+  const [tipIndex, setTipIndex] = useState(0);
 
-  ${error
-    ? html`<div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
+  useEffect(() => {
+    if (error || !loading) return;
+    const timer = setInterval(() => {
+      setTipIndex((idx) => (idx + 1) % kSetupTips.length);
+    }, 5200);
+    return () => clearInterval(timer);
+  }, [error, loading]);
+
+  if (error) {
+    return html`
+      <div class="py-4 flex flex-col items-center text-center gap-3">
+        <h3 class="text-lg font-semibold text-white">Setup failed</h3>
+        <p class="text-sm text-gray-500">Fix the values and try again.</p>
+      </div>
+      <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"}"
+      <div class="grid grid-cols-2 gap-2">
+        <button
+          onclick=${onBack}
+          disabled=${loading}
+          class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500 ${loading
+            ? "opacity-60 cursor-not-allowed"
+            : ""}"
+        >
+          Back
+        </button>
+        <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>
+      </div>
+    `;
+  }
+
+  const currentTip = kSetupTips[tipIndex];
+
+  return html`
+    <div class="min-h-[320px] py-4 flex flex-col">
+      <div
+        class="flex-1 flex flex-col items-center justify-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>
+      <div
+        class="mt-3 bg-black/20 border border-border rounded-lg px-3 py-2 text-xs text-gray-500"
       >
-        ${loading ? "Retrying..." : "Retry"}
-      </button>`
-    : null}
-`;
+        <span class="text-gray-400">${currentTip.label}: </span>
+        ${currentTip.text}
+      </div>
+    </div>
+  `;
+};

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

@@ -13,6 +13,7 @@ const html = htm.bind(h);
 export const SecretInput = ({
   value = "",
   onInput,
+  onBlur,
   placeholder = "",
   inputClass = "",
   disabled = false,
@@ -28,6 +29,7 @@ export const SecretInput = ({
         value=${value}
         placeholder=${placeholder}
         onInput=${onInput}
+        onBlur=${onBlur}
         disabled=${disabled}
         class=${inputClass}
       />

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

@@ -7,19 +7,36 @@ import {
   fetchCodexStatus,
   disconnectCodex,
   exchangeCodexOAuth,
+  fetchStatus,
+  fetchPairings,
+  approvePairing,
+  rejectPairing,
 } from "../lib/api.js";
+import { usePolling } from "../hooks/usePolling.js";
 import {
   getModelProvider,
   getFeaturedModels,
   getVisibleAiFieldKeys,
 } from "../lib/model-config.js";
-import { kWelcomeGroups } from "./onboarding/welcome-config.js";
+import {
+  kWelcomeGroups,
+  isValidGithubRepoInput,
+} 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";
+import { WelcomePairingStep } from "./onboarding/welcome-pairing-step.js";
+import {
+  getPreferredPairingChannel,
+  isChannelPaired,
+} from "./onboarding/pairing-utils.js";
 const html = htm.bind(h);
 const kOnboardingStorageKey = "openclaw_setup";
 const kOnboardingStepKey = "_step";
+const kPairingChannelKey = "_pairingChannel";
+const kMaxOnboardingVars = 64;
+const kMaxEnvKeyLength = 128;
+const kMaxEnvValueLength = 4096;
 
 export const Welcome = ({ onComplete }) => {
   const [initialSetupState] = useState(() => {
@@ -133,20 +150,47 @@ export const Welcome = ({ onComplete }) => {
             : false;
 
   const allValid = kWelcomeGroups.every((g) => g.validate(vals, { hasAi }));
-  const kFinalSetupStep = kWelcomeGroups.length;
+  const kSetupStepIndex = kWelcomeGroups.length;
+  const kPairingStepIndex = kSetupStepIndex + 1;
   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));
+    return Math.max(0, Math.min(kPairingStepIndex, parsedStep));
   });
-  const isSetupStep = step === kFinalSetupStep;
-  const activeGroup = !isSetupStep ? kWelcomeGroups[step] : null;
+  const [pairingError, setPairingError] = useState(null);
+  const [pairingComplete, setPairingComplete] = useState(false);
+  const isSetupStep = step === kSetupStepIndex;
+  const isPairingStep = step === kPairingStepIndex;
+  const activeGroup = step < kSetupStepIndex ? kWelcomeGroups[step] : null;
   const currentGroupValid = activeGroup
     ? activeGroup.validate(vals, { hasAi })
     : false;
+  const selectedPairingChannel = String(
+    vals[kPairingChannelKey] || getPreferredPairingChannel(vals),
+  );
+  const pairingStatusPoll = usePolling(fetchStatus, 3000, {
+    enabled: isPairingStep,
+  });
+  const pairingRequestsPoll = usePolling(
+    async () => {
+      const payload = await fetchPairings();
+      const allPending = payload.pending || [];
+      return allPending.filter((p) => p.channel === selectedPairingChannel);
+    },
+    1000,
+    { enabled: isPairingStep && !!selectedPairingChannel },
+  );
+  const pairingChannels = pairingStatusPoll.data?.channels || {};
+  const canFinishPairing = isChannelPaired(pairingChannels, selectedPairingChannel);
+
+  useEffect(() => {
+    if (isPairingStep && canFinishPairing) {
+      setPairingComplete(true);
+    }
+  }, [isPairingStep, canFinishPairing]);
 
   useEffect(() => {
     localStorage.setItem(
@@ -218,21 +262,59 @@ export const Welcome = ({ onComplete }) => {
 
   const handleSubmit = async () => {
     if (!allValid || loading) return;
-    setStep(kFinalSetupStep);
+    const vars = Object.entries(vals)
+      .filter(
+        ([key]) => key !== "MODEL_KEY" && !String(key || "").startsWith("_"),
+      )
+      .filter(([, v]) => v)
+      .map(([key, value]) => ({ key, value }));
+    const preflightError = (() => {
+      if (!vals.MODEL_KEY || !String(vals.MODEL_KEY).includes("/")) {
+        return "A model selection is required";
+      }
+      if (vars.length > kMaxOnboardingVars) {
+        return `Too many environment variables (max ${kMaxOnboardingVars})`;
+      }
+      for (const entry of vars) {
+        const key = String(entry?.key || "");
+        const value = String(entry?.value || "");
+        if (!key) return "Each variable must include a key";
+        if (key.length > kMaxEnvKeyLength) {
+          return `Variable key is too long: ${key.slice(0, 32)}...`;
+        }
+        if (value.length > kMaxEnvValueLength) {
+          return `Value too long for ${key} (max ${kMaxEnvValueLength} chars)`;
+        }
+      }
+      if (!vals.GITHUB_TOKEN || !isValidGithubRepoInput(vals.GITHUB_WORKSPACE_REPO)) {
+        return 'GITHUB_WORKSPACE_REPO must be in "owner/repo" format.';
+      }
+      return "";
+    })();
+    if (preflightError) {
+      setError(preflightError);
+      setStep(Math.max(0, kWelcomeGroups.findIndex((g) => g.id === "github")));
+      return;
+    }
+    setStep(kSetupStepIndex);
     setLoading(true);
     setError(null);
+    setPairingError(null);
 
     try {
-      const vars = Object.entries(vals)
-        .filter(
-          ([key]) => key !== "MODEL_KEY" && !String(key || "").startsWith("_"),
-        )
-        .filter(([, v]) => v)
-        .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(kOnboardingStorageKey);
-      onComplete();
+      const pairingChannel = getPreferredPairingChannel(vals);
+      if (!pairingChannel) {
+        throw new Error("No Telegram or Discord bot token configured for pairing.");
+      }
+      setVals((prev) => ({
+        ...prev,
+        [kPairingChannelKey]: pairingChannel,
+      }));
+      setLoading(false);
+      setStep(kPairingStepIndex);
+      setPairingComplete(false);
     } catch (err) {
       console.error("Onboard error:", err);
       setError(err.message);
@@ -240,10 +322,43 @@ export const Welcome = ({ onComplete }) => {
     }
   };
 
+  const handlePairingApprove = async (id, channel) => {
+    try {
+      setPairingError(null);
+      const result = await approvePairing(id, channel);
+      if (!result.ok) throw new Error(result.error || "Could not approve pairing");
+      setPairingComplete(true);
+      pairingRequestsPoll.refresh();
+      pairingStatusPoll.refresh();
+    } catch (err) {
+      setPairingError(err.message || "Could not approve pairing");
+    }
+  };
+
+  const handlePairingReject = async (id, channel) => {
+    try {
+      setPairingError(null);
+      const result = await rejectPairing(id, channel);
+      if (!result.ok) throw new Error(result.error || "Could not reject pairing");
+      pairingRequestsPoll.refresh();
+    } catch (err) {
+      setPairingError(err.message || "Could not reject pairing");
+    }
+  };
+
+  const finishOnboarding = () => {
+    localStorage.removeItem(kOnboardingStorageKey);
+    onComplete();
+  };
+
   const goBack = () => {
     if (isSetupStep) return;
     setStep((prev) => Math.max(0, prev - 1));
   };
+  const goBackFromSetupError = () => {
+    setLoading(false);
+    setStep(kWelcomeGroups.length - 1);
+  };
 
   const goNext = () => {
     if (!activeGroup || !currentGroupValid) return;
@@ -252,8 +367,14 @@ export const Welcome = ({ onComplete }) => {
 
   const activeStepLabel = isSetupStep
     ? "Initializing"
-    : activeGroup?.title || "Setup";
-  const stepNumber = isSetupStep ? kWelcomeGroups.length + 1 : step + 1;
+    : isPairingStep
+      ? "Pairing"
+      : activeGroup?.title || "Setup";
+  const stepNumber = isSetupStep
+    ? kWelcomeGroups.length + 1
+    : isPairingStep
+      ? kWelcomeGroups.length + 2
+      : step + 1;
 
   return html`
     <div class="max-w-lg w-full space-y-5">
@@ -261,10 +382,9 @@ export const Welcome = ({ onComplete }) => {
         groups=${kWelcomeGroups}
         step=${step}
         isSetupStep=${isSetupStep}
+        isPairingStep=${isPairingStep}
         stepNumber=${stepNumber}
         activeStepLabel=${activeStepLabel}
-        vals=${vals}
-        hasAi=${hasAi}
       />
 
       <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
@@ -273,7 +393,20 @@ export const Welcome = ({ onComplete }) => {
               error=${error}
               loading=${loading}
               onRetry=${handleSubmit}
+              onBack=${goBackFromSetupError}
             />`
+          : isPairingStep
+            ? html`<${WelcomePairingStep}
+                channel=${selectedPairingChannel}
+                pairings=${pairingRequestsPoll.data || []}
+                channels=${pairingChannels}
+                loading=${!pairingStatusPoll.data}
+                error=${pairingError}
+                onApprove=${handlePairingApprove}
+                onReject=${handlePairingReject}
+                canFinish=${pairingComplete || canFinishPairing}
+                onContinue=${finishOnboarding}
+              />`
           : html`
               <${WelcomeFormStep}
                 activeGroup=${activeGroup}

package/lib/public/js/lib/api.js

@@ -1,6 +1,9 @@
 const authFetch = async (url, opts = {}) => {
   const res = await fetch(url, opts);
   if (res.status === 401) {
+    try {
+      window.localStorage?.clear?.();
+    } catch {}
     window.location.href = '/setup';
     throw new Error('Unauthorized');
   }
@@ -140,6 +143,16 @@ export async function rejectDevice(id) {
   return res.json();
 }
 
+export const fetchAuthStatus = async () => {
+  const res = await authFetch('/api/auth/status');
+  return res.json();
+};
+
+export const logout = async () => {
+  const res = await authFetch('/api/auth/logout', { method: 'POST' });
+  return res.json();
+};
+
 export async function fetchOnboardStatus() {
   const res = await authFetch('/api/onboard/status');
   return res.json();
@@ -203,5 +216,15 @@ export async function saveEnvVars(vars) {
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ vars }),
   });
-  return res.json();
+  const text = await res.text();
+  let data;
+  try {
+    data = text ? JSON.parse(text) : {};
+  } catch {
+    throw new Error(text || 'Could not parse env save response');
+  }
+  if (!res.ok) {
+    throw new Error(data.error || text || `HTTP ${res.status}`);
+  }
+  return data;
 }

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

@@ -1,3 +1,8 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
 export const getModelProvider = (modelKey) => String(modelKey || "").split("/")[0] || "";
 
 export const getAuthProviderFromModelProvider = (provider) =>
@@ -41,7 +46,14 @@ export const kProviderAuthFields = {
     {
       key: "ANTHROPIC_API_KEY",
       label: "Anthropic API Key",
-      hint: "From console.anthropic.com — recommended",
+      hint: html`From${" "}
+        <a
+          href="https://console.anthropic.com"
+          target="_blank"
+          class="hover:underline"
+          style="color: var(--accent-link)"
+          >console.anthropic.com</a
+        >${" "}— recommended`,
       placeholder: "sk-ant-...",
     },
     {
@@ -55,7 +67,14 @@ export const kProviderAuthFields = {
     {
       key: "OPENAI_API_KEY",
       label: "OpenAI API Key",
-      hint: "From platform.openai.com",
+      hint: html`From${" "}
+        <a
+          href="https://platform.openai.com"
+          target="_blank"
+          class="hover:underline"
+          style="color: var(--accent-link)"
+          >platform.openai.com</a
+        >`,
       placeholder: "sk-...",
     },
   ],
@@ -63,7 +82,14 @@ export const kProviderAuthFields = {
     {
       key: "GEMINI_API_KEY",
       label: "Gemini API Key",
-      hint: "From aistudio.google.com",
+      hint: html`From${" "}
+        <a
+          href="https://aistudio.google.com"
+          target="_blank"
+          class="hover:underline"
+          style="color: var(--accent-link)"
+          >aistudio.google.com</a
+        >`,
       placeholder: "AI...",
     },
   ],