@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/web/src/pages/ChannelsPage.tsx

@@ -1,15 +1,20 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import {
   AlertTriangle,
+  Check,
   CheckCircle2,
   ExternalLink,
+  Info,
   PlugZap,
+  QrCode,
   Radio,
   RotateCw,
+  Save,
   Settings2,
   WifiOff,
   X,
 } from "lucide-react";
+import * as QRCode from "qrcode";
 import { Badge } from "@nous-research/ui/ui/components/badge";
 import { Button } from "@nous-research/ui/ui/components/button";
 import { Card, CardContent } from "@nous-research/ui/ui/components/card";
@@ -24,6 +29,7 @@ import type {
   MessagingPlatform,
   MessagingPlatformEnvVar,
   MessagingPlatformUpdate,
+  TelegramOnboardingStartResponse,
 } from "@/lib/api";
 import { useModalBehavior } from "@/hooks/useModalBehavior";
 import { usePageHeader } from "@/contexts/usePageHeader";
@@ -38,6 +44,7 @@ const STATE_BADGE: Record<
   connected: { tone: "success", label: "Connected" },
   pending_restart: { tone: "warning", label: "Restart to apply" },
   gateway_stopped: { tone: "warning", label: "Gateway stopped" },
+  startup_failed: { tone: "destructive", label: "Start failed" },
   disconnected: { tone: "warning", label: "Disconnected" },
   not_configured: { tone: "outline", label: "Not configured" },
   disabled: { tone: "secondary", label: "Disabled" },
@@ -48,8 +55,59 @@ function stateBadge(state: string) {
   return STATE_BADGE[state] ?? { tone: "outline" as const, label: state };
 }
 
