thepopebot 1.2.76-beta.2 → 1.2.76-beta.21

package/lib/chat/components/settings-secrets-page.js

@@ -3,7 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, PlusIcon } from "./icons.js";
 import { SecretRow, EmptyState, formatDate, timeAgo } from "./settings-shared.js";
-import { createNewApiKey, getApiKeys, deleteApiKey, getApiKeySettings, updateApiKeySetting, regenerateWebhookSecret } from "../actions.js";
+import {
+  createNewApiKey,
+  getApiKeys,
+  deleteApiKey,
+  getApiKeySettings,
+  updateApiKeySetting,
+  regenerateWebhookSecret,
+  getTelegramStatus,
+  validateTelegramToken,
+  registerTelegramWebhook
+} from "../actions.js";
 function ApiKeysListPage() {
   const [keys, setKeys] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -250,98 +260,193 @@ function ApiKeysVoicePage() {
     ) })
   ] });
 }
+function StepIndicator({ n, state }) {
+  const cls = state === "done" ? "bg-green-500 text-white border-green-500" : state === "active" ? "border-foreground text-foreground" : "border-border text-muted-foreground";
+  return /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium ${cls}`, children: state === "done" ? /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) : n });
+}
 function ApiKeysTelegramPage() {
-  const [settings, setSettings] = useState(null);
+  const [status, setStatus] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [chatId, setChatId] = useState("");
-  const [savingChatId, setSavingChatId] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const loadSettings = async () => {
+  const [tokenInput, setTokenInput] = useState("");
+  const [tokenEditing, setTokenEditing] = useState(false);
+  const [tokenSaving, setTokenSaving] = useState(false);
+  const [tokenError, setTokenError] = useState(null);
+  const [webhookSaving, setWebhookSaving] = useState(false);
+  const [webhookError, setWebhookError] = useState(null);
+  const loadStatus = async () => {
     try {
-      const result = await getApiKeySettings();
-      setSettings(result);
-      setChatId(result.telegramChatId || "");
-    } catch {
+      const result = await getTelegramStatus();
+      setStatus(result);
     } finally {
       setLoading(false);
     }
   };
   useEffect(() => {
-    loadSettings();
+    loadStatus();
   }, []);
-  const getStatus = (key) => settings?.secrets?.find((s) => s.key === key)?.isSet || false;
-  const handleSave = async (key, value) => {
-    setSaving(true);
-    await updateApiKeySetting(key, value);
-    await loadSettings();
-    setSaving(false);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "h-48 animate-pulse rounded-md bg-border/50" });
+  }
+  const step1Done = !!status.botInfo;
+  const step2Done = step1Done && status.webhookInfo?.url;
+  const handleSaveToken = async () => {
+    setTokenSaving(true);
+    setTokenError(null);
+    const validation = await validateTelegramToken(tokenInput.trim());
+    if (!validation.valid) {
+      setTokenError(validation.error || "Invalid token");
+      setTokenSaving(false);
+      return;
+    }
+    const saveResult = await updateApiKeySetting("TELEGRAM_BOT_TOKEN", tokenInput.trim());
+    if (saveResult?.error) {
+      setTokenError(saveResult.error);
+      setTokenSaving(false);
+      return;
+    }
+    setTokenInput("");
+    setTokenEditing(false);
+    await loadStatus();
+    setTokenSaving(false);
   };
-  const handleRegenerate = async (key) => {
-    setSaving(true);
-    await regenerateWebhookSecret(key);
-    await loadSettings();
-    setSaving(false);
+  const handleClearToken = async () => {
+    setTokenSaving(true);
+    await updateApiKeySetting("TELEGRAM_BOT_TOKEN", "");
+    await loadStatus();
+    setTokenSaving(false);
   };
-  const handleSaveChatId = async () => {
-    setSavingChatId(true);
-    await updateApiKeySetting("TELEGRAM_CHAT_ID", chatId);
-    setSavingChatId(false);
+  const handleRegisterWebhook = async () => {
+    setWebhookSaving(true);
+    setWebhookError(null);
+    const result = await registerTelegramWebhook();
+    if (result?.error) setWebhookError(result.error);
+    await loadStatus();
+    setWebhookSaving(false);
   };
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: "h-24 animate-pulse rounded-md bg-border/50" });
-  }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: "Telegram" }),
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Connect a Telegram bot to receive and send messages through your agent." })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border", children: [
-        /* @__PURE__ */ jsx(
-          SecretRow,
-          {
-            label: "Bot Token",
-            isSet: getStatus("TELEGRAM_BOT_TOKEN"),
-            saving,
-            onSave: (val) => handleSave("TELEGRAM_BOT_TOKEN", val)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SecretRow,
-          {
-            label: "Webhook Secret",
-            isSet: getStatus("TELEGRAM_WEBHOOK_SECRET"),
-            saving,
-            onSave: (val) => handleSave("TELEGRAM_WEBHOOK_SECRET", val),
-            onRegenerate: () => handleRegenerate("TELEGRAM_WEBHOOK_SECRET")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center pt-3 mt-3 border-t border-border", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium shrink-0", children: "Chat ID" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: chatId,
-              onChange: (e) => setChatId(e.target.value),
-              placeholder: "123456789",
-              className: "flex-1 rounded-md border border-border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground",
-              onKeyDown: (e) => e.key === "Enter" && handleSaveChatId()
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleSaveChatId,
-              disabled: savingChatId,
-              className: "rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors",
-              children: savingChatId ? "Saving..." : "Save"
-            }
-          )
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(StepIndicator, { n: 1, state: step1Done ? "done" : "active" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Bot Token" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
+                "Create a bot with",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://t.me/BotFather",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "underline hover:text-foreground",
+                    children: "@BotFather"
+                  }
+                ),
+                " ",
+                "and paste the token below."
+              ] })
+            ] }),
+            step1Done && !tokenEditing && /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+                "@",
+                status.botInfo.username
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setTokenEditing(true),
+                  className: "text-xs text-muted-foreground hover:text-foreground underline transition-colors",
+                  children: "Change"
+                }
+              )
+            ] })
+          ] }),
+          (!step1Done || tokenEditing) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "password",
+                value: tokenInput,
+                onChange: (e) => setTokenInput(e.target.value),
+                placeholder: "123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11",
+                className: "rounded-md border border-border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground",
+                onKeyDown: (e) => e.key === "Enter" && tokenInput.trim() && handleSaveToken()
+              }
+            ),
+            tokenError && /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive", children: tokenError }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleSaveToken,
+                  disabled: tokenSaving || !tokenInput.trim(),
+                  className: "rounded-md bg-foreground text-background px-2.5 py-1.5 text-xs font-medium hover:bg-foreground/90 disabled:opacity-50 transition-colors",
+                  children: tokenSaving ? "Validating..." : "Validate & Save"
+                }
+              ),
+              tokenEditing && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setTokenEditing(false);
+                    setTokenInput("");
+                    setTokenError(null);
+                  },
+                  className: "rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              step1Done && tokenEditing && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClearToken,
+                  className: "ml-auto rounded-md border border-destructive text-destructive px-2.5 py-1.5 text-xs font-medium hover:bg-destructive/10 transition-colors",
+                  children: "Remove"
+                }
+              )
+            ] })
+          ] })
         ] })
-      ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `rounded-lg border bg-card p-4 ${!step1Done ? "opacity-50 pointer-events-none" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(StepIndicator, { n: 2, state: step2Done ? "done" : step1Done ? "active" : "pending" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Webhook" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Register your public URL with Telegram so it can deliver messages to your bot." }),
+            step2Done && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-muted-foreground truncate", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono", children: status.webhookInfo.url }),
+              status.webhookInfo.pendingUpdates > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-yellow-500", children: [
+                "(",
+                status.webhookInfo.pendingUpdates,
+                " pending)"
+              ] }),
+              status.webhookInfo.lastErrorMessage && /* @__PURE__ */ jsxs("div", { className: "mt-1 text-destructive", children: [
+                "Last error: ",
+                status.webhookInfo.lastErrorMessage
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+            webhookError && /* @__PURE__ */ jsx("div", { className: "text-xs text-destructive mb-2", children: webhookError }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleRegisterWebhook,
+                disabled: !step1Done || webhookSaving,
+                className: "rounded-md bg-foreground text-background px-2.5 py-1.5 text-xs font-medium hover:bg-foreground/90 disabled:opacity-50 transition-colors",
+                children: webhookSaving ? "Registering..." : step2Done ? "Re-register Webhook" : "Register Webhook"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
     ] })
   ] });
 }

