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

package/lib/chat/components/crons-page.jsx

@@ -133,12 +133,32 @@ function CronCard({ cron }) {
               <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
                 {cron.job}
               </pre>
-              {(cron.llm_provider || cron.llm_model) && (
-                <div className="flex items-center gap-2 mt-2">
-                  <span className="text-xs font-medium text-muted-foreground">LLM:</span>
-                  <span className="inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium">
-                    {[cron.llm_provider, cron.llm_model].filter(Boolean).join(' / ')}
-                  </span>
+              {(cron.agent_backend || cron.llm_model || cron.scope) && (
+                <div className="flex items-center gap-2 mt-2 flex-wrap">
+                  {cron.agent_backend && (
+                    <>
+                      <span className="text-xs font-medium text-muted-foreground">Agent:</span>
+                      <span className="inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium">
+                        {cron.agent_backend}
+                      </span>
+                    </>
+                  )}
+                  {cron.llm_model && (
+                    <>
+                      <span className="text-xs font-medium text-muted-foreground">Model:</span>
+                      <span className="inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-medium">
+                        {cron.llm_model}
+                      </span>
+                    </>
+                  )}
+                  {cron.scope && (
+                    <>
+                      <span className="text-xs font-medium text-muted-foreground">Scope:</span>
+                      <span className="inline-flex items-center rounded-full bg-purple-500/10 text-purple-500 px-2 py-0.5 text-[10px] font-mono">
+                        {cron.scope}
+                      </span>
+                    </>
+                  )}
                 </div>
               )}
             </div>
@@ -167,6 +187,14 @@ function CronCard({ cron }) {
                   </pre>
                 </div>
               )}
+              {cron.headers && Object.keys(cron.headers).length > 0 && (
+                <div>
+                  <p className="text-xs font-medium text-muted-foreground mb-1.5">Headers</p>
+                  <pre className="text-xs bg-muted rounded-md p-3 whitespace-pre-wrap break-words font-mono overflow-auto max-h-48">
+                    {JSON.stringify(cron.headers, null, 2)}
+                  </pre>
+                </div>
+              )}
             </div>
           )}
         </div>

package/lib/chat/components/index.js

@@ -10,13 +10,13 @@ export { SettingsLayout } from './settings-layout.js';
 export { SubTabLayout, ApiKeysLayout, EventHandlerLayout, ChatSettingsLayout, GitHubSettingsLayout, SecretsLayout } from './settings-secrets-layout.js';
 export { ApiKeysListPage, ApiKeysVoicePage, ApiKeysTelegramPage, SettingsSecretsPage } from './settings-secrets-page.js';
 export { SettingsUsersPage } from './settings-users-page.js';
-export { ChatConfigPage, ChatProvidersPage, SettingsChatPage } from './settings-chat-page.js';
+export { HelperLlmPage, ChatConfigPage, ChatProvidersPage, SettingsChatPage } from './settings-chat-page.js';
 export { ChatProvidersPage as LlmsPage } from './settings-chat-page.js';
 export { CodingAgentsPage } from './settings-coding-agents-page.js';
 export { JobsPage } from './settings-jobs-page.js';
 export { GitHubTokensPage, GitHubSecretsPage, GitHubVariablesPage, SettingsGitHubPage } from './settings-github-page.js';
 export { SettingsGeneralPage } from './settings-general-page.js';
-export { ProfileLayout, ProfileLoginPage } from './profile-page.js';
+export { ProfileLayout, ProfileLoginPage, ProfileTelegramPage } from './profile-page.js';
 export { AppSidebar } from './app-sidebar.js';
 export { SidebarHistory } from './sidebar-history.js';
 export { SidebarHistoryItem } from './sidebar-history-item.js';

package/lib/chat/components/message.js

@@ -363,6 +363,21 @@ function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
                   const afterTool = prevPart?.type?.startsWith("tool-");
                   return /* @__PURE__ */ jsx(Streamdown, { className: afterTool ? "mt-3" : void 0, mode: isLoading ? "streaming" : "static", linkSafety, children: part.text }, i);
                 }
+                if (part.type === "data-error") {
+                  const prevPart = message.parts[i - 1];
+                  const afterContent = prevPart?.type === "text" || prevPart?.type?.startsWith("tool-");
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive whitespace-pre-wrap break-words",
+                        afterContent && "mt-3"
+                      ),
+                      children: part.data?.message || "An error occurred"
+                    },
+                    i
+                  );
+                }
                 if (part.type === "file") {
                   if (part.mediaType?.startsWith("image/")) {
                     return /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx("img", { src: part.url, alt: "attachment", className: "max-h-64 max-w-full rounded-lg object-contain" }) }, i);
