@chrysb/alphaclaw 0.6.2-beta.4 → 0.6.2-beta.5

package/lib/public/assets/icons/slack.svg

@@ -0,0 +1,17 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4127_70105)">
+<path d="M11.379 33.9993C11.379 37.1358 8.84512 39.6507 5.7276 39.6507C2.61008 39.6507 0.0572205 37.1168 0.0572205 33.9993C0.0572205 30.8817 2.5911 28.3479 5.70862 28.3479H11.36V33.9993H11.379Z" fill="#E01E5A"/>
+<path d="M14.1962 33.9997C14.1962 30.8632 16.7301 28.3483 19.8476 28.3483C22.9651 28.3483 25.499 30.8822 25.499 33.9997V48.1353C25.499 51.2718 22.9651 53.7867 19.8476 53.7867C16.7301 53.7867 14.1962 51.2718 14.1962 48.1353V33.9997Z" fill="#E01E5A"/>
+<path d="M19.8662 11.2673C16.7296 11.2673 14.2148 8.73347 14.2148 5.61594C14.2148 2.49842 16.7486 -0.0354538 19.8662 -0.0354538C22.9837 -0.0354538 25.5175 2.49842 25.5175 5.61594V11.2673H19.8662Z" fill="#36C5F0"/>
+<path d="M19.8682 14.1334C23.0047 14.1334 25.5196 16.6673 25.5196 19.7848C25.5196 22.9023 22.9857 25.4362 19.8682 25.4362H5.67566C2.53916 25.4362 0.0242615 22.9023 0.0242615 19.7848C0.0242615 16.6673 2.55814 14.1334 5.67566 14.1334H19.8682Z" fill="#36C5F0"/>
+<path d="M42.5323 19.7853C42.5323 16.6488 45.0662 14.1339 48.1837 14.1339C51.3012 14.1339 53.8351 16.6678 53.8351 19.7853C53.8351 22.9028 51.3012 25.4367 48.1837 25.4367H42.5323V19.7853Z" fill="#2EB67D"/>
+<path d="M39.7126 19.7934C39.7126 22.9299 37.1787 25.4448 34.0612 25.4448C30.9436 25.4448 28.4098 22.911 28.4098 19.7934V5.61986C28.4098 2.48336 30.9436 -0.0315399 34.0612 -0.0315399C37.1787 -0.0315399 39.7126 2.48336 39.7126 5.61986V19.7934Z" fill="#2EB67D"/>
+<path d="M34.0376 42.482C37.1741 42.482 39.689 45.0158 39.689 48.1334C39.689 51.2509 37.1552 53.7848 34.0376 53.7848C30.9201 53.7848 28.3862 51.2509 28.3862 48.1334V42.482H34.0376Z" fill="#ECB22E"/>
+<path d="M34.0381 39.6507C30.9016 39.6507 28.3867 37.1168 28.3867 33.9993C28.3867 30.8818 30.9206 28.3479 34.0381 28.3479H48.2306C51.3671 28.3479 53.882 30.8818 53.882 33.9993C53.882 37.1168 51.3482 39.6507 48.2306 39.6507H34.0381Z" fill="#ECB22E"/>
+</g>
+<defs>
+<clipPath id="clip0_4127_70105">
+<rect width="54" height="54" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/public/js/components/add-channel-menu.js

@@ -0,0 +1,59 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "./action-button.js";
+import { AddLineIcon } from "./icons.js";
+import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
+
+const html = htm.bind(h);
+
+export const AddChannelMenu = ({
+  open = false,
+  onClose = () => {},
+  onToggle = () => {},
+  triggerDisabled = false,
+  channelIds = [],
+  getChannelMeta = () => ({ label: "Channel", iconSrc: "" }),
+  isChannelDisabled = () => false,
+  onSelectChannel = () => {},
+}) => html`
+  <${OverflowMenu}
+    open=${open}
+    ariaLabel="Add channel"
+    title="Add channel"
+    onClose=${onClose}
+    onToggle=${onToggle}
+    renderTrigger=${({ onToggle: handleToggle, ariaLabel, title }) => html`
+      <${ActionButton}
+        onClick=${handleToggle}
+        disabled=${triggerDisabled}
+        loading=${false}
+        loadingMode="inline"
+        tone="subtle"
+        size="sm"
+        idleLabel="Add channel"
+        loadingLabel="Opening..."
+        idleIcon=${AddLineIcon}
+        idleIconClassName="h-3.5 w-3.5"
+        iconOnly=${true}
+        title=${title}
+        ariaLabel=${ariaLabel}
+      />
+    `}
+  >
+    ${channelIds.map((channelId) => {
+      const channelMeta = getChannelMeta(channelId);
+      const disabled = !!isChannelDisabled(channelId);
+      return html`
+        <${OverflowMenuItem}
+          key=${channelId}
+          iconSrc=${channelMeta.iconSrc}
+          disabled=${disabled}
+          onClick=${() => onSelectChannel(channelId)}
+        >
+          ${channelMeta.label}
+        </${OverflowMenuItem}>
+      `;
+    })}
+  </${OverflowMenu}>
+`;
+

