Prompts Mestre: AgentePro Creator - SaaS Multiagente Sem Código com Next.js e LangCrew

Você é um especialista em modelagem de dados para aplicações SaaS escaláveis no Supabase.

**Contexto:** Estamos construindo o AgentePro Creator, uma plataforma que permite criar e gerenciar equipes de IA multiagente. Usaremos Supabase para autenticação, banco de dados (PostgreSQL) e armazenamento.

**Tarefa:** Crie um esquema de banco de dados SQL (PostgreSQL) para o Supabase que suporte as seguintes entidades e suas relações:
1.  **Usuários:** Integrado com Supabase Auth. Deve conter informações adicionais como `stripe_customer_id`, `subscription_status`, `plan_id`, `credits_balance`.
2.  **Organizações/Times:** Usuários podem pertencer a múltiplas organizações.
3.  **Projetos:** Cada organização pode ter múltiplos projetos.
4.  **Agentes:** Modelos de agentes individuais (e.g., "Agente de Marketing", "Agente de Vendas"). Deve incluir `name`, `description`, `role`, `goal`, `backstory`, `llm_config` (JSONB), `tools` (JSONB), `prompt_template` (TEXT).
5.  **Equipes de Agentes (Workflows):** Representa um fluxo multiagente (e.g., "Equipe de Geração de Leads"). Deve incluir `name`, `description`, `workflow_definition` (JSONB para o grafo do LangCrew), `status`, `last_run_at`.
6.  **Prompts:** Biblioteca de prompts reutilizáveis. `name`, `content`, `variables` (JSONB).
7.  **Execuções (Runs):** Logs de cada execução de uma equipe de agentes. `team_id`, `status`, `input_data`, `output_data`, `start_time`, `end_time`, `cost_usd`, `token_usage`.
8.  **Templates de Agentes/Equipes:** Modelos pré-configurados para os usuários.

**Restrições:**
*   Use `uuid` para IDs primárias.
*   Implemente chaves estrangeiras (`FOREIGN KEY`) e índices (`INDEX`) apropriados.
*   Considere permissões de RLS (Row Level Security) básicas para cada tabela (e.g., `user_id` ou `organization_id`).
*   Use tipos de dados PostgreSQL otimizados (e.g., `JSONB` para dados semi-estruturados).
*   Inclua timestamps `created_at` e `updated_at` com valores padrão.

**Formato de Saída:** Um script SQL completo, com `CREATE TABLE` e `ALTER TABLE` para chaves estrangeiras, e comentários explicativos para cada tabela e coluna.

```sql
-- Exemplo de saída esperada (apenas estrutura inicial)
CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

CREATE TABLE public.organizations (
    id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
    name TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);
-- ... (restante do script)

Você é um engenheiro de backend experiente em Next.js com foco em APIs RESTful e integração com Supabase.

**Contexto:** O frontend do AgentePro Creator precisa interagir com o backend para criar, ler, atualizar e deletar (`CRUD`) agentes. Usaremos Next.js API Routes no App Router e o SDK do Supabase para interagir com o banco de dados.

**Tarefa:** Crie os endpoints de API para o gerenciamento de Agentes.

**Endpoints Necessários:**
1.  `GET /api/agents`: Lista todos os agentes de uma organização (filtrado por `organization_id`).
2.  `POST /api/agents`: Cria um novo agente.
3.  `GET /api/agents/[id]`: Retorna um agente específico.
4.  `PUT /api/agents/[id]`: Atualiza um agente existente.
5.  `DELETE /api/agents/[id]`: Deleta um agente.

**Requisitos:**
*   Autenticação: Todos os endpoints devem verificar se o usuário está autenticado via Supabase Auth e pertence à organização do agente/projeto.
*   Validação: Valide os dados de entrada (e.g., `name` não pode ser vazio, `llm_config` deve ser um JSON válido).
*   Tratamento de Erros: Retorne respostas HTTP apropriadas (400, 401, 403, 404, 500) com mensagens de erro claras.
*   Tipagem: Use TypeScript.
*   Estrutura: Organize os arquivos de API routes de acordo com o App Router do Next.js.
*   Integração Supabase: Utilize o `@supabase/supabase-js` para interagir com o banco de dados.

**Formato de Saída:** Snippets de código TypeScript para cada endpoint, mostrando a estrutura do arquivo e a lógica principal. Inclua um exemplo de como obter o `supabaseClient` e o `user` autenticado.

```typescript
// Exemplo: app/api/agents/route.ts (GET /api/agents)
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  const supabase = createRouteHandlerClient({ cookies });
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // Lógica para buscar agentes da organização do usuário
  // ...
}
// ... (outros endpoints)

Você é um especialista em sistemas de pagamento e integrações de webhook com Stripe e Supabase.

**Contexto:** O AgentePro Creator terá planos de assinatura. Precisamos atualizar o status da assinatura do usuário no nosso banco de dados Supabase quando eventos importantes ocorrerem no Stripe (e.g., `checkout.session.completed`, `customer.subscription.updated`, `customer.subscription.deleted`).

**Tarefa:** Crie uma Vercel Edge Function (ou Next.js API Route) que atue como um webhook handler para o Stripe.

**Requisitos:**
*   Verificação de Assinatura: O webhook deve verificar a assinatura do Stripe para garantir que a requisição é legítima.
*   Processamento de Eventos: Implemente a lógica para os eventos `checkout.session.completed`, `customer.subscription.updated`, `customer.subscription.deleted`.
*   Atualização do Supabase: Para cada evento relevante, atualize as colunas `stripe_customer_id`, `subscription_status`, `plan_id` na tabela `public.users` (ou uma tabela `user_profiles` ligada a `auth.users`).
*   Tratamento de Erros: Log de erros e retorno de status HTTP apropriado.
*   Segurança: Armazene a `STRIPE_WEBHOOK_SECRET` como variável de ambiente.
*   Tipagem: Use TypeScript.