+const TELEGRAM_USER_ID_RE = /^\d+$/;
+const SLACK_MEMBER_ID_RE = /^[UW][A-Z0-9]{2,}$/;
+const SLACK_TOKEN_PREFIXES: Record<string, string> = {
+  SLACK_BOT_TOKEN: "xoxb-",
+  SLACK_APP_TOKEN: "xapp-",
+};
+
+function validateMessagingEnvField(field: MessagingPlatformEnvVar, value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  const expectedPrefix = SLACK_TOKEN_PREFIXES[field.key];
+  if (expectedPrefix && !trimmed.startsWith(expectedPrefix)) {
+    return `${field.prompt || field.key} must start with ${expectedPrefix}`;
+  }
+
+  if (field.key === "SLACK_ALLOWED_USERS") {
+    // Mirror the gateway's parse (gateway/platforms/slack.py): drop empty
+    // entries so a trailing/interior comma isn't rejected here. "*" is the
+    // allow-all wildcard the gateway honors.
+    const parts = trimmed
+      .split(",")
+      .map((part) => part.trim())
+      .filter(Boolean);
+    const invalid = parts.find((part) => part !== "*" && !SLACK_MEMBER_ID_RE.test(part));
+    if (invalid) {
+      return `${invalid} does not look like a Slack member ID. Use IDs like U01ABC2DEF3.`;
+    }
+  }
+
+  return null;
+}
+
+function formatExpiry(expiresAt: string): string {
+  const ms = Date.parse(expiresAt) - Date.now();
+  if (!Number.isFinite(ms) || ms <= 0) return "expired";
+  const seconds = Math.ceil(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return `${minutes}:${rest.toString().padStart(2, "0")}`;
+}
+
+function isTerminalTelegramOnboardingError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error);
+  return /\b410\b/.test(message) && /\b(expired|claimed|gone)\b/i.test(message);
+}
+
 export default function ChannelsPage() {
   const [platforms, setPlatforms] = useState<MessagingPlatform[]>([]);
+  const [envPath, setEnvPath] = useState("~/.hermes/.env");
+  const [gatewayStartCommand, setGatewayStartCommand] = useState(
+    "hermes gateway start",
+  );
   const [loading, setLoading] = useState(true);
   const { toast, showToast } = useToast();
   const { setEnd } = usePageHeader();
@@ -57,8 +115,12 @@ export default function ChannelsPage() {
   // Config modal state
   const [editing, setEditing] = useState<MessagingPlatform | null>(null);
   const [draftEnv, setDraftEnv] = useState<Record<string, string>>({});
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
   const [saving, setSaving] = useState(false);
-  const closeEdit = useCallback(() => setEditing(null), []);
+  const closeEdit = useCallback(() => {
+    setEditing(null);
+    setFieldErrors({});
+  }, []);
   const editModalRef = useModalBehavior({ open: editing !== null, onClose: closeEdit });
 
   // Per-card busy + restart-needed tracking
@@ -72,7 +134,11 @@ export default function ChannelsPage() {
   const load = useCallback(() => {
     return api
       .getMessagingPlatforms()
-      .then((res) => setPlatforms(res.platforms))
+      .then((res) => {
+        setPlatforms(res.platforms);
+        setEnvPath(res.env_path || "~/.hermes/.env");
+        setGatewayStartCommand(res.gateway_start_command || "hermes gateway start");
+      })
       .catch((e) => showToast(`Error: ${e}`, "error"));
   }, [showToast]);
 
@@ -86,6 +152,7 @@ export default function ChannelsPage() {
       initial[v.key] = "";
     });
     setDraftEnv(initial);
+    setFieldErrors({});
     setEditing(platform);
   };
 
@@ -108,6 +175,16 @@ export default function ChannelsPage() {
       showToast(`${missing[0].prompt || missing[0].key} is required`, "error");
       return;
     }
+    const nextFieldErrors: Record<string, string> = {};
+    editing.env_vars.forEach((field) => {
+      const message = validateMessagingEnvField(field, draftEnv[field.key] || "");
+      if (message) nextFieldErrors[field.key] = message;
+    });
+    if (Object.keys(nextFieldErrors).length > 0) {
+      setFieldErrors(nextFieldErrors);
+      showToast("Fix the highlighted fields before saving.", "error");
+      return;
+    }
     setSaving(true);
     try {
       const body: MessagingPlatformUpdate = { env, enabled: true };
@@ -232,7 +309,7 @@ export default function ChannelsPage() {
             <WifiOff className="h-4 w-4 shrink-0" />
             <span>
               The gateway is not running. Configure channels here, then start the
-              gateway with <code className="font-courier">hermes gateway start</code>{" "}
+              gateway with <code className="font-courier">{gatewayStartCommand}</code>{" "}
               (or the Restart button above).
             </span>
           </CardContent>
@@ -241,7 +318,7 @@ export default function ChannelsPage() {
 
       <p className="text-xs text-muted-foreground">
         {configured} of {platforms.length} channels configured. Credentials are
-        written to <code className="font-courier">~/.hermes/.env</code>; the
+        written to <code className="font-courier">{envPath}</code>; the
         gateway connects each enabled channel on its next restart.
       </p>
 
@@ -296,10 +373,22 @@ export default function ChannelsPage() {
               </p>
               {editing.env_vars.map((field: MessagingPlatformEnvVar) => (
                 <div className="grid gap-1.5" key={field.key}>
-                  <Label htmlFor={`field-${field.key}`}>
-                    {field.prompt || field.key}
-                    {field.required ? " *" : ""}
-                  </Label>
+                  <div className="flex items-center gap-1.5">
+                    <Label htmlFor={`field-${field.key}`}>
+                      {field.prompt || field.key}
+                      {field.required ? " *" : ""}
+                    </Label>
+                    {field.help && (
+                      <span
+                        aria-label={field.help}
+                        className="inline-flex text-muted-foreground hover:text-foreground"
+                        role="img"
+                        title={field.help}
+                      >
+                        <Info className="h-3.5 w-3.5" />
+                      </span>
+                    )}
+                  </div>
                   {field.description && (
                     <span className="text-xs text-muted-foreground">
                       {field.description}
@@ -314,10 +403,23 @@ export default function ChannelsPage() {
                         : field.key
                     }
                     value={draftEnv[field.key] ?? ""}
-                    onChange={(e) =>
-                      setDraftEnv((prev) => ({ ...prev, [field.key]: e.target.value }))
-                    }
+                    aria-invalid={Boolean(fieldErrors[field.key])}
+                    onChange={(e) => {
+                      const nextValue = e.target.value;
+                      setDraftEnv((prev) => ({ ...prev, [field.key]: nextValue }));
+                      setFieldErrors((prev) => {
+                        if (!prev[field.key]) return prev;
+                        const next = { ...prev };
+                        delete next[field.key];
+                        return next;
+                      });
+                    }}
                   />
+                  {fieldErrors[field.key] && (
+                    <span className="text-xs text-destructive">
+                      {fieldErrors[field.key]}
+                    </span>
+                  )}
                 </div>
               ))}
 
@@ -348,82 +450,441 @@ export default function ChannelsPage() {
           const StateIcon =
             platform.state === "connected"
               ? CheckCircle2
-              : platform.state === "fatal"
+              : platform.state === "fatal" || platform.state === "startup_failed"
                 ? AlertTriangle
                 : Radio;
           return (
             <Card key={platform.id} className="border-border">
-              <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex items-start gap-3 min-w-0">
-                  <StateIcon
-                    className={cn(
-                      "h-5 w-5 shrink-0 mt-0.5",
-                      platform.state === "connected"
-                        ? "text-success"
-                        : platform.state === "fatal"
-                          ? "text-destructive"
-                          : "text-muted-foreground",
-                    )}
-                  />
-                  <div className="flex flex-col gap-0.5 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="font-mondwest normal-case text-sm font-medium">
-                        {platform.name}
+              <CardContent className="flex flex-col gap-4 p-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-start gap-3 min-w-0">
+                    <StateIcon
+                      className={cn(
+                        "h-5 w-5 shrink-0 mt-0.5",
+                        platform.state === "connected"
+                          ? "text-success"
+                          : platform.state === "fatal" ||
+                              platform.state === "startup_failed"
+                            ? "text-destructive"
+                            : "text-muted-foreground",
+                      )}
+                    />
+                    <div className="flex flex-col gap-0.5 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-mondwest normal-case text-sm font-medium">
+                          {platform.name}
+                        </span>
+                        <Badge tone={badge.tone}>{badge.label}</Badge>
+                      </div>
+                      <span className="text-xs text-muted-foreground">
+                        {platform.description}
                       </span>
-                      <Badge tone={badge.tone}>{badge.label}</Badge>
+                      {platform.error_message && (
+                        <span className="text-xs text-destructive">
+                          {platform.error_message}
+                        </span>
+                      )}
                     </div>
-                    <span className="text-xs text-muted-foreground">
-                      {platform.description}
+                  </div>
+
+                  <div className="flex items-center gap-2 shrink-0 self-start sm:self-center">
+                    <div className="flex items-center gap-1.5">
+                      {busy ? (
+                        <Spinner className="text-sm" />
+                      ) : (
+                        <Switch
+                          checked={platform.enabled}
+                          onCheckedChange={() => void handleToggle(platform)}
+                          aria-label={`Enable ${platform.name}`}
+                        />
+                      )}
+                    </div>
+                    <Button
+                      ghost
+                      size="sm"
+                      onClick={() => handleTest(platform)}
+                      disabled={testingId === platform.id}
+                      prefix={
+                        testingId === platform.id ? (
+                          <Spinner />
+                        ) : (
+                          <PlugZap className="h-4 w-4" />
+                        )
+                      }
+                    >
+                      Test
+                    </Button>
+                    <Button
+                      size="sm"
+                      className="uppercase"
+                      onClick={() => openConfig(platform)}
+                      prefix={<Settings2 className="h-4 w-4" />}
+                    >
+                      Configure
+                    </Button>
+                  </div>
+                </div>
+                {platform.id === "telegram" && (
+                  <TelegramOnboardingPanel
+                    onChanged={load}
+                    onRestartNeeded={() => setRestartNeeded(true)}
+                    platform={platform}
+                    setRestartNeeded={setRestartNeeded}
+                    showToast={showToast}
+                  />
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function TelegramOnboardingPanel({
+  onChanged,
+  onRestartNeeded,
+  platform,
+  setRestartNeeded,
+  showToast,
+}: {
+  onChanged: () => Promise<void>;
+  onRestartNeeded: () => void;
+  platform: MessagingPlatform;
+  setRestartNeeded: (needed: boolean) => void;
+  showToast: (message: string, type: "success" | "error") => void;
+}) {
+  const [setup, setSetup] = useState<TelegramOnboardingStartResponse | null>(
+    null,
+  );
+  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [phase, setPhase] = useState<
+    "idle" | "starting" | "waiting" | "ready" | "applying"
+  >("idle");
+  const [botUsername, setBotUsername] = useState<string | null>(null);
+  const [allowedIds, setAllowedIds] = useState<string[]>([]);
+  const [detectedOwnerId, setDetectedOwnerId] = useState<string | null>(null);
+  const [newAllowedId, setNewAllowedId] = useState("");
+  const [error, setError] = useState("");
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    if (!setup || phase !== "waiting") return;
+    let cancelled = false;
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+
+    const poll = async () => {
+      try {
+        const status = await api.getTelegramOnboardingStatus(setup.pairing_id);
+        if (cancelled) return;
+        if (status.status === "ready") {
+          setPhase("ready");
+          setBotUsername(status.bot_username ?? null);
+          setError("");
+          if (
+            status.owner_user_id &&
+            TELEGRAM_USER_ID_RE.test(status.owner_user_id)
+          ) {
+            setDetectedOwnerId(status.owner_user_id);
+            setAllowedIds([status.owner_user_id]);
+          }
+          return;
+        }
+        setError("");
+        timeout = setTimeout(poll, 2000);
+      } catch (pollError) {
+        if (cancelled) return;
+
+        const expiresAt = Date.parse(setup.expires_at);
+        const expired =
+          Number.isFinite(expiresAt) && Date.now() >= expiresAt;
+        if (isTerminalTelegramOnboardingError(pollError) || expired) {
+          setSetup(null);
+          setQrDataUrl("");
+          setPhase("idle");
+          setError("Telegram pairing expired. Start a new QR setup to try again.");
+          return;
+        }
+
+        setError(`Still waiting for Telegram. Retrying after: ${pollError}`);
+        timeout = setTimeout(poll, 2000);
+      }
+    };
+
+    timeout = setTimeout(poll, 1200);
+    return () => {
+      cancelled = true;
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [phase, setup]);
+
+  useEffect(() => {
+    if (!setup) return;
+    const timer = setInterval(() => setTick((value) => value + 1), 1000);
+    return () => clearInterval(timer);
+  }, [setup]);
+
+  const resetSetup = () => {
+    setSetup(null);
+    setQrDataUrl("");
+    setPhase("idle");
+    setBotUsername(null);
+    setAllowedIds([]);
+    setDetectedOwnerId(null);
+    setNewAllowedId("");
+    setError("");
+  };
+
+  const start = async () => {
+    setPhase("starting");
+    setError("");
+    setBotUsername(null);
+    setAllowedIds([]);
+    setDetectedOwnerId(null);
+    setNewAllowedId("");
+    try {
+      const res = await api.startTelegramOnboarding({ bot_name: "Hermes Agent" });
+      const dataUrl = await QRCode.toDataURL(res.qr_payload, {
+        errorCorrectionLevel: "M",
+        margin: 1,
+        width: 224,
+      });
+      setSetup(res);
+      setQrDataUrl(dataUrl);
+      setPhase("waiting");
+    } catch (startError) {
+      setPhase("idle");
+      setError(String(startError));
+    }
+  };
+
+  const cancel = async () => {
+    if (setup) {
+      try {
+        await api.cancelTelegramOnboarding(setup.pairing_id);
+      } catch {
+        /* local cleanup still wins */
+      }
+    }
+    resetSetup();
+  };
+
+  const addAllowedId = () => {
+    const trimmed = newAllowedId.trim();
+    if (!TELEGRAM_USER_ID_RE.test(trimmed)) {
+      setError("Allowed Telegram user IDs must be numeric.");
+      return;
+    }
+    setError("");
+    setAllowedIds((ids) => (ids.includes(trimmed) ? ids : [...ids, trimmed]));
+    setNewAllowedId("");
+  };
+
+  // restart_started only means the `hermes gateway restart` child spawned —
+  // not that the restart will succeed (e.g. systemd linger missing, service
+  // manager failure). Poll the action status briefly and surface a non-zero
+  // exit via the manual-restart banner. Note: in no-service installs the
+  // child becomes the foreground gateway and never exits, so "still running
+  // when the window closes" counts as success.
+  const watchRestartOutcome = async () => {
+    for (let i = 0; i < 20; i++) {
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+      try {
+        const st = await api.getActionStatus("gateway-restart", 5);
+        if (st.running) continue;
+        if (st.exit_code !== 0 && st.exit_code !== null) {
+          onRestartNeeded();
+          showToast(
+            `Gateway restart failed (exit ${st.exit_code}) — restart manually`,
+            "error",
+          );
+        }
+        return;
+      } catch {
+        // transient fetch error; keep polling
+      }
+    }
+  };
+
+  const apply = async () => {
+    if (!setup) return;
+    if (allowedIds.length === 0) {
+      setError("Add at least one allowed Telegram user ID.");
+      return;
+    }
+    setPhase("applying");
+    setError("");
+    try {
+      const result = await api.applyTelegramOnboarding(setup.pairing_id, {
+        allowed_user_ids: allowedIds,
+      });
+      resetSetup();
+      if (result.restart_started) {
+        showToast("Telegram saved; gateway restarting…", "success");
+        setRestartNeeded(false);
+        setTimeout(() => void onChanged(), 4000);
+        void watchRestartOutcome();
+      } else if (result.restart_started === undefined && result.needs_restart) {
+        try {
+          await api.restartGateway();
+          showToast("Telegram saved; gateway restarting…", "success");
+          setRestartNeeded(false);
+          setTimeout(() => void onChanged(), 4000);
+        } catch (restartError) {
+          onRestartNeeded();
+          showToast(`Telegram saved; gateway restart failed: ${restartError}`, "error");
+        }
+      } else {
+        onRestartNeeded();
+        const detail = result.restart_error ? `: ${result.restart_error}` : "";
+        showToast(`Telegram saved; gateway restart failed${detail}`, "error");
+      }
+      await onChanged();
+    } catch (applyError) {
+      setPhase("ready");
+      setError(String(applyError));
+    }
+  };
+
+  const expiresIn = useMemo(
+    () => (setup ? formatExpiry(setup.expires_at) : ""),
+    // tick keeps the memo fresh without recalculating on every render branch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setup, tick],
+  );
+
+  return (
+    <div className="rounded-sm border border-border bg-background/35 p-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          size="sm"
+          className="uppercase"
+          onClick={() => void start()}
+          disabled={phase === "starting" || phase === "waiting" || phase === "applying"}
+          prefix={phase === "starting" ? <Spinner /> : <QrCode className="h-4 w-4" />}
+        >
+          {phase === "starting" ? "Starting…" : "Set up with QR"}
+        </Button>
+        {platform.configured && (
+          <span className="text-xs text-muted-foreground">
+            Existing Telegram credentials are configured.
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <div className="mt-3 border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      {setup && qrDataUrl && (
+        <div className="mt-4 grid gap-4 lg:grid-cols-[minmax(0,1fr)_260px]">
+          <div className="grid gap-3">
+            {(phase === "ready" || phase === "applying") && (
+              <div className="grid gap-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Badge tone="success">Ready</Badge>
+                  {botUsername && (
+                    <span className="font-courier text-sm text-muted-foreground">
+                      @{botUsername}
+                    </span>
+                  )}
+                </div>
+
+                <div className="grid gap-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+                      Allowed users
                     </span>
-                    {platform.error_message && (
-                      <span className="text-xs text-destructive">
-                        {platform.error_message}
+                    {detectedOwnerId && allowedIds.includes(detectedOwnerId) && (
+                      <Badge tone="success">owner detected</Badge>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {allowedIds.map((id) => (
+                      <button
+                        key={id}
+                        type="button"
+                        className="inline-flex items-center gap-1 border border-border px-2 py-1 font-courier text-xs text-foreground hover:border-destructive/50"
+                        onClick={() =>
+                          setAllowedIds((ids) =>
+                            ids.filter((existing) => existing !== id),
+                          )
+                        }
+                      >
+                        {id}
+                        <X className="h-3 w-3" />
+                      </button>
+                    ))}
+                    {allowedIds.length === 0 && (
+                      <span className="text-sm text-muted-foreground">
+                        Add at least one Telegram user ID.
                       </span>
                     )}
                   </div>
                 </div>
 
-                <div className="flex items-center gap-2 shrink-0 self-start sm:self-center">
-                  <div className="flex items-center gap-1.5">
-                    {busy ? (
-                      <Spinner className="text-sm" />
-                    ) : (
-                      <Switch
-                        checked={platform.enabled}
-                        onCheckedChange={() => void handleToggle(platform)}
-                        aria-label={`Enable ${platform.name}`}
-                      />
-                    )}
-                  </div>
-                  <Button
-                    ghost
-                    size="sm"
-                    onClick={() => handleTest(platform)}
-                    disabled={testingId === platform.id}
-                    prefix={
-                      testingId === platform.id ? (
-                        <Spinner />
-                      ) : (
-                        <PlugZap className="h-4 w-4" />
-                      )
-                    }
-                  >
-                    Test
+                <div className="flex flex-col gap-2 sm:flex-row">
+                  <Input
+                    value={newAllowedId}
+                    onChange={(event) => setNewAllowedId(event.target.value)}
+                    placeholder="Telegram user ID"
+                    className="font-courier"
+                  />
+                  <Button size="sm" outlined onClick={addAllowedId} prefix={<Check />}>
+                    Add
                   </Button>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
                   <Button
                     size="sm"
                     className="uppercase"
-                    onClick={() => openConfig(platform)}
-                    prefix={<Settings2 className="h-4 w-4" />}
+                    onClick={() => void apply()}
+                    disabled={phase === "applying"}
+                    prefix={phase === "applying" ? <Spinner /> : <Save className="h-4 w-4" />}
                   >
-                    Configure
+                    {phase === "applying" ? "Saving…" : "Save and restart"}
+                  </Button>
+                  <Button size="sm" ghost onClick={() => void cancel()}>
+                    Cancel
                   </Button>
                 </div>
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col items-center justify-center gap-3">
+            <img
+              src={qrDataUrl}
+              alt="Telegram setup QR code"
+              className="h-56 w-56 bg-white p-2"
+            />
+            <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
+              <Badge tone={expiresIn === "expired" ? "destructive" : "outline"}>
+                {expiresIn}
+              </Badge>
+              {phase === "waiting" && <Badge tone="warning">waiting</Badge>}
+            </div>
+            <div className="flex flex-wrap justify-center gap-2">
+              <a
+                href={setup.deep_link}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex h-8 items-center gap-1 border border-border px-3 text-xs uppercase text-foreground hover:border-foreground/40"
+              >
+                <ExternalLink className="h-4 w-4" />
+                Open Telegram
+              </a>
+              <Button size="sm" ghost onClick={() => void cancel()}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }