Criou /bem-vindo e migrou DB

X-Lovable-Edit-ID: edt-73315edb-9a59-4b3d-b193-cc9361d33393
Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>

src/hooks/use-agent-instance.ts

@@ -16,6 +16,8 @@ export interface AgentInstance {
   telegram_first_message_received_at: string | null;
   telegram_connected_at: string | null;
   telegram_onboarding_completed: boolean;
+  onboarding_completed: boolean;
+  agent_name: string | null;
   created_at: string;
 }
 
@@ -31,7 +33,7 @@ export function useAgentInstance() {
       const { data, error } = await supabase
         .from("agent_instances")
         .select(
-          "id, user_id, uuid_tenant, status, telegram_bot_username, telegram_bot_token_vault_id, telegram_webhook_configured, telegram_token_invalid, telegram_first_message_received_at, telegram_connected_at, telegram_onboarding_completed, created_at",
+          "id, user_id, uuid_tenant, status, telegram_bot_username, telegram_bot_token_vault_id, telegram_webhook_configured, telegram_token_invalid, telegram_first_message_received_at, telegram_connected_at, telegram_onboarding_completed, onboarding_completed, agent_name, created_at",
         )
         .eq("user_id", user!.id)
         .maybeSingle();

src/integrations/supabase/types.ts

@@ -16,11 +16,13 @@ export type Database = {
     Tables: {
       agent_instances: {
         Row: {
+          agent_name: string | null
           container_name: string | null
           created_at: string
           id: string
           last_health_check_at: string | null
           model_config: Json
+          onboarding_completed: boolean
           provisioned_at: string | null
           railway_service_id: string | null
           status: string
@@ -38,13 +40,16 @@ export type Database = {
           uuid_tenant: string
           vps_host: string | null
           vps_pool_id: string | null
+          welcome_message_sent_at: string | null
         }
         Insert: {
+          agent_name?: string | null
           container_name?: string | null
           created_at?: string
           id?: string
           last_health_check_at?: string | null
           model_config?: Json
+          onboarding_completed?: boolean
           provisioned_at?: string | null
           railway_service_id?: string | null
           status?: string
@@ -62,13 +67,16 @@ export type Database = {
           uuid_tenant?: string
           vps_host?: string | null
           vps_pool_id?: string | null
+          welcome_message_sent_at?: string | null
         }
         Update: {
+          agent_name?: string | null
           container_name?: string | null
           created_at?: string
           id?: string
           last_health_check_at?: string | null
           model_config?: Json
+          onboarding_completed?: boolean
           provisioned_at?: string | null
           railway_service_id?: string | null
           status?: string
@@ -86,6 +94,7 @@ export type Database = {
           uuid_tenant?: string
           vps_host?: string | null
           vps_pool_id?: string | null
+          welcome_message_sent_at?: string | null
         }
         Relationships: [
           {

src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as RedefinirSenhaRouteImport } from './routes/redefinir-senha'
 import { Route as RecuperarSenhaRouteImport } from './routes/recuperar-senha'
 import { Route as PainelRouteImport } from './routes/painel'
 import { Route as LoginRouteImport } from './routes/login'
+import { Route as BemVindoRouteImport } from './routes/bem-vindo'
 import { Route as AdminRouteImport } from './routes/admin'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as PainelIndexRouteImport } from './routes/painel.index'
@@ -59,6 +60,11 @@ const LoginRoute = LoginRouteImport.update({
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
+const BemVindoRoute = BemVindoRouteImport.update({
+  id: '/bem-vindo',
+  path: '/bem-vindo',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminRoute = AdminRouteImport.update({
   id: '/admin',
   path: '/admin',
@@ -158,6 +164,7 @@ const AdminAgenteIdRoute = AdminAgenteIdRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteWithChildren
+  '/bem-vindo': typeof BemVindoRoute
   '/login': typeof LoginRoute
   '/painel': typeof PainelRouteWithChildren
   '/recuperar-senha': typeof RecuperarSenhaRoute
@@ -183,6 +190,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/bem-vindo': typeof BemVindoRoute
   '/login': typeof LoginRoute
   '/recuperar-senha': typeof RecuperarSenhaRoute
   '/redefinir-senha': typeof RedefinirSenhaRoute
@@ -208,6 +216,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/admin': typeof AdminRouteWithChildren
+  '/bem-vindo': typeof BemVindoRoute
   '/login': typeof LoginRoute
   '/painel': typeof PainelRouteWithChildren
   '/recuperar-senha': typeof RecuperarSenhaRoute
@@ -236,6 +245,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/admin'
+    | '/bem-vindo'
     | '/login'
     | '/painel'
     | '/recuperar-senha'
@@ -261,6 +271,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/bem-vindo'
     | '/login'
     | '/recuperar-senha'
     | '/redefinir-senha'
@@ -285,6 +296,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/admin'
+    | '/bem-vindo'
     | '/login'
     | '/painel'
     | '/recuperar-senha'
@@ -312,6 +324,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AdminRoute: typeof AdminRouteWithChildren
+  BemVindoRoute: typeof BemVindoRoute
   LoginRoute: typeof LoginRoute
   PainelRoute: typeof PainelRouteWithChildren
   RecuperarSenhaRoute: typeof RecuperarSenhaRoute
@@ -357,6 +370,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/bem-vindo': {
+      id: '/bem-vindo'
+      path: '/bem-vindo'
+      fullPath: '/bem-vindo'
+      preLoaderRoute: typeof BemVindoRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/admin': {
       id: '/admin'
       path: '/admin'
@@ -555,6 +575,7 @@ const PainelRouteWithChildren =
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AdminRoute: AdminRouteWithChildren,
+  BemVindoRoute: BemVindoRoute,
   LoginRoute: LoginRoute,
   PainelRoute: PainelRouteWithChildren,
   RecuperarSenhaRoute: RecuperarSenhaRoute,

src/routes/admin.agente.$id.tsx

@@ -59,6 +59,7 @@ interface AgentDetail {
   provisioned_at: string | null;
   created_at: string;
   model_config: Record<string, unknown> | null;
+  agent_name: string | null;
   vps_pool: {
     railway_project_id: string | null;
     railway_environment_id: string | null;
@@ -100,7 +101,7 @@ function AgentDetailPage() {
       const { data, error } = await supabase
         .from("agent_instances")
         .select(
-          "id, user_id, uuid_tenant, status, telegram_bot_username, telegram_user_chat_id, railway_service_id, vps_pool_id, provisioned_at, created_at, model_config",
+          "id, user_id, uuid_tenant, status, telegram_bot_username, telegram_user_chat_id, railway_service_id, vps_pool_id, provisioned_at, created_at, model_config, agent_name",
         )
         .eq("id", id)
         .maybeSingle();
@@ -216,7 +217,7 @@ function AgentDetailPage() {
     : "openrouter/google/gemma-4-27b-a4b-it";
 
   const cfg = (agent?.model_config ?? {}) as Record<string, string | undefined>;
-  const defaultAgentName = cfg.agent_name || `Mika de ${firstName}`;
+  const defaultAgentName = agent?.agent_name?.trim() || cfg.agent_name || `Mika de ${firstName}`;
   const defaultSoul = useMemo(
     () =>
       `Você se chama ${defaultAgentName}. Você é um assistente pessoal de IA criado pela DOMCO para ${fullName}. Você é proativo, direto e fala sempre em português brasileiro. Você ajuda ${firstName} a ser mais produtivo — gerenciando emails, agenda, tarefas e automatizando o que puder. Seja conciso nas respostas via Telegram. Nunca se identifique como Hermes ou como produto da Nous Research — você é Mika.`,
@@ -404,6 +405,10 @@ function AgentDetailPage() {
               <h2 className="font-semibold text-lg">Informações do cliente</h2>
               <dl className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                 <Field label="Nome" value={agent.profile?.full_name || "—"} />
+                <Field
+                  label="Nome do agente (escolhido pelo cliente)"
+                  value={agent.agent_name || "—"}
+                />
                 <Field label="Email" value={agent.user_email || "—"} />
                 <Field label="Telefone" value={agent.profile?.phone || "—"} />
                 <div>

src/routes/bem-vindo.tsx

@@ -0,0 +1,401 @@
+"use client";
+
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ArrowRight,
+  CheckCircle2,
+  ExternalLink,
+  Loader2,
+  Sparkles,
+} from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+import { useAuth } from "@/hooks/use-auth";
+import { useProfile } from "@/hooks/use-profile";
+import { useAgentInstance } from "@/hooks/use-agent-instance";
+import { supabase } from "@/integrations/supabase/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Logo } from "@/components/mika/Logo";
+import { TelegramIcon } from "@/components/mika/telegram/TelegramIcon";
+import { TelegramOnboardingWizard } from "@/components/mika/telegram/TelegramOnboardingWizard";
+import { cn } from "@/lib/utils";
+
+const WELCOME_DONE_KEY = "mika-welcome-done";
+
+export const Route = createFileRoute("/bem-vindo")({
+  component: WelcomePage,
+});
+
+function WelcomePage() {
+  const { user, loading: authLoading } = useAuth();
+  const { data: profile } = useProfile();
+  const { data: agent } = useAgentInstance();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [step, setStep] = useState<1 | 2 | 3>(1);
+  const [agentName, setAgentName] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [wizardOpen, setWizardOpen] = useState(false);
+
+  const fullName = (profile?.full_name || "").trim();
+  const firstName = useMemo(
+    () => (fullName.split(" ")[0] || "você").trim(),
+    [fullName],
+  );
+
+  // Auth guard
+  useEffect(() => {
+    if (!authLoading && !user) {
+      navigate({ to: "/login", search: { redirect: "/bem-vindo" } });
+    }
+  }, [authLoading, user, navigate]);
+
+  // Pré-preenche o input com o default
+  useEffect(() => {
+    if (agentName) return;
+    if (agent?.agent_name) {
+      setAgentName(agent.agent_name);
+    } else if (firstName && firstName !== "você") {
+      setAgentName(`Mika de ${firstName}`);
+    }
+  }, [agent?.agent_name, firstName, agentName]);
+
+  // Etapa 1 → 2 automático em 3s
+  useEffect(() => {
+    if (step !== 1) return;
+    const t = setTimeout(() => setStep(2), 3000);
+    return () => clearTimeout(t);
+  }, [step]);
+
+  // Se já completou o onboarding, vai direto para /painel
+  useEffect(() => {
+    if (!agent) return;
+    if (agent.onboarding_completed) {
+      navigate({ to: "/painel", search: {} });
+    }
+  }, [agent, navigate]);
+
+  async function handleSaveName() {
+    const trimmed = agentName.trim();
+    if (trimmed.length < 2) {
+      toast.error("O nome precisa ter pelo menos 2 caracteres.");
+      return;
+    }
+    if (!agent) {
+      toast.error("Aguarde, ainda estamos preparando seu agente…");
+      return;
+    }
+    setSaving(true);
+    const { error } = await supabase
+      .from("agent_instances")
+      .update({ agent_name: trimmed })
+      .eq("id", agent.id);
+    setSaving(false);
+    if (error) {
+      toast.error("Não foi possível salvar o nome. Tente novamente.");
+      return;
+    }
+    if (user) {
+      await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] });
+    }
+    setStep(3);
+  }
+
+  async function markWelcomeDone() {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(WELCOME_DONE_KEY, "1");
+    }
+    if (agent) {
+      await supabase
+        .from("agent_instances")
+        .update({ onboarding_completed: true })
+        .eq("id", agent.id);
+      if (user) {
+        await queryClient.invalidateQueries({ queryKey: ["agent-instance", user.id] });
+      }
+    }
+  }
+
+  async function handleConnectTelegram() {
+    await markWelcomeDone();
+    setWizardOpen(true);
+  }
+
+  async function handleSkip() {
+    await markWelcomeDone();
+    navigate({ to: "/painel", search: {} });
+  }
+
+  if (authLoading || !user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-[oklch(0.21_0.04_265)]">
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="min-h-screen flex flex-col"
+      style={{
+        background:
+          "linear-gradient(180deg, oklch(0.21 0.04 265) 0%, oklch(0.27 0.04 265) 100%)",
+      }}
+    >
+      {/* Header */}
+      <header className="flex items-center justify-center pt-8 pb-4 px-4">
+        <Logo size="lg" className="text-white" />
+      </header>
+
+      <main className="flex-1 flex items-center justify-center px-4 py-8">
+        <div className="w-full max-w-2xl">
+          <AnimatePresence mode="wait" initial={false}>
+            {step === 1 && (
+              <motion.section
+                key="step-1"
+                initial={{ opacity: 0, x: 60 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -60 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="text-center"
+              >
+                <motion.div
+                  animate={{ scale: [1, 1.08, 1] }}
+                  transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+                  className="mx-auto mb-8 h-24 w-24 rounded-full bg-primary/20 flex items-center justify-center"
+                >
+                  <Sparkles className="h-12 w-12 text-primary" />
+                </motion.div>
+
+                <h1 className="text-4xl font-bold text-white">
+                  Bem-vindo à Mika! 🎉
+                </h1>
+                <p className="mt-4 text-lg text-white/70">
+                  Seu assistente pessoal de IA está sendo preparado.
+                </p>
+
+                <ul className="mt-10 space-y-3 max-w-sm mx-auto text-left">
+                  {[
+                    { icon: "✅", text: "Pagamento confirmado" },
+                    { icon: "✅", text: "Sua conta está ativa" },
+                    { icon: "⏳", text: "Configurando seu agente..." },
+                  ].map((item, i) => (
+                    <motion.li
+                      key={item.text}
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.5 + i * 0.5, duration: 0.4 }}
+                      className="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-4 py-3 text-white"
+                    >
+                      <span className="text-xl">{item.icon}</span>
+                      <span className="text-sm font-medium">{item.text}</span>
+                    </motion.li>
+                  ))}
+                </ul>
+              </motion.section>
+            )}
+
+            {step === 2 && (
+              <motion.section
+                key="step-2"
+                initial={{ opacity: 0, x: 60 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -60 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="text-center"
+              >
+                <h2 className="text-3xl font-bold text-white">
+                  Como você quer chamar seu assistente?
+                </h2>
+                <p className="mt-3 text-white/70">
+                  Este será o nome que aparecerá nas conversas.
+                </p>
+
+                <div className="mt-8 mx-auto max-w-md space-y-3">
+                  <Input
+                    autoFocus
+                    value={agentName}
+                    maxLength={40}
+                    onChange={(e) => setAgentName(e.target.value)}
+                    placeholder="Ex: Mika de João, Maya, Assistente..."
+                    className="h-12 text-center text-lg bg-white/5 border-white/20 text-white placeholder:text-white/40 focus-visible:ring-primary"
+                  />
+                  <div className="flex justify-between text-xs text-white/50 px-1">
+                    <span>
+                      {agentName.trim().length < 2
+                        ? "Mínimo 2 caracteres"
+                        : "\u00A0"}
+                    </span>
+                    <span>{agentName.length}/40</span>
+                  </div>
+                </div>
+
+                <div className="mt-6 flex flex-wrap justify-center gap-2 max-w-md mx-auto">
+                  {[
+                    `Mika de ${firstName}`,
+                    "Maya",
+                    "Alex",
+                    "Assistente",
+                  ].map((sugg) => (
+                    <button
+                      key={sugg}
+                      type="button"
+                      onClick={() => setAgentName(sugg.slice(0, 40))}
+                      className={cn(
+                        "px-3 py-1.5 rounded-full text-xs font-medium border transition-colors",
+                        agentName === sugg
+                          ? "bg-primary text-primary-foreground border-primary"
+                          : "bg-white/5 text-white/80 border-white/15 hover:bg-white/10",
+                      )}
+                    >
+                      {sugg}
+                    </button>
+                  ))}
+                </div>
+
+                <Button
+                  size="lg"
+                  className="mt-8 min-w-56"
+                  disabled={agentName.trim().length < 2 || saving}
+                  onClick={handleSaveName}
+                >
+                  {saving ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : null}
+                  Continuar <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </motion.section>
+            )}
+
+            {step === 3 && (
+              <motion.section
+                key="step-3"
+                initial={{ opacity: 0, x: 60 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -60 }}
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                className="text-center"
+              >
+                <h2 className="text-3xl font-bold text-white">
+                  Quase lá! Conecte seu Telegram.
+                </h2>
+                <p className="mt-3 text-white/70 max-w-lg mx-auto">
+                  Para conversar com{" "}
+                  <span className="font-semibold text-white">
+                    {agentName || "seu agente"}
+                  </span>
+                  , você precisa conectar seu Telegram. Leva menos de 2 minutos.
+                </p>
+
+                <motion.div
+                  animate={{ scale: [1, 1.06, 1] }}
+                  transition={{ duration: 2.4, repeat: Infinity, ease: "easeInOut" }}
+                  className="mx-auto mt-8 mb-8 h-24 w-24 rounded-full bg-primary/20 flex items-center justify-center"
+                >
+                  <TelegramIcon className="h-12 w-12 text-primary" />
+                </motion.div>
+
+                <ol className="space-y-3 max-w-md mx-auto text-left">
+                  <StepRow
+                    number={1}
+                    title="Abra o BotFather no Telegram"
+                    extra={
+                      <Button
+                        asChild
+                        size="sm"
+                        variant="outline"
+                        className="mt-2 border-white/20 bg-white/5 text-white hover:bg-white/10 hover:text-white"
+                      >
+                        <a
+                          href="https://t.me/BotFather?start"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Abrir BotFather <ExternalLink className="ml-2 h-3.5 w-3.5" />
+                        </a>
+                      </Button>
+                    }
+                  />
+                  <StepRow
+                    number={2}
+                    title="Digite /newbot e siga as instruções"
+                    hint={`Use "${agentName || "Mika"}Bot" como username sugerido`}
+                  />
+                  <StepRow
+                    number={3}
+                    title="Cole o token aqui na próxima tela"
+                  />
+                </ol>
+
+                <div className="mt-10 flex flex-col items-center gap-3">
+                  <Button
+                    size="lg"
+                    className="min-w-64"
+                    onClick={handleConnectTelegram}
+                  >
+                    Conectar meu Telegram <ArrowRight className="ml-2 h-4 w-4" />
+                  </Button>
+                  <button
+                    type="button"
+                    onClick={handleSkip}
+                    className="text-sm text-white/60 hover:text-white underline-offset-4 hover:underline"
+                  >
+                    Fazer isso depois
+                  </button>
+                </div>
+              </motion.section>
+            )}
+          </AnimatePresence>
+        </div>
+      </main>
+
+      <TelegramOnboardingWizard
+        open={wizardOpen}
+        onOpenChange={(open) => {
+          setWizardOpen(open);
+          // Quando fechar o wizard, leva ao painel
+          if (!open) {
+            navigate({ to: "/painel", search: {} });
+          }
+        }}
+      />
+    </div>
+  );
+}
+
+function StepRow({
+  number,
+  title,
+  hint,
+  extra,
+}: {
+  number: number;
+  title: string;
+  hint?: string;
+  extra?: React.ReactNode;
+}) {
+  return (
+    <li className="flex items-start gap-3 rounded-lg border border-white/10 bg-white/5 p-4">
+      <span className="h-7 w-7 shrink-0 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold text-sm">
+        {number}
+      </span>
+      <div className="flex-1">
+        <p className="text-sm font-medium text-white">{title}</p>
+        {hint && <p className="mt-1 text-xs text-white/60">{hint}</p>}
+        {extra}
+      </div>
+    </li>
+  );
+}
+
+// Marker no componente para cumprir contrato de "marcar como visitada"
+// (também usado pelo redirect do /painel)
+export function isWelcomeDone(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.localStorage.getItem(WELCOME_DONE_KEY) === "1";
+}

src/routes/checkout.sucesso.tsx

@@ -15,11 +15,10 @@ function CheckoutSuccessPage() {
   const queryClient = useQueryClient();
 
   useEffect(() => {
-    // Invalida queries de assinatura para refletir o novo estado quando o webhook chegar
     queryClient.invalidateQueries({ queryKey: ["subscription"] });
     const t = setTimeout(() => {
-      navigate({ to: "/painel", search: {} });
+      navigate({ to: "/bem-vindo" });
-    }, 6000);
+    }, 4000);
     return () => clearTimeout(t);
   }, [navigate, queryClient]);
 
@@ -32,15 +31,12 @@ function CheckoutSuccessPage() {
         <div className="space-y-2">
           <h1 className="text-3xl font-bold tracking-tight">Assinatura confirmada!</h1>
           <p className="text-muted-foreground">
-            Estamos provisionando seu acesso. Em alguns segundos seu plano estará ativo.
+            Em instantes vamos preparar seu agente Mika.
           </p>
         </div>
         <div className="flex flex-col sm:flex-row gap-3 justify-center">
           <Button asChild className="rounded-lg bg-primary hover:bg-primary-dark text-primary-foreground">
-            <Link to="/painel" search={{}}>Ir para o painel</Link>
+            <Link to="/bem-vindo">Continuar</Link>
-          </Button>
-          <Button asChild variant="outline" className="rounded-lg">
-            <Link to="/painel/faturamento">Ver faturamento</Link>
           </Button>
         </div>
         <p className="text-xs text-muted-foreground">Você será redirecionado em instantes…</p>

src/routes/painel.index.tsx

@@ -35,13 +35,17 @@ function DashboardPage() {
   const [wizardOpen, setWizardOpen] = useState(false);
   const previousStatusRef = useRef<string | null>(null);
 
-  // Auto-open do wizard ao voltar com ?status=success
+  // Redireciona para /bem-vindo se cliente acabou de pagar e ainda não completou onboarding
   useEffect(() => {
     if (search.status !== "success" || !agent) return;
     if (agent.status === "suspended" || agent.status === "error") {
       navigate({ search: { status: undefined }, replace: true });
       return;
     }
+    if (!agent.onboarding_completed) {
+      navigate({ to: "/bem-vindo", replace: true });
+      return;
+    }
     if (!agent.telegram_bot_username) setWizardOpen(true);
     navigate({ search: { status: undefined }, replace: true });
   }, [search.status, agent, navigate]);
@@ -74,6 +78,17 @@ function DashboardPage() {
   }
 
   const firstName = (profile?.full_name || "").split(" ")[0] || "por aqui";
+  const agentName = agent?.agent_name?.trim() || "Mika";
+  const statusLabel =
+    agent?.status === "active"
+      ? "ativo"
+      : agent?.status === "provisioning"
+        ? "sendo preparado"
+        : agent?.status === "suspended"
+          ? "pausado"
+          : agent?.status === "error"
+            ? "com erro"
+            : "aguardando configuração";
 
   return (
     <div className="space-y-6">
@@ -83,7 +98,9 @@ function DashboardPage() {
         <h1 className="text-3xl font-bold tracking-tight">Olá, {firstName} 👋</h1>
         <p className="mt-1 text-muted-foreground">
           {subscription
-            ? "Acompanhe abaixo o status do seu agente Mika."
+            ? agent
+              ? <>Seu agente <span className="font-semibold text-foreground">{agentName}</span> está {statusLabel}.</>
+              : "Acompanhe abaixo o status do seu agente."
             : "Vamos colocar seu agente Mika no ar."}
         </p>
       </header>

supabase/functions/provision-agent/index.ts

@@ -78,7 +78,7 @@ Deno.serve(async (req) => {
   const { data: agent, error: agentErr } = await supabase
     .from("agent_instances")
     .select(
-      "id, user_id, uuid_tenant, status, telegram_bot_token_vault_id, telegram_bot_username, telegram_user_chat_id, railway_service_id",
+      "id, user_id, uuid_tenant, status, telegram_bot_token_vault_id, telegram_bot_username, telegram_user_chat_id, railway_service_id, agent_name",
     )
     .eq("id", body.agent_instance_id)
     .maybeSingle();
@@ -108,7 +108,11 @@ Deno.serve(async (req) => {
 
   const fullName = (profile?.full_name?.trim() || "Usuário").toString();
   const firstName = fullName.split(" ")[0] || "Usuário";
-  const agentName = body.agent_name?.trim() || `Mika de ${firstName}`;
+  // Prioridade: body > coluna agent_name no DB > default "Mika de {firstName}"
+  const agentName =
+    body.agent_name?.trim() ||
+    (agent.agent_name?.trim() ?? "") ||
+    `Mika de ${firstName}`;
   console.log(`[provision-agent] profile carregado: ${fullName} → agent_name=${agentName}`);
 
   // 1c) Carregar subscription ativa (para definir modelo Pro vs Basic)
@@ -280,6 +284,7 @@ Deno.serve(async (req) => {
     .update({
       railway_service_id: railwayServiceId,
       vps_pool_id: pool.id,
+      agent_name: agentNameFinal,
       model_config: {
         provider: modelFinal,
         stt: sttProvider,
@@ -389,7 +394,10 @@ async function handleUpdateExistingService(
 
   const fullName = (profile?.full_name?.trim() || "Usuário").toString();
   const firstName = fullName.split(" ")[0] || "Usuário";
-  const agentName = body.agent_name?.trim() || `Mika de ${firstName}`;
+  const agentName =
+    body.agent_name?.trim() ||
+    (agent.agent_name?.trim() ?? "") ||
+    `Mika de ${firstName}`;
 
   const { data: subscription } = await supabase
     .from("subscriptions")

supabase/functions/railway-webhook/index.ts

@@ -81,7 +81,9 @@ Deno.serve(async (req) => {
 
   const { data: agent } = await supabase
     .from("agent_instances")
-    .select("id, status, user_id, telegram_bot_username, railway_service_id")
+    .select(
+      "id, status, user_id, telegram_bot_username, railway_service_id, telegram_user_chat_id, telegram_bot_token_vault_id, agent_name, welcome_message_sent_at",
+    )
     .eq("railway_service_id", serviceId)
     .maybeSingle();
 
@@ -123,6 +125,19 @@ Deno.serve(async (req) => {
 
     console.log(`railway-webhook: agent ${agent.id} marcado como active (status=${upper})`);
 
+    // Envia mensagem de boas-vindas via Telegram (apenas na primeira ativação)
+    if (
+      !agent.welcome_message_sent_at &&
+      agent.telegram_user_chat_id &&
+      agent.telegram_bot_token_vault_id
+    ) {
+      try {
+        await sendWelcomeMessage(supabase, agent);
+      } catch (e) {
+        console.error("railway-webhook: falha ao enviar welcome message:", e);
+      }
+    }
+
     // Notifica admin somente se era um auto-provisionamento (status anterior=provisioning)
     if (wasProvisioning) {
       const fullName = await loadFullName();
@@ -181,3 +196,60 @@ function jsonResponse(status: number, body: unknown) {
     headers: { ...corsHeaders, "Content-Type": "application/json" },
   });
 }
+
+// deno-lint-ignore no-explicit-any
+async function sendWelcomeMessage(supabase: any, agent: any): Promise<void> {
+  // Decifra o token do bot
+  const { data: secret } = await supabase.rpc("vault_decrypt_secret", {
+    secret_id: agent.telegram_bot_token_vault_id,
+  });
+  const token: string = secret?.[0]?.decrypted_secret ?? "";
+  if (!token) {
+    console.warn("sendWelcomeMessage: token vazio, abortando");
+    return;
+  }
+
+  // Carrega first name
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("full_name")
+    .eq("id", agent.user_id)
+    .maybeSingle();
+
+  const fullName = (profile?.full_name as string | undefined)?.trim() || "";
+  const firstName = fullName.split(" ")[0] || "você";
+  const agentName = (agent.agent_name as string | undefined)?.trim() || "Mika";
+
+  const text =
+    `Olá, ${firstName}! 👋\n\n` +
+    `Sou ${agentName}, sua assistente pessoal de IA criada pela DomCo.\n\n` +
+    `Estou pronta para começar! Aqui estão algumas coisas que posso fazer por você:\n\n` +
+    `📧 Resumir seus e-mails importantes\n` +
+    `📅 Gerenciar sua agenda\n` +
+    `✅ Organizar suas tarefas\n` +
+    `🔍 Pesquisar qualquer coisa\n` +
+    `⚡ Criar automações personalizadas\n\n` +
+    `Pode me mandar uma mensagem quando quiser. Estou aqui! 🚀`;
+
+  const res = await fetch(`https://api.telegram.org/bot${token}/sendMessage`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      chat_id: agent.telegram_user_chat_id,
+      text,
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.text().catch(() => "");
+    console.error(`sendWelcomeMessage: Telegram API ${res.status}: ${err}`);
+    return;
+  }
+
+  await supabase
+    .from("agent_instances")
+    .update({ welcome_message_sent_at: new Date().toISOString() })
+    .eq("id", agent.id);
+
+  console.log(`sendWelcomeMessage: enviada para agent ${agent.id}`);
+}

supabase/migrations/20260425120053_73879f42-52a8-423a-8ed5-43b8fdcd9c6d.sql

@@ -0,0 +1,4 @@
+ALTER TABLE public.agent_instances 
+  ADD COLUMN IF NOT EXISTS agent_name text,
+  ADD COLUMN IF NOT EXISTS welcome_message_sent_at timestamp with time zone,
+  ADD COLUMN IF NOT EXISTS onboarding_completed boolean NOT NULL DEFAULT false;