@chrysb/alphaclaw 0.6.0-beta.1 → 0.6.0-beta.3

package/lib/public/js/components/agents-tab/agent-bindings-section/channel-item-trailing.js

@@ -0,0 +1,203 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Badge } from "../../badge.js";
+import { ChannelAccountStatusBadge } from "../../channel-account-status-badge.js";
+import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
+
+const html = htm.bind(h);
+
+export const ChannelItemTrailing = ({
+  item = {},
+  menuOpenId = "",
+  setMenuOpenId = () => {},
+  openDeleteChannelDialog = () => {},
+  openEditChannelModal = () => {},
+  requestBindAccount = () => {},
+  onSetLocation = () => {},
+}) => {
+  const {
+    accountData = {},
+    accountId = "",
+    accountStatusInfo = {},
+    canNavigateToOwnerAgent = false,
+    channel = "",
+    ownerAgentId = "",
+    ownerAgentName = "",
+    isAvailable = false,
+    isOwned = false,
+  } = item;
+
+  let statusTrailing = null;
+  if (isOwned) {
+    statusTrailing =
+      accountStatusInfo?.status === "paired"
+        ? html`<${ChannelAccountStatusBadge}
+            status=${accountStatusInfo?.status}
+            ownerAgentName=${ownerAgentName}
+            showAgentBadge=${true}
+            channelId=${channel}
+            pairedCount=${accountStatusInfo?.paired ?? 0}
+          />`
+        : html`<${ChannelAccountStatusBadge}
+            status=${accountStatusInfo?.status}
+            ownerAgentName=""
+            showAgentBadge=${false}
+            channelId=${channel}
+            pairedCount=${accountStatusInfo?.paired ?? 0}
+          />`;
+  } else if (isAvailable) {
+    statusTrailing = html`
+      <button
+        type="button"
+        onclick=${(event) => {
+          event.stopPropagation();
+          requestBindAccount(accountData);
+        }}
+        class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+      >
+        Bind
+      </button>
+    `;
+  } else {
+    statusTrailing = html`
+      ${canNavigateToOwnerAgent
+        ? html`
+            <button
+              type="button"
+              class="inline-flex rounded-full transition-[filter] hover:brightness-125 focus:outline-none focus:ring-1 focus:ring-border"
+              onclick=${(event) => {
+                event.stopPropagation();
+                onSetLocation(`/agents/${encodeURIComponent(ownerAgentId)}`);
+              }}
+              title=${`Open ${ownerAgentName}`}
+              aria-label=${`Open ${ownerAgentName}`}
+            >
+              <${Badge} tone="neutral">${ownerAgentName}</${Badge}>
+            </button>
+          `
+        : html`<${Badge} tone="neutral">${ownerAgentName || "Bound elsewhere"}</${Badge}>`}
+    `;
+  }
+
+  const showBindAction = accountData.isBoundElsewhere;
+  const canEditOrDelete = !accountData.isBoundElsewhere;
+
+  return html`
+    <div class="flex items-center gap-1.5">
+      ${statusTrailing}
+      <${OverflowMenu}
+        open=${menuOpenId === `${channel}:${accountId}`}
+        ariaLabel="Open channel actions"
+        title="Open channel actions"
+        onClose=${() => setMenuOpenId("")}
+        onToggle=${() =>
+          setMenuOpenId((current) =>
+            current === `${channel}:${accountId}`
+              ? ""
+              : `${channel}:${accountId}`,
+          )}
+      >
+        ${canEditOrDelete
+          ? html`
+              <${OverflowMenuItem}
+                onClick=${() => openEditChannelModal(accountData)}
+              >
+                Edit
+              </${OverflowMenuItem}>
+            `
+          : null}
+        ${showBindAction
+          ? html`
+              <${OverflowMenuItem}
+                onClick=${() => requestBindAccount(accountData)}
+              >
+                Bind
+              </${OverflowMenuItem}>
+            `
+          : null}
+        ${canEditOrDelete
+          ? html`
+              <${OverflowMenuItem}
+                className="text-red-300 hover:text-red-200"
+                onClick=${() => openDeleteChannelDialog(accountData)}
+              >
+                Delete
+              </${OverflowMenuItem}>
+            `
+          : null}
+      </${OverflowMenu}>
+    </div>
+  `;
+};
+
+export const ChannelCardItem = ({
+  item = {},
+  channelMeta = {},
+  menuOpenId = "",
+  setMenuOpenId = () => {},
+  openDeleteChannelDialog = () => {},
+  openEditChannelModal = () => {},
+  requestBindAccount = () => {},
+  onSetLocation = () => {},
+}) => {
+  const canOpenWorkspace = !!item?.canOpenWorkspace;
+  const accountId = String(item?.accountId || "").trim() || "default";
+  return html`
+    <div
+      key=${item.id || item.channel}
+      class="flex justify-between items-center py-1.5 ${canOpenWorkspace
+        ? "cursor-pointer hover:bg-white/5 -mx-2 px-2 rounded-lg transition-colors"
+        : ""}"
+      onclick=${canOpenWorkspace
+        ? () => onSetLocation(`/telegram/${encodeURIComponent(accountId)}`)
+        : undefined}
+    >
+      <span class="font-medium text-sm flex items-center gap-2 min-w-0">
+        ${channelMeta?.iconSrc
+          ? html`
+              <img
+                src=${channelMeta.iconSrc}
+                alt=""
+                class="w-4 h-4 rounded-sm"
+                aria-hidden="true"
+              />
+            `
+          : null}
+        <span class="truncate ${item?.dimmedLabel ? "text-gray-500" : ""} ${item?.labelClassName || ""}">
+          ${item?.label || channelMeta?.label || "Channel"}
+        </span>
+        ${canOpenWorkspace
+          ? html`
+              <span class="text-xs text-gray-500 ml-1 shrink-0">Workspace</span>
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 16 16"
+                fill="none"
+                class="text-gray-600 shrink-0"
+              >
+                <path
+                  d="M6 3.5L10.5 8L6 12.5"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            `
+          : null}
+      </span>
+      <span class="flex items-center gap-2 shrink-0">
+        <${ChannelItemTrailing}
+          item=${item}
+          menuOpenId=${menuOpenId}
+          setMenuOpenId=${setMenuOpenId}
+          openDeleteChannelDialog=${openDeleteChannelDialog}
+          openEditChannelModal=${openEditChannelModal}
+          requestBindAccount=${requestBindAccount}
+          onSetLocation=${onSetLocation}
+        />
+      </span>
+    </div>
+  `;
+};

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