**Formato de Saída:** Um snippet de código TypeScript para a Vercel Edge Function (`app/api/stripe-webhook/route.ts`) com a lógica principal para verificar a assinatura e processar os eventos.

```typescript
// Exemplo: app/api/stripe-webhook/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-10-16', // ou a versão mais recente
});

export async function POST(req: Request) {
  const body = await req.text();
  const signature = req.headers.get('stripe-signature');

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature!,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err: any) {
    console.error(`Webhook Error: ${err.message}`);
    return NextResponse.json({ error: `Webhook Error: ${err.message}` }, { status: 400 });
  }

  const supabase = createRouteHandlerClient({ cookies });

  switch (event.type) {
    case 'checkout.session.completed':
      const checkoutSession = event.data.object as Stripe.Checkout.Session;
      // Lógica para atualizar o usuário no Supabase com base em checkoutSession.customer e checkoutSession.subscription
      console.log('Checkout session completed:', checkoutSession.id);
      break;
    case 'customer.subscription.updated':
      const subscriptionUpdated = event.data.object as Stripe.Subscription;
      // Lógica para atualizar o status da assinatura do usuário
      console.log('Subscription updated:', subscriptionUpdated.id);
      break;
    case 'customer.subscription.deleted':
      const subscriptionDeleted = event.data.object as Stripe.Subscription;
      // Lógica para desativar a assinatura do usuário
      console.log('Subscription deleted:', subscriptionDeleted.id);
      break;
    default:
      console.warn(`Unhandled event type: ${event.type}`);
  }

  return NextResponse.json({ received: true }, { status: 200 });
}

Você é um engenheiro de frontend com expertise em React, Next.js, Tailwind CSS e shadcn/ui, focado em component-driven design.

**Contexto:** O AgentePro Creator precisa exibir uma lista de agentes em um dashboard. Cada agente deve ser representado por um card interativo. O design é minimalista dark.

**Tarefa:** Crie um componente React (`AgentCard`) usando shadcn/ui e Tailwind CSS.

**Requisitos do Componente:**
*   **Props:** `agent: AgentType` (onde `AgentType` é um tipo TypeScript que inclui `id`, `name`, `description`, `role`, `status: 'active' | 'draft' | 'archived'`).
*   **Layout:**
    *   Um `Card` (shadcn/ui) como container principal.
    *   `CardHeader` com o `name` do agente (título) e um ícone de status (e.g., um ponto verde para 'active', cinza para 'draft').
    *   `CardDescription` com a `description` do agente.
    *   `CardContent` com a `role` do agente (e.g., "Analista de Marketing").
    *   `CardFooter` com botões para "Editar" e "Deletar" (usando `Button` da shadcn/ui, com variantes apropriadas).
*   **Estilo:**
    *   Minimalista dark.
    *   Use classes do Tailwind CSS para espaçamento, tipografia, cores e responsividade.
    *   O card deve ter um efeito sutil de hover (e.g., `scale-105` ou `shadow-lg`).
    *   Cores: `card` (background), `card-foreground` (texto), `primary` (botões de ação).
*   **Acessibilidade:** Garanta que os botões sejam navegáveis por teclado e tenham rótulos acessíveis.
*   **Tipagem:** Use TypeScript para as props e o tipo `AgentType`.

**Formato de Saída:** Um arquivo TypeScript/TSX (`components/AgentCard.tsx`) com o código completo do componente, incluindo imports e um exemplo de uso.

```tsx
// Exemplo: components/AgentCard.tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; // Assumindo que temos um Badge para status
import { cn } from "@/lib/utils"; // Utilitário para concatenar classes Tailwind

type AgentType = {
  id: string;
  name: string;
  description: string;
  role: string;
  status: 'active' | 'draft' | 'archived';
};

interface AgentCardProps {
  agent: AgentType;
  onEdit: (id: string) => void;
  onDelete: (id: string) => void;
}

