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

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

@@ -15,10 +15,10 @@ import { sendAgentMessage } from "../../lib/api.js";
 import { showToast } from "../toast.js";
 import { useAgentSessions } from "../../hooks/useAgentSessions.js";
 import {
-  kDestinationSessionFilter,
   kNoDestinationSessionValue,
   useDestinationSessionSelection,
 } from "../../hooks/use-destination-session-selection.js";
+import { kDestinationSessionFilter } from "../../lib/session-keys.js";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/session-select-field.js

@@ -1,5 +1,6 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { getSessionRowKey } from "../lib/session-keys.js";
 
 const html = htm.bind(h);
 
@@ -47,8 +48,8 @@ export const SessionSelectField = ({
           : null}
         ${sessions.map(
           (sessionRow) => html`
-            <option value=${String(sessionRow?.key || "")}>
-              ${String(sessionRow?.label || sessionRow?.key || "Session")}
+            <option value=${getSessionRowKey(sessionRow)}>
+              ${String(sessionRow?.label || getSessionRowKey(sessionRow) || "Session")}
             </option>
           `,
         )}

package/lib/public/js/components/webhooks/request-history/index.js

@@ -24,6 +24,7 @@ export const RequestHistory = ({
   webhookUrlWithQueryToken = "",
   bearerTokenValue = "",
   selectedWebhook = null,
+  refreshNonce = 0,
 }) => {
   const { state, actions } = useRequestHistory({
     selectedHookName,
@@ -31,6 +32,7 @@ export const RequestHistory = ({
     webhookUrl,
     webhookUrlWithQueryToken,
     bearerTokenValue,
+    refreshNonce,
   });
 
   const {

package/lib/public/js/components/webhooks/request-history/use-request-history.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import {
   fetchWebhookRequest,
   fetchWebhookRequests,
@@ -12,6 +12,7 @@ export const useRequestHistory = ({
   webhookUrl = "",
   webhookUrlWithQueryToken = "",
   bearerTokenValue = "",
+  refreshNonce = 0,
 }) => {
   const [statusFilter, setStatusFilter] = useState("all");
   const [expandedRows, setExpandedRows] = useState(() => new Set());
@@ -35,6 +36,11 @@ export const useRequestHistory = ({
 
   const requests = requestsPoll.data?.requests || [];
 
+  useEffect(() => {
+    if (!selectedHookName) return;
+    requestsPoll.refresh();
+  }, [refreshNonce, requestsPoll.refresh, selectedHookName]);
+
   const handleRequestRowToggle = useCallback((id, isOpen) => {
     setExpandedRows((prev) => {
       const next = new Set(prev);

package/lib/public/js/components/webhooks/webhook-detail/index.js

@@ -1,9 +1,12 @@
 import { h } from "https://esm.sh/preact";
+import { useCallback, 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 { ConfirmDialog } from "../../confirm-dialog.js";
 import { showToast } from "../../toast.js";
+import { kNoDestinationSessionValue } from "../../../hooks/use-destination-session-selection.js";
+import { getSessionRowKey } from "../../../lib/session-keys.js";
 import { formatDateTime } from "../helpers.js";
 import { RequestHistory } from "../request-history/index.js";
 import { useWebhookDetail } from "./use-webhook-detail.js";
@@ -16,18 +19,31 @@ export const WebhookDetail = ({
   onRestartRequired = () => {},
   onOpenFile = () => {},
 }) => {
+  const [historyRefreshNonce, setHistoryRefreshNonce] = useState(0);
+  const handleTestWebhookSent = useCallback(() => {
+    setHistoryRefreshNonce((value) => value + 1);
+  }, []);
   const { state, actions } = useWebhookDetail({
     selectedHookName,
     onBackToList,
     onRestartRequired,
+    onTestWebhookSent: handleTestWebhookSent,
   });
 
   const {
     authMode,
     selectedWebhook,
+    isWebhookLoading,
+    webhookLoadError,
     selectedWebhookManaged,
     selectedDeliveryAgentName,
     selectedDeliveryChannel,
+    selectableSessions,
+    loadingDestinationSessions,
+    destinationLoadError,
+    destinationSessionKey,
+    destinationDirty,
+    savingDestination,
     webhookUrl,
     oauthCallbackUrl,
     hasOauthCallback,
@@ -53,9 +69,19 @@ export const WebhookDetail = ({
           </h2>
         </div>
 
-        ${hasOauthCallback
-          ? null
-          : html`<div class="bg-black/20 border border-border rounded-lg p-3 space-y-4">
+        ${isWebhookLoading
+          ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
+              <p class="text-xs text-gray-500">Loading webhook details...</p>
+            </div>`
+          : webhookLoadError
+            ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
+                <p class="text-xs text-red-300">
+                  ${webhookLoadError?.message || "Could not load webhook details"}
+                </p>
+              </div>`
+            : hasOauthCallback
+              ? null
+              : html`<div class="bg-black/20 border border-border rounded-lg p-3 space-y-4">
               ${selectedWebhookManaged
                 ? null
                 : html`
@@ -152,7 +178,7 @@ export const WebhookDetail = ({
                     `}
             </div>`}
 
-        ${selectedWebhookManaged || !hasOauthCallback
+        ${isWebhookLoading || webhookLoadError || selectedWebhookManaged || !hasOauthCallback
           ? null
           : html`
               <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
@@ -210,13 +236,60 @@ export const WebhookDetail = ({
             `}
 
         <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>
+          ${selectedWebhookManaged
+            ? html`
+                <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>
+              `
+            : html`
+                <p class="text-xs text-gray-500">Deliver to</p>
+                <div class="flex items-center gap-2">
+                  <select
+                    value=${destinationSessionKey || kNoDestinationSessionValue}
+                    onInput=${(event) => {
+                      const nextValue = String(event.currentTarget?.value || "");
+                      actions.setDestinationSessionKey(
+                        nextValue === kNoDestinationSessionValue ? "" : nextValue,
+                      );
+                    }}
+                    disabled=${loadingDestinationSessions || savingDestination}
+                    class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 focus:border-gray-500"
+                  >
+                    <option value=${kNoDestinationSessionValue}>Default</option>
+                    ${loadingDestinationSessions
+                      ? html`<option value="" disabled>Loading...</option>`
+                      : selectableSessions.map(
+                          (sessionRow) => html`
+                            <option value=${getSessionRowKey(sessionRow)}>
+                              ${String(
+                                sessionRow?.label ||
+                                getSessionRowKey(sessionRow) ||
+                                "Session",
+                              )}
+                            </option>
+                          `,
+                        )}
+                  </select>
+                  <${ActionButton}
+                    onClick=${actions.handleSaveDestination}
+                    disabled=${!destinationDirty || savingDestination}
+                    loading=${savingDestination}
+                    tone="secondary"
+                    size="sm"
+                    idleLabel="Save"
+                    loadingLabel="Saving..."
+                    className="px-2.5 py-1"
+                  />
+                </div>
+                ${destinationLoadError
+                  ? html`<p class="text-xs text-red-400">${destinationLoadError}</p>`
+                  : null}
+              `}
         </div>
 
         <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
@@ -304,7 +377,7 @@ export const WebhookDetail = ({
         </div>
       </div>
 
-      ${selectedWebhookManaged
+      ${selectedWebhookManaged && !isWebhookLoading && !webhookLoadError
         ? html`
             <div class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3">
               <p class="text-xs text-yellow-200">
@@ -321,6 +394,7 @@ export const WebhookDetail = ({
         webhookUrl=${webhookUrl}
         webhookUrlWithQueryToken=${webhookUrlWithQueryToken}
         bearerTokenValue=${bearerTokenValue}
+        refreshNonce=${historyRefreshNonce}
       />
       <${ConfirmDialog}
         visible=${showRotateOauthConfirm &&

package/lib/public/js/components/webhooks/webhook-detail/use-webhook-detail.js

@@ -1,18 +1,72 @@
-import { useCallback, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import {
   deleteWebhook,
   fetchAgents,
   fetchWebhookDetail,
   rotateWebhookOauthCallback,
+  updateWebhookDestination,
 } from "../../../lib/api.js";
-import { usePolling } from "../../../hooks/usePolling.js";
+import {
+  useDestinationSessionSelection,
+} from "../../../hooks/use-destination-session-selection.js";
+import { useCachedFetch } from "../../../hooks/use-cached-fetch.js";
+import {
+  getAgentIdFromSessionKey,
+  getSessionRowKey,
+} from "../../../lib/session-keys.js";
 import { showToast } from "../../toast.js";
 import { formatAgentFallbackName } from "../helpers.js";
 
+const getWebhookDestination = (webhook = null) => {
+  const channel = String(webhook?.channel || "").trim();
+  const to = String(webhook?.to || "").trim();
+  if (!channel || !to) return null;
+  const agentId = String(webhook?.agentId || "").trim();
+  return {
+    channel,
+    to,
+    ...(agentId ? { agentId } : {}),
+  };
+};
+
+const findDestinationSessionKey = (sessions = [], webhook = null) => {
+  const destination = getWebhookDestination(webhook);
+  if (!destination) return "";
+  const destinationAgentId = String(destination?.agentId || "").trim();
+  const matchingSession = sessions.find((sessionRow) => {
+    const channel = String(sessionRow?.replyChannel || "").trim();
+    const to = String(sessionRow?.replyTo || "").trim();
+    const agentId = getAgentIdFromSessionKey(getSessionRowKey(sessionRow));
+    const agentMatches = destinationAgentId ? agentId === destinationAgentId : true;
+    return (
+      channel === destination.channel &&
+      to === destination.to &&
+      agentMatches
+    );
+  });
+  return String(matchingSession?.key || "").trim();
+};
+
+const areDestinationsEqual = (left = null, right = null) => {
+  if (!left && !right) return true;
+  if (!left || !right) return false;
+  return (
+    String(left.channel || "").trim() === String(right.channel || "").trim() &&
+    String(left.to || "").trim() === String(right.to || "").trim() &&
+    String(left.agentId || "").trim() === String(right.agentId || "").trim()
+  );
+};
+
 export const useWebhookDetail = ({
   selectedHookName = "",
   onBackToList = () => {},
   onRestartRequired = () => {},
+  onTestWebhookSent = () => {},
 }) => {
   const [authMode, setAuthMode] = useState("headers");
   const [deleting, setDeleting] = useState(false);
@@ -21,19 +75,32 @@ export const useWebhookDetail = ({
   const [rotatingOauthCallback, setRotatingOauthCallback] = useState(false);
   const [showRotateOauthConfirm, setShowRotateOauthConfirm] = useState(false);
   const [sendingTestWebhook, setSendingTestWebhook] = useState(false);
+  const [savingDestination, setSavingDestination] = useState(false);
 
-  const detailPoll = usePolling(
+  const detailCacheKey = useMemo(
+    () => `/api/webhooks/${encodeURIComponent(String(selectedHookName || ""))}`,
+    [selectedHookName],
+  );
+  const detailFetchState = useCachedFetch(
+    detailCacheKey,
     async () => {
       if (!selectedHookName) return null;
       const data = await fetchWebhookDetail(selectedHookName);
       return data.webhook || null;
     },
-    10000,
-    { enabled: !!selectedHookName },
+    {
+      enabled: !!selectedHookName,
+      maxAgeMs: 15000,
+    },
   );
+  const agentsFetchState = useCachedFetch("/api/agents", fetchAgents, {
+    enabled: true,
+    maxAgeMs: 30000,
+  });
 
-  const agentsPoll = usePolling(fetchAgents, 20000);
-  const agents = Array.isArray(agentsPoll.data?.agents) ? agentsPoll.data.agents : [];
+  const agents = Array.isArray(agentsFetchState.data?.agents)
+    ? agentsFetchState.data.agents
+    : [];
   const agentNameById = useMemo(
     () =>
       new Map(
@@ -45,7 +112,9 @@ export const useWebhookDetail = ({
     [agents],
   );
 
-  const selectedWebhook = detailPoll.data;
+  const selectedWebhook = detailFetchState.data;
+  const isWebhookLoading = !!selectedHookName && detailFetchState.loading;
+  const webhookLoadError = detailFetchState.error;
   const selectedWebhookManaged = Boolean(selectedWebhook?.managed);
   const selectedDeliveryAgentId =
     String(selectedWebhook?.agentId || "main").trim() || "main";
@@ -54,10 +123,57 @@ export const useWebhookDetail = ({
     formatAgentFallbackName(selectedDeliveryAgentId);
   const selectedDeliveryChannel =
     String(selectedWebhook?.channel || "last").trim() || "last";
+  const destinationResetKey = useMemo(
+    () =>
+      [
+        selectedHookName,
+        selectedWebhook?.agentId,
+        selectedWebhook?.channel,
+        selectedWebhook?.to,
+      ]
+        .map((value) => String(value || "").trim())
+        .join("|"),
+    [
+      selectedHookName,
+      selectedWebhook?.agentId,
+      selectedWebhook?.channel,
+      selectedWebhook?.to,
+    ],
+  );
+  const {
+    sessions: selectableSessions,
+    loading: loadingDestinationSessions,
+    error: destinationLoadError,
+    destinationSessionKey,
+    setDestinationSessionKey,
+    selectedDestination,
+  } = useDestinationSessionSelection({
+    enabled: !!selectedHookName && !selectedWebhookManaged,
+    resetKey: destinationResetKey,
+  });
 
   const webhookUrl = selectedWebhook?.fullUrl || `.../hooks/${selectedHookName}`;
   const oauthCallbackUrl = String(selectedWebhook?.oauthCallbackUrl || "").trim();
   const hasOauthCallback = !!oauthCallbackUrl;
+  const oauthCallbackTestUrl = useMemo(() => {
+    if (!hasOauthCallback) return "";
+    try {
+      const url = new URL(oauthCallbackUrl);
+      if (!url.searchParams.has("code")) {
+        url.searchParams.set("code", "TEST_AUTH_CODE");
+      }
+      if (!url.searchParams.has("state")) {
+        url.searchParams.set("state", "TEST_STATE");
+      }
+      if (!url.searchParams.has("message")) {
+        url.searchParams.set("message", "OAuth callback test");
+      }
+      return url.toString();
+    } catch {
+      const separator = oauthCallbackUrl.includes("?") ? "&" : "?";
+      return `${oauthCallbackUrl}${separator}code=TEST_AUTH_CODE&state=TEST_STATE&message=OAuth%20callback%20test`;
+    }
+  }, [hasOauthCallback, oauthCallbackUrl]);
   const webhookUrlWithQueryToken =
     selectedWebhook?.queryStringUrl ||
     `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<WEBHOOK_TOKEN>`;
@@ -119,31 +235,104 @@ export const useWebhookDetail = ({
     `curl -X POST "${webhookUrlWithQueryToken}" ` +
     `-H "Content-Type: application/json" ` +
     `-d '${webhookTestPayloadJson}'`;
+  const curlCommandOauth = `curl -X GET "${oauthCallbackTestUrl}"`;
 
   const effectiveAuthMode = selectedWebhookManaged ? "headers" : authMode;
-  const activeCurlCommand =
-    effectiveAuthMode === "query" ? curlCommandQuery : curlCommandHeaders;
+  const activeCurlCommand = hasOauthCallback
+    ? curlCommandOauth
+    : effectiveAuthMode === "query"
+      ? curlCommandQuery
+      : curlCommandHeaders;
 
   const refreshDetail = useCallback(() => {
-    detailPoll.refresh();
-    agentsPoll.refresh();
-  }, [agentsPoll.refresh, detailPoll.refresh]);
+    detailFetchState.refresh({ force: true });
+    agentsFetchState.refresh({ force: true });
+  }, [agentsFetchState.refresh, detailFetchState.refresh]);
+
+  useEffect(() => {
+    if (!selectedHookName || selectedWebhookManaged || !selectedWebhook) return;
+    if (!Array.isArray(selectableSessions) || selectableSessions.length <= 0) {
+      setDestinationSessionKey("");
+      return;
+    }
+    const nextKey = findDestinationSessionKey(selectableSessions, selectedWebhook);
+    setDestinationSessionKey(nextKey);
+  }, [
+    selectableSessions,
+    selectedHookName,
+    selectedWebhook,
+    selectedWebhookManaged,
+    setDestinationSessionKey,
+  ]);
+
+  const currentDestination = useMemo(
+    () => getWebhookDestination(selectedWebhook),
+    [selectedWebhook],
+  );
+  const destinationDirty = useMemo(
+    () => !areDestinationsEqual(currentDestination, selectedDestination),
+    [currentDestination, selectedDestination],
+  );
+
+  const handleSaveDestination = useCallback(async () => {
+    if (
+      !selectedHookName ||
+      selectedWebhookManaged ||
+      savingDestination ||
+      !destinationDirty
+    ) {
+      return;
+    }
+    setSavingDestination(true);
+    try {
+      const data = await updateWebhookDestination(selectedHookName, {
+        destination: selectedDestination || null,
+      });
+      if (data?.restartRequired) {
+        onRestartRequired(true);
+      }
+      if (data?.syncWarning) {
+        showToast(`Updated, but git-sync failed: ${data.syncWarning}`, "warning");
+      }
+      showToast("Webhook destination updated", "success");
+      refreshDetail();
+    } catch (err) {
+      showToast(err.message || "Could not update webhook destination", "error");
+    } finally {
+      setSavingDestination(false);
+    }
+  }, [
+    destinationDirty,
+    onRestartRequired,
+    refreshDetail,
+    savingDestination,
+    selectedDestination,
+    selectedHookName,
+    selectedWebhookManaged,
+  ]);
 
   const handleSendTestWebhook = useCallback(async () => {
     if (!selectedHookName || sendingTestWebhook) return;
     setSendingTestWebhook(true);
-    const requestUrl =
-      effectiveAuthMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
-    const headers = { "Content-Type": "application/json" };
-    if (effectiveAuthMode === "headers") {
-      headers.Authorization = bearerTokenValue;
-    }
     try {
-      const response = await fetch(requestUrl, {
-        method: "POST",
-        headers,
-        body: webhookTestPayloadJson,
-      });
+      const response = hasOauthCallback
+        ? await fetch(oauthCallbackTestUrl, {
+            method: "GET",
+          })
+        : await fetch(
+            effectiveAuthMode === "query" ? webhookUrlWithQueryToken : webhookUrl,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                ...(effectiveAuthMode === "headers"
+                  ? { Authorization: bearerTokenValue }
+                  : {}),
+              },
+              body: webhookTestPayloadJson,
+            },
+          );
+      onTestWebhookSent();
       const bodyText = await response.text();
       let body = null;
       try {
@@ -170,6 +359,9 @@ export const useWebhookDetail = ({
   }, [
     bearerTokenValue,
     effectiveAuthMode,
+    hasOauthCallback,
+    oauthCallbackTestUrl,
+    onTestWebhookSent,
     selectedHookName,
     sendingTestWebhook,
     webhookTestPayloadJson,
@@ -229,9 +421,17 @@ export const useWebhookDetail = ({
     state: {
       authMode,
       selectedWebhook,
+      isWebhookLoading,
+      webhookLoadError,
       selectedWebhookManaged,
       selectedDeliveryAgentName,
       selectedDeliveryChannel,
+      selectableSessions,
+      loadingDestinationSessions,
+      destinationLoadError,
+      destinationSessionKey,
+      destinationDirty,
+      savingDestination,
       webhookUrl,
       oauthCallbackUrl,
       hasOauthCallback,
@@ -250,9 +450,11 @@ export const useWebhookDetail = ({
     actions: {
       refreshDetail,
       setAuthMode,
+      setDestinationSessionKey,
       setShowDeleteConfirm,
       setDeleteTransformDir,
       setShowRotateOauthConfirm,
+      handleSaveDestination,
       handleDeleteConfirmed,
       handleRotateOauthCallback,
       handleSendTestWebhook,

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

@@ -1,27 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import { useAgentSessions } from "./useAgentSessions.js";
+import {
+  getDestinationFromSession,
+  kDestinationSessionFilter,
+} from "../lib/session-keys.js";
 
 export const kNoDestinationSessionValue = "__none__";
 
-export const kDestinationSessionFilter = (sessionRow) => {
-  const key = String(sessionRow?.key || "").toLowerCase();
-  return key.includes(":direct:") || key.includes(":group:");
-};
-
-export const getDestinationFromSession = (sessionRow = null) => {
-  const channel = String(sessionRow?.replyChannel || "").trim();
-  const to = String(sessionRow?.replyTo || "").trim();
-  if (!channel || !to) return null;
-  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 = ({
   enabled = false,
   resetKey = "",
@@ -48,10 +33,10 @@ export const useDestinationSessionSelection = ({
   const preferredSessionKey = useMemo(() => {
     const matchingPreferredSession = sessions.find(
       (sessionRow) =>
-        String(sessionRow?.key || "") === String(selectedSessionKey || "").trim(),
+        getSessionRowKey(sessionRow) === String(selectedSessionKey || "").trim(),
     );
     return String(
-      matchingPreferredSession?.key || sessions[0]?.key || "",
+      getSessionRowKey(matchingPreferredSession) || getSessionRowKey(sessions[0]),
     ).trim();
   }, [sessions, selectedSessionKey]);
 
@@ -63,7 +48,7 @@ export const useDestinationSessionSelection = ({
     () =>
       sessions.find(
         (sessionRow) =>
-          String(sessionRow?.key || "") === String(effectiveSessionKey || "").trim(),
+          getSessionRowKey(sessionRow) === String(effectiveSessionKey || "").trim(),
       ) || null,
     [effectiveSessionKey, sessions],
   );

package/lib/public/js/hooks/useAgentSessions.js

@@ -4,6 +4,7 @@ import {
   kAgentSessionsCacheKey,
   kAgentLastSessionKey,
 } from "../lib/storage-keys.js";
+import { getSessionRowKey, isDestinationSessionKey } from "../lib/session-keys.js";
 
 const readCachedSessions = () => {
   try {
@@ -38,14 +39,13 @@ const writeLastSessionKey = (key) => {
 
 const pickPreferredSession = (sessions, lastKey) => {
   if (lastKey) {
-    const lastMatch = sessions.find((row) => String(row?.key || "") === lastKey);
+    const lastMatch = sessions.find((row) => getSessionRowKey(row) === lastKey);
     if (lastMatch) return lastMatch;
   }
   return (
-    sessions.find((row) => String(row?.key || "").toLowerCase() === "agent:main:main") ||
+    sessions.find((row) => getSessionRowKey(row).toLowerCase() === "agent:main:main") ||
     sessions.find((row) => {
-      const key = String(row?.key || "").toLowerCase();
-      return key.includes(":direct:") || key.includes(":group:");
+      return isDestinationSessionKey(getSessionRowKey(row));
     }) ||
     sessions[0] ||
     null
@@ -81,7 +81,7 @@ export const useAgentSessions = ({ enabled = false, filter } = {}) => {
     if (cached.length > 0) {
       setAllSessions(cached);
       const preferred = pickPreferredSession(cached, lastKey);
-      setSelectedSessionKeyState(String(preferred?.key || ""));
+      setSelectedSessionKeyState(getSessionRowKey(preferred));
     }
 
     const load = async () => {
@@ -95,7 +95,7 @@ export const useAgentSessions = ({ enabled = false, filter } = {}) => {
         writeCachedSessions(nextSessions);
         if (cached.length === 0 || !lastKey) {
           const preferred = pickPreferredSession(nextSessions, lastKey);
-          setSelectedSessionKeyState(String(preferred?.key || ""));
+          setSelectedSessionKeyState(getSessionRowKey(preferred));
         }
       } catch (err) {
         if (!active) return;
@@ -126,15 +126,15 @@ export const useAgentSessions = ({ enabled = false, filter } = {}) => {
       return;
     }
     const hasSelectedSession = sessions.some(
-      (row) => String(row?.key || "") === String(selectedSessionKey || ""),
+      (row) => getSessionRowKey(row) === String(selectedSessionKey || ""),
     );
     if (hasSelectedSession) return;
     const preferred = pickPreferredSession(sessions, readLastSessionKey());
-    setSelectedSessionKeyState(String(preferred?.key || ""));
+    setSelectedSessionKeyState(getSessionRowKey(preferred));
   }, [enabled, sessions, selectedSessionKey]);
 
   const selectedSession = useMemo(
-    () => sessions.find((row) => String(row?.key || "") === selectedSessionKey) || null,
+    () => sessions.find((row) => getSessionRowKey(row) === selectedSessionKey) || null,
     [sessions, selectedSessionKey],
   );
 

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

@@ -1158,6 +1158,20 @@ export async function deleteWebhook(name, { deleteTransformDir = false } = {}) {
   return parseJsonOrThrow(res, "Could not delete webhook");
 }
 
+export async function updateWebhookDestination(name, { destination = null } = {}) {
+  const res = await authFetch(
+    `/api/webhooks/${encodeURIComponent(name)}/destination`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        destination,
+      }),
+    },
+  );
+  return parseJsonOrThrow(res, "Could not update webhook destination");
+}
+
 export async function createWebhookOauthCallback(name) {
   const res = await authFetch(
     `/api/webhooks/${encodeURIComponent(name)}/oauth-callback`,

package/lib/public/js/lib/session-keys.js

@@ -0,0 +1,37 @@
+export const getNormalizedSessionKey = (sessionKey = "") =>
+  String(sessionKey || "").trim();
+
+export const getSessionRowKey = (sessionRow = null) =>
+  getNormalizedSessionKey(sessionRow?.key || sessionRow?.sessionKey || "");
+
+export const getAgentIdFromSessionKey = (sessionKey = "") => {
+  const normalizedSessionKey = getNormalizedSessionKey(sessionKey);
+  const agentMatch = normalizedSessionKey.match(/^agent:([^:]+):/);
+  return String(agentMatch?.[1] || "").trim();
+};
+
+export const isDestinationSessionKey = (sessionKey = "") => {
+  const normalizedSessionKey = getNormalizedSessionKey(sessionKey).toLowerCase();
+  return (
+    normalizedSessionKey.includes(":direct:") ||
+    normalizedSessionKey.includes(":group:")
+  );
+};
+
+export const kDestinationSessionFilter = (sessionRow) =>
+  !!(
+    String(sessionRow?.replyChannel || "").trim() &&
+    String(sessionRow?.replyTo || "").trim()
+  ) || isDestinationSessionKey(getSessionRowKey(sessionRow));
+
+export const getDestinationFromSession = (sessionRow = null) => {
+  const channel = String(sessionRow?.replyChannel || "").trim();
+  const to = String(sessionRow?.replyTo || "").trim();
+  if (!channel || !to) return null;
+  const agentId = getAgentIdFromSessionKey(getSessionRowKey(sessionRow));
+  return {
+    channel,
+    to,
+    ...(agentId ? { agentId } : {}),
+  };
+};

package/lib/server/onboarding/index.js

@@ -529,7 +529,6 @@ const createOnboardingService = ({
       });
     }
     authProfiles?.syncConfigAuthReferencesForAgent?.();
-    ensureGatewayProxyConfig(getBaseUrl(req));
 
     installGogCliSkill({ fs, openclawDir: OPENCLAW_DIR });
 
@@ -549,6 +548,8 @@ const createOnboardingService = ({
       ),
     );
 
+    ensureGatewayProxyConfig(getBaseUrl(req));
+
     try {
       const commitMsg = importMode
         ? "imported existing setup via AlphaClaw"

package/lib/server/routes/system.js

@@ -68,17 +68,48 @@ const registerSystemRoutes = ({
   const parseJsonFromStdout = (stdout) => {
     const raw = String(stdout || "").trim();
     if (!raw) return null;
-    const candidateStarts = [raw.indexOf("{"), raw.indexOf("[")].filter(
-      (idx) => idx >= 0,
-    );
-    for (const start of candidateStarts) {
-      const candidate = raw.slice(start);
+    try {
+      return JSON.parse(raw);
+    } catch {}
+    const lines = raw
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean);
+    for (const line of lines) {
+      if (!(line.startsWith("{") || line.startsWith("["))) continue;
       try {
-        return JSON.parse(candidate);
+        return JSON.parse(line);
       } catch {}
     }
+    const candidateStarts = [raw.indexOf("{"), raw.indexOf("[")].filter((idx) => idx >= 0);
+    for (const start of candidateStarts) {
+      for (let end = raw.length; end > start; end -= 1) {
+        const candidate = raw.slice(start, end).trim();
+        if (!(candidate.endsWith("}") || candidate.endsWith("]"))) continue;
+        try {
+          return JSON.parse(candidate);
+        } catch {}
+      }
+    }
     return null;
   };
+  const getRawSessionKey = (sessionRow = {}) =>
+    String(sessionRow?.key || sessionRow?.sessionKey || sessionRow?.id || "").trim();
+  const getRawSessionsFromPayload = (payload) => {
+    if (Array.isArray(payload)) return payload;
+    const candidates = [
+      payload?.sessions,
+      payload?.items,
+      payload?.data?.sessions,
+      payload?.data?.items,
+      payload?.result?.sessions,
+      payload?.result?.items,
+    ];
+    for (const candidate of candidates) {
+      if (Array.isArray(candidate)) return candidate;
+    }
+    return [];
+  };
   const toTitleWords = (value) =>
     String(value || "")
       .trim()
@@ -218,7 +249,7 @@ const registerSystemRoutes = ({
       throw new Error(result.stderr || "Could not load agent sessions");
     }
     const payload = parseJsonFromStdout(result.stdout);
-    const sessions = Array.isArray(payload?.sessions) ? payload.sessions : [];
+    const sessions = getRawSessionsFromPayload(payload);
     const config = readOpenclawConfig({
       fsModule: fs,
       openclawDir: OPENCLAW_DIR,
@@ -226,7 +257,7 @@ const registerSystemRoutes = ({
     });
     return sessions
       .filter((sessionRow) => {
-        const key = String(sessionRow?.key || "").toLowerCase();
+        const key = getRawSessionKey(sessionRow).toLowerCase();
         if (!key) return false;
         if (
           key.includes(":hook:") ||
@@ -238,12 +269,17 @@ const registerSystemRoutes = ({
         return true;
       })
       .map((sessionRow) => {
-        const key = String(sessionRow?.key || "");
+        const key = getRawSessionKey(sessionRow);
         const replyTarget = getSessionReplyTarget(key);
         return {
           key,
-          sessionId: String(sessionRow?.sessionId || ""),
-          updatedAt: Number(sessionRow?.updatedAt) || 0,
+          sessionId: String(sessionRow?.sessionId || sessionRow?.id || ""),
+          updatedAt:
+            Number(
+              sessionRow?.updatedAt ||
+                sessionRow?.lastActivityAt ||
+                sessionRow?.lastActiveAt,
+            ) || 0,
           label: buildSessionLabel(sessionRow, config),
           replyChannel: replyTarget.replyChannel,
           replyTo: replyTarget.replyTo,

package/lib/server/routes/webhooks.js

@@ -2,6 +2,7 @@ const {
   listWebhooks,
   getWebhookDetail,
   createWebhook,
+  updateWebhookDestination,
   deleteWebhook,
   validateWebhookName,
 } = require("../webhooks");
@@ -69,6 +70,36 @@ const buildWebhookUrls = ({ baseUrl, name, oauthCallback = null }) => {
   };
 };
 
+const buildOauthTransformSource = (name) => {
+  return [
+    "export default async function transform(payload, context) {",
+    "  const data = payload.payload || payload || {};",
+    "  const message = String(data.message || \"\").trim();",
+    "  const code = String(data.code || \"\").trim();",
+    "  const state = String(data.state || \"\").trim();",
+    "  const error = String(data.error || \"\").trim();",
+    "  const fallbackMessage = error",
+    "    ? `OAuth callback error: ${error}`",
+    "    : code",
+    "      ? \"OAuth callback received (authorization code present)\"",
+    "      : state",
+    "        ? \"OAuth callback received (state present)\"",
+    "        : \"OAuth callback received\";",
+    "  return {",
+    "    message: message || fallbackMessage,",
+    `    name: data.name || \"${name}\",`,
+    "    wakeMode: data.wakeMode || \"now\",",
+    "    oauth: {",
+    "      code,",
+    "      state,",
+    "      error,",
+    "    },",
+    "  };",
+    "}",
+    "",
+  ].join("\n");
+};
+
 const registerWebhookRoutes = ({
   app,
   fs,
@@ -171,7 +202,14 @@ const registerWebhookRoutes = ({
         oauthCallback = false,
       } = req.body || {};
       const name = validateWebhookName(rawName);
-      const webhook = createWebhook({ fs, constants, name, destination });
+      const transformSource = oauthCallback ? buildOauthTransformSource(name) : "";
+      const webhook = createWebhook({
+        fs,
+        constants,
+        name,
+        destination,
+        transformSource,
+      });
       const oauthCallbackRecord = oauthCallback
         ? createOauthCallbackEntry({ hookName: name })
         : null;
@@ -209,6 +247,48 @@ const registerWebhookRoutes = ({
     }
   });
 
+  app.put("/api/webhooks/:name/destination", async (req, res) => {
+    try {
+      const name = validateWebhookName(req.params.name);
+      const detail = updateWebhookDestination({
+        fs,
+        constants,
+        name,
+        destination: req?.body?.destination ?? null,
+      });
+      const summary = getHookSummaries().find((item) => item.hookName === name);
+      const oauthCallback = getOauthCallbackByHookEntry(name);
+      const merged = mergeWebhookAndSummary({ webhook: detail, summary });
+      const baseUrl = getBaseUrl(req);
+      const urls = buildWebhookUrls({ baseUrl, name, oauthCallback });
+      const syncWarning = await runWebhookGitSync("update destination", name);
+      markRestartRequired("webhooks");
+      const snapshot = await getRestartSnapshot();
+      return res.json({
+        ok: true,
+        webhook: {
+          ...merged,
+          fullUrl: urls.fullUrl,
+          queryStringUrl: urls.queryStringUrl,
+          authHeaderValue: urls.authHeaderValue,
+          hasRuntimeToken: urls.hasRuntimeToken,
+          oauthCallbackId: urls.oauthCallbackId,
+          oauthCallbackUrl: urls.oauthCallbackUrl,
+          oauthCallbackCreatedAt: urls.oauthCallbackCreatedAt,
+          oauthCallbackRotatedAt: urls.oauthCallbackRotatedAt,
+          oauthCallbackLastUsedAt: urls.oauthCallbackLastUsedAt,
+          authNote:
+            "All hooks use WEBHOOK_TOKEN. Use Authorization: Bearer <token> or x-openclaw-token header.",
+        },
+        restartRequired: snapshot.restartRequired,
+        syncWarning,
+      });
+    } catch (err) {
+      const status = String(err.message || "").includes("not found") ? 404 : 400;
+      return res.status(status).json({ ok: false, error: err.message });
+    }
+  });
+
   app.post("/api/webhooks/:name/oauth-callback", (req, res) => {
     try {
       const name = validateWebhookName(req.params.name);

package/lib/server/webhooks.js

@@ -412,6 +412,51 @@ const createWebhook = ({
   return getWebhookDetail({ fs, constants, name: webhookName });
 };
 
+const updateWebhookDestination = ({ fs, constants, name, destination = null }) => {
+  const webhookName = validateWebhookName(name);
+  const normalizedDestination = normalizeDestination(destination);
+  const { cfg, configPath } = readConfig({ fs, constants });
+  if (isManagedWebhook({ cfg, name: webhookName })) {
+    throw new Error(
+      `Webhook "${webhookName}" is managed and cannot be updated manually`,
+    );
+  }
+  const mappings = ensureHooksRoot(cfg);
+  const normalizedModulesChanged = normalizeMappingTransformModules(mappings);
+  const index = findMappingIndexByName(mappings, webhookName);
+  if (index === -1) {
+    throw new Error("Webhook not found");
+  }
+  const current = mappings[index] || {};
+  const agentId = resolveWebhookAgentId({
+    cfg,
+    requestedAgentId:
+      String(normalizedDestination?.agentId || "").trim() ||
+      String(current?.agentId || "").trim(),
+  });
+  const next = {
+    ...current,
+    deliver: true,
+    channel:
+      String(normalizedDestination?.channel || "").trim() ||
+      "last",
+    agentId,
+  };
+  if (String(normalizedDestination?.to || "").trim()) {
+    next.to = String(normalizedDestination.to).trim();
+  } else {
+    delete next.to;
+  }
+  const changed = JSON.stringify(current) !== JSON.stringify(next);
+  if (changed) {
+    mappings[index] = next;
+  }
+  if (changed || normalizedModulesChanged) {
+    writeConfig({ fs, configPath, cfg });
+  }
+  return getWebhookDetail({ fs, constants, name: webhookName });
+};
+
 const deleteWebhook = ({ fs, constants, name, deleteTransformDir = false }) => {
   const webhookName = validateWebhookName(name);
   const { cfg, configPath } = readConfig({ fs, constants });
@@ -457,6 +502,7 @@ module.exports = {
   listWebhooks,
   getWebhookDetail,
   createWebhook,
+  updateWebhookDestination,
   deleteWebhook,
   validateWebhookName,
   getTransformRelativePath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.8.1-beta.1",
+  "version": "0.8.1-beta.3",
   "publishConfig": {
     "access": "public"
   },