@chrysb/alphaclaw 0.5.5 → 0.5.7-beta.0

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

@@ -9,6 +9,7 @@ import {
 import {
   createWebhook,
   deleteWebhook,
+  fetchAgents,
   fetchWebhookDetail,
   fetchWebhookRequest,
   fetchWebhookRequests,
@@ -74,6 +75,14 @@ const getRequestStatusTone = (status) => {
   };
 };
 
+const formatAgentFallbackName = (agentId = "") =>
+  String(agentId || "")
+    .trim()
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ") || "Main Agent";
+
 const jsonPretty = (value) => {
   if (typeof value === "string") {
     try {
@@ -223,24 +232,6 @@ const CreateWebhookModal = ({
                   >
                 </td>
               </tr>
-              ${
-                selectedDestination
-                  ? html`
-                      <tr class="border-t border-border">
-                        <td class="w-24 px-3 py-2 text-gray-500">Channel</td>
-                        <td class="px-3 py-2 text-gray-300 font-mono">
-                          <code>${selectedDestination.channel}</code>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td class="w-24 px-3 py-2 text-gray-500">To</td>
-                        <td class="px-3 py-2 text-gray-300 font-mono">
-                          <code>${selectedDestination.to}</code>
-                        </td>
-                      </tr>
-                    `
-                  : null
-              }
             </tbody>
           </table>
         </div>
@@ -290,6 +281,21 @@ export const Webhooks = ({
 
   const listPoll = usePolling(fetchWebhooks, 15000);
   const webhooks = listPoll.data?.webhooks || [];
+  const agentsPoll = usePolling(fetchAgents, 20000);
+  const agents = Array.isArray(agentsPoll.data?.agents)
+    ? agentsPoll.data.agents
+    : [];
+  const agentNameById = useMemo(
+    () =>
+      new Map(
+        agents.map((agent) => [
+          String(agent?.id || "").trim(),
+          String(agent?.name || "").trim() ||
+            formatAgentFallbackName(agent?.id),
+        ]),
+      ),
+    [agents],
+  );
 
   const detailPoll = usePolling(
     async () => {
@@ -317,6 +323,13 @@ export const Webhooks = ({
 
   const selectedWebhook = detailPoll.data;
   const selectedWebhookManaged = Boolean(selectedWebhook?.managed);
+  const selectedDeliveryAgentId =
+    String(selectedWebhook?.agentId || "main").trim() || "main";
+  const selectedDeliveryAgentName =
+    agentNameById.get(selectedDeliveryAgentId) ||
+    formatAgentFallbackName(selectedDeliveryAgentId);
+  const selectedDeliveryChannel =
+    String(selectedWebhook?.channel || "last").trim() || "last";
   const requests = requestsPoll.data?.requests || [];
   const webhookUrl =
     selectedWebhook?.fullUrl || `.../hooks/${selectedHookName}`;
@@ -773,6 +786,18 @@ export const Webhooks = ({
                       `}
               </div>
 
+              <div
+                class="bg-black/20 border border-border rounded-lg p-3 space-y-2"
+              >
+                <p class="text-xs text-gray-500">Deliver to</p>
+                <p class="text-xs text-gray-200 font-mono ">
+                  ${selectedDeliveryAgentName}${" "}
+                  <span class="text-xs text-gray-500 font-mono">
+                    (${selectedDeliveryChannel})</span
+                  >
+                </p>
+              </div>
+
               <div
                 class="bg-black/20 border border-border rounded-lg p-3 space-y-2"
               >

package/lib/public/js/hooks/use-app-shell-controller.js

@@ -136,6 +136,13 @@ export const useAppShellController = ({ location = "" } = {}) => {
       window.removeEventListener("alphaclaw:browse-file-saved", handleBrowseFileSaved);
     };
   }, []);
+  useEffect(() => {
+    const handleRestartRequired = () => setRestartRequired(true);
+    window.addEventListener("alphaclaw:restart-required", handleRestartRequired);
+    return () => {
+      window.removeEventListener("alphaclaw:restart-required", handleRestartRequired);
+    };
+  }, []);
 
   const handleGatewayRestart = useCallback(async () => {
     if (restartingGateway) return;

package/lib/public/js/hooks/use-browse-navigation.js

@@ -11,9 +11,10 @@ export const useBrowseNavigation = ({
   setLocation = () => {},
   onCloseMobileSidebar = () => {},
 } = {}) => {
-  const [sidebarTab, setSidebarTab] = useState(() =>
-    location.startsWith("/browse") ? "browse" : "menu",
-  );
+  const [sidebarTab, setSidebarTab] = useState(() => {
+    if (location.startsWith("/browse")) return "browse";
+    return "menu";
+  });
   const [lastBrowsePath, setLastBrowsePath] = useState(() => {
     const settings = readUiSettings();
     return typeof settings[kBrowseLastPathUiSettingKey] === "string"
@@ -26,7 +27,8 @@ export const useBrowseNavigation = ({
     if (
       typeof storedRoute === "string" &&
       storedRoute.startsWith("/") &&
-      !storedRoute.startsWith("/browse")
+      !storedRoute.startsWith("/browse") &&
+      !storedRoute.startsWith("/agents")
     ) {
       return storedRoute;
     }
@@ -77,7 +79,7 @@ export const useBrowseNavigation = ({
 
   useEffect(() => {
     if (location.startsWith("/browse")) return;
-    if (location === "/telegram") return;
+    if (location.startsWith("/telegram")) return;
     setLastMenuRoute((currentRoute) =>
       currentRoute === location ? currentRoute : location,
     );
@@ -150,6 +152,7 @@ export const useBrowseNavigation = ({
     }
     if (nextTab === "browse" && !location.startsWith("/browse")) {
       setLocation(buildBrowseRoute(lastBrowsePath));
+      return;
     }
   }, [lastBrowsePath, lastMenuRoute, location, setLocation]);
 

package/lib/public/js/hooks/use-destination-session-selection.js

@@ -12,7 +12,14 @@ export const getDestinationFromSession = (sessionRow = null) => {
   const channel = String(sessionRow?.replyChannel || "").trim();
   const to = String(sessionRow?.replyTo || "").trim();
   if (!channel || !to) return null;
-  return { channel, to };
+  const key = String(sessionRow?.key || "").trim();
+  const agentMatch = key.match(/^agent:([^:]+):/);
+  const agentId = String(agentMatch?.[1] || "").trim();
+  return {
+    channel,
+    to,
+    ...(agentId ? { agentId } : {}),
+  };
 };
 
 export const useDestinationSessionSelection = ({

package/lib/public/js/lib/api.js

@@ -1,3 +1,5 @@
+import { subscribeToSse } from "./sse.js";
+
 const kClientTimeZoneHeader = "x-client-timezone";
 
 const getBrowserTimeZone = () => {
@@ -39,22 +41,22 @@ export async function fetchPairings() {
   return res.json();
 }
 
-export async function approvePairing(id, channel) {
+export async function approvePairing(id, channel, accountId = "") {
   const res = await authFetch(`/api/pairings/${id}/approve`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ channel }),
+    body: JSON.stringify({ channel, accountId }),
   });
   return res.json();
 }
 
-export async function rejectPairing(id, channel) {
+export async function rejectPairing(id, channel, accountId = "") {
   const res = await authFetch(`/api/pairings/${id}/reject`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ channel }),
+    body: JSON.stringify({ channel, accountId }),
   });
-  return res.json();
+  return parseJsonOrThrow(res, "Could not reject pairing");
 }
 
 export async function fetchGoogleAccounts() {
@@ -545,8 +547,9 @@ export const setPrimaryModel = async (modelKey) => {
   return res.json();
 };
 
-export const fetchModelsConfig = async () => {
-  const res = await authFetch("/api/models/config");
+export const fetchModelsConfig = async ({ agentId } = {}) => {
+  const qs = agentId ? `?agentId=${encodeURIComponent(agentId)}` : "";
+  const res = await authFetch(`/api/models/config${qs}`);
   return res.json();
 };
 
@@ -555,8 +558,10 @@ export const saveModelsConfig = async ({
   configuredModels,
   profiles,
   authOrder,
-}) => {
-  const res = await authFetch("/api/models/config", {
+  agentId,
+} = {}) => {
+  const qs = agentId ? `?agentId=${encodeURIComponent(agentId)}` : "";
+  const res = await authFetch(`/api/models/config${qs}`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ primary, configuredModels, profiles, authOrder }),
@@ -591,6 +596,155 @@ export const deleteAuthProfile = async (profileId) => {
   return res.json();
 };
 
+export const fetchAgents = async () => {
+  const res = await authFetch("/api/agents");
+  return parseJsonOrThrow(res, "Could not load agents");
+};
+
+export const fetchChannelAccounts = async () => {
+  const res = await authFetch("/api/channels/accounts");
+  return parseJsonOrThrow(res, "Could not load channel accounts");
+};
+
+export const fetchChannelAccountToken = async ({
+  provider = "",
+  accountId = "default",
+} = {}) => {
+  const params = new URLSearchParams({
+    provider: String(provider || ""),
+    accountId: String(accountId || "default"),
+  });
+  const res = await authFetch(`/api/channels/accounts/token?${params.toString()}`);
+  return parseJsonOrThrow(res, "Could not load channel token");
+};
+
+export const createChannelAccount = async (payload) => {
+  const res = await authFetch("/api/channels/accounts", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not create channel account");
+};
+
+export const createChannelAccountJob = async (payload) => {
+  const res = await authFetch("/api/channels/accounts/jobs", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not start channel account operation");
+};
+
+export const subscribeOperationEvents = ({
+  operationId = "",
+  onMessage = () => {},
+  onError = () => {},
+}) =>
+  subscribeToSse({
+    url: `/api/operations/${encodeURIComponent(String(operationId || ""))}/events`,
+    onMessage,
+    onError,
+  });
+
+export const updateChannelAccount = async (payload) => {
+  const res = await authFetch("/api/channels/accounts", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not update channel account");
+};
+
+export const deleteChannelAccount = async (payload) => {
+  const res = await authFetch("/api/channels/accounts", {
+    method: "DELETE",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not delete channel account");
+};
+
+export const fetchAgent = async (agentId) => {
+  const res = await authFetch(`/api/agents/${encodeURIComponent(String(agentId || ""))}`);
+  return parseJsonOrThrow(res, "Could not load agent");
+};
+
+export const fetchAgentWorkspaceSize = async (agentId) => {
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/workspace-size`,
+  );
+  return parseJsonOrThrow(res, "Could not load workspace size");
+};
+
+export const fetchAgentBindings = async (agentId) => {
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/bindings`,
+  );
+  return parseJsonOrThrow(res, "Could not load agent bindings");
+};
+
+export const createAgent = async (payload) => {
+  const res = await authFetch("/api/agents", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not create agent");
+};
+
+export const updateAgent = async (agentId, payload) => {
+  const res = await authFetch(`/api/agents/${encodeURIComponent(String(agentId || ""))}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload || {}),
+  });
+  return parseJsonOrThrow(res, "Could not update agent");
+};
+
+export const addAgentBinding = async (agentId, payload) => {
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/bindings`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload || {}),
+    },
+  );
+  return parseJsonOrThrow(res, "Could not add agent binding");
+};
+
+export const removeAgentBinding = async (agentId, payload) => {
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/bindings`,
+    {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload || {}),
+    },
+  );
+  return parseJsonOrThrow(res, "Could not remove agent binding");
+};
+
+export const deleteAgent = async (agentId, { keepWorkspace = true } = {}) => {
+  const query = new URLSearchParams({
+    keepWorkspace: keepWorkspace ? "true" : "false",
+  });
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}?${query.toString()}`,
+    { method: "DELETE" },
+  );
+  return parseJsonOrThrow(res, "Could not delete agent");
+};
+
+export const setDefaultAgent = async (agentId) => {
+  const res = await authFetch(
+    `/api/agents/${encodeURIComponent(String(agentId || ""))}/default`,
+    { method: "POST" },
+  );
+  return parseJsonOrThrow(res, "Could not set default agent");
+};
+
 export const fetchCodexStatus = async () => {
   const res = await authFetch("/api/codex/status");
   return res.json();

package/lib/public/js/lib/app-navigation.js

@@ -27,8 +27,9 @@ export const kNavSections = [
 
 export const getSelectedNavId = ({ isBrowseRoute = false, location = "" } = {}) => {
   if (isBrowseRoute) return "browse";
-  if (location === "/telegram") return "";
+  if (location.startsWith("/telegram")) return "";
   if (location.startsWith("/models")) return "models";
+  if (location.startsWith("/agents")) return "agents";
   if (location.startsWith("/providers")) return "models";
   if (location.startsWith("/watchdog")) return "watchdog";
   if (location.startsWith("/usage")) return "usage";

package/lib/public/js/lib/channel-create-operation.js

@@ -0,0 +1,102 @@
+import {
+  createChannelAccount,
+  createChannelAccountJob,
+  subscribeOperationEvents,
+} from "./api.js";
+
+export const createChannelAccountWithProgress = async ({
+  payload = {},
+  onPhase = () => {},
+}) => {
+  onPhase("Loading...");
+  if (typeof window?.EventSource !== "function") {
+    return createChannelAccount(payload);
+  }
+  const startResult = await createChannelAccountJob(payload);
+  const operationId = String(startResult?.operationId || "").trim();
+  if (!operationId) {
+    throw new Error("Could not start channel creation operation");
+  }
+  return new Promise((resolve, reject) => {
+    let settleCalled = false;
+    let activePhase = "";
+    let activePhaseAtMs = 0;
+    let deferredPhase = null;
+    let deferredTimer = null;
+    const kPhaseMinimumVisibleMs = {
+      restarting: 1200,
+    };
+    const clearDeferredTimer = () => {
+      if (!deferredTimer) return;
+      clearTimeout(deferredTimer);
+      deferredTimer = null;
+    };
+    const applyPhase = ({ phase = "", label = "" } = {}) => {
+      const nextPhase = String(phase || "").trim();
+      const nextLabel = String(label || "").trim();
+      if (!nextLabel) return;
+      const minVisibleMs = Number(kPhaseMinimumVisibleMs[activePhase] || 0);
+      const elapsedMs = activePhaseAtMs > 0 ? Date.now() - activePhaseAtMs : 0;
+      if (
+        minVisibleMs > 0 &&
+        nextPhase &&
+        nextPhase !== activePhase &&
+        elapsedMs < minVisibleMs
+      ) {
+        deferredPhase = { phase: nextPhase, label: nextLabel };
+        clearDeferredTimer();
+        deferredTimer = setTimeout(() => {
+          deferredTimer = null;
+          const next = deferredPhase;
+          deferredPhase = null;
+          if (!next) return;
+          applyPhase(next);
+        }, minVisibleMs - elapsedMs);
+        return;
+      }
+      clearDeferredTimer();
+      deferredPhase = null;
+      onPhase(nextLabel);
+      activePhase = nextPhase;
+      activePhaseAtMs = Date.now();
+    };
+    const closeWithCleanup = () => {
+      clearDeferredTimer();
+      close();
+    };
+    const close = subscribeOperationEvents({
+      operationId,
+      onMessage: (entry) => {
+        const eventName = String(entry?.event || "").trim();
+        if (eventName === "phase") {
+          applyPhase({
+            phase: String(entry?.data?.phase || "").trim(),
+            label: String(entry?.data?.label || "").trim(),
+          });
+          return;
+        }
+        if (eventName === "done") {
+          if (settleCalled) return;
+          settleCalled = true;
+          closeWithCleanup();
+          resolve(entry?.data || {});
+          return;
+        }
+        if (eventName === "error") {
+          if (settleCalled) return;
+          settleCalled = true;
+          closeWithCleanup();
+          reject(
+            new Error(String(entry?.data?.error || "Could not create channel")),
+          );
+        }
+      },
+      onError: () => {
+        if (settleCalled) return;
+        settleCalled = true;
+        closeWithCleanup();
+        reject(new Error("Channel operation stream disconnected"));
+      },
+    });
+  });
+};

package/lib/public/js/lib/format.js

@@ -37,6 +37,20 @@ export const formatCompactNumber = (value) => {
   return kCompactNumberFormatter.format(numberValue);
 };
 
+export const formatBytes = (value) => {
+  const bytes = Number(value || 0);
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let unitIndex = 0;
+  let nextValue = bytes;
+  while (nextValue >= 1024 && unitIndex < units.length - 1) {
+    nextValue /= 1024;
+    unitIndex += 1;
+  }
+  const precision = nextValue >= 100 || unitIndex === 0 ? 0 : nextValue >= 10 ? 1 : 2;
+  return `${nextValue.toFixed(precision)} ${units[unitIndex]}`;
+};
+
 export const formatUsd = (value) => kUsdFormatter.format(Number(value || 0));
 
 export const formatLocaleDateTime = (

package/lib/public/js/lib/sse.js

@@ -0,0 +1,51 @@
+const parseEventPayload = (value) => {
+  if (typeof value !== "string" || !value.trim()) return {};
+  try {
+    return JSON.parse(value);
+  } catch {
+    return {};
+  }
+};
+
+export const subscribeToSse = ({
+  url = "",
+  onMessage = () => {},
+  onError = () => {},
+}) => {
+  if (typeof window?.EventSource !== "function") {
+    throw new Error("Server events are not supported in this browser");
+  }
+  const source = new window.EventSource(String(url || ""), { withCredentials: true });
+  const handlePhase = (event) => {
+    onMessage({
+      event: "phase",
+      data: parseEventPayload(event?.data || ""),
+    });
+  };
+  const handleDone = (event) => {
+    onMessage({
+      event: "done",
+      data: parseEventPayload(event?.data || ""),
+    });
+  };
+  const handleFailure = (event) => {
+    onMessage({
+      event: "error",
+      data: parseEventPayload(event?.data || ""),
+    });
+  };
+  const handleError = (event) => {
+    onError(event);
+  };
+  source.addEventListener("phase", handlePhase);
+  source.addEventListener("done", handleDone);
+  source.addEventListener("error", handleFailure);
+  source.onerror = handleError;
+  return () => {
+    source.removeEventListener("phase", handlePhase);
+    source.removeEventListener("done", handleDone);
+    source.removeEventListener("error", handleFailure);
+    source.onerror = null;
+    source.close();
+  };
+};