package/lib/chat/components/settings-secrets-page.jsx

@@ -3,7 +3,17 @@
 import { useState, useEffect } from 'react';
 import { KeyIcon, CopyIcon, CheckIcon, TrashIcon, PlusIcon } from './icons.js';
 import { SecretRow, EmptyState, formatDate, timeAgo } from './settings-shared.js';
-import { createNewApiKey, getApiKeys, deleteApiKey, getApiKeySettings, updateApiKeySetting, regenerateWebhookSecret } from '../actions.js';
+import {
+  createNewApiKey,
+  getApiKeys,
+  deleteApiKey,
+  getApiKeySettings,
+  updateApiKeySetting,
+  regenerateWebhookSecret,
+  getTelegramStatus,
+  validateTelegramToken,
+  registerTelegramWebhook,
+} from '../actions.js';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Keys sub-tab — Multiple named API keys
@@ -288,100 +298,236 @@ export function ApiKeysVoicePage() {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Telegram sub-tab — Bot Token + Webhook Secret + Chat ID
+// Telegram sub-tab — Guided setup (bot token → webhook → chat verification)
 // ─────────────────────────────────────────────────────────────────────────────
 
+function StepIndicator({ n, state }) {
+  // state: 'done' | 'active' | 'pending'
+  const cls =
+    state === 'done'
+      ? 'bg-green-500 text-white border-green-500'
+      : state === 'active'
+        ? 'border-foreground text-foreground'
+        : 'border-border text-muted-foreground';
+  return (
+    <div className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium ${cls}`}>
+      {state === 'done' ? <CheckIcon className="h-3 w-3" /> : n}
+    </div>
+  );
+}
+
 export function ApiKeysTelegramPage() {
-  const [settings, setSettings] = useState(null);
+  const [status, setStatus] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [chatId, setChatId] = useState('');
-  const [savingChatId, setSavingChatId] = useState(false);
-  const [saving, setSaving] = useState(false);
 
-  const loadSettings = async () => {
+  // Step 1 — bot token
+  const [tokenInput, setTokenInput] = useState('');
+  const [tokenEditing, setTokenEditing] = useState(false);
+  const [tokenSaving, setTokenSaving] = useState(false);
+  const [tokenError, setTokenError] = useState(null);
+
+  // Step 2 — webhook
+  const [webhookSaving, setWebhookSaving] = useState(false);
+  const [webhookError, setWebhookError] = useState(null);
+
+  const loadStatus = async () => {
     try {
-      const result = await getApiKeySettings();
-      setSettings(result);
-      setChatId(result.telegramChatId || '');
-    } catch {
-      // ignore
+      const result = await getTelegramStatus();
+      setStatus(result);
     } finally {
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    loadSettings();
+    loadStatus();
   }, []);
 
-  const getStatus = (key) => settings?.secrets?.find((s) => s.key === key)?.isSet || false;
+  if (loading) {
+    return <div className="h-48 animate-pulse rounded-md bg-border/50" />;
+  }
 
-  const handleSave = async (key, value) => {
-    setSaving(true);
-    await updateApiKeySetting(key, value);
-    await loadSettings();
-    setSaving(false);
+  const step1Done = !!status.botInfo;
+  const step2Done = step1Done && status.webhookInfo?.url;
+
+  // Step 1 handlers
+  const handleSaveToken = async () => {
+    setTokenSaving(true);
+    setTokenError(null);
+    const validation = await validateTelegramToken(tokenInput.trim());
+    if (!validation.valid) {
+      setTokenError(validation.error || 'Invalid token');
+      setTokenSaving(false);
+      return;
+    }
+    const saveResult = await updateApiKeySetting('TELEGRAM_BOT_TOKEN', tokenInput.trim());
+    if (saveResult?.error) {
+      setTokenError(saveResult.error);
+      setTokenSaving(false);
+      return;
+    }
+    setTokenInput('');
+    setTokenEditing(false);
+    await loadStatus();
+    setTokenSaving(false);
   };
 
-  const handleRegenerate = async (key) => {
-    setSaving(true);
-    await regenerateWebhookSecret(key);
-    await loadSettings();
-    setSaving(false);
+  const handleClearToken = async () => {
+    setTokenSaving(true);
+    await updateApiKeySetting('TELEGRAM_BOT_TOKEN', '');
+    await loadStatus();
+    setTokenSaving(false);
   };
 
-  const handleSaveChatId = async () => {
-    setSavingChatId(true);
-    await updateApiKeySetting('TELEGRAM_CHAT_ID', chatId);
-    setSavingChatId(false);
+  // Step 2 handlers
+  const handleRegisterWebhook = async () => {
+    setWebhookSaving(true);
+    setWebhookError(null);
+    const result = await registerTelegramWebhook();
+    if (result?.error) setWebhookError(result.error);
+    await loadStatus();
+    setWebhookSaving(false);
   };
 
-  if (loading) {
-    return <div className="h-24 animate-pulse rounded-md bg-border/50" />;
-  }
-
   return (
     <div>
       <div className="mb-4">
         <h2 className="text-base font-medium">Telegram</h2>
-        <p className="text-sm text-muted-foreground">Connect a Telegram bot to receive and send messages through your agent.</p>
+        <p className="text-sm text-muted-foreground">
+          Connect a Telegram bot to receive and send messages through your agent.
+        </p>
       </div>
-      <div className="rounded-lg border bg-card p-4">
-        <div className="divide-y divide-border">
-          <SecretRow
-            label="Bot Token"
-            isSet={getStatus('TELEGRAM_BOT_TOKEN')}
-            saving={saving}
-            onSave={(val) => handleSave('TELEGRAM_BOT_TOKEN', val)}
-          />
-          <SecretRow
-            label="Webhook Secret"
-            isSet={getStatus('TELEGRAM_WEBHOOK_SECRET')}
-            saving={saving}
-            onSave={(val) => handleSave('TELEGRAM_WEBHOOK_SECRET', val)}
-            onRegenerate={() => handleRegenerate('TELEGRAM_WEBHOOK_SECRET')}
-          />
+
+      <div className="space-y-3">
+        {/* ─── Step 1: Bot Token ─── */}
+        <div className="rounded-lg border bg-card p-4">
+          <div className="flex items-start gap-3">
+            <StepIndicator n={1} state={step1Done ? 'done' : 'active'} />
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-2">
+                <div>
+                  <h3 className="text-sm font-medium">Bot Token</h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Create a bot with{' '}
+                    <a
+                      href="https://t.me/BotFather"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline hover:text-foreground"
+                    >
+                      @BotFather
+                    </a>{' '}
+                    and paste the token below.
+                  </p>
+                </div>
+                {step1Done && !tokenEditing && (
+                  <div className="shrink-0 text-right">
+                    <div className="text-sm font-medium">@{status.botInfo.username}</div>
+                    <button
+                      onClick={() => setTokenEditing(true)}
+                      className="text-xs text-muted-foreground hover:text-foreground underline transition-colors"
+                    >
+                      Change
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              {(!step1Done || tokenEditing) && (
+                <div className="mt-3 flex flex-col gap-2">
+                  <input
+                    type="password"
+                    value={tokenInput}
+                    onChange={(e) => setTokenInput(e.target.value)}
+                    placeholder="123456789:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                    className="rounded-md border border-border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground"
+                    onKeyDown={(e) => e.key === 'Enter' && tokenInput.trim() && handleSaveToken()}
+                  />
+                  {tokenError && <div className="text-xs text-destructive">{tokenError}</div>}
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handleSaveToken}
+                      disabled={tokenSaving || !tokenInput.trim()}
+                      className="rounded-md bg-foreground text-background px-2.5 py-1.5 text-xs font-medium hover:bg-foreground/90 disabled:opacity-50 transition-colors"
+                    >
+                      {tokenSaving ? 'Validating...' : 'Validate & Save'}
+                    </button>
+                    {tokenEditing && (
+                      <button
+                        onClick={() => {
+                          setTokenEditing(false);
+                          setTokenInput('');
+                          setTokenError(null);
+                        }}
+                        className="rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+                      >
+                        Cancel
+                      </button>
+                    )}
+                    {step1Done && tokenEditing && (
+                      <button
+                        onClick={handleClearToken}
+                        className="ml-auto rounded-md border border-destructive text-destructive px-2.5 py-1.5 text-xs font-medium hover:bg-destructive/10 transition-colors"
+                      >
+                        Remove
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
         </div>
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center pt-3 mt-3 border-t border-border">
-          <label className="text-sm font-medium shrink-0">Chat ID</label>
-          <div className="flex items-center gap-2 flex-1">
-            <input
-              type="text"
-              value={chatId}
-              onChange={(e) => setChatId(e.target.value)}
-              placeholder="123456789"
-              className="flex-1 rounded-md border border-border bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground"
-              onKeyDown={(e) => e.key === 'Enter' && handleSaveChatId()}
-            />
-            <button
-              onClick={handleSaveChatId}
-              disabled={savingChatId}
-              className="rounded-md px-2.5 py-1.5 text-xs font-medium border border-border text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors"
-            >
-              {savingChatId ? 'Saving...' : 'Save'}
-            </button>
+
+        {/* ─── Step 2: Webhook ─── */}
+        <div className={`rounded-lg border bg-card p-4 ${!step1Done ? 'opacity-50 pointer-events-none' : ''}`}>
+          <div className="flex items-start gap-3">
+            <StepIndicator n={2} state={step2Done ? 'done' : step1Done ? 'active' : 'pending'} />
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-2">
+                <div className="min-w-0">
+                  <h3 className="text-sm font-medium">Webhook</h3>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Register your public URL with Telegram so it can deliver messages to your bot.
+                  </p>
+                  {step2Done && (
+                    <div className="mt-2 text-xs text-muted-foreground truncate">
+                      <span className="font-mono">{status.webhookInfo.url}</span>
+                      {status.webhookInfo.pendingUpdates > 0 && (
+                        <span className="ml-2 text-yellow-500">
+                          ({status.webhookInfo.pendingUpdates} pending)
+                        </span>
+                      )}
+                      {status.webhookInfo.lastErrorMessage && (
+                        <div className="mt-1 text-destructive">
+                          Last error: {status.webhookInfo.lastErrorMessage}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="mt-3">
+                {webhookError && (
+                  <div className="text-xs text-destructive mb-2">{webhookError}</div>
+                )}
+                <button
+                  onClick={handleRegisterWebhook}
+                  disabled={!step1Done || webhookSaving}
+                  className="rounded-md bg-foreground text-background px-2.5 py-1.5 text-xs font-medium hover:bg-foreground/90 disabled:opacity-50 transition-colors"
+                >
+                  {webhookSaving
+                    ? 'Registering...'
+                    : step2Done
+                      ? 'Re-register Webhook'
+                      : 'Register Webhook'}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
+
       </div>
     </div>
   );

package/lib/chat/components/triggers-page.js

@@ -40,9 +40,19 @@ function ActionCard({ action, index }) {
     ] }),
     type === "agent" && action.job && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.job }),
-      (action.llm_provider || action.llm_model) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "LLM:" }),
-        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: [action.llm_provider, action.llm_model].filter(Boolean).join(" / ") })
+      (action.agent_backend || action.llm_model || action.scope) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
+        action.agent_backend && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Agent:" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: action.agent_backend })
+        ] }),
+        action.llm_model && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Model:" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium", children: action.llm_model })
+        ] }),
+        action.scope && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Scope:" }),
+          /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-mono", children: action.scope })
+        ] })
       ] })
     ] }),
     type === "command" && action.command && /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: action.command }),
@@ -54,6 +64,10 @@ function ActionCard({ action, index }) {
       action.vars && Object.keys(action.vars).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Variables" }),
         /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(action.vars, null, 2) })
+      ] }),
+      action.headers && Object.keys(action.headers).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Headers" }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48", children: JSON.stringify(action.headers, null, 2) })
       ] })
     ] })
   ] });