@@ -381,11 +396,11 @@ function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
               }),
               showWorking && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
                 /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Working..." })
+                /* @__PURE__ */ jsx("span", { className: "thinking-shimmer", children: "Working..." })
               ] })
             ] }) : text ? /* @__PURE__ */ jsx(Streamdown, { mode: isLoading ? "streaming" : "static", linkSafety, children: text }) : isLoading && !hasToolParts ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
-              /* @__PURE__ */ jsx("span", { children: "Working..." })
+              /* @__PURE__ */ jsx("span", { className: "thinking-shimmer", children: "Working..." })
             ] }) : null })
           }
         ),
@@ -434,7 +449,7 @@ function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
 function ThinkingMessage() {
   return /* @__PURE__ */ jsx("div", { className: "flex gap-4 w-full justify-start", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 }),
-    /* @__PURE__ */ jsx("span", { children: "Thinking..." })
+    /* @__PURE__ */ jsx("span", { className: "thinking-shimmer", children: "Waiting..." })
   ] }) });
 }
 export {

package/lib/chat/components/message.jsx

@@ -435,6 +435,21 @@ export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
                           const afterTool = prevPart?.type?.startsWith('tool-');
                           return <Streamdown key={i} className={afterTool ? 'mt-3' : undefined} mode={isLoading ? 'streaming' : 'static'} linkSafety={linkSafety}>{part.text}</Streamdown>;
                         }
+                        if (part.type === 'data-error') {
+                          const prevPart = message.parts[i - 1];
+                          const afterContent = prevPart?.type === 'text' || prevPart?.type?.startsWith('tool-');
+                          return (
+                            <div
+                              key={i}
+                              className={cn(
+                                'rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive whitespace-pre-wrap break-words',
+                                afterContent && 'mt-3'
+                              )}
+                            >
+                              {part.data?.message || 'An error occurred'}
+                            </div>
+                          );
+                        }
                         if (part.type === 'file') {
                           if (part.mediaType?.startsWith('image/')) {
                             return (
@@ -460,7 +475,7 @@ export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
                       {showWorking && (
                         <div className="flex items-center gap-2 text-muted-foreground">
                           <SpinnerIcon size={14} />
-                          <span>Working...</span>
+                          <span className="thinking-shimmer">Working...</span>
                         </div>
                       )}
                     </>
@@ -469,7 +484,7 @@ export function PreviewMessage({ message, isLoading, onRetry, onEdit }) {
                   ) : isLoading && !hasToolParts ? (
                     <div className="flex items-center gap-2 text-muted-foreground">
                       <SpinnerIcon size={14} />
-                      <span>Working...</span>
+                      <span className="thinking-shimmer">Working...</span>
                     </div>
                   ) : null}
                 </>
@@ -523,7 +538,7 @@ export function ThinkingMessage() {
     <div className="flex gap-4 w-full justify-start">
       <div className="flex items-center gap-2 px-4 py-3 text-sm text-muted-foreground">
         <SpinnerIcon size={14} />
-        <span>Thinking...</span>
+        <span className="thinking-shimmer">Waiting...</span>
       </div>
     </div>
   );

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

@@ -1,11 +1,16 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { PageLayout } from "./page-layout.js";
-import { KeyIcon } from "./icons.js";
+import { KeyIcon, SendIcon, CopyIcon, CheckIcon } from "./icons.js";
 import { updateProfile } from "../../auth/actions.js";
+import {
+  issueTelegramCode,
+  unlinkTelegramChannel
+} from "../actions.js";
 const TABS = [
-  { id: "login", label: "Login", href: "/profile/login", icon: KeyIcon }
+  { id: "login", label: "Login", href: "/profile/login", icon: KeyIcon },
+  { id: "telegram", label: "Telegram", href: "/profile/telegram", icon: SendIcon }
 ];
 function ProfileLayout({ session, children }) {
   const [activePath, setActivePath] = useState("");
@@ -135,7 +140,180 @@ function ProfileLoginPage({ session }) {
     )
   ] });
 }
