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 "@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"; import { Input } from "@nous-research/ui/ui/components/input"; import { Label } from "@nous-research/ui/ui/components/label"; import { Spinner } from "@nous-research/ui/ui/components/spinner"; import { Switch } from "@nous-research/ui/ui/components/switch"; import { Toast } from "@nous-research/ui/ui/components/toast"; import { useToast } from "@nous-research/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([]); const [loading, setLoading] = useState(true); const { toast, showToast } = useToast(); const { setEnd } = usePageHeader(); // Config modal state const [editing, setEditing] = useState(null); const [draftEnv, setDraftEnv] = useState>({}); 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(null); const [testingId, setTestingId] = useState(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 = {}; 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 = {}; 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( , ); 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 (

); } return (

{/* Restart banner */} {restartNeeded && (

Changes are saved. Restart the gateway for them to take effect.

)} {!gatewayRunning && !restartNeeded && ( The gateway is not running. Configure channels here, then start the gateway with hermes gateway start{" "} (or the Restart button above). )}

{configured} of {platforms.length} channels configured. Credentials are written to ~/.hermes/.env; the gateway connects each enabled channel on its next restart.

{/* Config modal */} {editing && (

e.target === e.currentTarget && setEditing(null)} role="dialog" aria-modal="true" aria-labelledby="channel-config-title" >

Configure {editing.name}

{editing.docs_url && ( Setup guide )}

{editing.description}

{editing.env_vars.map((field: MessagingPlatformEnvVar) => (

{field.prompt || field.key} {field.required ? " *" : ""} {field.description && ( {field.description} )} setDraftEnv((prev) => ({ ...prev, [field.key]: e.target.value })) } />

))}

)} {/* Platform list */}

{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 (

{platform.name} {badge.label}

{platform.description} {platform.error_message && ( {platform.error_message} )}

{busy ? ( ) : ( void handleToggle(platform)} aria-label={`Enable ${platform.name}`} /> )}

{platform.id === "telegram" && ( setRestartNeeded(true)} platform={platform} setRestartNeeded={setRestartNeeded} showToast={showToast} /> )} ); })}

); } function TelegramOnboardingPanel({ onChanged, onRestartNeeded, platform, setRestartNeeded, showToast, }: { onChanged: () => Promise; onRestartNeeded: () => void; platform: MessagingPlatform; setRestartNeeded: (needed: boolean) => void; showToast: (message: string, type: "success" | "error") => void; }) { const [setup, setSetup] = useState( null, ); const [qrDataUrl, setQrDataUrl] = useState(""); const [phase, setPhase] = useState< "idle" | "starting" | "waiting" | "ready" | "applying" >("idle"); const [botUsername, setBotUsername] = useState(null); const [allowedIds, setAllowedIds] = useState([]); const [detectedOwnerId, setDetectedOwnerId] = useState(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 | 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 (

{platform.configured && ( Existing Telegram credentials are configured. )}

{error && (

{error}

)} {setup && qrDataUrl && (

{(phase === "ready" || phase === "applying") && (

Ready {botUsername && ( @{botUsername} )}

Allowed users {detectedOwnerId && allowedIds.includes(detectedOwnerId) && ( owner detected )}

{allowedIds.map((id) => ( ))} {allowedIds.length === 0 && ( Add at least one Telegram user ID. )}

setNewAllowedId(event.target.value)} placeholder="Telegram user ID" className="font-courier" />

)}

{expiresIn} {phase === "waiting" && waiting}

Open Telegram

)}

); }