@chrysb/alphaclaw 0.4.1-beta.0 → 0.4.1-beta.2

package/lib/public/js/components/file-viewer/index.js

@@ -32,7 +32,7 @@ export const FileViewer = ({
     onRequestEdit,
   });
 
-  if (!state.hasSelectedPath) {
+  if (!state.hasSelectedPath || state.isFolderPath) {
     return html`
       <div class="file-viewer-empty">
         <div class="file-viewer-empty-mark">[ ]</div>
@@ -99,13 +99,7 @@ export const FileViewer = ({
           `
         : state.error
           ? html`<div class="file-viewer-state file-viewer-state-error">${state.error}</div>`
-          : state.isFolderPath
-            ? html`
-                <div class="file-viewer-state">
-                  Folder selected. Choose a file from this folder in the tree.
-                </div>
-              `
-            : state.isImageFile || state.isAudioFile
+          : state.isImageFile || state.isAudioFile
               ? html`
                   <${MediaPreview}
                     isImageFile=${state.isImageFile}

package/lib/public/js/components/google/index.js

@@ -1,5 +1,10 @@
 import { h } from "https://esm.sh/preact";
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   checkGoogleApis,
@@ -34,12 +39,8 @@ export const Google = ({
   onRestartRequired = () => {},
   onOpenGmailWebhook = () => {},
 }) => {
-  const {
-    accounts,
-    loading,
-    hasCompanyCredentials,
-    refreshAccounts,
-  } = useGoogleAccounts({ gatewayStatus });
+  const { accounts, loading, hasCompanyCredentials, refreshAccounts } =
+    useGoogleAccounts({ gatewayStatus });
   const [expandedAccountId, setExpandedAccountId] = useState("");
   const [scopesByAccountId, setScopesByAccountId] = useState({});
   const [savedScopesByAccountId, setSavedScopesByAccountId] = useState({});
@@ -90,12 +91,16 @@ export const Google = ({
   );
 
   const ensureScopesForAccount = useCallback((account) => {
-    const nextScopes = Array.isArray(account.activeScopes) && account.activeScopes.length
-      ? account.activeScopes
-      : Array.isArray(account.services) && account.services.length
-        ? account.services
-        : getDefaultScopes();
-    setSavedScopesByAccountId((prev) => ({ ...prev, [account.id]: [...nextScopes] }));
+    const nextScopes =
+      Array.isArray(account.activeScopes) && account.activeScopes.length
+        ? account.activeScopes
+        : Array.isArray(account.services) && account.services.length
+          ? account.services
+          : getDefaultScopes();
+    setSavedScopesByAccountId((prev) => ({
+      ...prev,
+      [account.id]: [...nextScopes],
+    }));
     setScopesByAccountId((prev) => {
       const current = prev[account.id];
       if (!current || !hasScopesChanged(current, nextScopes)) {
@@ -125,7 +130,10 @@ export const Google = ({
     (accountId) => {
       const account = getAccountById(accountId);
       if (!account) return;
-      const scopes = scopesByAccountId[accountId] || account.activeScopes || getDefaultScopes();
+      const scopes =
+        scopesByAccountId[accountId] ||
+        account.activeScopes ||
+        getDefaultScopes();
       if (!scopes.length) {
         window.alert("Select at least one service");
         return;
@@ -160,7 +168,10 @@ export const Google = ({
     try {
       const data = await checkGoogleApis(accountId);
       if (data.results) {
-        setApiStatusByAccountId((prev) => ({ ...prev, [accountId]: data.results }));
+        setApiStatusByAccountId((prev) => ({
+          ...prev,
+          [accountId]: data.results,
+        }));
       }
     } finally {
       setCheckingByAccountId((prev) => {
@@ -184,7 +195,10 @@ export const Google = ({
           await handleCheckApis(accountId);
         }
       } else if (event.data?.google === "error") {
-        showToast(`✗ Google auth failed: ${event.data.message || "unknown"}`, "error");
+        showToast(
+          `✗ Google auth failed: ${event.data.message || "unknown"}`,
+          "error",
+        );
       }
     };
     window.addEventListener("message", handler);
@@ -249,6 +263,9 @@ export const Google = ({
   };
 
   const handleCredentialsSaved = async (account) => {
+    if (account?.id) {
+      setExpandedAccountId(account.id);
+    }
     await refreshAccounts();
     if (account?.id) startAuth(account.id);
   };
@@ -267,6 +284,9 @@ export const Google = ({
         return;
       }
       setAddCompanyModalOpen(false);
+      if (data.accountId) {
+        setExpandedAccountId(data.accountId);
+      }
       await refreshAccounts();
       if (data.accountId) startAuth(data.accountId);
     } finally {
@@ -304,7 +324,7 @@ export const Google = ({
     const account = getAccountById(accountId);
     if (!account) return;
     const personal = isPersonalAccount(account);
-    const client = personal ? "personal" : (account.client || "default");
+    const client = personal ? "personal" : account.client || "default";
     let credentialValues = {};
     try {
       const credentialResponse = await fetchGoogleCredentials({
@@ -390,22 +410,23 @@ export const Google = ({
   };
 
   const renderEmptyState = () => html`
-    <div class="text-center space-y-2 py-1">
+    <div class="text-center space-y-2 pt-3">
       <div class="rounded-lg border border-border bg-black/20 px-3 py-5">
-        <div class="flex flex-col items-center justify-center gap-1.5">
+        <div class="flex flex-col items-center justify-center gap-3">
           <img
             src=${kGoogleIconPath}
             alt="Google logo"
-            class="h-4 w-4 shrink-0"
+            class="h-5 w-5 shrink-0"
             loading="lazy"
             decoding="async"
           />
           <p class="text-xs text-gray-500">
-            Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and Meet.
+            Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and
+            Meet.
           </p>
         </div>
       </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-2">
         <${ActionButton}
           onClick=${handleAddCompanyClick}
           tone="primary"
@@ -469,34 +490,46 @@ export const Google = ({
         `}
       />
       ${loading
-        ? html`<div class="text-gray-500 text-sm text-center py-2">Loading...</div>`
+        ? html`<div class="text-gray-500 text-sm text-center py-2">
+            Loading...
+          </div>`
         : accounts.length
           ? html`
               <div class="space-y-2 mt-3">
-                ${accounts.map((account) =>
-                  html`<${GoogleAccountRow}
-                    key=${account.id}
-                    account=${account}
-                    personal=${isPersonalAccount(account)}
-                    expanded=${expandedAccountId === account.id}
-                    onToggleExpanded=${(accountId) =>
-                      setExpandedAccountId((prev) => (prev === accountId ? "" : accountId))}
-                    scopes=${scopesByAccountId[account.id] || account.activeScopes || getDefaultScopes()}
-                    savedScopes=${savedScopesByAccountId[account.id] || account.activeScopes || getDefaultScopes()}
-                    apiStatus=${apiStatusByAccountId[account.id] || {}}
-                    checkingApis=${expandedAccountId === account.id && Boolean(checkingByAccountId[account.id])}
-                    onToggleScope=${handleToggleScope}
-                    onCheckApis=${handleCheckApis}
-                    onUpdatePermissions=${(accountId) => startAuth(accountId)}
-                    onEditCredentials=${handleEditCredentials}
-                    onDisconnect=${(accountId) => setDisconnectAccountId(accountId)}
-                    gmailWatchStatus=${watchByAccountId.get(account.id) || null}
-                    gmailWatchBusy=${Boolean(busyByAccountId[account.id])}
-                    onEnableGmailWatch=${handleEnableGmailWatch}
-                    onDisableGmailWatch=${handleDisableGmailWatch}
-                    onOpenGmailSetup=${openGmailSetupWizard}
-                    onOpenGmailWebhook=${onOpenGmailWebhook}
-                  />`,
+                ${accounts.map(
+                  (account) =>
+                    html`<${GoogleAccountRow}
+                      key=${account.id}
+                      account=${account}
+                      personal=${isPersonalAccount(account)}
+                      expanded=${expandedAccountId === account.id}
+                      onToggleExpanded=${(accountId) =>
+                        setExpandedAccountId((prev) =>
+                          prev === accountId ? "" : accountId,
+                        )}
+                      scopes=${scopesByAccountId[account.id] ||
+                      account.activeScopes ||
+                      getDefaultScopes()}
+                      savedScopes=${savedScopesByAccountId[account.id] ||
+                      account.activeScopes ||
+                      getDefaultScopes()}
+                      apiStatus=${apiStatusByAccountId[account.id] || {}}
+                      checkingApis=${expandedAccountId === account.id &&
+                      Boolean(checkingByAccountId[account.id])}
+                      onToggleScope=${handleToggleScope}
+                      onCheckApis=${handleCheckApis}
+                      onUpdatePermissions=${(accountId) => startAuth(accountId)}
+                      onEditCredentials=${handleEditCredentials}
+                      onDisconnect=${(accountId) =>
+                        setDisconnectAccountId(accountId)}
+                      gmailWatchStatus=${watchByAccountId.get(account.id) ||
+                      null}
+                      gmailWatchBusy=${Boolean(busyByAccountId[account.id])}
+                      onEnableGmailWatch=${handleEnableGmailWatch}
+                      onDisableGmailWatch=${handleDisableGmailWatch}
+                      onOpenGmailSetup=${openGmailSetupWizard}
+                      onOpenGmailWebhook=${onOpenGmailWebhook}
+                    />`,
                 )}
               </div>
             `
@@ -528,7 +561,9 @@ export const Google = ({
       visible=${gmailWizardState.visible}
       account=${getAccountById(gmailWizardState.accountId)}
       clientConfig=${clientConfigByClient.get(
-        String(getAccountById(gmailWizardState.accountId)?.client || "default").trim() || "default",
+        String(
+          getAccountById(gmailWizardState.accountId)?.client || "default",
+        ).trim() || "default",
       ) || null}
       saving=${savingClient || gmailLoading}
       onClose=${closeGmailSetupWizard}

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

@@ -262,6 +262,32 @@ export const DeleteBinLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const FileAddLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM11 11V8H13V11H16V13H13V16H11V13H8V11H11Z"
+    />
+  </svg>
+`;
+
+export const FolderAddLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM4 5V19H20V7H11.5858L9.58579 5H4ZM11 12V9H13V12H16V14H13V17H11V14H8V12H11Z"
+    />
+  </svg>
+`;
+
 export const RestartLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/onboarding/use-welcome-codex.js

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  disconnectCodex,
+  exchangeCodexOAuth,
+  fetchCodexStatus,
+} from "../../lib/api.js";
+
+export const useWelcomeCodex = ({ setFormError } = {}) => {
+  const [codexStatus, setCodexStatus] = useState({ connected: false });
+  const [codexLoading, setCodexLoading] = useState(true);
+  const [codexManualInput, setCodexManualInput] = useState("");
+  const [codexExchanging, setCodexExchanging] = useState(false);
+  const [codexAuthStarted, setCodexAuthStarted] = useState(false);
+  const [codexAuthWaiting, setCodexAuthWaiting] = useState(false);
+  const codexPopupPollRef = useRef(null);
+
+  const refreshCodexStatus = async () => {
+    try {
+      const status = await fetchCodexStatus();
+      setCodexStatus(status);
+      if (status?.connected) {
+        setCodexAuthStarted(false);
+        setCodexAuthWaiting(false);
+      }
+    } catch {
+      setCodexStatus({ connected: false });
+    } finally {
+      setCodexLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refreshCodexStatus();
+  }, []);
+
+  useEffect(() => {
+    const onMessage = async (e) => {
+      if (e.data?.codex === "success") {
+        await refreshCodexStatus();
+      }
+      if (e.data?.codex === "error") {
+        setFormError(`Codex auth failed: ${e.data.message || "unknown error"}`);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [setFormError]);
+
+  useEffect(
+    () => () => {
+      if (codexPopupPollRef.current) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+      }
+    },
+    [],
+  );
+
+  const startCodexAuth = () => {
+    if (codexStatus.connected) return;
+    setCodexAuthStarted(true);
+    setCodexAuthWaiting(true);
+    const authUrl = "/auth/codex/start";
+    const popup = window.open(
+      authUrl,
+      "codex-auth",
+      "popup=yes,width=640,height=780",
+    );
+    if (!popup || popup.closed) {
+      setCodexAuthWaiting(false);
+      window.location.href = authUrl;
+      return;
+    }
+    if (codexPopupPollRef.current) {
+      clearInterval(codexPopupPollRef.current);
+    }
+    codexPopupPollRef.current = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+        setCodexAuthWaiting(false);
+      }
+    }, 500);
+  };
+
+  const completeCodexAuth = async () => {
+    if (!codexManualInput.trim() || codexExchanging) return;
+    setCodexExchanging(true);
+    setFormError(null);
+    try {
+      const result = await exchangeCodexOAuth(codexManualInput.trim());
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexStatus();
+    } catch (err) {
+      setFormError(err.message || "Codex OAuth exchange failed");
+    } finally {
+      setCodexExchanging(false);
+    }
+  };
+
+  const handleCodexDisconnect = async () => {
+    const result = await disconnectCodex();
+    if (!result.ok) {
+      setFormError(result.error || "Failed to disconnect Codex");
+      return;
+    }
+    setCodexAuthStarted(false);
+    setCodexAuthWaiting(false);
+    setCodexManualInput("");
+    await refreshCodexStatus();
+  };
+
+  return {
+    codexStatus,
+    codexLoading,
+    codexManualInput,
+    setCodexManualInput,
+    codexExchanging,
+    codexAuthStarted,
+    codexAuthWaiting,
+    startCodexAuth,
+    completeCodexAuth,
+    handleCodexDisconnect,
+  };
+};

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

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { approvePairing, fetchPairings, fetchStatus, rejectPairing } from "../../lib/api.js";
+import { usePolling } from "../../hooks/usePolling.js";
+import { isChannelPaired } from "./pairing-utils.js";
+
+export const useWelcomePairing = ({
+  isPairingStep = false,
+  selectedPairingChannel = "",
+} = {}) => {
+  const [pairingError, setPairingError] = useState(null);
+  const [pairingComplete, setPairingComplete] = useState(false);
+
+  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]);
+
+  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 resetPairingState = () => {
+    setPairingError(null);
+    setPairingComplete(false);
+  };
+
+  return {
+    pairingStatusPoll,
+    pairingRequestsPoll,
+    pairingChannels,
+    canFinishPairing,
+    pairingError,
+    pairingComplete,
+    handlePairingApprove,
+    handlePairingReject,
+    resetPairingState,
+  };
+};

package/lib/public/js/components/onboarding/use-welcome-storage.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+
+export const kOnboardingStorageKey = "openclaw_setup";
+export const kOnboardingStepKey = "_step";
+export const kPairingChannelKey = "_pairingChannel";
+export const kOnboardingSetupErrorKey = "_lastSetupError";
+
+const loadInitialSetupState = () => {
+  try {
+    return JSON.parse(localStorage.getItem(kOnboardingStorageKey) || "{}");
+  } catch {
+    return {};
+  }
+};
+
+export const useWelcomeStorage = ({
+  kSetupStepIndex,
+  kPairingStepIndex,
+} = {}) => {
+  const [initialSetupState] = useState(loadInitialSetupState);
+  const [vals, setVals] = useState(() => ({ ...initialSetupState }));
+  const [setupError, setSetupError] = useState(null);
+  const initialSetupError = String(
+    initialSetupState?.[kOnboardingSetupErrorKey] || "",
+  ).trim();
+  const shouldRecoverFromSetupState = !!initialSetupError;
+  const [step, setStep] = useState(() => {
+    const parsedStep = Number.parseInt(
+      String(initialSetupState?.[kOnboardingStepKey] || ""),
+      10,
+    );
+    if (!Number.isFinite(parsedStep)) return 0;
+    const clampedStep = Math.max(0, Math.min(kPairingStepIndex, parsedStep));
+    if (clampedStep === kSetupStepIndex && shouldRecoverFromSetupState) return 0;
+    return clampedStep;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(
+      kOnboardingStorageKey,
+      JSON.stringify({
+        ...vals,
+        [kOnboardingStepKey]: step,
+        ...(setupError ? { [kOnboardingSetupErrorKey]: setupError } : {}),
+      }),
+    );
+  }, [vals, step, setupError]);
+
+  const setValue = (key, value) => setVals((prev) => ({ ...prev, [key]: value }));
+
+  return {
+    vals,
+    setVals,
+    setValue,
+    step,
+    setStep,
+    setupError,
+    setSetupError,
+  };
+};

package/lib/public/js/components/sidebar.js

@@ -12,7 +12,7 @@ const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
 const kBrowsePanelMinHeightPx = 120;
 const kBrowseBottomMinHeightPx = 120;
 const kBrowseResizerHeightPx = 6;
-const kDefaultBrowseBottomPanelHeightPx = 160;
+const kDefaultBrowseBottomPanelHeightPx = 260;
 
 const readStoredBrowseBottomPanelHeight = () => {
   try {

package/lib/public/js/components/telegram-workspace/onboarding.js

@@ -116,7 +116,7 @@ export const CreateGroupStep = ({ onNext, onBack }) => html`
       <p class="text-xs font-medium text-gray-300">Create the group</p>
       <ol class="text-xs text-gray-400 space-y-2 list-decimal list-inside">
         <li>
-          Open Telegram and create a
+          Open Telegram and create a${" "}
           <span class="text-gray-300">new group</span>
         </li>
         <li>

package/lib/public/js/components/webhooks.js

@@ -232,7 +232,7 @@ export const Webhooks = ({
     selectedWebhook?.fullUrl || `.../hooks/${selectedHookName}`;
   const webhookUrlWithQueryToken =
     selectedWebhook?.queryStringUrl ||
-    `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<OPENCLAW_HOOKS_TOKEN>`;
+    `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<WEBHOOK_TOKEN>`;
   const derivedTokenFromQuery = (() => {
     try {
       const parsed = new URL(webhookUrlWithQueryToken);
@@ -245,7 +245,7 @@ export const Webhooks = ({
     selectedWebhook?.authHeaderValue ||
     (derivedTokenFromQuery
       ? `Authorization: Bearer ${derivedTokenFromQuery}`
-      : "Authorization: Bearer <OPENCLAW_HOOKS_TOKEN>");
+      : "Authorization: Bearer <WEBHOOK_TOKEN>");
   const bearerTokenValue = authHeaderValue.startsWith("Authorization: ")
     ? authHeaderValue.slice("Authorization: ".length)
     : authHeaderValue;