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

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

@@ -0,0 +1,211 @@
+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 {
+  canAgentBindAccount,
+  getChannelItemSortRank,
+  getResolvedAccountStatusInfo,
+  isImplicitDefaultAccount,
+  resolveChannelAccountLabel,
+} from "./helpers.js";
+
+const html = htm.bind(h);
+
+export const useChannelItems = ({
+  agentId = "",
+  agentNameMap = new Map(),
+  channelStatus = {},
+  configuredChannelMap = new Map(),
+  configuredChannels = [],
+  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(() => {
+    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),
+          };
+
+          return {
+            id: `${channelId}:${accountId}`,
+            channel: channelId,
+            accountId,
+            channelOrder: Number(channelOrderMap.get(channelId) ?? 9999),
+            accountOrder: Number(
+              accountOrderMap.get(`${channelId}:${accountId}`) ?? 9999,
+            ),
+            label: resolveChannelAccountLabel({ channelId, account }),
+            isAwaitingPairing: accountStatusInfo?.status !== "paired",
+            canOpenWorkspace,
+            canNavigateToOwnerAgent,
+            ownerAgentId,
+            ownerAgentName,
+            accountStatusInfo,
+            accountData,
+            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 || ""));
+      });
+  }, [
+    agentId,
+    agentNameMap,
+    channelStatus,
+    configuredChannelMap,
+    configuredChannels,
+    defaultAgentId,
+    isDefaultAgent,
+  ]);
+
+  const visibleChannelItems = channelItemData.filter(
+    (item) => !item?.isBoundElsewhere,
+  );
+  const assignedElsewhereItems = channelItemData.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 {
+    hasDiscordAccount,
+    mergedChannelItems,
+  };
+};

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

@@ -40,6 +40,7 @@ export const AgentPairingSection = ({ agent = {} }) => {
   const [loadingBindings, setLoadingBindings] = useState(true);
   const [pairingStatusRefreshing, setPairingStatusRefreshing] = useState(false);
   const pairingRefreshTimerRef = useRef(null);
+  const pairingDelayedRefreshTimerRefs = useRef([]);
   const agentId = String(agent?.id || "").trim();
   const isDefaultAgent = !!agent?.default;
 
@@ -82,6 +83,10 @@ export const AgentPairingSection = ({ agent = {} }) => {
       if (pairingRefreshTimerRef.current) {
         clearTimeout(pairingRefreshTimerRef.current);
       }
+      for (const timerId of pairingDelayedRefreshTimerRefs.current) {
+        clearTimeout(timerId);
+      }
+      pairingDelayedRefreshTimerRefs.current = [];
     },
     [],
   );
@@ -217,19 +222,27 @@ export const AgentPairingSection = ({ agent = {} }) => {
       setPairingStatusRefreshing(false);
       pairingRefreshTimerRef.current = null;
     }, 2800);
+    for (const timerId of pairingDelayedRefreshTimerRefs.current) {
+      clearTimeout(timerId);
+    }
+    pairingDelayedRefreshTimerRefs.current = [];
     const refresh = () => {
       pairingsPoll.refresh();
       loadBindings();
       announcePairingsChanged(agentId);
     };
     refresh();
