From ffcfe41c6cd79c767c9b88caeb22145b67444080 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Apr 2026 20:03:26 +0000
Subject: [PATCH] Changes

Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>
---
 src/routes/painel.agente.tsx | 28 +++-------------------------
 src/routes/painel.tsx        |  4 +++-
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/routes/painel.agente.tsx b/src/routes/painel.agente.tsx
index 8adde1a..c715c6f 100644
--- a/src/routes/painel.agente.tsx
+++ b/src/routes/painel.agente.tsx
@@ -11,11 +11,7 @@ import { useAuth } from "@/hooks/use-auth";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TelegramStatusCard } from "@/components/mika/telegram/TelegramStatusCard";
 import { formatDistanceToNow } from "date-fns";
 import { ptBR } from "date-fns/locale";
 import { cn } from "@/lib/utils";
@@ -121,26 +117,8 @@ function AgentePage() {
           </Badge>
         </div>
 
-        {/* Card 3: Canais conectados */}
-        <div className="rounded-xl border border-border bg-card p-6 shadow-soft">
-          <div className="flex items-center gap-3 mb-3">
-            <MessageSquare className="h-5 w-5 text-primary" />
-            <h3 className="font-semibold">Canais conectados</h3>
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium">Telegram</span>
-            </div>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="outline" size="sm" disabled>
-                  Conectar
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Disponível em breve</TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
+        {/* Card 3: Telegram */}
+        <TelegramStatusCard />
 
         {/* Card 4: Estatísticas */}
         <div className="lg:col-span-2 rounded-xl border border-border bg-card p-6 shadow-soft">
diff --git a/src/routes/painel.tsx b/src/routes/painel.tsx
index 3dcbac1..60b3f75 100644
--- a/src/routes/painel.tsx
+++ b/src/routes/painel.tsx
@@ -23,6 +23,7 @@ const PADDLE_ENV = (import.meta.env.VITE_PADDLE_ENVIRONMENT as string) === "prod
 import { Logo } from "@/components/mika/Logo";
 import { PaymentIssueBanner } from "@/components/mika/PaymentIssueBanner";
 import { CancellationScheduledBanner } from "@/components/mika/CancellationScheduledBanner";
+import { TelegramConnectionBanner } from "@/components/mika/telegram/TelegramConnectionBanner";
 import { ThemeToggle } from "@/components/mika/ThemeToggle";
 import { Button } from "@/components/ui/button";
 import {
@@ -159,7 +160,8 @@ function PainelLayout() {
           <CancellationScheduledBanner />
 
           <main className="flex-1 px-4 sm:px-6 py-6 sm:py-8">
-            <div className="mx-auto max-w-6xl">
+            <div className="mx-auto max-w-6xl space-y-4">
+              <TelegramConnectionBanner />
               <Outlet />
             </div>
           </main>