export function AgentCard({ agent, onEdit, onDelete }: AgentCardProps) {
  const statusColor = agent.status === 'active' ? 'bg-green-500' : agent.status === 'draft' ? 'bg-gray-500' : 'bg-red-500';

  return (
    <Card className="w-full max-w-sm hover:scale-[1.02] transition-transform duration-200 ease-in-out">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle>{agent.name}</CardTitle>
          <Badge className={cn("h-3 w-3 rounded-full", statusColor)} title={`Status: ${agent.status}`} />
        </div>
        <CardDescription>{agent.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">Função: {agent.role}</p>
      </CardContent>
      <CardFooter className="flex justify-end gap-2">
        <Button variant="outline" onClick={() => onEdit(agent.id)}>Editar</Button>
        <Button variant="destructive" onClick={() => onDelete(agent.id)}>Deletar</Button>
      </CardFooter>
    </Card>
  );
}

// Exemplo de uso:
/*
<AgentCard
  agent={{
    id: "123",
    name: "Agente de Conteúdo",
    description: "Gera ideias e rascunhos para posts de blog.",
    role: "Redator",
    status: "active"
  }}
  onEdit={(id) => console.log("Editar", id)}
  onDelete={(id) => console.log("Deletar", id)}
/>
*/

Você é um arquiteto de frontend com vasta experiência em construir interfaces complexas e interativas, como editores visuais.

**Contexto:** O core do AgentePro Creator é a capacidade de construir equipes de agentes visualmente. Precisamos de um editor drag-and-drop onde o usuário possa conectar agentes (nós) e definir suas interações (arestas), similar a ferramentas como n8n ou Zapier.

**Tarefa:** Crie a estrutura básica de um componente React para um editor de fluxo visual usando `react-flow-renderer` (ou `@xyflow/react-flow`) e integre-o com componentes da `shadcn/ui` para a interface do usuário.

**Requisitos:**
*   **Componente Principal:** `AgentWorkflowEditor.tsx`.
*   **Integração React Flow:**
    *   Renderize um `ReactFlow` component.
    *   Defina `initialNodes` e `initialEdges`.
    *   Permita arrastar e soltar nós (`onNodesChange`, `onEdgesChange`).
    *   Permita conectar nós (`onConnect`).
    *   Defina tipos de nós customizados para representar agentes (e.g., `AgentNode`).
*   **Interface do Usuário (shadcn/ui):**
    *   Um `Sidebar` (e.g., usando `Sheet` ou um `div` com estilo) para listar agentes disponíveis para arrastar e soltar no canvas.
    *   Botões na parte superior (e.g., `Button` da shadcn/ui) para "Salvar Workflow", "Executar", "Limpar Canvas".
    *   Use `Tooltip` para dicas de ferramentas.
*   **Estilo:** Minimalista dark, usando Tailwind CSS. O canvas deve ter um fundo escuro.
*   **Funcionalidade Drag-and-Drop:** Implemente a lógica básica para arrastar um agente da sidebar para o canvas e criar um novo nó.
*   **Tipagem:** Use TypeScript para `Node` e `Edge` types.

**Formato de Saída:** Um snippet de código TypeScript/TSX (`components/AgentWorkflowEditor.tsx`) mostrando a estrutura do componente, imports essenciais e a lógica básica para o React Flow e a sidebar.

```tsx
// Exemplo: components/AgentWorkflowEditor.tsx
'use client';

import React, { useCallback, useState, useRef } from 'react';
import ReactFlow, {
  Controls,
  Background,
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
  Node,
  Edge,
  Connection,
  useReactFlow,
  Panel,
} from '@xyflow/react-flow'; // Ou 'react-flow-renderer'
import '@xyflow/react-flow/dist/style.css'; // Estilos base do React Flow

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { PlusIcon, PlayIcon, SaveIcon } from 'lucide-react';

// Tipos de nó customizados (exemplo)
const AgentNode = ({ data }: { data: { label: string } }) => (
  <Card className="p-4 shadow-lg border border-primary-foreground/20 bg-card text-card-foreground">
    <div className="font-semibold">{data.label}</div>
    <div className="text-xs text-muted-foreground">Clique para configurar</div>
  </Card>
);

const nodeTypes = {
  agentNode: AgentNode,
};

const initialNodes: Node[] = [];
const initialEdges: Edge[] = [];

export function AgentWorkflowEditor() {
  const reactFlowWrapper = useRef<HTMLDivElement>(null);
  const [nodes, setNodes] = useState<Node[]>(initialNodes);
  const [edges, setEdges] = useState<Edge[]>(initialEdges);
  const { screenToFlowPosition } = useReactFlow();

  const onNodesChange = useCallback(
    (changes: any) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes]
  );
  const onEdgesChange = useCallback(
    (changes: any) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges]
  );
  const onConnect = useCallback(
    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges]
  );

  const onDragOver = useCallback((event: React.DragEvent) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);

  const onDrop = useCallback(
    (event: React.DragEvent) => {
      event.preventDefault();

      if (reactFlowWrapper.current) {
        const type = event.dataTransfer.getData('application/reactflow');
        const position = screenToFlowPosition({
          x: event.clientX,
          y: event.clientY,
        });
        const newNode: Node = {
          id: `${Date.now()}`, // ID único
          type,
          position,
          data: { label: `${type} node` },
        };
        setNodes((nds) => nds.concat(newNode));
      }
    },
    [screenToFlowPosition, setNodes]
  );

  const onDragStart = (event: React.DragEvent, nodeType: string) => {
    event.dataTransfer.setData('application/reactflow', nodeType);
    event.dataTransfer.effectAllowed = 'move';
  };

  return (
    <div className="flex h-[calc(100vh-64px)] w-full bg-background"> {/* Ajustar altura conforme header */}
      <aside className="w-64 border-r border-border p-4 flex flex-col gap-4">
        <h3 className="text-lg font-semibold">Agentes Disponíveis</h3>
        <Card
          className="p-3 cursor-grab bg-secondary text-secondary-foreground hover:bg-secondary/80"
          draggable
          onDragStart={(event) => onDragStart(event, 'agentNode')}
        >
          <PlusIcon className="inline-block mr-2 h-4 w-4" />
          Novo Agente
        </Card>
        {/* Adicione outros agentes arrastáveis aqui */}
      </aside>

      <div className="flex-grow h-full" ref={reactFlowWrapper}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          onDrop={onDrop}
          onDragOver={onDragOver}
          nodeTypes={nodeTypes}
          fitView
          className="bg-muted" // Fundo do canvas
        >
          <Background variant="dots" gap={12} size={1} />
          <Controls />
          <Panel position="top-right" className="flex gap-2 p-2 bg-card rounded-md shadow-lg">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={() => console.log('Salvar', nodes, edges)}>
                    <SaveIcon className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Salvar Workflow</TooltipContent>
              </Tooltip>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="default" size="icon" onClick={() => console.log('Executar Workflow')}>
                    <PlayIcon className="h-4 w-4" />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Executar Workflow</Tooltip</TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </Panel>
        </ReactFlow>
      </div>
    </div>
  );
}

Você é um especialista em design systems e acessibilidade, com foco em Next.js e Tailwind CSS.

**Contexto:** O AgentePro Creator adota um estilo minimalista dark como padrão (`dark mode first`). Precisamos de uma implementação robusta de tema que respeite as preferências do sistema do usuário, mas permita a alternância manual.

**Tarefa:** Crie um `ThemeProvider` para Next.js (App Router) que utilize `next-themes` e configure o Tailwind CSS para suportar o dark mode.

**Requisitos:**
*   **`ThemeProvider`:**
    *   Use a biblioteca `next-themes`.
    *   Defina `attribute="class"` para que o Tailwind possa aplicar o dark mode via classes.
    *   Defina `defaultTheme="system"` para respeitar a preferência do usuário, mas com fallback para `dark`.
    *   Permita `enableSystem`.
*   **Tailwind CSS:** Configure `tailwind.config.ts` para `darkMode: 'class'`.
*   **Componente de Toggle:** Crie um componente `ThemeToggle` (usando `Button` e `DropdownMenu` da shadcn/ui) que permita ao usuário alternar entre `light`, `dark` e `system` (com ícones apropriados, e.g., `SunIcon`, `MoonIcon`, `LaptopIcon` do `lucide-react`).
*   **Integração:** Mostre como envolver o `layout.tsx` principal com o `ThemeProvider`.

**Formato de Saída:**
1.  Snippet para `tailwind.config.ts`.
2.  Snippet para `providers/theme-provider.tsx`.
3.  Snippet para `components/theme-toggle.tsx`.
4.  Snippet para `app/layout.tsx` mostrando a integração.

```typescript
// 1. tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"], // Habilita dark mode via classe 'dark'
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

// 2. providers/theme-provider.tsx
'use client';

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

// 3. components/theme-toggle.tsx
'use client';

import * as React from "react";
import { MoonIcon, SunIcon, LaptopIcon } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ThemeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          <SunIcon className="mr-2 h-4 w-4" />
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          <MoonIcon className="mr-2 h-4 w-4" />
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          <LaptopIcon className="mr-2 h-4 w-4" />
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

// 4. app/layout.tsx (exemplo de integração)
import "./globals.css"; // Seus estilos globais
import { ThemeProvider } from "@/providers/theme-provider";
import { Inter } from "next/font/google"; // Exemplo de fonte

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```*

Você é um especialista em SEO técnico e Next.js, focado em otimização para motores de busca e social media sharing.

**Contexto:** O AgentePro Creator terá uma biblioteca de "Templates de Equipes de Agentes" (e.g., "Template de Equipe de Marketing de Conteúdo"). Cada template terá sua própria página e precisa de meta tags dinâmicas para SEO e Open Graph.

**Tarefa:** Crie uma função utilitária em Next.js (App Router) que gere meta tags (`<title>`, `<meta name="description">`, Open Graph e Twitter Cards) para uma página de template específico.

**Requisitos:**
*   **Função:** `generateTemplateMetadata(template: TemplateType)` que retorna um objeto `Metadata` do Next.js.
*   **Dados:** A função receberá um objeto `template` com `name`, `description`, `slug`, `image_url` (opcional).
*   **Meta Tags:**
    *   `title`: `[Nome do Template] | AgentePro Creator`
    *   `description`: `[Descrição do Template]` (truncar se muito longa)
    *   `og:title`, `og:description`, `og:image`, `og:url`
    *   `twitter:card`, `twitter:site`, `twitter:creator`, `twitter:title`, `twitter:description`, `twitter:image`
    *   Canonical URL: `https://agentecreator.com/templates/[slug]`
*   **Next.js App Router:** Utilize a API `generateMetadata` do Next.js.
*   **Tipagem:** Use TypeScript.

**Formato de Saída:** Um snippet de código TypeScript para um arquivo `app/templates/[slug]/page.tsx` mostrando como a função `generateMetadata` seria implementada, juntamente com a definição de `TemplateType`.

```typescript
// Exemplo: app/templates/[slug]/page.tsx
import { Metadata } from 'next';

// Assumindo que TemplateType é definido em algum lugar (e.g., types/index.ts)
type TemplateType = {
  id: string;
  name: string;
  description: string;
  slug: string;
  image_url?: string;
};

// Função mock para buscar dados do template (na vida real, buscaria do Supabase)
async function getTemplateBySlug(slug: string): Promise<TemplateType | null> {
  // Simula uma busca no banco de dados
  if (slug === 'marketing-content-team') {
    return {
      id: 'template-1',
      name: 'Equipe de Marketing de Conteúdo',
      description: 'Automatize a geração de ideias, rascunhos e otimização de SEO para seu blog com esta equipe de agentes inteligentes.',
      slug: 'marketing-content-team',
      image_url: 'https://agentecreator.com/og-images/marketing-content-team.png',
    };
  }
  return null;
}

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const template = await getTemplateBySlug(params.slug);

  if (!template) {
    return {
      title: 'Template Não Encontrado | AgentePro Creator',
      description: 'O template de equipe de agentes que você procura não existe.',
    };
  }

  const title = `${template.name} | AgentePro Creator`;
  const description = template.description.substring(0, 160); // Truncar para SEO
  const url = `https://agentecreator.com/templates/${template.slug}`;
  const imageUrl = template.image_url || 'https://agentecreator.com/og-images/default.png';

  return {
    title,
    description,
    alternates: {
      canonical: url,
    },
    openGraph: {
      title,
      description,
      url,
      siteName: 'AgentePro Creator',
      images: [
        {
          url: imageUrl,
          width: 1200,
          height: 630,
          alt: template.name,
        },
      ],
      locale: 'pt_BR',
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      site: '@AgenteCreator', // Seu handle do Twitter
      creator: '@AgenteCreator',
      title,
      description,
      images: [imageUrl],
    },
  };
}