@@ -1,3 +1,8 @@
+import {
+  isImplicitDefaultAccount,
+  resolveChannelAccountLabel,
+} from "../../../lib/channel-accounts.js";
+
 export const announceBindingsChanged = (agentId) => {
   window.dispatchEvent(
     new CustomEvent("alphaclaw:agent-bindings-changed", {
@@ -6,17 +11,12 @@ export const announceBindingsChanged = (agentId) => {
   );
 };
 
-export const resolveChannelAccountLabel = ({ channelId, account = {} }) => {
-  const providerLabel = channelId
-    ? channelId.charAt(0).toUpperCase() + channelId.slice(1)
-    : "Channel";
-  const configuredName = String(account?.name || "").trim();
-  if (configuredName) return configuredName;
-  const accountId = String(account?.id || "").trim();
-  if (!accountId || accountId === "default") return providerLabel;
-  return `${providerLabel} ${accountId}`;
+export const announceRestartRequired = () => {
+  window.dispatchEvent(new CustomEvent("alphaclaw:restart-required"));
 };
 
+export { resolveChannelAccountLabel };
+
 export const getChannelItemSortRank = (item = {}) => {
   if (item.isAwaitingPairing) return 99;
   if (item.isOwned) return 0;
@@ -55,9 +55,7 @@ export const getResolvedAccountStatusInfo = ({
   return getAccountStatusInfo({ statusInfo, accountId });
 };
 
-export const isImplicitDefaultAccount = ({ accountId, boundAgentId }) =>
-  String(accountId || "").trim() === "default" &&
-  !String(boundAgentId || "").trim();
+export { isImplicitDefaultAccount };
 
 export const canAgentBindAccount = ({
   accountId,

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

@@ -1,22 +1,14 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../../action-button.js";
-import { Badge } from "../../badge.js";
-import { ChannelAccountStatusBadge } from "../../channel-account-status-badge.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 {
-  canAgentBindAccount,
-  getChannelItemSortRank,
-  getResolvedAccountStatusInfo,
-  isImplicitDefaultAccount,
-  resolveChannelAccountLabel,
-} from "./helpers.js";
+import { ChannelCardItem } from "./channel-item-trailing.js";
 import { useAgentBindings } from "./use-agent-bindings.js";
+import { useChannelItems } from "./use-channel-items.js";
 
 const html = htm.bind(h);
 
@@ -58,232 +50,7 @@ export const AgentBindingsSection = ({
     setShowCreateModal,
     showCreateModal,
   } = useAgentBindings({ agent, agents });
-  const hasDiscordAccount = useMemo(() => {
-    const discordChannel = configuredChannelMap.get("discord");
-    return Array.isArray(discordChannel?.accounts) && discordChannel.accounts.length > 0;
-  }, [configuredChannelMap]);
-  const [showAssignedElsewhere, setShowAssignedElsewhere] = useState(false);
-
-  const channelItems = useMemo(() => {
-    const channelOrderMap = new Map(
-      configuredChannels.map((entry, index) => [
-        String(entry?.channel || "").trim(),
-        index,
-      ]),
-    );
-    const accountOrderMap = new Map(
-      configuredChannels.flatMap((entry) =>
-        (Array.isArray(entry?.accounts) ? entry.accounts : []).map(
-          (account, accountIndex) => [
-            `${String(entry?.channel || "").trim()}:${String(account?.id || "").trim() || "default"}`,
-            accountIndex,
-          ],
-        ),
-      ),
-    );
-    const channelIds = Array.from(
-      new Set([
-        ...configuredChannels.map((entry) => String(entry.channel || "").trim()),
-      ]),
-    ).filter(Boolean);
-
-    return channelIds
-      .flatMap((channelId) => {
-        const configuredChannel = configuredChannelMap.get(channelId);
-        const statusInfo = channelStatus?.[channelId] || null;
-        const accounts = Array.isArray(configuredChannel?.accounts)
-          ? configuredChannel.accounts
-          : [];
-
-        if (!configuredChannel && !statusInfo) return [];
-
-        return accounts.map((account) => {
-          const accountId = String(account?.id || "").trim() || "default";
-          const boundAgentId = String(account?.boundAgentId || "").trim();
-          const accountStatusInfo = getResolvedAccountStatusInfo({
-            account,
-            statusInfo,
-            accountId,
-          });
-          const isImplicitDefaultOwned =
-            isDefaultAgent &&
-            isImplicitDefaultAccount({ accountId, boundAgentId });
-          const isOwned = boundAgentId === agentId || isImplicitDefaultOwned;
-          const isImplicitDefaultElsewhere =
-            !isDefaultAgent &&
-            isImplicitDefaultAccount({ accountId, boundAgentId });
-          const isAvailable = canAgentBindAccount({
-            accountId,
-            boundAgentId,
-            agentId,
-            isDefaultAgent,
-          });
-          const ownerAgentId =
-            boundAgentId ||
-            (isImplicitDefaultAccount({ accountId, boundAgentId })
-              ? defaultAgentId
-              : "");
-          const ownerAgentName = String(
-            agentNameMap.get(ownerAgentId) || ownerAgentId || "",
-          ).trim();
-          const canNavigateToOwnerAgent =
-            !!ownerAgentId && ownerAgentId !== agentId && !!ownerAgentName;
-          const canOpenWorkspace =
-            channelId === "telegram" &&
-            isOwned &&
-            accountStatusInfo?.status === "paired";
-
-          const accountData = {
-            id: accountId,
-            provider: channelId,
-            name: resolveChannelAccountLabel({ channelId, account }),
-            rawName: String(account?.name || "").trim(),
-            ownerAgentId,
-            ownerAgentName,
-            boundAgentId,
-            isOwned,
-            envKey: String(account?.envKey || "").trim(),
-            token: String(account?.token || "").trim(),
-            isAvailable,
-            isBoundElsewhere:
-              !isOwned &&
-              (!isAvailable || isImplicitDefaultElsewhere || !!ownerAgentId),
-          };
-          let statusTrailing = null;
-          if (isOwned) {
-            statusTrailing =
-              accountStatusInfo?.status === "paired"
-                ? html`<${ChannelAccountStatusBadge}
-                    status=${accountStatusInfo?.status}
-                    ownerAgentName=${ownerAgentName}
-                    showAgentBadge=${true}
-                    channelId=${channelId}
-                    pairedCount=${accountStatusInfo?.paired ?? 0}
-                  />`
-                : html`<${ChannelAccountStatusBadge}
-                    status=${accountStatusInfo?.status}
-                    ownerAgentName=""
-                    showAgentBadge=${false}
-                    channelId=${channelId}
-                    pairedCount=${accountStatusInfo?.paired ?? 0}
-                  />`;
-          } else if (isAvailable) {
-            statusTrailing = html`
-              <button
-                type="button"
-                onclick=${(event) => {
-                  event.stopPropagation();
-                  requestBindAccount(accountData);
-                }}
-                class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
-              >
-                Bind
-              </button>
-            `;
-          } else {
-            statusTrailing = html`
-              ${canNavigateToOwnerAgent
-                ? html`
-                    <button
-                      type="button"
-                      class="inline-flex rounded-full transition-[filter] hover:brightness-125 focus:outline-none focus:ring-1 focus:ring-border"
-                      onclick=${(event) => {
-                        event.stopPropagation();
-                        onSetLocation(`/agents/${encodeURIComponent(ownerAgentId)}`);
-                      }}
-                      title=${`Open ${ownerAgentName}`}
-                      aria-label=${`Open ${ownerAgentName}`}
-                    >
-                      <${Badge} tone="neutral">${ownerAgentName}</${Badge}>
-                    </button>
-                  `
-                : html`<${Badge} tone="neutral">${ownerAgentName || "Bound elsewhere"}</${Badge}>`}
-            `;
-          }
-
-          const showBindAction = accountData.isBoundElsewhere;
-          const canEditOrDelete = !accountData.isBoundElsewhere;
-          const accountTrailing = html`
-            <div class="flex items-center gap-1.5">
-              ${statusTrailing}
-              <${OverflowMenu}
-                open=${menuOpenId === `${channelId}:${accountId}`}
-                ariaLabel="Open channel actions"
-                title="Open channel actions"
-                onClose=${() => setMenuOpenId("")}
-                onToggle=${() =>
-                  setMenuOpenId((current) =>
-                    current === `${channelId}:${accountId}`
-                      ? ""
-                      : `${channelId}:${accountId}`,
-                  )}
-              >
-                ${canEditOrDelete
-                  ? html`
-                      <${OverflowMenuItem}
-                        onClick=${() => openEditChannelModal(accountData)}
-                      >
-                        Edit
-                      </${OverflowMenuItem}>
-                    `
-                  : null}
-                ${showBindAction
-                  ? html`
-                      <${OverflowMenuItem}
-                        onClick=${() => requestBindAccount(accountData)}
-                      >
-                        Bind
-                      </${OverflowMenuItem}>
-                    `
-                  : null}
-                ${canEditOrDelete
-                  ? html`
-                      <${OverflowMenuItem}
-                        className="text-red-300 hover:text-red-200"
-                        onClick=${() => openDeleteChannelDialog(accountData)}
-                      >
-                        Delete
-                      </${OverflowMenuItem}>
-                    `
-                  : null}
-              </${OverflowMenu}>
-            </div>
-          `;
-
-          return {
-            id: `${channelId}:${accountId}`,
-            channel: channelId,
-            channelOrder: Number(channelOrderMap.get(channelId) ?? 9999),
-            accountOrder: Number(
-              accountOrderMap.get(`${channelId}:${accountId}`) ?? 9999,
-            ),
-            label: resolveChannelAccountLabel({ channelId, account }),
-            isAwaitingPairing: accountStatusInfo?.status !== "paired",
-            clickable: canOpenWorkspace,
-            onClick: canOpenWorkspace ? () => onSetLocation(`/telegram/${encodeURIComponent(account?.id || "default")}`) : undefined,
-            detailText: canOpenWorkspace ? "Workspace" : "",
-            detailChevron: canOpenWorkspace,
-            trailing: accountTrailing,
-            isOwned,
-            isAvailable,
-            dimmedLabel: accountData.isBoundElsewhere,
-            isBoundElsewhere: accountData.isBoundElsewhere,
-          };
-        });
-      })
-      .filter(Boolean)
-      .sort((a, b) => {
-        const rankDiff = getChannelItemSortRank(a) - getChannelItemSortRank(b);
-        if (rankDiff !== 0) return rankDiff;
-        const channelOrderDiff =
-          Number(a?.channelOrder ?? 9999) - Number(b?.channelOrder ?? 9999);
-        if (channelOrderDiff !== 0) return channelOrderDiff;
-        const accountOrderDiff =
-          Number(a?.accountOrder ?? 9999) - Number(b?.accountOrder ?? 9999);
-        if (accountOrderDiff !== 0) return accountOrderDiff;
-        return String(a?.label || "").localeCompare(String(b?.label || ""));
-      });
-  }, [
+  const { hasDiscordAccount, mergedChannelItems } = useChannelItems({
     agentId,
     agentNameMap,
     channelStatus,
@@ -291,57 +58,7 @@ export const AgentBindingsSection = ({
     configuredChannels,
     defaultAgentId,
     isDefaultAgent,
-    menuOpenId,
-    onSetLocation,
-    openCreateChannelModal,
-    openDeleteChannelDialog,
-    openEditChannelModal,
-    requestBindAccount,
-    setMenuOpenId,
-  ]);
-  const visibleChannelItems = channelItems.filter(
-    (item) => !item?.isBoundElsewhere,
-  );
-  const assignedElsewhereItems = channelItems.filter(
-    (item) => !!item?.isBoundElsewhere,
-  );
-  useEffect(() => {
-    if (assignedElsewhereItems.length === 0) {
-      setShowAssignedElsewhere(false);
-      return;
-    }
-    if (visibleChannelItems.length === 0) {
-      setShowAssignedElsewhere(true);
-    }
-  }, [agentId, assignedElsewhereItems.length, visibleChannelItems.length]);
-  const mergedChannelItems = useMemo(() => {
-    const baseItems = [...visibleChannelItems];
-    if (assignedElsewhereItems.length === 0) return baseItems;
-    baseItems.push({
-      id: "__assigned_elsewhere_toggle",
-      label: html`
-        <span class="inline-flex items-center gap-1.5">
-          <span class=${`arrow inline-block ${showAssignedElsewhere ? "" : "-rotate-90"}`}>▼</span>
-          <span>Assigned elsewhere</span>
-        </span>
-      `,
-      labelClassName: "text-xs",
-      clickable: true,
-      onClick: () => setShowAssignedElsewhere((current) => !current),
-      dimmedLabel: true,
-      trailing: html`
-        <span class="inline-flex items-center gap-1.5 text-gray-500">
-          <span class="text-[11px] px-2 py-0.5 rounded-full border border-border">
-            ${assignedElsewhereItems.length}
-          </span>
-        </span>
-      `,
-    });
-    if (showAssignedElsewhere) {
-      baseItems.push(...assignedElsewhereItems);
-    }
-    return baseItems;
-  }, [assignedElsewhereItems, showAssignedElsewhere, visibleChannelItems]);
+  });
 
   return html`
     <div class="space-y-3">
@@ -375,6 +92,21 @@ export const AgentBindingsSection = ({
                 title="Channels"
                 items=${mergedChannelItems}
                 loadingLabel="No channels assigned to this agent."
+                renderItem=${({ item, channelMeta }) => {
+                  if (String(item?.id || "").trim() === "__assigned_elsewhere_toggle") {
+                    return null;
+                  }
+                  return html`<${ChannelCardItem}
+                    item=${item}
+                    channelMeta=${channelMeta}
+                    menuOpenId=${menuOpenId}
+                    setMenuOpenId=${setMenuOpenId}
+                    openDeleteChannelDialog=${openDeleteChannelDialog}
+                    openEditChannelModal=${openEditChannelModal}
+                    requestBindAccount=${requestBindAccount}
+                    onSetLocation=${onSetLocation}
+                  />`;
+                }}
                 actions=${html`
                   <${OverflowMenu}
                     open=${menuOpenId === "__create_channel"}

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

@@ -12,7 +12,7 @@ import {
 } from "../../../lib/api.js";
 import { createChannelAccountWithProgress } from "../../../lib/channel-create-operation.js";
 import { showToast } from "../../toast.js";
-import { announceBindingsChanged } from "./helpers.js";
+import { announceBindingsChanged, announceRestartRequired } from "./helpers.js";
 
 export const useAgentBindings = ({ agent = {}, agents = [] }) => {
   const [channels, setChannels] = useState([]);