+function formatCountdown(ms) {
+  if (ms <= 0) return "expired";
+  const total = Math.ceil(ms / 1e3);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function ProfileTelegramPage({ initial }) {
+  const [state, setState] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (state.status !== "pending") return;
+    const id = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(id);
+  }, [state.status]);
+  const handleIssue = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await issueTelegramCode();
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setState({
+          status: "pending",
+          code: result.code,
+          expiresAt: result.expiresAt,
+          botUsername: result.botUsername ?? state.botUsername
+        });
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+  const handleUnlink = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await unlinkTelegramChannel();
+      setState({ status: "unlinked", botUsername: state.botUsername });
+    } finally {
+      setBusy(false);
+    }
+  };
+  const handleCopy = async () => {
+    if (!state.code) return;
+    try {
+      await navigator.clipboard.writeText(`/verify ${state.code}`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  const botLink = state.botUsername ? `https://t.me/${state.botUsername}` : null;
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-md space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-medium", children: "Telegram" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Link a Telegram chat to your account to talk to the bot from your phone." })
+    ] }),
+    !state.botUsername && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-sm text-yellow-500", children: [
+      "Telegram bot token is not configured. An admin needs to set",
+      /* @__PURE__ */ jsx("code", { className: "mx-1 px-1 rounded bg-muted text-foreground", children: "TELEGRAM_BOT_TOKEN" }),
+      "before users can link their chat."
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive", children: error }),
+    state.status === "unlinked" && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Not linked" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleIssue,
+          disabled: busy || !state.botUsername,
+          className: "rounded-md px-3 py-1.5 text-sm bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 transition-colors",
+          children: busy ? "Generating..." : "Generate code"
+        }
+      )
+    ] }),
+    state.status === "pending" && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          "Waiting for verification \u2014 expires in ",
+          formatCountdown(state.expiresAt - now)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("ol", { className: "text-sm space-y-2 text-muted-foreground list-decimal list-inside", children: [
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Open",
+          " ",
+          botLink ? /* @__PURE__ */ jsxs("a", { className: "text-foreground underline", href: botLink, target: "_blank", rel: "noreferrer", children: [
+            "@",
+            state.botUsername
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "the bot" }),
+          " ",
+          "on Telegram."
+        ] }),
+        /* @__PURE__ */ jsxs("li", { children: [
+          "Send this message:",
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("code", { className: "flex-1 rounded-md bg-muted px-3 py-2 text-xs text-foreground font-mono", children: [
+              "/verify ",
+              state.code
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                className: "inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+                children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  " Copied"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CopyIcon, { size: 12 }),
+                  " Copy"
+                ] })
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleIssue,
+            disabled: busy,
+            className: "rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors",
+            children: busy ? "Regenerating..." : "Regenerate"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleUnlink,
+            disabled: busy,
+            className: "rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors",
+            children: "Cancel"
+          }
+        )
+      ] })
+    ] }),
+    state.status === "verified" && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-green-500" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          "Linked to Telegram chat ",
+          /* @__PURE__ */ jsx("code", { className: "text-foreground", children: state.channelChatId })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleUnlink,
+          disabled: busy,
+          className: "rounded-md border border-destructive px-2.5 py-1.5 text-xs text-destructive hover:bg-destructive/10 disabled:opacity-50 transition-colors",
+          children: busy ? "Unlinking..." : "Unlink"
+        }
+      )
+    ] })
+  ] });
+}
 export {
   ProfileLayout,
-  ProfileLoginPage
+  ProfileLoginPage,
+  ProfileTelegramPage
 };

package/lib/chat/components/profile-page.jsx

@@ -2,11 +2,16 @@
 
 import { useState, useEffect } from 'react';
 import { PageLayout } from './page-layout.js';
-import { KeyIcon } from './icons.js';
+import { KeyIcon, SendIcon, CopyIcon, CheckIcon } from './icons.js';
 import { updateProfile } from '../../auth/actions.js';
+import {
+  issueTelegramCode,
+  unlinkTelegramChannel,
+} from '../actions.js';
 
 const TABS = [
   { id: 'login', label: 'Login', href: '/profile/login', icon: KeyIcon },
+  { id: 'telegram', label: 'Telegram', href: '/profile/telegram', icon: SendIcon },
 ];
 
 export function ProfileLayout({ session, children }) {
@@ -166,3 +171,193 @@ export function ProfileLoginPage({ session }) {
     </form>
   );
 }