export default async function TemplatePage({ params }: { params: { slug: string } }) {
  const template = await getTemplateBySlug(params.slug);

  if (!template) {
    return (
      <main className="flex min-h-screen flex-col items-center justify-center p-24">
        <h1 className="text-4xl font-bold">Template Não Encontrado</h1>
        <p className="text-lg mt-4">Parece que este template não existe ou foi removido.</p>
      </main>
    );
  }

  return (
    <main className="container mx-auto py-8">
      <h1 className="text-4xl font-bold">{template.name}</h1>
      <p className="mt-4 text-lg text-muted-foreground">{template.description}</p>
      {/* Renderizar detalhes do template aqui */}
    </main>
  );
}

Você é um ninja de dados estruturados e Schema.org, garantindo que o Google entenda cada detalhe do nosso produto.

**Contexto:** O AgentePro Creator é um SaaS e também ensina os usuários a construir fluxos de trabalho. Precisamos de dados estruturados para o Google exibir rich snippets e entender a natureza do nosso produto e dos nossos templates.

**Tarefa:** Crie dois blocos de JSON-LD (`<script type="application/ld+json">`):
1.  **`Product`:** Para a homepage do AgentePro Creator, descrevendo o SaaS.
2.  **`HowTo`:** Para as páginas de templates de agentes, explicando como usar o template ou como construir um fluxo similar.

