@chrysb/alphaclaw 0.5.6 → 0.6.0-beta.0

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

@@ -45,6 +45,7 @@ const kFeatureIconByName = {
   },
 };
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+const kManagedChannelTokenPattern = /^(TELEGRAM|DISCORD)_BOT_TOKEN(?:_[A-Z0-9_]+)?$/;
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
   if (value.length < 2) return value;
@@ -56,6 +57,8 @@ const stripSurroundingQuotes = (raw) => {
   if (startsWithSingle && endsWithSingle) return value.slice(1, -1);
   return value;
 };
+const isManagedChannelTokenKey = (key = "") =>
+  kManagedChannelTokenPattern.test(String(key || "").trim().toUpperCase());
 const getVarsSignature = (items) =>
   JSON.stringify(
     (items || [])
@@ -234,7 +237,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     setSaving(true);
     try {
       const toSave = vars
-        .filter((v) => v.editable)
+        .filter((v) => v.editable && !isManagedChannelTokenKey(v?.key))
         .map((v) => ({ key: v.key, value: v.value }));
       const result = await saveEnvVars(toSave);
       const needsRestart = !!result?.restartRequired;
@@ -281,12 +284,17 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const addVars = (pairs) => {
     let added = 0;
     const blocked = [];
+    const managedChannelKeys = [];
     const addedCustomKeys = [];
     setVars((prev) => {
       const next = [...prev];
       for (const { key: rawKey, value } of pairs) {
         const key = normalizeEnvVarKey(rawKey);
         if (!key) continue;
+        if (isManagedChannelTokenKey(key)) {
+          managedChannelKeys.push(key);
+          continue;
+        }
         if (reservedKeys.has(key)) {
           blocked.push(key);
           continue;
@@ -313,7 +321,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     if (addedCustomKeys.length) {
       setPendingCustomKeys((prev) => [...prev, ...addedCustomKeys]);
     }
-    return { added, blocked };
+    return { added, blocked, managedChannelKeys };
   };
 
   const handlePaste = (e, fallbackField) => {
@@ -321,7 +329,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const pairs = parsePaste(text);
     if (pairs.length > 1) {
       e.preventDefault();
-      const { added, blocked } = addVars(pairs);
+      const { added, blocked, managedChannelKeys } = addVars(pairs);
       setNewKey("");
       setNewVal("");
       if (blocked.length) {
@@ -331,6 +339,13 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
           "error",
         );
       }
+      if (managedChannelKeys.length) {
+        const uniqueManagedKeys = Array.from(new Set(managedChannelKeys));
+        showToast(
+          `Channel bot tokens are managed from Channels: ${uniqueManagedKeys.join(", ")}`,
+          "error",
+        );
+      }
       if (added) {
         showToast(`Added ${added} variable${added !== 1 ? "s" : ""}`, "success");
       }
@@ -367,6 +382,10 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const handleAddVar = () => {
     const key = normalizeEnvVarKey(newKey);
     if (!key) return;
+    if (isManagedChannelTokenKey(key)) {
+      showToast(`Channel bot tokens are managed from Channels: ${key}`, "error");
+      return;
+    }
     if (reservedKeys.has(key)) {
       showToast(`Reserved var can't be added: ${key}`, "error");
       return;
@@ -376,9 +395,11 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     setNewVal("");
   };
 
+  const visibleVars = vars.filter((v) => !isManagedChannelTokenKey(v?.key));
+
   // Group vars
   const grouped = {};
-  for (const v of vars) {
+  for (const v of visibleVars) {
     const g = v.group || "custom";
     if (!grouped[g]) grouped[g] = [];
     grouped[g].push(v);

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

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { Gateway } from "../gateway.js";
 import { Channels } from "../channels.js";
+import { ChannelOperationsPanel } from "../channel-operations-panel.js";
 import { Pairings } from "../pairings.js";
 import { DevicePairings } from "../device-pairings.js";
 import { Google } from "../google/index.js";
@@ -17,6 +18,7 @@ export const GeneralTab = ({
   statusData = null,
   watchdogData = null,
   doctorStatusData = null,
+  agents = [],
   doctorWarningDismissedUntilMs = 0,
   onRefreshStatuses = () => {},
   onSwitchTab = () => {},
@@ -62,17 +64,25 @@ export const GeneralTab = ({
         onOpenDoctor=${() => onSwitchTab("doctor")}
         onDismiss=${onDismissDoctorWarning}
       />
-      <${Channels}
-        channels=${state.channels}
-        onSwitchTab=${onSwitchTab}
-        onNavigate=${onNavigate}
-      />
-      <${Pairings}
-        pending=${state.pending}
-        channels=${state.channels}
-        visible=${state.hasUnpaired}
-        onApprove=${actions.handleApprove}
-        onReject=${actions.handleReject}
+      <${ChannelOperationsPanel}
+        channelsSection=${html`
+          <${Channels}
+            channels=${state.channels}
+            agents=${agents}
+            onNavigate=${onNavigate}
+            onRefreshStatuses=${onRefreshStatuses}
+          />
+        `}
+        pairingsSection=${html`
+          <${Pairings}
+            pending=${state.pending}
+            channels=${state.channels}
+            visible=${state.hasUnpaired}
+            statusRefreshing=${state.pairingStatusRefreshing}
+            onApprove=${actions.handleApprove}
+            onReject=${actions.handleReject}
+          />
+        `}
       />
       <${Features} onSwitchTab=${onSwitchTab} />
       <${Google}

package/lib/public/js/components/general/use-general-tab.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
 import {
   approveDevice,
   approvePairing,
@@ -30,6 +30,10 @@ export const useGeneralTab = ({
   const [syncCronSchedule, setSyncCronSchedule] = useState(kDefaultSyncCronSchedule);
   const [savingSyncCron, setSavingSyncCron] = useState(false);
   const [syncCronChoice, setSyncCronChoice] = useState(kDefaultSyncCronSchedule);
+  const [pairingStatusRefreshing, setPairingStatusRefreshing] = useState(false);
+  const [devicePollingEnabled, setDevicePollingEnabled] = useState(false);
+  const [cliAutoApproveComplete, setCliAutoApproveComplete] = useState(false);
+  const pairingRefreshTimerRef = useRef(null);
 
   const status = statusData;
   const watchdogStatus = watchdogData;
@@ -42,7 +46,15 @@ export const useGeneralTab = ({
 
   const hasUnpaired = ALL_CHANNELS.some((channel) => {
     const info = channels?.[channel];
-    return info && info.status !== "paired";
+    if (!info) return false;
+    const accounts =
+      info.accounts && typeof info.accounts === "object" ? info.accounts : {};
+    if (Object.keys(accounts).length > 0) {
+      return Object.values(accounts).some(
+        (acc) => acc && acc.status !== "paired",
+      );
+    }
+    return info.status !== "paired";
   });
 
   const pairingsPoll = usePolling(
@@ -54,14 +66,17 @@ export const useGeneralTab = ({
     { enabled: hasUnpaired && gatewayStatus === "running" },
   );
   const pending = pairingsPoll.data || [];
+  const shouldPollDevices =
+    gatewayStatus === "running" && (devicePollingEnabled || !cliAutoApproveComplete);
 
   const devicePoll = usePolling(
     async () => {
       const data = await fetchDevicePairings();
+      setCliAutoApproveComplete(data?.cliAutoApproveComplete === true);
       return data.pending || [];
     },
     2000,
-    { enabled: gatewayStatus === "running" },
+    { enabled: shouldPollDevices },
   );
   const devicePending = devicePoll.data || [];
 
@@ -69,23 +84,38 @@ export const useGeneralTab = ({
     if (!isActive) return;
     onRefreshStatuses();
     pairingsPoll.refresh();
-    devicePoll.refresh();
-  }, [devicePoll.refresh, isActive, onRefreshStatuses, pairingsPoll.refresh]);
+    if (shouldPollDevices) {
+      devicePoll.refresh();
+    }
+  }, [
+    devicePoll.refresh,
+    isActive,
+    onRefreshStatuses,
+    pairingsPoll.refresh,
+    devicePollingEnabled,
+    shouldPollDevices,
+  ]);
 
   useEffect(() => {
     if (!restartSignal || !isActive) return;
     onRefreshStatuses();
     pairingsPoll.refresh();
-    devicePoll.refresh();
+    if (shouldPollDevices) {
+      devicePoll.refresh();
+    }
     const t1 = setTimeout(() => {
       onRefreshStatuses();
       pairingsPoll.refresh();
-      devicePoll.refresh();
+      if (shouldPollDevices) {
+        devicePoll.refresh();
+      }
     }, 1200);
     const t2 = setTimeout(() => {
       onRefreshStatuses();
       pairingsPoll.refresh();
-      devicePoll.refresh();
+      if (shouldPollDevices) {
+        devicePoll.refresh();
+      }
     }, 3500);
     return () => {
       clearTimeout(t1);
@@ -97,6 +127,8 @@ export const useGeneralTab = ({
     onRefreshStatuses,
     pairingsPoll.refresh,
     restartSignal,
+    devicePollingEnabled,
+    shouldPollDevices,
   ]);
 
   useEffect(() => {
@@ -108,10 +140,34 @@ export const useGeneralTab = ({
     );
   }, [syncCron?.enabled, syncCron?.schedule]);
 
+  useEffect(
+    () => () => {
+      if (pairingRefreshTimerRef.current) {
+        clearTimeout(pairingRefreshTimerRef.current);
+      }
+    },
+    [],
+  );
+
   const refreshAfterPairingAction = () => {
-    setTimeout(pairingsPoll.refresh, 500);
-    setTimeout(pairingsPoll.refresh, 2000);
-    setTimeout(onRefreshStatuses, 3000);
+    setPairingStatusRefreshing(true);
+    if (pairingRefreshTimerRef.current) {
+      clearTimeout(pairingRefreshTimerRef.current);
+    }
+    pairingRefreshTimerRef.current = setTimeout(() => {
+      setPairingStatusRefreshing(false);
+      pairingRefreshTimerRef.current = null;
+    }, 2800);
+    onRefreshStatuses();
+    pairingsPoll.refresh();
+    setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+    }, 700);
+    setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+    }, 1800);
   };
 
   const saveSyncCronSettings = async ({
@@ -146,14 +202,18 @@ export const useGeneralTab = ({
     });
   };
 
-  const handleApprove = async (id, channel) => {
-    await approvePairing(id, channel);
+  const handleApprove = async (id, channel, accountId = "") => {
+    await approvePairing(id, channel, accountId);
     refreshAfterPairingAction();
   };
 
-  const handleReject = async (id, channel) => {
-    await rejectPairing(id, channel);
-    refreshAfterPairingAction();
+  const handleReject = async (id, channel, accountId = "") => {
+    try {
+      await rejectPairing(id, channel, accountId);
+      refreshAfterPairingAction();
+    } catch (err) {
+      showToast(err.message || "Could not reject pairing", "error");
+    }
   };
 
   const handleDeviceApprove = async (id) => {
@@ -187,6 +247,7 @@ export const useGeneralTab = ({
 
   const handleOpenDashboard = async () => {
     if (dashboardLoading) return;
+    setDevicePollingEnabled(true);
     setDashboardLoading(true);
     try {
       const data = await fetchDashboardUrl();
@@ -210,6 +271,7 @@ export const useGeneralTab = ({
       hasUnpaired,
       openclawVersion,
       pending,
+      pairingStatusRefreshing,
       repairingWatchdog,
       repo,
       savingSyncCron,

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -135,9 +135,7 @@ export const GmailSetupWizard = ({
     String(projectIdInput || "").trim() ||
     String(clientConfig?.projectId || "").trim() ||
     "<project-id>";
-  const hasExistingWebhookSetup = Boolean(
-    clientConfig?.configured && clientConfig?.transformExists,
-  );
+  const hasExistingWebhookSetup = Boolean(clientConfig?.webhookExists);
   const client =
     String(account?.client || clientConfig?.client || "default").trim() ||
     "default";

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

@@ -17,6 +17,7 @@ import { CredentialsModal } from "../credentials-modal.js";
 import { ConfirmDialog } from "../confirm-dialog.js";
 import { showToast } from "../toast.js";
 import { ActionButton } from "../action-button.js";
+import { OverflowMenu, OverflowMenuItem } from "../overflow-menu.js";
 import { GoogleAccountRow } from "./account-row.js";
 import { AddGoogleAccountModal } from "./add-account-modal.js";
 import { useGoogleAccounts } from "./use-google-accounts.js";
@@ -455,37 +456,34 @@ export const Google = ({
         ${accounts.length
           ? html`
               <div class="relative">
-                <button
-                  type="button"
-                  onclick=${() => setAddMenuOpen((prev) => !prev)}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
+                <${OverflowMenu}
+                  open=${addMenuOpen}
+                  ariaLabel="Add Google account"
+                  title="Add Google account"
+                  onClose=${() => setAddMenuOpen(false)}
+                  onToggle=${() => setAddMenuOpen((prev) => !prev)}
+                  renderTrigger=${({ onToggle, ariaLabel, title }) => html`
+                    <${ActionButton}
+                      onClick=${onToggle}
+                      tone="subtle"
+                      size="sm"
+                      idleLabel="+ Add Account"
+                      ariaLabel=${ariaLabel}
+                      title=${title}
+                    />
+                  `}
                 >
-                  + Add Account
-                </button>
-                ${addMenuOpen
-                  ? html`
-                      <div
-                        class="absolute right-0 top-full mt-2 min-w-[210px] rounded-lg border border-border bg-modal p-1 z-20"
-                      >
-                        <button
-                          type="button"
-                          onclick=${handleAddCompanyClick}
-                          class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
-                        >
-                          Company account
-                        </button>
-                        ${!hasPersonalAccount
-                          ? html`<button
-                              type="button"
-                              onclick=${handleAddPersonalClick}
-                              class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
-                            >
-                              Personal account
-                            </button>`
-                          : null}
-                      </div>
-                    `
-                  : null}
+                  <${OverflowMenuItem} onClick=${handleAddCompanyClick}>
+                    Company account
+                  </${OverflowMenuItem}>
+                  ${!hasPersonalAccount
+                    ? html`
+                        <${OverflowMenuItem} onClick=${handleAddPersonalClick}>
+                          Personal account
+                        </${OverflowMenuItem}>
+                      `
+                    : null}
+                </${OverflowMenu}>
               </div>
             `
           : null}

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

@@ -41,6 +41,30 @@ export const CloseIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const AddLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z" />
+  </svg>
+`;
+
+export const More2FillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M5 10C3.89543 10 3 10.8954 3 12C3 13.1046 3.89543 14 5 14C6.10457 14 7 13.1046 7 12C7 10.8954 6.10457 10 5 10ZM12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10ZM19 10C17.8954 10 17 10.8954 17 12C17 13.1046 17.8954 14 19 14C20.1046 14 21 13.1046 21 12C21 10.8954 20.1046 10 19 10Z"
+    />
+  </svg>
+`;
+
 export const HomeLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}
@@ -67,6 +91,19 @@ export const FolderLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const RobotLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M13.5 2C13.5 2.44425 13.3069 2.84339 13 3.11805V5H18C19.6569 5 21 6.34315 21 8V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V8C3 6.34315 4.34315 5 6 5H11V3.11805C10.6931 2.84339 10.5 2.44425 10.5 2C10.5 1.17157 11.1716 0.5 12 0.5C12.8284 0.5 13.5 1.17157 13.5 2ZM6 7C5.44772 7 5 7.44772 5 8V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V8C19 7.44772 18.5523 7 18 7H13H11H6ZM2 10H0V16H2V10ZM22 10H24V16H22V10ZM9 14.5C9.82843 14.5 10.5 13.8284 10.5 13C10.5 12.1716 9.82843 11.5 9 11.5C8.17157 11.5 7.5 12.1716 7.5 13C7.5 13.8284 8.17157 14.5 9 14.5ZM15 14.5C15.8284 14.5 16.5 13.8284 16.5 13C16.5 12.1716 15.8284 11.5 15 11.5C14.1716 11.5 13.5 12.1716 13.5 13C13.5 13.8284 14.1716 14.5 15 14.5Z"
+    />
+  </svg>
+`;
+
 export const MarkdownFillIcon = ({ className = "" }) => html`
   <svg
     class=${className}