+
+function formatCountdown(ms) {
+  if (ms <= 0) return 'expired';
+  const total = Math.ceil(ms / 1000);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Telegram linking UI. Initial state is server-rendered (passed via `initial`);
+ * mutations use server actions, which return the new state.
+ */
+export function ProfileTelegramPage({ initial }) {
+  const [state, setState] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (state.status !== 'pending') return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [state.status]);
+
+  const handleIssue = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await issueTelegramCode();
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setState({
+          status: 'pending',
+          code: result.code,
+          expiresAt: result.expiresAt,
+          botUsername: result.botUsername ?? state.botUsername,
+        });
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleUnlink = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await unlinkTelegramChannel();
+      setState({ status: 'unlinked', botUsername: state.botUsername });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!state.code) return;
+    try {
+      await navigator.clipboard.writeText(`/verify ${state.code}`);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {}
+  };
+
+  const botLink = state.botUsername
+    ? `https://t.me/${state.botUsername}`
+    : null;
+
+  return (
+    <div className="max-w-md space-y-6">
+      <div>
+        <h2 className="text-base font-medium">Telegram</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Link a Telegram chat to your account to talk to the bot from your phone.
+        </p>
+      </div>
+
+      {!state.botUsername && (
+        <div className="rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-sm text-yellow-500">
+          Telegram bot token is not configured. An admin needs to set
+          <code className="mx-1 px-1 rounded bg-muted text-foreground">TELEGRAM_BOT_TOKEN</code>
+          before users can link their chat.
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      {state.status === 'unlinked' && (
+        <div className="rounded-lg border border-border p-4 space-y-3">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="h-2 w-2 rounded-full bg-muted-foreground" />
+            <span className="text-muted-foreground">Not linked</span>
+          </div>
+          <button
+            type="button"
+            onClick={handleIssue}
+            disabled={busy || !state.botUsername}
+            className="rounded-md px-3 py-1.5 text-sm bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50 transition-colors"
+          >
+            {busy ? 'Generating...' : 'Generate code'}
+          </button>
+        </div>
+      )}
+
+      {state.status === 'pending' && (
+        <div className="rounded-lg border border-border p-4 space-y-4">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="h-2 w-2 rounded-full bg-yellow-500" />
+            <span className="text-muted-foreground">
+              Waiting for verification — expires in {formatCountdown(state.expiresAt - now)}
+            </span>
+          </div>
+
+          <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
+            <li>
+              Open{' '}
+              {botLink ? (
+                <a className="text-foreground underline" href={botLink} target="_blank" rel="noreferrer">
+                  @{state.botUsername}
+                </a>
+              ) : (
+                <span className="text-foreground">the bot</span>
+              )}{' '}
+              on Telegram.
+            </li>
+            <li>
+              Send this message:
+              <div className="mt-2 flex items-center gap-2">
+                <code className="flex-1 rounded-md bg-muted px-3 py-2 text-xs text-foreground font-mono">
+                  /verify {state.code}
+                </code>
+                <button
+                  type="button"
+                  onClick={handleCopy}
+                  className="inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  {copied ? <><CheckIcon size={12} /> Copied</> : <><CopyIcon size={12} /> Copy</>}
+                </button>
+              </div>
+            </li>
+          </ol>
+
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={handleIssue}
+              disabled={busy}
+              className="rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors"
+            >
+              {busy ? 'Regenerating...' : 'Regenerate'}
+            </button>
+            <button
+              type="button"
+              onClick={handleUnlink}
+              disabled={busy}
+              className="rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {state.status === 'verified' && (
+        <div className="rounded-lg border border-border p-4 space-y-3">
+          <div className="flex items-center gap-2 text-sm">
+            <span className="h-2 w-2 rounded-full bg-green-500" />
+            <span className="text-muted-foreground">
+              Linked to Telegram chat <code className="text-foreground">{state.channelChatId}</code>
+            </span>
+          </div>
+          <button
+            type="button"
+            onClick={handleUnlink}
+            disabled={busy}
+            className="rounded-md border border-destructive px-2.5 py-1.5 text-xs text-destructive hover:bg-destructive/10 disabled:opacity-50 transition-colors"
+          >
+            {busy ? 'Unlinking...' : 'Unlink'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/lib/chat/components/scope-picker.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Combobox } from "./ui/combobox.js";
+function ScopePicker({ scope, onScopeChange, scopes }) {
+  const options = [
+    { value: "/", label: "/ (root)" },
+    ...(scopes || []).map((s) => ({ value: s.path, label: `/${s.path}` }))
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-3", children: /* @__PURE__ */ jsx("div", { className: "w-full sm:w-auto sm:min-w-[240px] sm:max-w-[240px]", children: /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      options,
+      value: scope || "/",
+      onChange: (val) => onScopeChange(val === "/" ? null : val),
+      placeholder: "Select scope..."
+    }
+  ) }) });
+}
+export {
+  ScopePicker
+};

package/lib/chat/components/scope-picker.jsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { Combobox } from './ui/combobox.js';
+
+/**
+ * Scope picker for agent mode — selects which subdirectory the agent runs in.
+ * Defaults to root when no scope is selected.
+ */
+export function ScopePicker({ scope, onScopeChange, scopes }) {
+  const options = [
+    { value: '/', label: '/ (root)' },
+    ...(scopes || []).map((s) => ({ value: s.path, label: `/${s.path}` })),
+  ];
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3">
+      <div className="w-full sm:w-auto sm:min-w-[240px] sm:max-w-[240px]">
+        <Combobox
+          options={options}
+          value={scope || '/'}
+          onChange={(val) => onScopeChange(val === '/' ? null : val)}
+          placeholder="Select scope..."
+        />
+      </div>
+    </div>
+  );
+}