**Requisitos para `Product` (Homepage):**
*   `@context`, `@type: Product`
*   `name`, `description`, `url`, `image`
*   `brand`, `offers` (com `priceCurrency`, `price`, `availability`, `url`)
*   `aggregateRating` (se houver avaliações)
*   `review` (se houver avaliações)

**Requisitos para `HowTo` (Páginas de Templates):**
*   `@context`, `@type: HowTo`
*   `name`, `description`, `image`, `totalTime` (estimativa de tempo para configurar/usar)
*   `step` (array de objetos `HowToStep`, cada um com `name`, `text`, `image` opcional)
*   `supply` (array de objetos `HowToSupply`, e.g., "Conta AgentePro Creator", "Credenciais OpenAI")
*   `tool` (array de objetos `HowToTool`, e.g., "Navegador Web")

**Formato de Saída:** Dois blocos de código JSON-LD completos, com dados de exemplo.

```json
// 1. JSON-LD para Product (Homepage)
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "AgentePro Creator: Plataforma de IA Multiagente Sem Código",
  "description": "Democratize a IA multiagente. Construa, orquestre e monitore equipes de agentes autônomos com uma interface visual drag-and-drop. Ideal para agências, consultorias e autônomos.",
  "url": "https://agentecreator.com/",
  "image": "https://agentecreator.com/og-images/agentecreator-homepage.png",
  "brand": {
    "@type": "Brand",
    "name": "AgentePro Creator"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "49.00",
    "itemCondition": "https://schema.org/NewCondition",
    "availability": "https://schema.org/InStock",
    "url": "https://agentecreator.com/pricing"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "120"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "João Silva"
      },
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5"
      },
      "reviewBody": "O AgentePro Creator revolucionou a forma como gerencio minhas campanhas de marketing. Incrível!"
    }
  ]
}

// 2. JSON-LD para HowTo (Página de Template de Equipe de Marketing de Conteúdo)
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Como Usar a Equipe de Marketing de Conteúdo do AgentePro Creator",
  "description": "Um guia passo a passo para configurar e executar a equipe de agentes de marketing de conteúdo para gerar ideias de blog e rascunhos otimizados para SEO.",
  "image": "https://agentecreator.com/og-images/marketing-content-team-howto.png",
  "totalTime": "PT30M",
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "Conta AgentePro Creator Ativa"
    },
    {
      "@type": "HowToSupply",
      "name": "Credenciais de API OpenAI (ou outro LLM)"
    }
  ],
  "tool": [
    {
      "@type": "HowToTool",
      "name": "Navegador Web"
    },
    {
      "@type": "HowToTool",
      "name": "Computador/Dispositivo Móvel"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "name": "Acessar o Template",
      "text": "Navegue até a seção 'Templates' no AgentePro Creator e selecione 'Equipe de Marketing de Conteúdo'."
    },
    {
      "@type": "HowToStep",
      "name": "Configurar Agentes",
      "text": "Personalize os prompts e ferramentas de cada agente (Pesquisador, Redator, Otimizador SEO) conforme suas necessidades.",
      "image": "https://agentecreator.com/howto-steps/configure-agents.png"
    },
    {
      "@type": "HowToStep",
      "name": "Definir Tarefa e Executar",
      "text": "Insira o tópico principal desejado (e.g., 'Os benefícios da IA multiagente para pequenas empresas') e clique em 'Executar Workflow'."
    },
    {
      "@type": "HowToStep",
      "name": "Revisar e Exportar",
      "text": "Monitore o progresso da equipe, revise os rascunhos gerados e exporte o conteúdo final para seu CMS ou ferramenta de publicação."
    }
  ]
}

Você é um guru de performance web, focado em Core Web Vitals, especialmente LCP e CLS, e otimização de imagens.

**Contexto:** O AgentePro Creator usará muitas imagens (logos, avatares de agentes, screenshots de workflows, etc.). Precisamos garantir que elas carreguem rapidamente e não causem layout shifts.

**Tarefa:** Crie um padrão de otimização de imagens para o Next.js (App Router) usando o componente `next/image` e uma estratégia de armazenamento/CDN.

**Requisitos:**
*   **`next/image`:** Utilize o componente `Image` do Next.js.
*   **Estratégia de Carregamento:**
    *   `priority` para o LCP element (e.g., logo principal).
    *   `loading="lazy"` como padrão para imagens abaixo do fold.
    *   `fill` ou `width`/`height` explícitos para evitar CLS.
    *   `sizes` para responsividade.
*   **Otimização de Formato:** Use formatos modernos como WebP e AVIF (nativos do Next.js Image Optimization ou via CDN).
*   **CDN/Armazenamento:** Considere Cloudinary ou Supabase Storage com um CDN integrado para servir as imagens.
*   **Configuração `next.config.js`:** Adicione as configurações necessárias para domínios de imagem externos.

**Formato de Saída:**
1.  Snippet de `next.config.js` com a configuração de imagens.
2.  Exemplos de uso do componente `Image` para diferentes cenários (logo, avatar, imagem de conteúdo).

```javascript
// 1. next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com', // Exemplo para Cloudinary ou CDN
        port: '',
        pathname: '/my-images/**',
      },
      {
        protocol: 'https',
        hostname: '**.supabase.co', // Para imagens do Supabase Storage
        port: '',
        pathname: '/storage/v1/object/public/**',
      },
      // Adicione outros domínios de imagem aqui
    ],
    formats: ['image/avif', 'image/webp'], // Prioriza formatos modernos
  },
};

module.exports = nextConfig;

// 2. Exemplos de uso do componente Image
import Image from 'next/image';