-    setTimeout(refresh, 500);
-    setTimeout(refresh, 2000);
+    pairingDelayedRefreshTimerRefs.current.push(setTimeout(refresh, 500));
+    pairingDelayedRefreshTimerRefs.current.push(setTimeout(refresh, 2000));
   }, [agentId, loadBindings, pairingsPoll]);
 
   const handleApprove = async (id, channel, accountId = "") => {
-    await approvePairing(id, channel, accountId);
-    refreshAfterPairingAction();
+    try {
+      await approvePairing(id, channel, accountId);
+      refreshAfterPairingAction();
+    } catch (err) {
+      showToast(err.message || "Could not approve pairing", "error");
+    }
   };
 
   const handleReject = async (id, channel, accountId = "") => {

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

@@ -63,9 +63,19 @@ export const CreateChannelModal = ({
         ? initialProvider
         : ALL_CHANNELS[0] || "telegram";
     const providerLabel = getChannelMeta(nextProvider).label || "Channel";
+    const nextSelectedChannel =
+      existingChannels.find(
+        (entry) =>
+          String(entry?.channel || "").trim() === String(nextProvider || "").trim(),
+      ) || null;
+    const nextProviderHasAccounts =
+      Array.isArray(nextSelectedChannel?.accounts)
+      && nextSelectedChannel.accounts.length > 0;
     const nextName = isEditMode
       ? String(account?.name || "").trim() || providerLabel
-      : providerLabel;
+      : nextProviderHasAccounts
+        ? ""
+        : providerLabel;
     const nextAgentId = isEditMode
       ? String(account?.ownerAgentId || "").trim()
         || String(initialAgentId || "").trim()
@@ -85,12 +95,16 @@ export const CreateChannelModal = ({
     setAgentId(nextAgentId);
     setError("");
     setNameEditedManually(isEditMode);
-  }, [visible, initialAgentId, initialProvider, agents, isEditMode, account]);
+  }, [
+    visible,
+    initialAgentId,
+    initialProvider,
+    agents,
+    existingChannels,
+    isEditMode,
+    account,
+  ]);
 
-  useEffect(() => {
-    if (nameEditedManually) return;
-    setName(getChannelMeta(provider).label || "Channel");
-  }, [provider, nameEditedManually]);
   const selectedChannel = useMemo(
     () =>
       existingChannels.find(
@@ -103,6 +117,15 @@ export const CreateChannelModal = ({
     () => Array.isArray(selectedChannel?.accounts) && selectedChannel.accounts.length > 0,
     [selectedChannel],
   );
+  useEffect(() => {
+    if (nameEditedManually) return;
+    const providerLabel = getChannelMeta(provider).label || "Channel";
+    if (!isEditMode && providerHasAccounts) {
+      setName("");
+      return;
+    }
+    setName(providerLabel);
+  }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);
   const isSingleAccountProvider = String(provider || "").trim() === "discord";
 
   const accountId = useMemo(() => {

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

@@ -16,6 +16,10 @@ import {
   fetchChannelAccounts,
   updateChannelAccount,
 } from "../lib/api.js";
+import {
+  isImplicitDefaultAccount,
+  resolveChannelAccountLabel,
+} from "../lib/channel-accounts.js";
 import { createChannelAccountWithProgress } from "../lib/channel-create-operation.js";
 import { CreateChannelModal } from "./agents-tab/create-channel-modal.js";
 import { showToast } from "./toast.js";
@@ -40,18 +44,6 @@ const getChannelMeta = (channelId = "") => {
   );
 };
 
-const resolveChannelAccountLabel = ({ channelId, account = {} }) => {
-  const providerLabel = getChannelMeta(channelId).label || "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}`;
-};
-
-const isImplicitDefaultAccount = ({ accountId, boundAgentId }) =>
-  String(accountId || "").trim() === "default" &&
-  !String(boundAgentId || "").trim();
 const announceRestartRequired = () =>
   window.dispatchEvent(new CustomEvent("alphaclaw:restart-required"));
 
@@ -60,6 +52,7 @@ export const ChannelsCard = ({
   items = [],
   loadingLabel = "Loading...",
   actions = null,
+  renderItem = null,
 }) => html`
   <div class="bg-surface border border-border rounded-xl p-4">
     <div class="flex items-center justify-between gap-3 mb-3">
@@ -71,6 +64,10 @@ export const ChannelsCard = ({
         ? items.map((item) => {
             const channelMeta = getChannelMeta(item.channel || item.id);
             const clickable = !!item.clickable;
+            const customItem = renderItem
+              ? renderItem({ item, channelMeta, clickable })
+              : null;
+            if (customItem) return customItem;
             return html`
               <div
                 key=${item.id || item.channel}
@@ -342,7 +339,11 @@ export const Channels = ({
                 const accountData = {
                   id: accountId,
                   provider: channelId,
-                  name: resolveChannelAccountLabel({ channelId, account }),
+                  name: resolveChannelAccountLabel({
+                    channelId,
+                    account,
+                    providerLabel: getChannelMeta(channelId).label || "Channel",
+                  }),
                   ownerAgentId,
                   envKey: String(account?.envKey || "").trim(),
                   token: String(account?.token || "").trim(),
@@ -422,7 +423,11 @@ export const Channels = ({
                   accountOrder: Number(
                     accountOrderMap.get(`${channelId}:${accountId}`) ?? 9999,
                   ),
-                  label: resolveChannelAccountLabel({ channelId, account }),
+                  label: resolveChannelAccountLabel({
+                    channelId,
+                    account,
+                    providerLabel: getChannelMeta(channelId).label || "Channel",
+                  }),
                   isAwaitingPairing: accountStatus !== "paired",
                   detailText: isClickable ? "Workspace" : "",
                   detailChevron: isClickable,

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -100,6 +100,9 @@ const resolveProfileId = (mode, provider) => {
   return `${p}:${mode.profileSuffix || "default"}`;
 };
 
+const getCredentialValue = (value) =>
+  String(value?.key || value?.token || value?.access || "").trim();
+
 const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   const [authStarted, setAuthStarted] = useState(false);
   const [authWaiting, setAuthWaiting] = useState(false);
@@ -285,6 +288,18 @@ export const ProviderAuthCard = ({
 
   const effectiveOrder = getEffectiveOrder(provider);
   const activeProfileId = effectiveOrder?.[0] || null;
+  const savedOrder = authOrder[provider] || null;
+
+  const hasUnsavedProfileChanges = credentialModes.some((mode) => {
+    const profileId = resolveProfileId(mode, provider);
+    const savedValue = authProfiles.find((p) => p.id === profileId) || null;
+    const draftValue = getProfileValue(profileId);
+    return getCredentialValue(draftValue) !== getCredentialValue(savedValue);
+  });
+
+  const hasUnsavedOrderChanges =
+    JSON.stringify(effectiveOrder || null) !== JSON.stringify(savedOrder);
+  const hasUnsavedChanges = hasUnsavedProfileChanges || hasUnsavedOrderChanges;
 
   const isConnected =
     credentialModes.some((mode) => {
@@ -306,7 +321,9 @@ export const ProviderAuthCard = ({
         <h3 class="card-label">${meta.label}</h3>
         ${showsInlineOauthStatus && credentialModes.length === 0
           ? null
-          : isConnected
+          : hasUnsavedChanges
+            ? html`<${Badge} tone="warning">Unsaved</${Badge}>`
+            : isConnected
             ? html`<${Badge} tone="success">Connected</${Badge}>`
             : html`<${Badge} tone="warning">Not configured</${Badge}>`}
       </div>

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

@@ -9,6 +9,8 @@ import {
 import { showToast } from "../toast.js";
 
 let kModelsTabCache = null;
+const getCredentialValue = (value) =>
+  String(value?.key || value?.token || value?.access || "").trim();
 
 export const useModels = (agentId) => {
   const isScoped = !!agentId;
@@ -99,10 +101,7 @@ export const useModels = (agentId) => {
     const hasProfileChanges = Object.entries(profileEdits).some(
       ([id, cred]) => {
         const existing = authProfiles.find((p) => p.id === id);
-        const newVal = cred?.key || cred?.token || cred?.access || "";
-        const oldVal =
-          existing?.key || existing?.token || existing?.access || "";
-        return newVal !== oldVal && newVal !== "";
+        return getCredentialValue(cred) !== getCredentialValue(existing);
       },
     );
     const hasOrderChanges = Object.entries(orderEdits).some(
@@ -199,9 +198,9 @@ export const useModels = (agentId) => {
     setSaving(true);
     try {
       const changedProfiles = Object.entries(profileEdits)
-        .filter(([, cred]) => {
-          const val = cred?.key || cred?.token || cred?.access || "";
-          return val !== "";
+        .filter(([id, cred]) => {
+          const existing = authProfiles.find((p) => p.id === id);
+          return getCredentialValue(cred) !== getCredentialValue(existing);
         })
         .map(([id, cred]) => ({ id, ...cred }));
 
@@ -225,7 +224,15 @@ export const useModels = (agentId) => {
     } finally {
       setSaving(false);
     }
-  }, [saving, primary, configuredModels, profileEdits, orderEdits, refresh]);
+  }, [
+    saving,
+    primary,
+    configuredModels,
+    profileEdits,
+    orderEdits,
+    authProfiles,
+    refresh,
+  ]);
 
   const refreshCodexStatus = useCallback(async () => {
     try {

package/lib/public/js/lib/channel-accounts.js

@@ -0,0 +1,20 @@
+export const resolveChannelAccountLabel = ({
+  channelId,
+  account = {},
+  providerLabel = "",
+}) => {
+  const fallbackProviderLabel = channelId
+    ? channelId.charAt(0).toUpperCase() + channelId.slice(1)
+    : "Channel";
+  const resolvedProviderLabel = String(providerLabel || "").trim()
+    || fallbackProviderLabel;
+  const configuredName = String(account?.name || "").trim();
+  if (configuredName) return configuredName;
+  const accountId = String(account?.id || "").trim();
+  if (!accountId || accountId === "default") return resolvedProviderLabel;
+  return `${resolvedProviderLabel} ${accountId}`;
+};
+
+export const isImplicitDefaultAccount = ({ accountId, boundAgentId }) =>
+  String(accountId || "").trim() === "default" &&
+  !String(boundAgentId || "").trim();

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

@@ -11,19 +11,23 @@ export const getAuthProviderFromModelProvider = (provider) => {
 export const kFeaturedModelDefs = [
   {
     label: "Opus 4.6",
-    preferredKeys: ["anthropic/claude-opus-4-6", "anthropic/claude-opus-4-5"],
+    preferredKeys: ["anthropic/claude-opus-4-6"],
   },
   {
     label: "Sonnet 4.6",
-    preferredKeys: ["anthropic/claude-sonnet-4-6", "anthropic/claude-sonnet-4-5"],
+    preferredKeys: ["anthropic/claude-sonnet-4-6"],
   },
   {
     label: "Codex 5.3",
-    preferredKeys: ["openai-codex/gpt-5.3-codex", "openai-codex/gpt-5.2-codex"],
+    preferredKeys: ["openai-codex/gpt-5.3-codex"],
+  },
+  {
+    label: "GPT-5.4",
+    preferredKeys: ["openai-codex/gpt-5.4"],
   },
   {
     label: "Gemini 3.1 Pro",
-    preferredKeys: ["google/gemini-3.1-pro-preview", "google/gemini-3-flash-preview"],
+    preferredKeys: ["google/gemini-3.1-pro-preview"],
   },
 ];