@nastechai/agent 0.16.0 → 0.17.0

package/src/pages/ChannelsPage.tsx

@@ -0,0 +1,772 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import {
+  AlertTriangle,
+  Check,
+  CheckCircle2,
+  ExternalLink,
+  PlugZap,
+  QrCode,
+  Radio,
+  RotateCw,
+  Save,
+  Settings2,
+  WifiOff,
+  X,
+} from "lucide-react";
+import * as QRCode from "qrcode";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Card, CardContent } from "@nastechai/ui/ui/components/card";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { Label } from "@nastechai/ui/ui/components/label";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { Switch } from "@nastechai/ui/ui/components/switch";
+import { Toast } from "@nastechai/ui/ui/components/toast";
+import { useToast } from "@nastechai/ui/hooks/use-toast";
+import { api } from "@/lib/api";
+import type {
+  MessagingPlatform,
+  MessagingPlatformEnvVar,
+  MessagingPlatformUpdate,
+  TelegramOnboardingStartResponse,
+} from "@/lib/api";
+import { useModalBehavior } from "@/hooks/useModalBehavior";
+import { usePageHeader } from "@/contexts/usePageHeader";
+import { cn, themedBody } from "@/lib/utils";
+
+// State → badge mapping. The backend emits a small, fixed vocabulary plus
+// whatever the live gateway runtime reports (connected/disconnected/fatal).
+const STATE_BADGE: Record<
+  string,
+  { tone: "success" | "warning" | "destructive" | "secondary" | "outline"; label: string }
+> = {
+  connected: { tone: "success", label: "Connected" },
+  pending_restart: { tone: "warning", label: "Restart to apply" },
+  gateway_stopped: { tone: "warning", label: "Gateway stopped" },
+  disconnected: { tone: "warning", label: "Disconnected" },
+  not_configured: { tone: "outline", label: "Not configured" },
+  disabled: { tone: "secondary", label: "Disabled" },
+  fatal: { tone: "destructive", label: "Error" },
+};
+
+function stateBadge(state: string) {
+  return STATE_BADGE[state] ?? { tone: "outline" as const, label: state };
+}
+
+const TELEGRAM_USER_ID_RE = /^\d+$/;
+
+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 [loading, setLoading] = useState(true);
+  const { toast, showToast } = useToast();
+  const { setEnd } = usePageHeader();
+
+  // Config modal state
+  const [editing, setEditing] = useState<MessagingPlatform | null>(null);
+  const [draftEnv, setDraftEnv] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const closeEdit = useCallback(() => setEditing(null), []);
+  const editModalRef = useModalBehavior({ open: editing !== null, onClose: closeEdit });
+
+  // Per-card busy + restart-needed tracking
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [testingId, setTestingId] = useState<string | null>(null);
+  const [restartNeeded, setRestartNeeded] = useState(false);
+  const [restarting, setRestarting] = useState(false);
+
+  const gatewayRunning = platforms.length > 0 && platforms[0].gateway_running;
+
+  const load = useCallback(() => {
+    return api
+      .getMessagingPlatforms()
+      .then((res) => setPlatforms(res.platforms))
+      .catch((e) => showToast(`Error: ${e}`, "error"));
+  }, [showToast]);
+
+  useEffect(() => {
+    load().finally(() => setLoading(false));
+  }, [load]);
+
+  const openConfig = (platform: MessagingPlatform) => {
+    const initial: Record<string, string> = {};
+    platform.env_vars.forEach((v) => {
+      initial[v.key] = "";
+    });
+    setDraftEnv(initial);
+    setEditing(platform);
+  };
+
+  const handleSave = async () => {
+    if (!editing) return;
+    // Only send fields the user actually filled in — leaving a field blank
+    // preserves the existing value rather than clobbering it.
+    const env: Record<string, string> = {};
+    Object.entries(draftEnv).forEach(([k, v]) => {
+      if (v.trim()) env[k] = v.trim();
+    });
+    if (Object.keys(env).length === 0) {
+      showToast("Nothing to save — fill in at least one field.", "error");
+      return;
+    }
+    const missing = editing.env_vars.filter(
+      (v) => v.required && !v.is_set && !env[v.key],
+    );
+    if (missing.length > 0) {
+      showToast(`${missing[0].prompt || missing[0].key} is required`, "error");
+      return;
+    }
+    setSaving(true);
+    try {
+      const body: MessagingPlatformUpdate = { env, enabled: true };
+      await api.updateMessagingPlatform(editing.id, body);
+      showToast(`${editing.name} saved`, "success");
+      setEditing(null);
+      setRestartNeeded(true);
+      await load();
+    } catch (e) {
+      showToast(`Failed to save: ${e}`, "error");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleToggle = async (platform: MessagingPlatform) => {
+    const next = !platform.enabled;
+    setTogglingId(platform.id);
+    try {
+      await api.updateMessagingPlatform(platform.id, { enabled: next });
+      setPlatforms((prev) =>
+        prev.map((p) =>
+          p.id === platform.id
+            ? { ...p, enabled: next, state: next ? "pending_restart" : "disabled" }
+            : p,
+        ),
+      );
+      setRestartNeeded(true);
+    } catch (e) {
+      showToast(`Error: ${e}`, "error");
+    } finally {
+      setTogglingId(null);
+    }
+  };
+
+  const handleTest = async (platform: MessagingPlatform) => {
+    setTestingId(platform.id);
+    try {
+      const res = await api.testMessagingPlatform(platform.id);
+      showToast(`${platform.name}: ${res.message}`, res.ok ? "success" : "error");
+    } catch (e) {
+      showToast(`Error: ${e}`, "error");
+    } finally {
+      setTestingId(null);
+    }
+  };
+
+  const handleRestart = async () => {
+    setRestarting(true);
+    try {
+      await api.restartGateway();
+      showToast("Gateway restarting…", "success");
+      setRestartNeeded(false);
+      // Give the gateway a moment to come up, then refresh status.
+      setTimeout(() => void load(), 4000);
+    } catch (e) {
+      showToast(`Failed to restart: ${e}`, "error");
+    } finally {
+      setRestarting(false);
+    }
+  };
+
+  useLayoutEffect(() => {
+    setEnd(
+      <Button
+        className="uppercase"
+        size="sm"
+        onClick={handleRestart}
+        disabled={restarting}
+        prefix={restarting ? <Spinner /> : <RotateCw className="h-4 w-4" />}
+      >
+        {restarting ? "Restarting…" : "Restart gateway"}
+      </Button>,
+    );
+    return () => setEnd(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setEnd, restarting]);
+
+  const configured = useMemo(
+    () => platforms.filter((p) => p.configured).length,
+    [platforms],
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Spinner className="text-2xl text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Toast toast={toast} />
+
+      {/* Restart banner */}
+      {restartNeeded && (
+        <Card className="border-warning/50">
+          <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex items-center gap-2 text-sm">
+              <AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
+              <span>
+                Changes are saved. Restart the gateway for them to take effect.
+              </span>
+            </div>
+            <Button
+              size="sm"
+              className="uppercase shrink-0"
+              onClick={handleRestart}
+              disabled={restarting}
+              prefix={restarting ? <Spinner /> : <RotateCw className="h-4 w-4" />}
+            >
+              {restarting ? "Restarting…" : "Restart now"}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      {!gatewayRunning && !restartNeeded && (
+        <Card className="border-border">
+          <CardContent className="flex items-center gap-2 p-4 text-sm text-muted-foreground">
+            <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">nastech gateway start</code>{" "}
+              (or the Restart button above).
+            </span>
+          </CardContent>
+        </Card>
+      )}
+
+      <p className="text-xs text-muted-foreground">
+        {configured} of {platforms.length} channels configured. Credentials are
+        written to <code className="font-courier">~/.nastech/.env</code>; the
+        gateway connects each enabled channel on its next restart.
+      </p>
+
+      {/* Config modal */}
+      {editing && (
+        <div
+          ref={editModalRef}
+          className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+          onClick={(e) => e.target === e.currentTarget && setEditing(null)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="channel-config-title"
+        >
+          <div
+            className={cn(
+              themedBody,
+              "relative w-full max-w-lg border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]",
+            )}
+          >
+            <Button
+              ghost
+              size="icon"
+              onClick={() => setEditing(null)}
+              className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+              aria-label="Close"
+            >
+              <X />
+            </Button>
+
+            <header className="p-5 pb-3 border-b border-border">
+              <h2
+                id="channel-config-title"
+                className="font-mondwest text-display text-base tracking-wider"
+              >
+                Configure {editing.name}
+              </h2>
+              {editing.docs_url && (
+                <a
+                  href={editing.docs_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-1 inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                >
+                  Setup guide <ExternalLink className="h-3 w-3" />
+                </a>
+              )}
+            </header>
+
+            <div className="p-5 grid gap-4 overflow-y-auto">
+              <p className="text-xs text-muted-foreground">
+                {editing.description}
+              </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>
+                  {field.description && (
+                    <span className="text-xs text-muted-foreground">
+                      {field.description}
+                    </span>
+                  )}
+                  <Input
+                    id={`field-${field.key}`}
+                    type={field.is_password ? "password" : "text"}
+                    placeholder={
+                      field.is_set
+                        ? field.redacted_value || "•••••• (set — leave blank to keep)"
+                        : field.key
+                    }
+                    value={draftEnv[field.key] ?? ""}
+                    onChange={(e) =>
+                      setDraftEnv((prev) => ({ ...prev, [field.key]: e.target.value }))
+                    }
+                  />
+                </div>
+              ))}
+
+              <div className="flex justify-end gap-2 pt-1">
+                <Button ghost size="sm" onClick={() => setEditing(null)}>
+                  Cancel
+                </Button>
+                <Button
+                  className="uppercase"
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={saving}
+                  prefix={saving ? <Spinner /> : undefined}
+                >
+                  {saving ? "Saving…" : "Save & enable"}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Platform list */}
+      <div className="grid gap-3">
+        {platforms.map((platform) => {
+          const badge = stateBadge(platform.state ?? "");
+          const busy = togglingId === platform.id;
+          const StateIcon =
+            platform.state === "connected"
+              ? CheckCircle2
+              : platform.state === "fatal"
+                ? AlertTriangle
+                : Radio;
+          return (
+            <Card key={platform.id} className="border-border">
+              <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"
+                            ? "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>
+                      {platform.error_message && (
+                        <span className="text-xs text-destructive">
+                          {platform.error_message}
+                        </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
+                    </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: "NasTech 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("");
+  };
+
+  const apply = async () => {
+    if (!setup) return;
+    if (allowedIds.length === 0) {
+      setError("Add at least one allowed Telegram user ID.");
+      return;
+    }
+    setPhase("applying");
+    setError("");
+    try {
+      await api.applyTelegramOnboarding(setup.pairing_id, {
+        allowed_user_ids: allowedIds,
+      });
+      resetSetup();
+      showToast("Telegram saved", "success");
+      try {
+        await api.restartGateway();
+        showToast("Gateway restarting…", "success");
+        setRestartNeeded(false);
+        setTimeout(() => void onChanged(), 4000);
+      } catch (restartError) {
+        onRestartNeeded();
+        showToast(`Telegram saved; restart failed: ${restartError}`, "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>
+                    {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 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={() => void apply()}
+                    disabled={phase === "applying"}
+                    prefix={phase === "applying" ? <Spinner /> : <Save className="h-4 w-4" />}
+                  >
+                    {phase === "applying" ? "Saving…" : "Save and restart"}
+                  </Button>
+                  <Button size="sm" ghost onClick={() => void cancel()}>
+                    Cancel
+                  </Button>
+                </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>
+  );
+}