// Cenário 1: Logo principal (LCP element)
export function Header() {
  return (
    <header className="flex items-center justify-between p-4 bg-card">
      <Image
        src="/agentecreator-logo.svg" // Imagem local otimizada
        alt="AgentePro Creator Logo"
        width={180}
        height={40}
        priority // Carrega com alta prioridade para LCP
      />
      {/* ... */}
    </header>
  );
}

// Cenário 2: Avatar de usuário (tamanho fixo)
export function UserAvatar({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={48}
      height={48}
      className="rounded-full object-cover"
      loading="lazy" // Lazy loading para avatares fora da view inicial
    />
  );
}

// Cenário 3: Imagem de conteúdo (responsiva, preenchendo container)
export function ContentImage({ src, alt }: { src: string; alt: string }) {
  return (
    <div className="relative w-full h-64 mt-4">
      <Image
        src={src}
        alt={alt}
        fill // Preenche o container pai
        className="object-cover rounded-lg"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" // Define tamanhos para srcset
        loading="lazy"
      />
    </div>
  );
}
```*

Você é um especialista em performance e tipografia web, garantindo que as fontes carreguem sem CLS e com alta velocidade.

**Contexto:** O AgentePro Creator usará fontes customizadas para um visual coeso. Precisamos carregar essas fontes de forma otimizada para evitar layout shifts (CLS) e garantir o carregamento rápido.

**Tarefa:** Implemente a otimização de fontes usando o componente `next/font` do Next.js (App Router).

**Requisitos:**
*   **`next/font/google`:** Use para fontes do Google Fonts (e.g., Inter, Montserrat).
*   **`next/font/local`:** Use para fontes auto-hospedadas (se houver).
*   **Variáveis CSS:** Exponha as fontes como variáveis CSS para fácil uso no Tailwind CSS.
*   **Estratégia:** `display: swap` (padrão) para evitar bloqueio de renderização.
*   **Integração:** Mostre como aplicar as fontes globalmente no `layout.tsx` e como usá-las no Tailwind CSS.

**Formato de Saída:**
1.  Snippet de `app/layout.tsx` com a configuração das fontes.
2.  Snippet de `tailwind.config.ts` para usar as variáveis CSS.

```typescript
// 1. app/layout.tsx
import "./globals.css";
import { ThemeProvider } from "@/providers/theme-provider";
import { Inter, Montserrat } from "next/font/google"; // Exemplo de fontes Google

// Configuração da fonte Inter
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter", // Define uma variável CSS para a fonte
  display: 'swap', // Garante que o texto seja visível durante o carregamento
});

// Configuração da fonte Montserrat (exemplo, se precisar de uma segunda)
const montserrat = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  display: 'swap',
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${inter.variable} ${montserrat.variable} font-sans`}> {/* Aplica as variáveis */}
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// 2. tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ... outras configurações
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", "sans-serif"], // Fonte padrão
        heading: ["var(--font-montserrat)", "sans-serif"], // Fonte para títulos, se desejar
      },
      // ... outras extensões
    },
  },
  plugins: [require("tailwindcss-animate")],
};

// Exemplo de uso no CSS/Tailwind:
/*
  <h1 className="font-heading text-4xl">Título com Montserrat</h1>
  <p className="font-sans text-base">Parágrafo com Inter</p>
*/
```*

Você é um engenheiro de DevOps especializado em Vercel e Next.js, com foco em automação e deployments contínuos.

**Contexto:** O AgentePro Creator será deployado no Vercel. Precisamos de uma configuração robusta de CI/CD que inclua variáveis de ambiente, branches de preview e produção, e otimizações de build.

**Tarefa:** Descreva a configuração ideal de CI/CD para o AgentePro Creator no Vercel.

**Requisitos:**
*   **Variáveis de Ambiente:** Liste as variáveis de ambiente essenciais (Stripe, Supabase, LLM APIs) e como elas devem ser configuradas para ambientes de `development`, `preview` e `production`.
*   **Branches:**
    *   `main`: Deploy para produção.
    *   `develop`: Deploy para um ambiente de staging/preview.
    *   Feature branches: Deploy para ambientes de preview efêmeros.
*   **Build Command:** Comando de build padrão do Next.js.
*   **Install Command:** Comando de instalação de dependências.
*   **Framework Preset:** `Next.js`.
*   **Otimizações:** Mencione a importância de `Vercel Analytics`, `Vercel Speed Insights` e `Vercel Functions` (Edge/Serverless).

**Formato de Saída:** Um texto descritivo com exemplos de variáveis de ambiente e a lógica de branches, como se fosse um guia de configuração para um novo membro da equipe.

```text
**Guia de CI/CD do AgentePro Creator no Vercel**

Nosso pipeline de CI/CD no Vercel é configurado para garantir deployments rápidos, seguros e eficientes para o AgentePro Creator.

**1. Conexão do Repositório:**
Conecte o repositório Git (GitHub, GitLab, Bitbucket) do projeto ao Vercel. O Vercel detectará automaticamente que é um projeto Next.js.

**2. Variáveis de Ambiente (Environment Variables):**
É CRUCIAL configurar as variáveis de ambiente no dashboard do Vercel para cada ambiente:

*   **`development` (local):** Usado para `next dev`.
*   **`preview` (branches de feature, `develop`):** Usado para deployments de preview.
*   **`production` (`main` branch):** Usado para o ambiente de produção.

**Variáveis Essenciais:**

| Variável                     | Descrição                                                              | Ambientes                               |
| :--------------------------- | :--------------------------------------------------------------------- | :-------------------------------------- |
| `NEXT_PUBLIC_SUPABASE_URL`   | URL da sua instância Supabase (pública)                                | `development`, `preview`, `production`  |
| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Chave anon da sua instância Supabase (pública)                         | `development`, `preview`, `production`  |
| `SUPABASE_SERVICE_ROLE_KEY`  | Chave de serviço Supabase (SEMPRE secreta, apenas para backend/Edge Functions) | `development`, `preview`, `production` (API Routes/Edge Functions) |
| `STRIPE_SECRET_KEY`          | Chave secreta da API do Stripe                                         | `development`, `preview`, `production` (API Routes/Edge Functions) |
| `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` | Chave publicável do Stripe                                             | `development`, `preview`, `production`  |
| `STRIPE_WEBHOOK_SECRET`      | Chave secreta do webhook do Stripe                                     | `development`, `preview`, `production` (API Routes/Edge Functions) |
| `OPENAI_API_KEY`             | Chave da API OpenAI (ou de outro LLM)                                  | `development`, `preview`, `production` (API Routes/Edge Functions/LangCrew Service) |
| `LANGCREW_API_URL`           | URL do serviço LangCrew (se for separado)                              | `development`, `preview`, `production` (API Routes/Edge Functions) |
| `NEXT_PUBLIC_APP_URL`        | URL pública da aplicação (e.g., `https://agentecreator.com`)           | `development`, `preview`, `production`  |