package/lib/public/js/components/agents-tab/agent-bindings-section/index.js

@@ -1,10 +1,11 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { isChannelProviderDisabledForAdd } from "../../../lib/channel-provider-availability.js";
+import { AddChannelMenu } from "../../add-channel-menu.js";
 import { ActionButton } from "../../action-button.js";
 import { ALL_CHANNELS, ChannelsCard, getChannelMeta } from "../../channels.js";
 import { ConfirmDialog } from "../../confirm-dialog.js";
 import { AddLineIcon } from "../../icons.js";
-import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
 import { CreateChannelModal } from "../create-channel-modal.js";
 import { ChannelCardItem } from "./channel-item-trailing.js";
 import { useAgentBindings } from "./use-agent-bindings.js";
@@ -50,7 +51,7 @@ export const AgentBindingsSection = ({
     setShowCreateModal,
     showCreateModal,
   } = useAgentBindings({ agent, agents });
-  const { hasDiscordAccount, mergedChannelItems } = useChannelItems({
+  const { mergedChannelItems } = useChannelItems({
     agentId,
     agentNameMap,
     channelStatus,
@@ -108,48 +109,23 @@ export const AgentBindingsSection = ({
                   />`;
                 }}
                 actions=${html`
-                  <${OverflowMenu}
+                  <${AddChannelMenu}
                     open=${menuOpenId === "__create_channel"}
-                    ariaLabel="Add channel"
-                    title="Add channel"
                     onClose=${() => setMenuOpenId("")}
                     onToggle=${() =>
                       setMenuOpenId((current) =>
                         current === "__create_channel" ? "" : "__create_channel",
                       )}
-                    renderTrigger=${({ onToggle, ariaLabel, title }) => html`
-                      <${ActionButton}
-                        onClick=${onToggle}
-                        disabled=${saving}
-                        loading=${false}
-                        loadingMode="inline"
-                        tone="subtle"
-                        size="sm"
-                        loadingLabel="Opening..."
-                        idleIcon=${AddLineIcon}
-                        idleIconClassName="h-3.5 w-3.5"
-                        iconOnly=${true}
-                        title=${title}
-                        ariaLabel=${ariaLabel}
-                        idleLabel="Add channel"
-                      />
-                    `}
-                  >
-                    ${ALL_CHANNELS.map((channelId) => {
-                      const channelMeta = getChannelMeta(channelId);
-                      const isDisabled = channelId === "discord" && hasDiscordAccount;
-                      return html`
-                        <${OverflowMenuItem}
-                          key=${channelId}
-                          iconSrc=${channelMeta.iconSrc}
-                          disabled=${isDisabled}
-                          onClick=${() => openCreateChannelModal(channelId)}
-                        >
-                          ${channelMeta.label}
-                        </${OverflowMenuItem}>
-                      `;
-                    })}
-                  </${OverflowMenu}>
+                    triggerDisabled=${saving}
+                    channelIds=${ALL_CHANNELS}
+                    getChannelMeta=${getChannelMeta}
+                    isChannelDisabled=${(channelId) =>
+                      isChannelProviderDisabledForAdd({
+                        configuredChannelMap,
+                        provider: channelId,
+                      })}
+                    onSelectChannel=${openCreateChannelModal}
+                  />
                 `}
               />
             </div>

package/lib/public/js/components/agents-tab/agent-bindings-section/use-channel-items.js

@@ -20,11 +20,6 @@ export const useChannelItems = ({
   defaultAgentId = "",
   isDefaultAgent = false,
 }) => {
-  const hasDiscordAccount = useMemo(() => {
-    const discordChannel = configuredChannelMap.get("discord");
-    return Array.isArray(discordChannel?.accounts) && discordChannel.accounts.length > 0;
-  }, [configuredChannelMap]);
-
   const [showAssignedElsewhere, setShowAssignedElsewhere] = useState(false);
 
   const channelItemData = useMemo(() => {
@@ -205,7 +200,6 @@ export const useChannelItems = ({
   }, [assignedElsewhereItems, showAssignedElsewhere, visibleChannelItems]);
 
   return {
-    hasDiscordAccount,
     mergedChannelItems,
   };
 };

package/lib/public/js/components/agents-tab/create-channel-modal.js

@@ -14,8 +14,28 @@ const html = htm.bind(h);
 const kChannelEnvKeys = {
   telegram: "TELEGRAM_BOT_TOKEN",
   discord: "DISCORD_BOT_TOKEN",
+  slack: "SLACK_BOT_TOKEN",
 };
 
+const kChannelExtraEnvKeys = {
+  slack: "SLACK_APP_TOKEN",
+};
+const kSlackBotScopes = [
+  "app_mentions:read",
+  "channels:history",
+  "channels:read",
+  "chat:write",
+  "groups:history",
+  "im:history",
+  "im:read",
+  "im:write",
+  "mpim:history",
+  "reactions:read",
+  "reactions:write",
+  "users:read",
+];
+const kSlackInstructionsLink = "https://docs.openclaw.ai/channels/slack";
+
 const slugifyChannelAccountId = (value) =>
   String(value || "")
     .toLowerCase()
@@ -50,6 +70,7 @@ export const CreateChannelModal = ({
   const [name, setName] = useState("");
   const [token, setToken] = useState("");
   const [initialToken, setInitialToken] = useState("");
+  const [appToken, setAppToken] = useState("");
   const [agentId, setAgentId] = useState("");
   const [error, setError] = useState("");
   const [nameEditedManually, setNameEditedManually] = useState(false);
@@ -66,22 +87,23 @@ export const CreateChannelModal = ({
     const nextSelectedChannel =
       existingChannels.find(
         (entry) =>
-          String(entry?.channel || "").trim() === String(nextProvider || "").trim(),
+          String(entry?.channel || "").trim() ===
+          String(nextProvider || "").trim(),
       ) || null;
     const nextProviderHasAccounts =
-      Array.isArray(nextSelectedChannel?.accounts)
-      && nextSelectedChannel.accounts.length > 0;
+      Array.isArray(nextSelectedChannel?.accounts) &&
+      nextSelectedChannel.accounts.length > 0;
     const nextName = isEditMode
       ? String(account?.name || "").trim() || providerLabel
       : nextProviderHasAccounts
         ? ""
         : providerLabel;
     const nextAgentId = isEditMode
-      ? String(account?.ownerAgentId || "").trim()
-        || String(initialAgentId || "").trim()
-        || String(agents[0]?.id || "").trim()
-      : String(initialAgentId || "").trim()
-        || String(agents[0]?.id || "").trim();
+      ? String(account?.ownerAgentId || "").trim() ||
+        String(initialAgentId || "").trim() ||
+        String(agents[0]?.id || "").trim()
+      : String(initialAgentId || "").trim() ||
+        String(agents[0]?.id || "").trim();
     setProvider(nextProvider);
     setName(nextName);
     const nextToken = isEditMode
@@ -92,6 +114,7 @@ export const CreateChannelModal = ({
       : "";
     setToken(nextToken);
     setInitialToken(nextToken);
+    setAppToken("");
     setAgentId(nextAgentId);
     setError("");
     setNameEditedManually(isEditMode);
@@ -108,13 +131,16 @@ export const CreateChannelModal = ({
   const selectedChannel = useMemo(
     () =>
       existingChannels.find(
-        (entry) => String(entry?.channel || "").trim() === String(provider || "").trim(),
+        (entry) =>
+          String(entry?.channel || "").trim() === String(provider || "").trim(),
       ) || null,
     [existingChannels, provider],
   );
 
   const providerHasAccounts = useMemo(
-    () => Array.isArray(selectedChannel?.accounts) && selectedChannel.accounts.length > 0,
+    () =>
+      Array.isArray(selectedChannel?.accounts) &&
+      selectedChannel.accounts.length > 0,
     [selectedChannel],
   );
   useEffect(() => {
@@ -126,7 +152,10 @@ export const CreateChannelModal = ({
     }
     setName(providerLabel);
   }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);
-  const isSingleAccountProvider = String(provider || "").trim() === "discord";
+  const isSingleAccountProvider =
+    String(provider || "").trim() === "discord" ||
+    String(provider || "").trim() === "slack";
+  const needsAppToken = String(provider || "").trim() === "slack";
 
   const accountId = useMemo(() => {
     if (isEditMode) {
@@ -144,9 +173,10 @@ export const CreateChannelModal = ({
 
   const accountExists = useMemo(
     () =>
-      Array.isArray(selectedChannel?.accounts)
-      && selectedChannel.accounts.some(
-        (entry) => String(entry?.id || "").trim() === String(accountId || "").trim(),
+      Array.isArray(selectedChannel?.accounts) &&
+      selectedChannel.accounts.some(
+        (entry) =>
+          String(entry?.id || "").trim() === String(accountId || "").trim(),
       ),
     [selectedChannel, accountId],
   );
@@ -162,8 +192,10 @@ export const CreateChannelModal = ({
         });
         if (cancelled) return;
         const nextToken = String(result?.token || "");
+        const nextAppToken = String(result?.appToken || "");
         setToken(nextToken);
         setInitialToken(nextToken);
+        setAppToken(nextAppToken);
       } catch {
         // Keep existing fallback value.
       } finally {
@@ -179,13 +211,14 @@ export const CreateChannelModal = ({
   }, [visible, isEditMode, provider, accountId]);
 
   const canSubmit =
-    !!String(provider || "").trim()
-    && !!String(name || "").trim()
-    && !!String(accountId || "").trim()
-    && !!String(agentId || "").trim()
-    && (isEditMode || !!String(token || "").trim())
-    && (isEditMode || !accountExists)
-    && !loadingToken;
+    !!String(provider || "").trim() &&
+    !!String(name || "").trim() &&
+    !!String(accountId || "").trim() &&
+    !!String(agentId || "").trim() &&
+    (isEditMode || !!String(token || "").trim()) &&
+    (isEditMode || !needsAppToken || !!String(appToken || "").trim()) &&
+    (isEditMode || !accountExists) &&
+    !loadingToken;
 
   if (!visible) return null;
 
@@ -202,6 +235,10 @@ export const CreateChannelModal = ({
       setError("Token is required");
       return;
     }
+    if (!isEditMode && needsAppToken && !String(appToken || "").trim()) {
+      setError("App Token is required for Slack");
+      return;
+    }
     if (!String(agentId || "").trim()) {
       setError("Agent is required");
       return;
@@ -213,13 +250,18 @@ export const CreateChannelModal = ({
 
     setError("");
     const trimmedToken = String(token || "").trim();
-    const tokenWasUpdated = trimmedToken && trimmedToken !== String(initialToken || "").trim();
+    const tokenWasUpdated =
+      trimmedToken && trimmedToken !== String(initialToken || "").trim();
+    const trimmedAppToken = String(appToken || "").trim();
     await onSubmit({
       provider,
       name: String(name || "").trim(),
       accountId,
       agentId,
       ...(tokenWasUpdated ? { token: trimmedToken } : {}),
+      ...(needsAppToken && trimmedAppToken
+        ? { appToken: trimmedAppToken }
+        : {}),
     });
   };
 
@@ -230,9 +272,11 @@ export const CreateChannelModal = ({
       panelClassName="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
     >
       <${PageHeader}
-        title=${isEditMode
-          ? "Edit Channel"
-          : `Add ${getChannelMeta(provider).label || "Channel"} Channel`}
+        title=${
+          isEditMode
+            ? "Edit Channel"
+            : `Add ${getChannelMeta(provider).label || "Channel"} Channel`
+        }
         actions=${html`
           <button
             type="button"
@@ -269,18 +313,22 @@ export const CreateChannelModal = ({
             class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm font-mono text-gray-400 outline-none"
           />
           <p class="text-xs text-gray-500">
-            ${isEditMode
-              ? "Channel id is fixed after creation."
-              : isSingleAccountProvider
-              ? "Discord supports one channel account and uses the default id."
-              : providerHasAccounts
-              ? "Derived from the channel name."
-              : "First account uses the default id for this provider."}
+            ${
+              isEditMode
+                ? "Channel id is fixed after creation."
+                : isSingleAccountProvider
+                  ? `${getChannelMeta(provider).label} supports one channel account and uses the default id.`
+                  : providerHasAccounts
+                    ? "Derived from the channel name."
+                    : "First account uses the default id for this provider."
+            }
           </p>
         </label>
 
         <label class="block space-y-1">
-          <span class="text-xs text-gray-400">Token</span>
+          <span class="text-xs text-gray-400">
+            ${needsAppToken ? "Bot Token" : "Token"}
+          </span>
           <${SecretInput}
             value=${token}
             onInput=${(event) => setToken(event.target.value)}
@@ -295,6 +343,92 @@ export const CreateChannelModal = ({
           </p>
         </label>
 
+        ${
+          needsAppToken
+            ? html`
+                <label class="block space-y-1">
+                  <span class="text-xs text-gray-400"
+                    >App Token (Socket Mode)</span
+                  >
+                  <${SecretInput}
+                    value=${appToken}
+                    onInput=${(event) => setAppToken(event.target.value)}
+                    placeholder="xapp-..."
+                    isSecret=${true}
+                    inputClass="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm font-mono text-gray-200 outline-none focus:border-gray-500"
+                  />
+                  <p class="text-xs text-gray-500">
+                    Saved behind the scenes as
+                    <code class="font-mono text-gray-400 ml-1">
+                      ${kChannelExtraEnvKeys.slack}
+                    </code>
+                    .
+                  </p>
+                </label>
+              `
+            : null
+        }
+        ${
+          needsAppToken
+            ? html`
+                <details class="rounded-lg border border-border bg-black/20 px-3 py-2.5">
+                  <summary class="cursor-pointer text-xs text-gray-300 hover:text-gray-200">
+                    Slack-specific instructions (step-by-step)
+                  </summary>
+                  <div class="mt-2 space-y-2 text-xs text-gray-500">
+                    <ol class="list-decimal list-inside space-y-1.5">
+                      <li>
+                        In Slack app settings, turn on
+                        ${" "}
+                        <span class="text-gray-300">Socket Mode</span>.
+                      </li>
+                      <li>
+                        In
+                        ${" "}
+                        <span class="text-gray-300">App Home</span>, enable
+                        <code class="font-mono text-gray-400 ml-1">
+                          Allow users to send Slash commands and messages from the messages tab
+                        </code>.
+                      </li>
+                      <li>
+                        In
+                        ${" "}
+                        <span class="text-gray-300">Event Subscriptions</span>, toggle on
+                        <code class="font-mono text-gray-400 ml-1">Subscribe to bot events</code>
+                        ${" "}
+                        and add
+                        <code class="font-mono text-gray-400 ml-1">message.im</code>.
+                      </li>
+                      <li>
+                        Create a Bot Token (<code class="font-mono text-gray-400">xoxb-...</code>)
+                        with scopes:
+                        <code class="font-mono text-gray-400 ml-1">
+                          ${kSlackBotScopes.join(", ")}
+                        </code>
+                      </li>
+                      <li>
+                        Create an App Token (<code class="font-mono text-gray-400">xapp-...</code>)
+                        with
+                        <code class="font-mono text-gray-400 ml-1">connections:write</code>.
+                      </li>
+                      <li>
+                        Reinstall the app after changing scopes.
+                      </li>
+                    </ol>
+                    <a
+                      href=${kSlackInstructionsLink}
+                      target="_blank"
+                      class="hover:underline"
+                      style="color: var(--accent-link)"
+                    >
+                      Open full Slack setup guide
+                    </a>
+                  </div>
+                </details>
+              `
+            : null
+        }
+
         <label class="block space-y-1">
           <span class="text-xs text-gray-400">Agent</span>
           <select
@@ -302,23 +436,27 @@ export const CreateChannelModal = ({
             onInput=${(event) => setAgentId(event.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"
           >
-            ${agents.map((agent) => html`
-              <option key=${agent.id} value=${agent.id}>
-                ${agent.name || agent.id}
-              </option>
-            `)}
+            ${agents.map(
+              (agent) => html`
+                <option key=${agent.id} value=${agent.id}>
+                  ${agent.name || agent.id}
+                </option>
+              `,
+            )}
           </select>
         </label>
 
-        ${!isEditMode && accountExists
-          ? html`
-              <p class="text-xs text-red-400">
-                ${isSingleAccountProvider
-                  ? "Discord already has a configured channel account."
-                  : `A ${getChannelMeta(provider).label} account with this id already exists.`}
-              </p>
-            `
-          : null}
+        ${
+          !isEditMode && accountExists
+            ? html`
+                <p class="text-xs text-red-400">
+                  ${isSingleAccountProvider
+                    ? `${getChannelMeta(provider).label} already has a configured channel account.`
+                    : `A ${getChannelMeta(provider).label} account with this id already exists.`}
+                </p>
+              `
+            : null
+        }
         ${error ? html`<p class="text-xs text-red-400">${error}</p>` : null}
       </div>
 

package/lib/public/js/components/channels.js

@@ -6,10 +6,9 @@ import {
   useState,
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { ActionButton } from "./action-button.js";
+import { AddChannelMenu } from "./add-channel-menu.js";
 import { ChannelAccountStatusBadge } from "./channel-account-status-badge.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
-import { AddLineIcon } from "./icons.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import {
   deleteChannelAccount,
@@ -21,15 +20,17 @@ import {
   resolveChannelAccountLabel,
 } from "../lib/channel-accounts.js";
 import { createChannelAccountWithProgress } from "../lib/channel-create-operation.js";
+import { isChannelProviderDisabledForAdd } from "../lib/channel-provider-availability.js";
 import { CreateChannelModal } from "./agents-tab/create-channel-modal.js";
 import { showToast } from "./toast.js";
 
 const html = htm.bind(h);
 
-const ALL_CHANNELS = ["telegram", "discord"];
+const ALL_CHANNELS = ["telegram", "discord", "slack"];
 const kChannelMeta = {
   telegram: { label: "Telegram", iconSrc: "/assets/icons/telegram.svg" },
   discord: { label: "Discord", iconSrc: "/assets/icons/discord.svg" },
+  slack: { label: "Slack", iconSrc: "/assets/icons/slack.svg" },
 };
 
 const getChannelMeta = (channelId = "") => {
@@ -271,11 +272,6 @@ export const Channels = ({
       mode: "create",
     });
   };
-  const hasDiscordAccount = useMemo(() => {
-    const discordChannel = configuredChannelMap.get("discord");
-    return Array.isArray(discordChannel?.accounts) && discordChannel.accounts.length > 0;
-  }, [configuredChannelMap]);
-
   const items = useMemo(
     () => {
       if (loadingAccounts || !channels) return [];
@@ -477,48 +473,23 @@ export const Channels = ({
           ? "Loading..."
           : "No channels configured"}
         actions=${html`
-          <${OverflowMenu}
+          <${AddChannelMenu}
             open=${menuOpenId === "__create_channel"}
-            ariaLabel="Add channel"
-            title="Add channel"
             onClose=${() => setMenuOpenId("")}
             onToggle=${() =>
               setMenuOpenId((current) =>
                 current === "__create_channel" ? "" : "__create_channel",
               )}
-            renderTrigger=${({ onToggle, ariaLabel, title }) => html`
-              <${ActionButton}
-                onClick=${onToggle}
-                disabled=${saving || loadingAccounts}
-                loading=${false}
-                loadingMode="inline"
-                tone="subtle"
-                size="sm"
-                idleLabel="Add channel"
-                loadingLabel="Opening..."
-                idleIcon=${AddLineIcon}
-                idleIconClassName="h-3.5 w-3.5"
-                iconOnly=${true}
-                title=${title}
-                ariaLabel=${ariaLabel}
-              />
-            `}
-          >
-            ${ALL_CHANNELS.map((channelId) => {
-              const channelMeta = getChannelMeta(channelId);
-              const isDisabled = channelId === "discord" && hasDiscordAccount;
-              return html`
-                <${OverflowMenuItem}
-                  key=${channelId}
-                  iconSrc=${channelMeta.iconSrc}
-                  disabled=${isDisabled}
-                  onClick=${() => openCreateChannelModal(channelId)}
-                >
-                  ${channelMeta.label}
-                </${OverflowMenuItem}>
-              `;
-            })}
-          </${OverflowMenu}>
+            triggerDisabled=${saving || loadingAccounts}
+            channelIds=${ALL_CHANNELS}
+            getChannelMeta=${getChannelMeta}
+            isChannelDisabled=${(channelId) =>
+              isChannelProviderDisabledForAdd({
+                configuredChannelMap,
+                provider: channelId,
+              })}
+            onSelectChannel=${openCreateChannelModal}
+          />
         `}
       />
       <${CreateChannelModal}