**Importante:** Nunca exponha chaves secretas no frontend. Use `NEXT_PUBLIC_` apenas para variáveis que podem ser expostas ao browser.

**3. Estratégia de Branches e Deployments:**

*   **`main` branch:** Qualquer push ou merge para `main` aciona um deployment para o ambiente de **produção**. Este é o ambiente que os usuários finais acessam.
*   **`develop` branch:** Pushes ou merges para `develop` acionam um deployment para um ambiente de **staging/preview** persistente (e.g., `agentecreator-staging.vercel.app`). Ideal para testes de integração antes de ir para produção.
*   **Feature Branches (e.g., `feat/nova-feature-x`, `bugfix/correcao-y`):** Cada branch de feature aciona um deployment de **preview efêmero**. Isso gera uma URL única (e.g., `agentecreator-git-nova-feature-x-seu-usuario.vercel.app`) para que a equipe possa revisar a funcionalidade em isolamento. Comentários do Vercel Git são automaticamente adicionados aos Pull Requests.

**4. Comandos de Build:**

*   **Build Command:** `next build` (padrão para Next.js)
*   **Install Command:** `npm install` ou `pnpm install` ou `yarn install` (dependendo do seu gerenciador de pacotes)

**5. Otimizações e Recursos Vercel:**

*   **Vercel Analytics & Speed Insights:** Ative para monitorar o desempenho e as Core Web Vitals da sua aplicação em tempo real.
*   **Vercel Edge Functions:** Nossas API Routes e webhooks do Stripe rodam como Edge Functions, garantindo baixa latência e escalabilidade global.
*   **Image Optimization:** O Vercel otimiza automaticamente as imagens servidas pelo `next/image`.
*   **Automatic SSL:** Certificados SSL são provisionados e renovados automaticamente.

Ao seguir estas diretrizes, garantimos um fluxo de trabalho de desenvolvimento e deployment suave e confiável.
```_

Você é um especialista em observabilidade e monitoramento de aplicações, garantindo que nenhum erro passe despercebido.

**Contexto:** O AgentePro Creator é uma aplicação complexa. Precisamos de um sistema robusto para monitorar erros (frontend e backend/Edge Functions) e logs para depuração rápida e proativa.

**Tarefa:** Descreva a estratégia de monitoramento de erros e logs usando Sentry (para erros) e Logtail (para logs de Edge Functions/Serverless).

**Requisitos:**
*   **Sentry:**
    *   Configuração para Next.js (App Router) para capturar erros tanto no cliente quanto no servidor/Edge Functions.
    *   Variáveis de ambiente (`SENTRY_DSN`, `SENTRY_AUTH_TOKEN`).
    *   Source maps para depuração de erros em produção.
*   **Logtail (ou similar como Logflare/Datadog):**
    *   Integração com Vercel para coletar logs de Edge Functions e API Routes.
    *   Capacidade de pesquisar, filtrar e alertar sobre logs específicos (e.g., erros de LLM, falhas de webhook).
*   **Alertas:** Mencione a importância de configurar alertas para erros críticos (e.g., via Slack, e-mail).

**Formato de Saída:** Um guia conciso sobre como configurar e usar Sentry e Logtail no contexto do AgentePro Creator.

```text
**Estratégia de Monitoramento de Erros e Logs para AgentePro Creator**

Para garantir a estabilidade e a capacidade de depuração rápida do AgentePro Creator, implementaremos uma estratégia de observabilidade com Sentry para erros e Logtail para logs.

**1. Monitoramento de Erros com Sentry:**

Sentry é nossa ferramenta de escolha para capturar, agregar e notificar sobre erros em tempo real, tanto no frontend quanto no backend (Next.js API Routes/Edge Functions).

*   **Instalação e Configuração:**
    *   Instale o SDK do Sentry para Next.js: `npm install @sentry/nextjs`.
    *   Configure os arquivos `sentry.client.config.ts`, `sentry.server.config.ts` e `sentry.edge.config.ts` conforme a documentação do Sentry para Next.js App Router. Isso garante que os erros sejam capturados em todos os ambientes de execução.
    *   Adicione o plugin `@sentry/webpack-plugin` ao `next.config.js` para upload automático de source maps, permitindo depurar erros em produção com o código original.

*   **Variáveis de Ambiente:**
    *   `SENTRY_DSN`: O DSN do seu projeto Sentry.
    *   `SENTRY_AUTH_TOKEN`: Token de autenticação para upload de source maps (configure no Vercel como variável de build).
    *   `SENTRY_ORG`, `SENTRY_PROJECT`: Nome da sua organização e projeto no Sentry.
    *   `NODE_ENV`: Para diferenciar ambientes (production, development).

*   **Uso no Código:**
    *   Use `Sentry.captureException(error)` para erros que você captura explicitamente.
    *   O SDK do Next.js já instrumenta automaticamente a maioria dos erros não tratados.

*   **Alertas:**
    *   Configure alertas no dashboard do Sentry para notificar a equipe via Slack, e-mail ou PagerDuty sobre novos erros, erros regressivos ou picos de erros.

**2. Monitoramento de Logs com Logtail (Better Stack Logs):**

Logtail (parte do Better Stack) oferece uma solução centralizada para coletar e analisar logs de nossas Edge Functions e API Routes no Vercel.

*   **Integração Vercel:**
    *   Instale a integração do Logtail para Vercel diretamente do Vercel Marketplace. Isso encaminhará automaticamente todos os logs de suas deployments para o Logtail.
    *   Alternativamente, configure o Logtail como um "Log Drain" no Vercel.

*   **Estrutura de Logs:**
    *   Ao fazer `console.log`, `console.error`, etc., em suas Edge Functions, esses logs serão automaticamente enviados para o Logtail.
    *   Adote um formato de log estruturado (e.g., JSON) sempre que possível para facilitar a pesquisa e análise. Exemplo: `console.log(JSON.stringify({ event: 'agent_run_completed', teamId: '...', duration: '...' }));`

*   **Funcionalidades Essenciais:**
    *   **Pesquisa e Filtragem:** Utilize a poderosa interface de pesquisa do Logtail para encontrar logs específicos por `teamId`, `userId`, `LLM_provider`, `status` etc.
    *   **Alertas:** Crie alertas baseados em padrões de log (e.g., "se o log contiver 'LLM_ERROR' mais de 5 vezes em 5 minutos, envie um Slack").
    *   **Dashboards:** Crie dashboards personalizados para visualizar métricas de logs, como taxa de sucesso de execuções de agentes, tempo médio de resposta da API do LangCrew, etc.

Ao combinar Sentry e Logtail, teremos uma visão completa da saúde da nossa aplicação, desde erros de UI até problemas de backend e performance de Edge Functions, permitindo uma resposta rápida a qualquer incidente.

Você é o "Zé Mané", um engenheiro de software autodidata e irreverente, mas com conhecimento técnico profundo em desenvolvimento web moderno, SEO avançado, performance e IA. Sua missão é guiar a construção do "AgentePro Creator", um SaaS avançado para IA multiagente.

**Contexto Geral do Projeto:**
- **Nome:** AgentePro Creator
- **Problema:** Democratiza a IA multiagente, permitindo que qualquer um construa e gerencie equipes de agentes autônomos sem código complexo.
- **Público-alvo:** Pequenas agências de marketing, consultorias de processos, advogados autônomos e empresas que buscam automatizar com IA multiagente sem expertise técnica aprofundada.
- **Estilo de Design:** Minimalista dark.
- **Complexidade:** Avançado.

**Stack Tecnológica Definida:**
- **Frontend:** Next.js 14+ (App Router), React 19, Tailwind CSS v4, shadcn/ui, Radix UI, `@xyflow/react-flow` (para editor visual).
- **Backend/DB:** Supabase (Auth, Database PostgreSQL, Storage, Realtime), Vercel Edge Functions (para APIs e webhooks).
- **Pagamentos:** Stripe.
- **Orquestração IA:** LangCrew (CrewAI + LangGraph) - como um serviço externo acessado via API.
- **Deploy:** Vercel.
- **Monitoramento:** Sentry (erros), Logtail (logs).
- **SEO:** Core Web Vitals, Schema.org, meta tags dinâmicas.

**Tarefa Principal:**
Gere um plano de desenvolvimento detalhado, incluindo:
1.  **Esquema de Banco de Dados Supabase (SQL):** Completo para Usuários, Organizações, Projetos, Agentes, Equipes (Workflows), Prompts, Execuções e Templates. Inclua RLS e índices.
2.  **Estrutura de Pastas Next.js (App Router):** Sugira uma estrutura lógica para `app/`, `components/`, `lib/`, `providers/`, `types/`, `public/`.
3.  **Componentes Frontend Essenciais (TypeScript/TSX):**
    *   `AgentCard.tsx`: Exibição de um agente individual.
    *   `AgentWorkflowEditor.tsx`: O editor visual drag-and-drop de fluxos de agentes (usando `@xyflow/react-flow`, shadcn/ui).
    *   `ThemeToggle.tsx`: Para alternar entre temas dark/light/system.
    *   `DashboardLayout.tsx`: Layout principal para páginas autenticadas.
4.  **Endpoints de API (Next.js API Routes/Edge Functions - TypeScript):**
    *   CRUD para Agentes e Equipes de Agentes.
    *   Webhook handler para Stripe (para gerenciar assinaturas).
    *   Endpoint para iniciar uma execução de workflow no LangCrew.
5.  **Otimizações de Performance & SEO (Snippets):**
    *   Configuração `next.config.js` para otimização de imagens (Next/Image, Supabase Storage) e fontes (Next/Font).
    *   Exemplo de `generateMetadata` para páginas de templates.
    *   Exemplo de JSON-LD (`Product` para homepage, `HowTo` para templates).
6.  **Estratégia de CI/CD (Texto):** Detalhes sobre Vercel, branches, variáveis de ambiente, Sentry e Logtail.

**Restrições e Requisitos Adicionais:**
*   **Linguagem:** Português brasileiro para descrições, TypeScript/SQL/JSON para código.
*   **Formato:** Use blocos de código Markdown para todo o código.
*   **Detalhe:** Cada seção deve ser suficientemente detalhada para um desenvolvedor experiente iniciar o trabalho.
*   **Design System:** Priorize `shadcn/ui` e `Tailwind CSS` para o frontend.
*   **Segurança:** Mencione RLS para Supabase e verificação de assinatura para Stripe webhooks.
*   **Performance:** Foque em Core Web Vitals (LCP, CLS, INP) em todas as recomendações de frontend.
*   **Não gere o código completo para o LangCrew Service em si**, apenas a integração API com ele.
*   **Não gere o CSS global**, apenas classes Tailwind e variáveis CSS.

**Formato de Saída:** Um documento extenso e bem estruturado, seguindo as categorias acima, com explicações e exemplos de código.