feat: link tickets in comments and align admin sidebars

convex/tickets.ts

@@ -53,6 +53,100 @@ function plainTextLength(html: string): number {
   }
 }
 
+function escapeHtml(input: string): string {
+  return input
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+export function buildAssigneeChangeComment(
+  reason: string,
+  context: { previousName: string; nextName: string },
+): string {
+  const normalized = reason.replace(/\r\n/g, "\n").trim();
+  const lines = normalized
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+  const previous = escapeHtml(context.previousName || "Não atribuído");
+  const next = escapeHtml(context.nextName || "Não atribuído");
+  const reasonHtml = lines.length
+    ? lines.map((line) => `<p>${escapeHtml(line)}</p>`).join("")
+    : `<p>—</p>`;
+  return `<p><strong>Responsável atualizado:</strong> ${previous} → ${next}</p><p><strong>Motivo da troca:</strong></p>${reasonHtml}`;
+}
+
+function truncateSubject(subject: string) {
+  if (subject.length <= 60) return subject
+  return `${subject.slice(0, 57)}…`
+}
+
+function buildTicketMentionAnchor(ticket: Doc<"tickets">): string {
+  const reference = ticket.reference
+  const subject = escapeHtml(ticket.subject ?? "")
+  const truncated = truncateSubject(subject)
+  const status = (ticket.status ?? "PENDING").toString().toUpperCase()
+  const priority = (ticket.priority ?? "MEDIUM").toString().toUpperCase()
+  return `<a data-ticket-mention="true" data-ticket-id="${String(ticket._id)}" data-ticket-reference="${reference}" data-ticket-status="${status}" data-ticket-priority="${priority}" data-ticket-subject="${subject}" href="/tickets/${String(ticket._id)}" class="ticket-mention" title="Chamado #${reference}${subject ? ` • ${subject}` : ""}"><span class="ticket-mention-dot"></span><span class="ticket-mention-ref">#${reference}</span><span class="ticket-mention-sep">•</span><span class="ticket-mention-subject">${truncated}</span></a>`
+}
+
+function canMentionTicket(viewerRole: string, viewerId: Id<"users">, ticket: Doc<"tickets">) {
+  if (viewerRole === "ADMIN" || viewerRole === "AGENT") return true
+  if (viewerRole === "COLLABORATOR") {
+    return String(ticket.requesterId) === String(viewerId)
+  }
+  if (viewerRole === "MANAGER") {
+    // Gestores compartilham contexto interno; permitem apenas tickets da mesma empresa do solicitante
+    return String(ticket.requesterId) === String(viewerId)
+  }
+  return false
+}
+
+async function normalizeTicketMentions(
+  ctx: MutationCtx,
+  html: string,
+  viewer: { user: Doc<"users">; role: string },
+  tenantId: string,
+): Promise<string> {
+  if (!html || html.indexOf("data-ticket-mention") === -1) {
+    return html
+  }
+
+  const mentionPattern = /<a\b[^>]*data-ticket-mention="true"[^>]*>[\s\S]*?<\/a>/gi
+  const matches = Array.from(html.matchAll(mentionPattern))
+  if (!matches.length) {
+    return html
+  }
+
+  let output = html
+
+  for (const match of matches) {
+    const full = match[0]
+    const idMatch = /data-ticket-id="([^"]+)"/i.exec(full)
+    const ticketIdRaw = idMatch?.[1]
+    let replacement = ""
+
+    if (ticketIdRaw) {
+      const ticket = await ctx.db.get(ticketIdRaw as Id<"tickets">)
+      if (ticket && ticket.tenantId === tenantId && canMentionTicket(viewer.role, viewer.user._id, ticket)) {
+        replacement = buildTicketMentionAnchor(ticket)
+      } else {
+        const inner = match[0].replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim()
+        replacement = escapeHtml(inner || `#${ticketIdRaw}`)
+      }
+    } else {
+      replacement = escapeHtml(full.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim())
+    }
+
+    output = output.replace(full, replacement)
+  }
+
+  return output
+}
+
 function normalizeStatus(status: string | null | undefined): TicketStatusNormalized {
   if (!status) return "PENDING";
   const normalized = LEGACY_STATUS_MAP[status.toUpperCase()];
@@ -1170,11 +1264,6 @@ export const addComment = mutation({
       }
     }
 
-    const bodyPlainLen = plainTextLength(args.body)
-    if (bodyPlainLen > MAX_COMMENT_CHARS) {
-      throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
-    }
-
     const authorSnapshot: CommentAuthorSnapshot = {
       name: author.name,
       email: author.email,
@@ -1182,12 +1271,18 @@ export const addComment = mutation({
       teams: author.teams ?? undefined,
     };
 
+    const normalizedBody = await normalizeTicketMentions(ctx, args.body, { user: author, role: normalizedRole }, ticketDoc.tenantId)
+    const bodyPlainLen = plainTextLength(normalizedBody)
+    if (bodyPlainLen > MAX_COMMENT_CHARS) {
+      throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
+    }
+
     const now = Date.now();
     const id = await ctx.db.insert("ticketComments", {
       ticketId: args.ticketId,
       authorId: args.authorId,
       visibility: requestedVisibility,
-      body: args.body,
+      body: normalizedBody,
       authorSnapshot,
       attachments,
       createdAt: now,
@@ -1240,14 +1335,15 @@ export const updateComment = mutation({
       await requireTicketStaff(ctx, actorId, ticketDoc)
     }
 
-    const bodyPlainLen = plainTextLength(body)
+    const normalizedBody = await normalizeTicketMentions(ctx, body, { user: actor, role: normalizedRole }, ticketDoc.tenantId)
+    const bodyPlainLen = plainTextLength(normalizedBody)
     if (bodyPlainLen > MAX_COMMENT_CHARS) {
       throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
     }
 
     const now = Date.now();
     await ctx.db.patch(commentId, {
-      body,
+      body: normalizedBody,
       updatedAt: now,
     });
 
@@ -1356,14 +1452,20 @@ export const updateStatus = mutation({
 });
 
 export const changeAssignee = mutation({
-  args: { ticketId: v.id("tickets"), assigneeId: v.id("users"), actorId: v.id("users") },
+  args: {
-  handler: async (ctx, { ticketId, assigneeId, actorId }) => {
+    ticketId: v.id("tickets"),
+    assigneeId: v.id("users"),
+    actorId: v.id("users"),
+    reason: v.string(),
+  },
+  handler: async (ctx, { ticketId, assigneeId, actorId, reason }) => {
     const ticket = await ctx.db.get(ticketId)
     if (!ticket) {
       throw new ConvexError("Ticket não encontrado")
     }
     const ticketDoc = ticket as Doc<"tickets">
     const viewer = await requireTicketStaff(ctx, actorId, ticketDoc)
+    const viewerUser = viewer.user
     const isAdmin = viewer.role === "ADMIN"
     const assignee = (await ctx.db.get(assigneeId)) as Doc<"users"> | null
     if (!assignee || assignee.tenantId !== ticketDoc.tenantId) {
@@ -1381,6 +1483,26 @@ export const changeAssignee = mutation({
       throw new ConvexError("Somente o responsável atual pode reatribuir este chamado")
     }
 
+    const normalizedReason = reason.replace(/\r\n/g, "\n").trim()
+    if (normalizedReason.length < 5) {
+      throw new ConvexError("Informe um motivo para registrar a troca de responsável")
+    }
+    if (normalizedReason.length > 1000) {
+      throw new ConvexError("Motivo muito longo (máx. 1000 caracteres)")
+    }
+    const previousAssigneeName =
+      ((ticketDoc.assigneeSnapshot as { name?: string } | null)?.name as string | undefined) ??
+      "Não atribuído"
+    const nextAssigneeName = assignee.name ?? assignee.email ?? "Responsável"
+    const commentBody = buildAssigneeChangeComment(normalizedReason, {
+      previousName: previousAssigneeName,
+      nextName: nextAssigneeName,
+    })
+    const commentPlainLength = plainTextLength(commentBody)
+    if (commentPlainLength > MAX_COMMENT_CHARS) {
+      throw new ConvexError(`Comentário muito longo (máx. ${MAX_COMMENT_CHARS} caracteres)`)
+    }
+
     const now = Date.now();
     const assigneeSnapshot = {
       name: assignee.name,
@@ -1392,9 +1514,39 @@ export const changeAssignee = mutation({
     await ctx.db.insert("ticketEvents", {
       ticketId,
       type: "ASSIGNEE_CHANGED",
-      payload: { assigneeId, assigneeName: assignee.name, actorId },
+      payload: {
+        assigneeId,
+        assigneeName: assignee.name,
+        actorId,
+        previousAssigneeId: currentAssigneeId,
+        previousAssigneeName,
+        reason: normalizedReason,
+      },
       createdAt: now,
     });
+
+    const authorSnapshot: CommentAuthorSnapshot = {
+      name: viewerUser.name,
+      email: viewerUser.email,
+      avatarUrl: viewerUser.avatarUrl ?? undefined,
+      teams: viewerUser.teams ?? undefined,
+    }
+    await ctx.db.insert("ticketComments", {
+      ticketId,
+      authorId: actorId,
+      visibility: "INTERNAL",
+      body: commentBody,
+      authorSnapshot,
+      attachments: [],
+      createdAt: now,
+      updatedAt: now,
+    })
+    await ctx.db.insert("ticketEvents", {
+      ticketId,
+      type: "COMMENT_ADDED",
+      payload: { authorId: actorId, authorName: viewerUser.name, authorAvatar: viewerUser.avatarUrl },
+      createdAt: now,
+    })
   },
 });
 

docs/propostas/melhoria-plataforma.md

@@ -0,0 +1,53 @@
+# Propostas de Evolução da Plataforma de Chamados
+
+## 1. Melhorias de Curto Prazo (baixo esforço)
+
+- **Filtro unificado em todas as listas**  
+  Criar um componente padrão com busca, chips de filtros ativos, botão de limpar e layout responsivo. Isso remove duplicidade nas páginas de Tickets, Admin ▸ Usuários, Empresas e melhora coerência visual.
+
+- **Menções internas (@ticket e @usuário)**  
+  Expandir o autocomplete recém-adicionado para permitir citar usuários internos relevantes (solicitantes ou responsáveis frequentes). Facilita handoffs e histórico contextual.
+
+- **Barra de ações em massa consistente**  
+  Padronizar cabeçalhos de tabelas (seleção em massa, contador, botões como “Excluir”, “Exportar”) com feedback visual claro (toasts + badges). Aplica-se a Usuários, Convites, Empresas etc.
+
+- **Cards acionáveis no Dashboard**  
+  Introduzir métricas com links para listas pré-filtradas (ex.: “6 tickets aguardando resposta”, “3 chamados com SLA a vencer hoje”) para navegação mais rápida.
+
+- **Templates de filtro salvos**  
+  Permitir que agentes salvem combinações frequentes (ex.: “Meus tickets urgentes”) e exibí-las como botões rápidos acima da tabela.
+
+- **Uso do novo recurso de menção para relacionamentos**  
+  Mostrar, no cabeçalho do ticket, os chamados relacionados via menção com contagem e navegação rápida.
+
+- **Portal do cliente com resumo inteligente**  
+  Para solicitantes, exibir timeline simplificada e botão “Abrir chamado relacionado” reutilizando o autocomplete, mas limitado aos chamados próprios.
+
+## 2. Projetos de Médio Prazo
+
+- **Repaginação dos filtros avançados**  
+  Adotar um layout split (filtros à esquerda, resultados à direita), com árvore de categorias, sliders de data e componentes consistentes. Incluir colapsáveis para telas pequenas.
+
+- **Automação simples no painel Admin**  
+  Novo módulo “Automação” para regras básicas (ex.: “Se SLA crítico + sem responsável → notificar gestor e mover para fila X”). Iniciar com condições pré-definidas para reduzir esforço manual.
+
+- **Painel de chamados linkados**  
+  No detalhe do ticket, exibir seção “Chamados relacionados” com preview, status e atalhos, alimentada automaticamente pelas menções internas.
+
+## 3. Iniciativas de Maior Impacto
+
+- **Modo de trabalho focado para agentes**  
+  Modo “foco” com navegação reduzida, atalhos (“Próximo ticket da minha fila”), indicadores de tempo e layout em painel único para reduzir alternância de contexto.
+
+- **Integração com calendários externos**  
+  Para tickets com datas de acompanhamento ou SLAs agendados, permitir agendar eventos no Google/Microsoft Calendar diretamente da plataforma.
+
+- **Construtor de relatórios personalizados**  
+  Ferramenta drag-and-drop que reutiliza métricas já disponíveis, permitindo salvar e compartilhar dashboards internos (ex.: equipe, gestor).
+
+## Observações Gerais
+
+- As propostas priorizam reutilizar componentes já existentes (RichTextEditor, API de menções) e alinhar elementos de UI (filtros, tabelas, sidebars).
+- As iniciativas estão ordenadas do mais simples ao mais complexo, facilitando entregas incrementais.
+- Os itens de médio e longo prazo podem ser fatiados em MVPs para garantir feedback rápido dos usuários internos.
+

next.config.ts

@@ -1,3 +1,7 @@
-const nextConfig = {}
+const nextConfig = {
+  experimental: {
+    turbopackFileSystemCacheForDev: true,
+  },
+}
 
 export default nextConfig

package.json

@@ -45,6 +45,7 @@
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-table": "^8.21.3",
     "@tiptap/extension-link": "^3.6.5",
+    "@tiptap/extension-mention": "^3.6.5",
     "@tiptap/extension-placeholder": "^3.6.5",
     "@tiptap/react": "^3.6.5",
     "@tiptap/starter-kit": "^3.6.5",
@@ -67,6 +68,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "three": "^0.180.0",
+    "tippy.js": "^6.3.7",
     "unicornstudio-react": "^1.4.31",
     "vaul": "^1.1.2",
     "zod": "^4.1.9"

pnpm-lock.yaml

@@ -89,6 +89,9 @@ importers:
       '@tiptap/extension-link':
         specifier: ^3.6.5
         version: 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
+      '@tiptap/extension-mention':
+        specifier: ^3.6.5
+        version: 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)(@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))
       '@tiptap/extension-placeholder':
         specifier: ^3.6.5
         version: 3.6.5(@tiptap/extensions@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))
@@ -155,6 +158,9 @@ importers:
       three:
         specifier: ^0.180.0
         version: 0.180.0
+      tippy.js:
+        specifier: ^6.3.7
+        version: 6.3.7
       unicornstudio-react:
         specifier: ^1.4.31
         version: 1.4.31(next@16.0.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1143,6 +1149,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
   '@prisma/client@6.16.3':
     resolution: {integrity: sha512-JfNfAtXG+/lIopsvoZlZiH2k5yNx87mcTS4t9/S5oufM1nKdXYxOvpDC1XoTCFBa5cQh7uXnbMPsmZrwZY80xw==}
     engines: {node: '>=18.18'}
@@ -2247,6 +2256,13 @@ packages:
       '@tiptap/core': ^3.6.5
       '@tiptap/pm': ^3.6.5
 
+  '@tiptap/extension-mention@3.6.5':
+    resolution: {integrity: sha512-ACElkBvemEJGm8gVYI4QKjf6tfNj3m5dC9MkZL4rwZo4CAwjiNQ8oFhj1x7sPO1OVlnjt+FhnItBix5ztTF8Ng==}
+    peerDependencies:
+      '@tiptap/core': ^3.6.5
+      '@tiptap/pm': ^3.6.5
+      '@tiptap/suggestion': ^3.6.5
+
   '@tiptap/extension-ordered-list@3.6.5':
     resolution: {integrity: sha512-RiBl0Dkw8QtzS7OqUGm84BOyemw/N+hf8DYWsIqVysMRQAGBGhuklbw+DGpCL0nMHW4lh7WtvfKcb0yxLmhbbA==}
     peerDependencies:
@@ -2299,6 +2315,12 @@ packages:
   '@tiptap/starter-kit@3.6.5':
     resolution: {integrity: sha512-LNAJQstB/VazmMlRbUyu3rCNVQ9af25Ywkn3Uyuwt3Ks9ZlliIm/x/zertdXTY2adoig+b36zT5Xcx1O4IdJ3A==}
 
+  '@tiptap/suggestion@3.7.2':
+    resolution: {integrity: sha512-CYmIMeLqeGBotl7+4TrnGux/ov9IJoWTUQN/JcHp0aOoN3z8c/dQ6cziXXknr51jGHSdVYMWEyamLDZfcaGC1w==}
+    peerDependencies:
+      '@tiptap/core': ^3.7.2
+      '@tiptap/pm': ^3.7.2
+
   '@tweenjs/tween.js@23.1.3':
     resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
@@ -4676,6 +4698,9 @@ packages:
     resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
     engines: {node: '>=14.0.0'}
 
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
   tldts-core@7.0.17:
     resolution: {integrity: sha512-DieYoGrP78PWKsrXr8MZwtQ7GLCUeLxihtjC1jZsW1DnvSMdKPitJSe8OSYDM2u5H6g3kWJZpePqkp43TfLh0g==}
 
@@ -5828,6 +5853,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@popperjs/core@2.11.8': {}
+
   '@prisma/client@6.16.3(prisma@6.16.3(typescript@5.9.3))(typescript@5.9.3)':
     optionalDependencies:
       prisma: 6.16.3(typescript@5.9.3)
@@ -6985,6 +7012,12 @@ snapshots:
       '@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
       '@tiptap/pm': 3.6.5
 
+  '@tiptap/extension-mention@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)(@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))':
+    dependencies:
+      '@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
+      '@tiptap/pm': 3.6.5
+      '@tiptap/suggestion': 3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
+
   '@tiptap/extension-ordered-list@3.6.5(@tiptap/extension-list@3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5))':
     dependencies:
       '@tiptap/extension-list': 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
@@ -7079,6 +7112,11 @@ snapshots:
       '@tiptap/extensions': 3.6.5(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)
       '@tiptap/pm': 3.6.5
 
+  '@tiptap/suggestion@3.7.2(@tiptap/core@3.6.5(@tiptap/pm@3.6.5))(@tiptap/pm@3.6.5)':
+    dependencies:
+      '@tiptap/core': 3.6.5(@tiptap/pm@3.6.5)
+      '@tiptap/pm': 3.6.5
+
   '@tweenjs/tween.js@23.1.3': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -9842,6 +9880,10 @@ snapshots:
 
   tinyrainbow@3.0.3: {}
 
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   tldts-core@7.0.17: {}
 
   tldts@7.0.17:

src/app/api/tickets/mentions/route.ts

@@ -0,0 +1,96 @@
+import { NextResponse } from "next/server"
+
+import { assertAuthenticatedSession } from "@/lib/auth-server"
+import { DEFAULT_TENANT_ID } from "@/lib/constants"
+import { prisma } from "@/lib/prisma"
+
+export const runtime = "nodejs"
+
+const MAX_RESULTS = 10
+const MAX_SCAN = 60
+
+function normalizeRole(role?: string | null) {
+  return (role ?? "").toLowerCase()
+}
+
+export async function GET(request: Request) {
+  const session = await assertAuthenticatedSession()
+  if (!session) {
+    return NextResponse.json({ items: [] }, { status: 401 })
+  }
+
+  const normalizedRole = normalizeRole(session.user.role)
+  const isAgentOrAdmin = normalizedRole === "admin" || normalizedRole === "agent"
+  const canLinkOwnTickets = normalizedRole === "collaborator"
+
+  if (!isAgentOrAdmin && !canLinkOwnTickets) {
+    return NextResponse.json({ items: [] }, { status: 403 })
+  }
+
+  const tenantId = session.user.tenantId ?? DEFAULT_TENANT_ID
+  const url = new URL(request.url)
+  const rawQuery = url.searchParams.get("q") ?? ""
+  const query = rawQuery.trim()
+
+  const whereBase: {
+    tenantId: string
+    requesterId?: string
+  } = { tenantId }
+
+  if (!isAgentOrAdmin) {
+    whereBase.requesterId = session.user.id
+  }
+
+  const numericQuery = /^\d+$/.test(query)
+
+  const take = numericQuery ? MAX_RESULTS : MAX_SCAN
+
+  const tickets = await prisma.ticket.findMany({
+    where: whereBase,
+    include: {
+      assignee: { select: { name: true } },
+      requester: { select: { name: true } },
+      company: { select: { name: true } },
+    },
+    orderBy: { updatedAt: "desc" },
+    take,
+  })
+
+  const lowered = query.toLowerCase()
+
+  const filtered = tickets
+    .filter((ticket) => {
+      if (!query) return true
+      const referenceMatch = String(ticket.reference).includes(query)
+      if (referenceMatch) return true
+      const subject = ticket.subject ?? ""
+      if (subject.toLowerCase().includes(lowered)) return true
+      const requesterName = ticket.requester?.name ?? ""
+      if (requesterName.toLowerCase().includes(lowered)) return true
+      const companyName = ticket.company?.name ?? ""
+      if (companyName.toLowerCase().includes(lowered)) return true
+      return false
+    })
+    .slice(0, MAX_RESULTS)
+
+  const basePath = isAgentOrAdmin ? "/tickets" : "/portal/tickets"
+
+  const items = filtered.map((ticket) => {
+    const subject = ticket.subject ?? ""
+    return {
+      id: ticket.id,
+      reference: ticket.reference,
+      subject,
+      status: ticket.status,
+      priority: ticket.priority,
+      requesterName: ticket.requester?.name ?? null,
+      assigneeName: ticket.assignee?.name ?? null,
+      companyName: ticket.company?.name ?? null,
+      url: `${basePath}/${ticket.id}`,
+      updatedAt: ticket.updatedAt.toISOString(),
+    }
+  })
+
+  return NextResponse.json({ items })
+}
+

src/app/globals.css

@@ -160,6 +160,34 @@
   }
   .rich-text p { @apply my-2; }
   .rich-text a { @apply text-neutral-900 underline; }
+  .rich-text a[data-ticket-mention="true"],
+  .rich-text .ProseMirror a[data-ticket-mention="true"] {
+    @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 no-underline transition hover:bg-slate-200;
+  }
+  .rich-text a[data-ticket-mention="true"] .ticket-mention-dot {
+    @apply inline-flex size-2 rounded-full bg-slate-400;
+  }
+  .rich-text a[data-ticket-mention="true"] .ticket-mention-ref {
+    @apply text-neutral-900;
+  }
+  .rich-text a[data-ticket-mention="true"] .ticket-mention-sep {
+    @apply text-neutral-400;
+  }
+  .rich-text a[data-ticket-mention="true"] .ticket-mention-subject {
+    @apply max-w-[220px] truncate text-neutral-700;
+  }
+  .rich-text a[data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot {
+    @apply bg-amber-400;
+  }
+  .rich-text a[data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
+    @apply bg-sky-500;
+  }
+  .rich-text a[data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot {
+    @apply bg-violet-500;
+  }
+  .rich-text a[data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot {
+    @apply bg-emerald-500;
+  }
   .rich-text ul { @apply my-2 list-disc ps-5; }
   .rich-text ol { @apply my-2 list-decimal ps-5; }
   .rich-text li { @apply my-1; }

src/components/admin/admin-users-manager.tsx

@@ -20,6 +20,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
 import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useQuery } from "convex/react"
@@ -356,6 +364,74 @@ export function AdminUsersManager({ initialUsers, initialInvites, roleOptions, d
     })
   }, [combinedBaseUsers, usersSearch, usersCompanyFilter])
 
+  const [teamPageSize, setTeamPageSize] = useState<number>(10)
+  const [teamPageIndex, setTeamPageIndex] = useState<number>(0)
+  const teamTotal = filteredTeamUsers.length
+  const teamPageCount = Math.max(1, Math.ceil(teamTotal / teamPageSize))
+  const teamPaginated = useMemo(
+    () => filteredTeamUsers.slice(teamPageIndex * teamPageSize, teamPageIndex * teamPageSize + teamPageSize),
+    [filteredTeamUsers, teamPageIndex, teamPageSize]
+  )
+  const teamStart = teamTotal === 0 ? 0 : teamPageIndex * teamPageSize + 1
+  const teamEnd = teamTotal === 0 ? 0 : Math.min(teamTotal, teamPageIndex * teamPageSize + teamPageSize)
+
+  useEffect(() => {
+    setTeamPageIndex(0)
+  }, [teamSearch, teamRoleFilter, teamCompanyFilter])
+
+  useEffect(() => {
+    if (teamPageIndex > teamPageCount - 1) {
+      setTeamPageIndex(Math.max(0, teamPageCount - 1))
+    }
+  }, [teamPageIndex, teamPageCount])
+
+  const [usersPageSize, setUsersPageSize] = useState<number>(10)
+  const [usersPageIndex, setUsersPageIndex] = useState<number>(0)
+  const usersTotal = filteredCombinedUsers.length
+  const usersPageCount = Math.max(1, Math.ceil(usersTotal / usersPageSize))
+  const usersPaginated = useMemo(
+    () =>
+      filteredCombinedUsers.slice(
+        usersPageIndex * usersPageSize,
+        usersPageIndex * usersPageSize + usersPageSize
+      ),
+    [filteredCombinedUsers, usersPageIndex, usersPageSize]
+  )
+  const usersStart = usersTotal === 0 ? 0 : usersPageIndex * usersPageSize + 1
+  const usersEnd = usersTotal === 0 ? 0 : Math.min(usersTotal, usersPageIndex * usersPageSize + usersPageSize)
+
+  useEffect(() => {
+    setUsersPageIndex(0)
+  }, [usersSearch, usersTypeFilter, usersCompanyFilter])
+
+  useEffect(() => {
+    if (usersPageIndex > usersPageCount - 1) {
+      setUsersPageIndex(Math.max(0, usersPageCount - 1))
+    }
+  }, [usersPageIndex, usersPageCount])
+
+  const [invitesPageSize, setInvitesPageSize] = useState<number>(10)
+  const [invitesPageIndex, setInvitesPageIndex] = useState<number>(0)
+  const invitesTotal = invites.length
+  const invitesPageCount = Math.max(1, Math.ceil(invitesTotal / invitesPageSize))
+  const paginatedInvites = useMemo(
+    () => invites.slice(invitesPageIndex * invitesPageSize, invitesPageIndex * invitesPageSize + invitesPageSize),
+    [invites, invitesPageIndex, invitesPageSize]
+  )
+  const invitesStart = invitesTotal === 0 ? 0 : invitesPageIndex * invitesPageSize + 1
+  const invitesEnd =
+    invitesTotal === 0 ? 0 : Math.min(invitesTotal, invitesPageIndex * invitesPageSize + invitesPageSize)
+
+  useEffect(() => {
+    setInvitesPageIndex(0)
+  }, [invitesTotal])
+
+  useEffect(() => {
+    if (invitesPageIndex > invitesPageCount - 1) {
+      setInvitesPageIndex(Math.max(0, invitesPageCount - 1))
+    }
+  }, [invitesPageIndex, invitesPageCount])
+
   useEffect(() => {
     void (async () => {
       try {
@@ -1008,104 +1084,168 @@ async function handleDeleteUser() {
               <CardTitle>Equipe cadastrada</CardTitle>
               <CardDescription>Usuários com acesso ao sistema. Edite papéis, dados pessoais ou gere uma nova senha.</CardDescription>
             </CardHeader>
-            <CardContent className="overflow-x-auto">
+            <CardContent className="space-y-4">
-              <table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
+              <div className="w-full overflow-x-auto">
-                <thead>
+                <div className="overflow-hidden rounded-lg border">
-                  <tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
+                  <table className="min-w-full table-fixed text-sm">
-                    <th className="w-10 py-3 pr-2 font-medium">
+                    <thead className="bg-slate-100/80">
-                      <div className="flex items-center justify-center">
+                      <tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
-                        <Checkbox
+                        <th className="w-10 px-4 py-3 font-semibold first:pl-6">
-                          checked={allTeamSelected || (someTeamSelected && "indeterminate")}
+                          <div className="flex items-center justify-center">
-                          onCheckedChange={(value) => toggleTeamSelectAll(!!value)}
+                            <Checkbox
-                          aria-label="Selecionar todos"
+                              checked={allTeamSelected || (someTeamSelected && "indeterminate")}
+                              onCheckedChange={(value) => toggleTeamSelectAll(!!value)}
+                              aria-label="Selecionar todos"
+                            />
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Nome</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">E-mail</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Papel</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Empresa</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Máquinas</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Criado em</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100 bg-white">
+                      {teamPaginated.length > 0 ? (
+                        teamPaginated.map((user) => (
+                          <tr key={user.id} className="transition-colors hover:bg-slate-50/80">
+                            <td className="px-4 py-3 first:pl-6">
+                              <div className="flex items-center justify-center">
+                                <Checkbox
+                                  checked={teamSelection.has(user.id)}
+                                  onCheckedChange={(checked) => {
+                                    setTeamSelection((prev) => {
+                                      const next = new Set(prev)
+                                      if (checked) next.add(user.id)
+                                      else next.delete(user.id)
+                                      return next
+                                    })
+                                  }}
+                                  aria-label="Selecionar linha"
+                                />
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 font-medium text-neutral-800 first:pl-6">{user.name || "—"}</td>
+                            <td className="px-4 py-3 text-neutral-600">{user.email}</td>
+                            <td className="px-4 py-3 text-neutral-600">{formatRole(user.role)}</td>
+                            <td className="px-4 py-3 text-neutral-600">{user.companyName ?? "—"}</td>
+                            <td className="px-4 py-3 text-neutral-600">
+                              {(() => {
+                                const list = machinesByUserEmail.get((user.email ?? "").toLowerCase()) ?? []
+                                if (list.length === 0) return "—"
+                                const names = list.map((m) => m.hostname || m.id)
+                                const head = names.slice(0, 2).join(", ")
+                                const extra = names.length > 2 ? ` +${names.length - 2}` : ""
+                                return (
+                                  <span className="text-xs font-medium" title={names.join(", ")}>
+                                    {head}
+                                    {extra}
+                                  </span>
+                                )
+                              })()}
+                            </td>
+                            <td className="px-4 py-3 text-neutral-500">{formatDate(user.createdAt)}</td>
+                            <td className="px-4 py-3 last:pr-6">
+                              <div className="flex flex-wrap gap-2">
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  disabled={!canManageUser(user.role)}
+                                  onClick={() => {
+                                    if (!canManageUser(user.role)) return
+                                    setEditUserId(user.id)
+                                  }}
+                                >
+                                  Editar
+                                </Button>
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
+                                  disabled={!canManageUser(user.role)}
+                                  onClick={() => {
+                                    if (!canManageUser(user.role)) return
+                                    setDeleteUserId(user.id)
+                                  }}
+                                >
+                                  Remover
+                                </Button>
+                              </div>
+                            </td>
+                          </tr>
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan={8} className="px-6 py-6 text-center text-sm text-neutral-500">
+                            {teamUsers.length === 0
+                              ? "Nenhum usuário cadastrado até o momento."
+                              : "Nenhum usuário corresponde aos filtros atuais."}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
+                <div>{teamTotal === 0 ? "Nenhum registro" : `Mostrando ${teamStart}-${teamEnd} de ${teamTotal}`}</div>
+                <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
+                    <span>Itens por página</span>
+                    <Select
+                      value={`${teamPageSize}`}
+                      onValueChange={(value) => {
+                        const next = Number(value)
+                        setTeamPageSize(next)
+                        setTeamPageIndex(0)
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-20">
+                        <SelectValue placeholder={`${teamPageSize}`} />
+                      </SelectTrigger>
+                      <SelectContent align="end">
+                        {[10, 20, 30, 50].map((n) => (
+                          <SelectItem key={`team-page-${n}`} value={`${n}`}>
+                            {n}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Pagination>
+                    <PaginationContent>
+                      <PaginationItem>
+                        <PaginationPrevious
+                          disabled={teamPageIndex === 0}
+                          onClick={() => setTeamPageIndex((previous) => Math.max(0, previous - 1))}
                         />
-                      </div>
+                      </PaginationItem>
-                    </th>
+                      <PaginationItem>
-                    <th className="py-3 pr-4 font-medium">Nome</th>
+                        <PaginationLink
-                    <th className="py-3 pr-4 font-medium">E-mail</th>
+                          href="#"
-                    <th className="py-3 pr-4 font-medium">Papel</th>
+                          isActive
-                    <th className="py-3 pr-4 font-medium">Empresa</th>
+                          onClick={(event) => {
-                    <th className="py-3 pr-4 font-medium">Máquinas</th>
+                            event.preventDefault()
-                    {/* Espaço removido */}
+                          }}
-                    <th className="py-3 pr-4 font-medium">Criado em</th>
+                        >
-                    <th className="py-3 font-medium">Ações</th>
+                          {teamPageIndex + 1}
-                  </tr>
+                        </PaginationLink>
-                </thead>
+                      </PaginationItem>
-                <tbody className="divide-y divide-slate-100">
+                      <PaginationItem>
-                  {filteredTeamUsers.map((user) => (
+                        <PaginationNext
-                    <tr key={user.id} className="hover:bg-slate-50">
+                          disabled={teamPageIndex >= teamPageCount - 1}
-                      <td className="py-3 pr-2">
+                          onClick={() =>
-                        <div className="flex items-center justify-center">
+                            setTeamPageIndex((previous) => Math.min(teamPageCount - 1, previous + 1))
-                          <Checkbox
+                          }
-                            checked={teamSelection.has(user.id)}
+                        />
-                            onCheckedChange={(checked) => {
+                      </PaginationItem>
-                              setTeamSelection((prev) => {
+                    </PaginationContent>
-                                const next = new Set(prev)
+                  </Pagination>
-                                if (checked) next.add(user.id)
+                </div>
-                                else next.delete(user.id)
+              </div>
-                                return next
-                              })
-                            }}
-                            aria-label="Selecionar linha"
-                          />
-                        </div>
-                      </td>
-                      <td className="py-3 pr-4 font-medium text-neutral-800">{user.name || "—"}</td>
-                      <td className="py-3 pr-4 text-neutral-600">{user.email}</td>
-                      <td className="py-3 pr-4 text-neutral-600">{formatRole(user.role)}</td>
-                      <td className="py-3 pr-4 text-neutral-600">{user.companyName ?? "—"}</td>
-                      <td className="py-3 pr-4 text-neutral-600">
-                        {(() => {
-                          const list = machinesByUserEmail.get((user.email ?? '').toLowerCase()) ?? []
-                          if (list.length === 0) return '—'
-                          const names = list.map((m) => m.hostname || m.id)
-                          const head = names.slice(0, 2).join(', ')
-                          const extra = names.length > 2 ? ` +${names.length - 2}` : ''
-                          return <span className="text-xs font-medium" title={names.join(', ')}>{head}{extra}</span>
-                        })()}
-                      </td>
-                      {/* Espaço removido */}
-                      <td className="py-3 pr-4 text-neutral-500">{formatDate(user.createdAt)}</td>
-                      <td className="py-3">
-                        <div className="flex flex-wrap gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={!canManageUser(user.role)}
-                            onClick={() => {
-                              if (!canManageUser(user.role)) return
-                              setEditUserId(user.id)
-                            }}
-                          >
-                            Editar
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
-                            disabled={!canManageUser(user.role)}
-                            onClick={() => {
-                              if (!canManageUser(user.role)) return
-                              setDeleteUserId(user.id)
-                            }}
-                          >
-                            Remover
-                          </Button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                  {filteredTeamUsers.length === 0 ? (
-                    <tr>
-                      <td colSpan={8} className="py-6 text-center text-neutral-500">
-                        {teamUsers.length === 0
-                          ? "Nenhum usuário cadastrado até o momento."
-                          : "Nenhum usuário corresponde aos filtros atuais."}
-                      </td>
-                    </tr>
-                  ) : null}
-                </tbody>
-              </table>
             </CardContent>
           </Card>
 
@@ -1226,112 +1366,193 @@ async function handleDeleteUser() {
               <CardTitle>Usuários</CardTitle>
               <CardDescription>Pessoas e máquinas com acesso ao sistema.</CardDescription>
             </CardHeader>
-            <CardContent className="overflow-x-auto">
+            <CardContent className="space-y-4">
-              <table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
+              <div className="w-full overflow-x-auto">
-                <thead>
+                <div className="overflow-hidden rounded-lg border">
-                  <tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
+                  <table className="min-w-full table-fixed text-sm">
-                    <th className="w-10 py-3 pr-2 font-medium">
+                    <thead className="bg-slate-100/80">
-                      <div className="flex items-center justify-center">
+                      <tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
-                        <Checkbox
+                        <th className="w-10 px-4 py-3 font-semibold first:pl-6">
-                          checked={usersSelection.size > 0 && usersSelection.size === filteredCombinedUsers.length || (usersSelection.size > 0 && usersSelection.size < filteredCombinedUsers.length && "indeterminate")}
+                          <div className="flex items-center justify-center">
-                          onCheckedChange={(value) => toggleUsersCombinedSelectAll(!!value)}
+                            <Checkbox
-                          aria-label="Selecionar todos"
+                              checked={
+                                usersSelection.size > 0 &&
+                                  usersSelection.size === filteredCombinedUsers.length
+                                  ? true
+                                  : usersSelection.size > 0
+                                    ? "indeterminate"
+                                    : false
+                              }
+                              onCheckedChange={(value) => toggleUsersCombinedSelectAll(!!value)}
+                              aria-label="Selecionar todos"
+                            />
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Nome</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">E-mail</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Tipo</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Perfil</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Empresa</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Criado em</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100 bg-white">
+                      {usersPaginated.length > 0 ? (
+                        usersPaginated.map((user) => (
+                          <tr key={user.id} className="transition-colors hover:bg-slate-50/80">
+                            <td className="px-4 py-3 first:pl-6">
+                              <div className="flex items-center justify-center">
+                                <Checkbox
+                                  checked={usersSelection.has(user.id)}
+                                  onCheckedChange={(checked) => {
+                                    setUsersSelection((prev) => {
+                                      const next = new Set(prev)
+                                      if (checked) next.add(user.id)
+                                      else next.delete(user.id)
+                                      return next
+                                    })
+                                  }}
+                                  aria-label="Selecionar linha"
+                                />
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 font-medium text-neutral-800 first:pl-6">
+                              {user.name || (user.role === "machine" ? "Máquina" : "—")}
+                            </td>
+                            <td className="px-4 py-3 text-neutral-600">{user.email}</td>
+                            <td className="px-4 py-3 text-neutral-600">
+                              {user.role === "machine" ? "Máquina" : "Pessoa"}
+                            </td>
+                            <td className="px-4 py-3 text-neutral-600">
+                              {user.role === "machine" ? (
+                                user.machinePersona ? (
+                                  <Badge
+                                    variant={machinePersonaBadgeVariant(user.machinePersona)}
+                                    className="rounded-full px-3 py-1 text-xs font-medium"
+                                  >
+                                    {formatMachinePersona(user.machinePersona)}
+                                  </Badge>
+                                ) : (
+                                  <span className="text-neutral-500">Sem persona</span>
+                                )
+                              ) : (
+                                formatRole(user.role)
+                              )}
+                            </td>
+                            <td className="px-4 py-3 text-neutral-600">{user.companyName ?? "—"}</td>
+                            <td className="px-4 py-3 text-neutral-500">{formatDate(user.createdAt)}</td>
+                            <td className="px-4 py-3 last:pr-6">
+                              <div className="flex flex-wrap gap-2">
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  disabled={!canManageUser(user.role)}
+                                  onClick={() => {
+                                    if (!canManageUser(user.role)) return
+                                    setEditUserId(user.id)
+                                  }}
+                                >
+                                  Editar
+                                </Button>
+                                {user.role === "machine" ? (
+                                  <Button variant="ghost" size="sm" asChild>
+                                    <Link
+                                      href={
+                                        extractMachineId(user.email)
+                                          ? `/admin/machines/${extractMachineId(user.email)}`
+                                          : "/admin/machines"
+                                      }
+                                    >
+                                      Detalhes da máquina
+                                    </Link>
+                                  </Button>
+                                ) : null}
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
+                                  disabled={!canManageUser(user.role)}
+                                  onClick={() => {
+                                    if (!canManageUser(user.role)) return
+                                    setDeleteUserId(user.id)
+                                  }}
+                                >
+                                  Remover
+                                </Button>
+                              </div>
+                            </td>
+                          </tr>
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan={8} className="px-6 py-6 text-center text-sm text-neutral-500">
+                            {combinedBaseUsers.length === 0
+                              ? "Nenhum usuário cadastrado até o momento."
+                              : "Nenhum usuário corresponde aos filtros atuais."}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
+                <div>{usersTotal === 0 ? "Nenhum registro" : `Mostrando ${usersStart}-${usersEnd} de ${usersTotal}`}</div>
+                <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
+                    <span>Itens por página</span>
+                    <Select
+                      value={`${usersPageSize}`}
+                      onValueChange={(value) => {
+                        const next = Number(value)
+                        setUsersPageSize(next)
+                        setUsersPageIndex(0)
+                      }}
+                    >
+                      <SelectTrigger className="h-8 w-20">
+                        <SelectValue placeholder={`${usersPageSize}`} />
+                      </SelectTrigger>
+                      <SelectContent align="end">
+                        {[10, 20, 30, 50].map((n) => (
+                          <SelectItem key={`users-page-${n}`} value={`${n}`}>
+                            {n}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Pagination>
+                    <PaginationContent>
+                      <PaginationItem>
+                        <PaginationPrevious
+                          disabled={usersPageIndex === 0}
+                          onClick={() => setUsersPageIndex((previous) => Math.max(0, previous - 1))}
                         />
-                      </div>
+                      </PaginationItem>
-                    </th>
+                      <PaginationItem>
-                    <th className="py-3 pr-4 font-medium">Nome</th>
+                        <PaginationLink
-                    <th className="py-3 pr-4 font-medium">E-mail</th>
+                          href="#"
-                    <th className="py-3 pr-4 font-medium">Tipo</th>
+                          isActive
-                    <th className="py-3 pr-4 font-medium">Perfil</th>
+                          onClick={(event) => {
-                    <th className="py-3 pr-4 font-medium">Empresa</th>
+                            event.preventDefault()
-                    {/* Espaço removido */}
+                          }}
-                    <th className="py-3 pr-4 font-medium">Criado em</th>
+                        >
-                    <th className="py-3 font-medium">Ações</th>
+                          {usersPageIndex + 1}
-                  </tr>
+                        </PaginationLink>
-                </thead>
+                      </PaginationItem>
-                <tbody className="divide-y divide-slate-100">
+                      <PaginationItem>
-                  {filteredCombinedUsers.map((user) => (
+                        <PaginationNext
-                    <tr key={user.id} className="hover:bg-slate-50">
+                          disabled={usersPageIndex >= usersPageCount - 1}
-                      <td className="py-3 pr-2">
+                          onClick={() =>
-                        <div className="flex items-center justify-center">
+                            setUsersPageIndex((previous) => Math.min(usersPageCount - 1, previous + 1))
-                          <Checkbox
+                          }
-                            checked={usersSelection.has(user.id)}
+                        />
-                            onCheckedChange={(checked) => {
+                      </PaginationItem>
-                              setUsersSelection((prev) => {
+                    </PaginationContent>
-                                const next = new Set(prev)
+                  </Pagination>
-                                if (checked) next.add(user.id)
+                </div>
-                                else next.delete(user.id)
+              </div>
-                                return next
-                              })
-                            }}
-                            aria-label="Selecionar linha"
-                          />
-                        </div>
-                      </td>
-                      <td className="py-3 pr-4 font-medium text-neutral-800">{user.name || (user.role === "machine" ? "Máquina" : "—")}</td>
-                      <td className="py-3 pr-4 text-neutral-600">{user.email}</td>
-                      <td className="py-3 pr-4 text-neutral-600">{user.role === "machine" ? "Máquina" : "Pessoa"}</td>
-                      <td className="py-3 pr-4 text-neutral-600">
-                        {user.role === "machine" ? (
-                          user.machinePersona ? (
-                            <Badge variant={machinePersonaBadgeVariant(user.machinePersona)} className="rounded-full px-3 py-1 text-xs font-medium">
-                              {formatMachinePersona(user.machinePersona)}
-                            </Badge>
-                          ) : (
-                            <span className="text-neutral-500">Sem persona</span>
-                          )
-                        ) : (
-                          formatRole(user.role)
-                        )}
-                      </td>
-                      <td className="py-3 pr-4 text-neutral-600">{user.companyName ?? "—"}</td>
-                      {/* Espaço removido */}
-                      <td className="py-3 pr-4 text-neutral-500">{formatDate(user.createdAt)}</td>
-                      <td className="py-3">
-                        <div className="flex flex-wrap gap-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={!canManageUser(user.role)}
-                            onClick={() => {
-                              if (!canManageUser(user.role)) return
-                              setEditUserId(user.id)
-                            }}
-                          >
-                            Editar
-                          </Button>
-                          {user.role === "machine" ? (
-                            <Button variant="ghost" size="sm" asChild>
-                              <Link href={(extractMachineId(user.email) ? `/admin/machines/${extractMachineId(user.email)}` : "/admin/machines")}>Detalhes da máquina</Link>
-                            </Button>
-                          ) : null}
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700"
-                            disabled={!canManageUser(user.role)}
-                            onClick={() => {
-                              if (!canManageUser(user.role)) return
-                              setDeleteUserId(user.id)
-                            }}
-                          >
-                            Remover
-                          </Button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                  {filteredCombinedUsers.length === 0 ? (
-                    <tr>
-                      <td colSpan={9} className="py-6 text-center text-neutral-500">
-                        {combinedBaseUsers.length === 0
-                          ? "Nenhum usuário cadastrado até o momento."
-                          : "Nenhum usuário corresponde aos filtros atuais."}
-                      </td>
-                    </tr>
-                  ) : null}
-                </tbody>
-              </table>
             </CardContent>
           </Card>
         </TabsContent>
@@ -1422,113 +1643,172 @@ async function handleDeleteUser() {
               <CardTitle>Convites emitidos</CardTitle>
               <CardDescription>Histórico e status atual de todos os convites enviados para o workspace.</CardDescription>
             </CardHeader>
-            <CardContent className="overflow-x-auto">
+            <CardContent className="space-y-4">
-              <table className="min-w-full table-fixed divide-y divide-slate-200 text-sm">
+              <div className="w-full overflow-x-auto">
-                <thead>
+                <div className="overflow-hidden rounded-lg border">
-                  <tr className="text-left text-xs uppercase tracking-wide text-neutral-500">
+                  <table className="min-w-full table-fixed text-sm">
-                    <th className="w-10 py-3 pr-2 font-medium">
+                    <thead className="bg-slate-100/80">
-                      <div className="flex items-center justify-center">
+                      <tr className="text-left text-xs uppercase tracking-wide text-neutral-600">
-                        <Checkbox
+                        <th className="w-10 px-4 py-3 font-semibold first:pl-6">
-                          checked={allInvitesSelected || (someInvitesSelected && "indeterminate")}
+                          <div className="flex items-center justify-center">
-                          onCheckedChange={(value) => toggleInvitesSelectAll(!!value)}
+                            <Checkbox
-                          aria-label="Selecionar todos"
+                              checked={allInvitesSelected || (someInvitesSelected && "indeterminate")}
-                        />
+                              onCheckedChange={(value) => toggleInvitesSelectAll(!!value)}
-                      </div>
+                              aria-label="Selecionar todos"
-                    </th>
+                            />
-                    <th className="py-3 pr-4 font-medium">Colaborador</th>
+                          </div>
-                    <th className="py-3 pr-4 font-medium">Papel</th>
+                        </th>
-                    {/* Espaço removido */}
+                        <th className="px-4 py-3 font-semibold text-neutral-600 first:pl-6">Colaborador</th>
-                    <th className="py-3 pr-4 font-medium">Expira em</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Papel</th>
-                    <th className="py-3 pr-4 font-medium">Status</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Expira em</th>
-                    <th className="py-3 font-medium">Ações</th>
+                        <th className="px-4 py-3 font-semibold text-neutral-600">Status</th>
-                  </tr>
+                        <th className="px-4 py-3 font-semibold text-neutral-600 last:pr-6">Ações</th>
-                </thead>
+                      </tr>
-                <tbody className="divide-y divide-slate-100">
+                    </thead>
-                  {invites.map((invite) => (
+                    <tbody className="divide-y divide-slate-100 bg-white">
-                    <tr key={invite.id} className="hover:bg-slate-50">
+                      {paginatedInvites.length > 0 ? (
-                      <td className="py-3 pr-2">
+                        paginatedInvites.map((invite) => (
-                        <div className="flex items-center justify-center">
+                          <tr key={invite.id} className="transition-colors hover:bg-slate-50/80">
-                          <Checkbox
+                            <td className="px-4 py-3 first:pl-6">
-                            checked={inviteSelection.has(invite.id)}
+                              <div className="flex items-center justify-center">
-                            onCheckedChange={(checked) => {
+                                <Checkbox
-                              setInviteSelection((prev) => {
+                                  checked={inviteSelection.has(invite.id)}
-                                const next = new Set(prev)
+                                  onCheckedChange={(checked) => {
-                                if (checked) next.add(invite.id)
+                                    setInviteSelection((prev) => {
-                                else next.delete(invite.id)
+                                      const next = new Set(prev)
-                                return next
+                                      if (checked) next.add(invite.id)
-                              })
+                                      else next.delete(invite.id)
-                            }}
+                                      return next
-                            aria-label="Selecionar linha"
+                                    })
+                                  }}
+                                  aria-label="Selecionar linha"
+                                />
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 first:pl-6">
+                              <div className="flex flex-col">
+                                <span className="font-medium text-neutral-800">{invite.name || invite.email}</span>
+                                <span className="text-xs text-neutral-500">{invite.email}</span>
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 text-neutral-600">{formatRole(invite.role)}</td>
+                            <td className="px-4 py-3 text-neutral-600">{formatDate(invite.expiresAt)}</td>
+                            <td className="px-4 py-3">
+                              <Badge
+                                variant={inviteStatusVariant(invite.status)}
+                                className="rounded-full px-3 py-1 text-xs font-medium"
+                              >
+                                {formatStatus(invite.status)}
+                              </Badge>
+                            </td>
+                            <td className="px-4 py-3 last:pr-6">
+                              <div className="flex flex-wrap gap-2">
+                                <Button variant="outline" size="sm" onClick={() => handleCopy(invite.inviteUrl)}>
+                                  Copiar link
+                                </Button>
+                                {invite.status === "pending" && canManageInvite(invite.role) ? (
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="text-red-600 transition-colors hover:bg-red-500/10"
+                                    onClick={() => setRevokeDialogInviteId(invite.id)}
+                                    disabled={revokingId === invite.id}
+                                  >
+                                    {revokingId === invite.id ? "Revogando..." : "Revogar"}
+                                  </Button>
+                                ) : null}
+                                {invite.status === "revoked" && canReactivateInvitePolicy(invite) && canManageInvite(invite.role) ? (
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="border-amber-400 text-amber-600 hover:bg-amber-50"
+                                    onClick={() => handleReactivate(invite)}
+                                    disabled={reactivatingId === invite.id}
+                                  >
+                                    {reactivatingId === invite.id ? "Reativando..." : "Reativar"}
+                                  </Button>
+                                ) : null}
+                              </div>
+                            </td>
+                          </tr>
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan={6} className="px-6 py-6 text-center text-sm text-neutral-500">
+                            Nenhum convite emitido até o momento.
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div className="flex flex-col items-center justify-between gap-3 border-t border-slate-200 pt-2 text-xs text-neutral-500 md:flex-row md:text-sm">
+                <div>{invitesTotal === 0 ? "Nenhum registro" : `Mostrando ${invitesStart}-${invitesEnd} de ${invitesTotal}`}</div>
+                <div className="flex flex-col-reverse gap-3 md:flex-row md:items-center md:gap-4">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700 disabled:text-rose-300 disabled:border-rose-100"
+                    disabled={selectedInvites.length === 0 || isBulkRevokingInvites}
+                    onClick={() => setBulkRevokeInvitesOpen(true)}
+                  >
+                    <IconTrash className="size-4" /> Revogar selecionados
+                  </Button>
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2 text-xs uppercase tracking-wide text-neutral-500 md:text-sm">
+                      <span>Itens por página</span>
+                      <Select
+                        value={`${invitesPageSize}`}
+                        onValueChange={(value) => {
+                          const next = Number(value)
+                          setInvitesPageSize(next)
+                          setInvitesPageIndex(0)
+                        }}
+                      >
+                        <SelectTrigger className="h-8 w-20">
+                          <SelectValue placeholder={`${invitesPageSize}`} />
+                        </SelectTrigger>
+                        <SelectContent align="end">
+                          {[10, 20, 30, 50].map((n) => (
+                            <SelectItem key={`invites-page-${n}`} value={`${n}`}>
+                              {n}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <Pagination>
+                      <PaginationContent>
+                        <PaginationItem>
+                          <PaginationPrevious
+                            disabled={invitesPageIndex === 0}
+                            onClick={() => setInvitesPageIndex((previous) => Math.max(0, previous - 1))}
                           />
-                        </div>
+                        </PaginationItem>
-                      </td>
+                        <PaginationItem>
-                      <td className="py-3 pr-4">
+                          <PaginationLink
-                        <div className="flex flex-col">
+                            href="#"
-                          <span className="font-medium text-neutral-800">{invite.name || invite.email}</span>
+                            isActive
-                          <span className="text-xs text-neutral-500">{invite.email}</span>
+                            onClick={(event) => {
-                        </div>
+                              event.preventDefault()
-                      </td>
+                            }}
-                      <td className="py-3 pr-4 text-neutral-600">{formatRole(invite.role)}</td>
+                          >
-                      {/* Espaço removido */}
+                            {invitesPageIndex + 1}
-                      <td className="py-3 pr-4 text-neutral-600">{formatDate(invite.expiresAt)}</td>
+                          </PaginationLink>
-                      <td className="py-3 pr-4">
+                        </PaginationItem>
-                        <Badge
+                        <PaginationItem>
-                          variant={inviteStatusVariant(invite.status)}
+                          <PaginationNext
-                          className="rounded-full px-3 py-1 text-xs font-medium"
+                            disabled={invitesPageIndex >= invitesPageCount - 1}
-                        >
+                            onClick={() =>
-                          {formatStatus(invite.status)}
+                              setInvitesPageIndex((previous) => Math.min(invitesPageCount - 1, previous + 1))
-                        </Badge>
+                            }
-                      </td>
+                          />
-                      <td className="py-3">
+                        </PaginationItem>
-                        <div className="flex flex-wrap gap-2">
+                      </PaginationContent>
-                          <Button variant="outline" size="sm" onClick={() => handleCopy(invite.inviteUrl)}>
+                    </Pagination>
-                            Copiar link
+                  </div>
-                          </Button>
+                </div>
-                          {invite.status === "pending" && canManageInvite(invite.role) ? (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="text-red-600 transition-colors hover:bg-red-500/10"
-                              onClick={() => setRevokeDialogInviteId(invite.id)}
-                              disabled={revokingId === invite.id}
-                            >
-                              {revokingId === invite.id ? "Revogando..." : "Revogar"}
-                            </Button>
-                          ) : null}
-                          {invite.status === "revoked" && canReactivateInvitePolicy(invite) && canManageInvite(invite.role) ? (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="border-amber-400 text-amber-600 hover:bg-amber-50"
-                              onClick={() => handleReactivate(invite)}
-                              disabled={reactivatingId === invite.id}
-                            >
-                              {reactivatingId === invite.id ? "Reativando..." : "Reativar"}
-                            </Button>
-                          ) : null}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                  {invites.length === 0 ? (
-                    <tr>
-                      <td colSpan={7} className="py-6 text-center text-neutral-500">
-                        Nenhum convite emitido até o momento.
-                      </td>
-                    </tr>
-                  ) : null}
-                </tbody>
-              </table>
-              <div className="mt-3 flex items-center justify-end">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="gap-2 border-rose-200 text-rose-600 hover:bg-rose-50 hover:text-rose-700 disabled:text-rose-300 disabled:border-rose-100"
-                  disabled={selectedInvites.length === 0 || isBulkRevokingInvites}
-                  onClick={() => setBulkRevokeInvitesOpen(true)}
-                >
-                  <IconTrash className="size-4" /> Revogar selecionados
-                </Button>
               </div>
             </CardContent>
           </Card>

src/components/admin/companies/admin-companies-manager.tsx

@@ -758,7 +758,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
     <div className="space-y-3">
       <div className="overflow-hidden rounded-lg border">
         <Table className="w-full table-auto">
-          <TableHeader className="bg-muted border-b">
+          <TableHeader className="bg-slate-100/80 border-b border-slate-200">
           <TableRow>
             <TableHead>Empresa</TableHead>
             <TableHead>Contratos ativos</TableHead>
@@ -787,7 +787,7 @@ function TableView({ companies, machineCountsBySlug, onEdit, onDelete }: TableVi
               return (
                 <TableRow key={company.id} className="hover:bg-muted/40">
                   <TableCell className="align-middle">
-                    <div className="space-y-1">
+                    <div className="flex h-full flex-col justify-center gap-1">
                       <div className="flex items-center gap-2">
                         <p className="font-semibold text-foreground">{company.name}</p>
                         {company.isAvulso ? <Badge variant="outline">Avulso</Badge> : null}

src/components/admin/users/admin-users-workspace.tsx

@@ -91,6 +91,8 @@ const ROLE_LABEL: Record<AdminAccount["role"], string> = {
   COLLABORATOR: "Colaborador",
 }
 
+const NO_CONTACT_VALUE = "__none__"
+
 function createId(prefix: string) {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return `${prefix}-${crypto.randomUUID()}`
@@ -612,16 +614,16 @@ function CompanySectionSheet({ editor, onClose, onUpdated }: CompanySectionSheet
 
   return (
     <Sheet open={open} onOpenChange={(value) => (!value ? onClose() : null)}>
-      <SheetContent className="flex w-full max-w-4xl flex-col gap-0 p-0">
+      <SheetContent className="flex w-full max-w-none flex-col gap-0 bg-background p-0 sm:max-w-[48rem] lg:max-w-[60rem] xl:max-w-[68rem]">
-        <SheetHeader className="border-b border-border/60 px-6 py-4">
+        <SheetHeader className="border-b border-border/60 px-10 py-7">
-          <SheetTitle className="text-base font-semibold">
+          <SheetTitle className="text-xl font-semibold">
             {editor?.section === "contacts" ? "Contatos da empresa" : null}
             {editor?.section === "locations" ? "Localizações e unidades" : null}
             {editor?.section === "contracts" ? "Contratos ativos" : null}
           </SheetTitle>
         </SheetHeader>
-        <div className="flex-1 overflow-y-auto px-6 py-6">{content}</div>
+        <div className="flex-1 overflow-y-auto px-10 py-8">{content}</div>
-        <SheetFooter className="border-t border-border/60 px-6 py-4">
+        <SheetFooter className="border-t border-border/60 px-10 py-5">
           <div className="flex w-full items-center justify-end">
             {isSubmitting ? (
               <span className="text-sm text-muted-foreground">Salvando...</span>
@@ -674,11 +676,11 @@ function ContactsEditor({
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={submit} className="space-y-5">
+      <form onSubmit={submit} className="space-y-8">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div>
+          <div className="space-y-1.5">
-            <p className="text-sm font-semibold text-foreground">Contatos estratégicos</p>
+            <p className="text-base font-semibold text-foreground">Contatos estratégicos</p>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-sm text-muted-foreground">
               Cadastre responsáveis por aprovação, faturamento e comunicação.
             </p>
           </div>
@@ -686,6 +688,7 @@ function ContactsEditor({
             type="button"
             variant="outline"
             size="sm"
+            className="self-start sm:self-auto"
             onClick={() =>
               fieldArray.append({
                 id: createId("contact"),
@@ -703,18 +706,18 @@ function ContactsEditor({
               })
             }
           >
-            <IconPlus className="mr-1 size-3.5" />
+            <IconPlus className="mr-2 size-4" />
             Novo contato
           </Button>
         </div>
 
-        <div className="space-y-4">
+        <div className="space-y-6">
           {fieldArray.fields.map((field, index) => {
             const errors = form.formState.errors.contacts?.[index]
             return (
-              <Card key={field.id}>
+              <Card key={field.id} className="border border-border/60 shadow-sm">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-                  <CardTitle className="text-base font-semibold">Contato #{index + 1}</CardTitle>
+                  <CardTitle className="text-lg font-semibold">Contato #{index + 1}</CardTitle>
                   <Button
                     type="button"
                     variant="ghost"
@@ -725,29 +728,39 @@ function ContactsEditor({
                     <IconTrash className="size-4" />
                   </Button>
                 </CardHeader>
-                <CardContent className="grid gap-4 md:grid-cols-2">
+                <CardContent className="grid gap-6 md:grid-cols-2">
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Nome completo</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Nome completo
+                    </Label>
                     <Input {...form.register(`contacts.${index}.fullName` as const)} />
                     <FieldError message={errors?.fullName?.message} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>E-mail</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      E-mail
+                    </Label>
                     <Input {...form.register(`contacts.${index}.email` as const)} />
                     <FieldError message={errors?.email?.message} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Telefone</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Telefone
+                    </Label>
                     <Input {...form.register(`contacts.${index}.phone` as const)} placeholder="(11) 99999-0000" />
                     <FieldError message={errors?.phone?.message as string | undefined} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>WhatsApp</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      WhatsApp
+                    </Label>
                     <Input {...form.register(`contacts.${index}.whatsapp` as const)} placeholder="(11) 99999-0000" />
                     <FieldError message={errors?.whatsapp?.message as string | undefined} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Função</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Função
+                    </Label>
                     <Controller
                       name={`contacts.${index}.role` as const}
                       control={form.control}
@@ -767,12 +780,16 @@ function ContactsEditor({
                       )}
                     />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Cargo interno</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Cargo interno
+                    </Label>
                     <Input {...form.register(`contacts.${index}.title` as const)} placeholder="ex.: Coordenador TI" />
                   </div>
-                  <div className="md:col-span-2">
+                  <div className="md:col-span-2 space-y-2">
-                    <Label>Preferências de contato</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Preferências de contato
+                    </Label>
                     <Controller
                       name={`contacts.${index}.preference` as const}
                       control={form.control}
@@ -785,26 +802,28 @@ function ContactsEditor({
                       )}
                     />
                   </div>
-                  <div className="flex items-center gap-3">
+                  <div className="md:col-span-2 flex items-center gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3">
                     <Checkbox
                       checked={form.watch(`contacts.${index}.canAuthorizeTickets` as const)}
                       onCheckedChange={(checked) =>
                         form.setValue(`contacts.${index}.canAuthorizeTickets` as const, Boolean(checked))
                       }
                     />
-                    <span className="text-sm text-muted-foreground">Pode autorizar tickets</span>
+                    <span className="text-sm font-medium text-neutral-700">Pode autorizar tickets</span>
                   </div>
-                  <div className="flex items-center gap-3">
+                  <div className="md:col-span-2 flex items-center gap-3 rounded-lg border border-border/60 bg-muted/30 px-4 py-3">
                     <Checkbox
                       checked={form.watch(`contacts.${index}.canApproveCosts` as const)}
                       onCheckedChange={(checked) =>
                         form.setValue(`contacts.${index}.canApproveCosts` as const, Boolean(checked))
                       }
                     />
-                    <span className="text-sm text-muted-foreground">Pode aprovar custos</span>
+                    <span className="text-sm font-medium text-neutral-700">Pode aprovar custos</span>
                   </div>
-                  <div className="md:col-span-2">
+                  <div className="md:col-span-2 space-y-2">
-                    <Label>Anotações</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Anotações
+                    </Label>
                     <Textarea {...form.register(`contacts.${index}.notes` as const)} />
                   </div>
                 </CardContent>
@@ -813,11 +832,11 @@ function ContactsEditor({
           })}
         </div>
 
-        <div className="flex justify-end gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-          <Button type="button" variant="ghost" onClick={onCancel}>
+          <Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
             Cancelar
           </Button>
-          <Button type="submit">
+          <Button type="submit" className="whitespace-nowrap sm:w-auto">
             <IconPencil className="mr-2 size-4" />
             Salvar contatos
           </Button>
@@ -862,18 +881,19 @@ function LocationsEditor({
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={submit} className="space-y-5">
+      <form onSubmit={submit} className="space-y-8">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div>
+          <div className="space-y-1.5">
-            <p className="text-sm font-semibold text-foreground">Localizações</p>
+            <p className="text-base font-semibold text-foreground">Localizações</p>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-sm text-muted-foreground">
-              Define unidades críticas, data centers e filiais para atendimento dedicado.
+              Defina unidades críticas, data centers e filiais para atendimento dedicado.
             </p>
           </div>
           <Button
             type="button"
             variant="outline"
             size="sm"
+            className="self-start sm:self-auto"
             onClick={() =>
               fieldArray.append({
                 id: createId("location"),
@@ -886,18 +906,18 @@ function LocationsEditor({
               })
             }
           >
-            <IconPlus className="mr-1 size-3.5" />
+            <IconPlus className="mr-2 size-4" />
             Nova unidade
           </Button>
         </div>
 
-        <div className="space-y-4">
+        <div className="space-y-6">
           {fieldArray.fields.map((field, index) => {
             const errors = form.formState.errors.locations?.[index]
             return (
-              <Card key={field.id}>
+              <Card key={field.id} className="border border-border/60 shadow-sm">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-                  <CardTitle className="text-base font-semibold">Unidade #{index + 1}</CardTitle>
+                  <CardTitle className="text-lg font-semibold">Unidade #{index + 1}</CardTitle>
                   <Button
                     type="button"
                     variant="ghost"
@@ -908,14 +928,14 @@ function LocationsEditor({
                     <IconTrash className="size-4" />
                   </Button>
                 </CardHeader>
-                <CardContent className="grid gap-4 md:grid-cols-2">
+                <CardContent className="grid gap-6 md:grid-cols-2">
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Nome</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Nome</Label>
                     <Input {...form.register(`locations.${index}.name` as const)} />
                     <FieldError message={errors?.name?.message} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Tipo</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Tipo</Label>
                     <Controller
                       name={`locations.${index}.type` as const}
                       control={form.control}
@@ -935,18 +955,25 @@ function LocationsEditor({
                       )}
                     />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Contato responsável</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Contato responsável
+                    </Label>
                     <Controller
                       name={`locations.${index}.responsibleContactId` as const}
                       control={form.control}
                       render={({ field }) => (
-                        <Select value={field.value ?? ""} onValueChange={(value) => field.onChange(value || null)}>
+                        <Select
+                          value={field.value ?? NO_CONTACT_VALUE}
+                          onValueChange={(value) =>
+                            field.onChange(value === NO_CONTACT_VALUE ? null : value)
+                          }
+                        >
                           <SelectTrigger>
                             <SelectValue placeholder="Selecione" />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectItem value="">Nenhum</SelectItem>
+                            <SelectItem value={NO_CONTACT_VALUE}>Nenhum</SelectItem>
                             {contacts.map((contact) => (
                               <SelectItem key={contact.id} value={contact.id}>
                                 {contact.fullName}
@@ -957,8 +984,10 @@ function LocationsEditor({
                       )}
                     />
                   </div>
-                  <div>
+                  <div className="md:col-span-2 space-y-2">
-                    <Label>Notas</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Notas
+                    </Label>
                     <Textarea {...form.register(`locations.${index}.notes` as const)} />
                   </div>
                 </CardContent>
@@ -967,11 +996,11 @@ function LocationsEditor({
           })}
         </div>
 
-        <div className="flex justify-end gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-          <Button type="button" variant="ghost" onClick={onCancel}>
+          <Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
             Cancelar
           </Button>
-          <Button type="submit">
+          <Button type="submit" className="whitespace-nowrap sm:w-auto">
             <IconPencil className="mr-2 size-4" />
             Salvar localizações
           </Button>
@@ -1019,11 +1048,11 @@ function ContractsEditor({
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={submit} className="space-y-5">
+      <form onSubmit={submit} className="space-y-8">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <div>
+          <div className="space-y-1.5">
-            <p className="text-sm font-semibold text-foreground">Contratos</p>
+            <p className="text-base font-semibold text-foreground">Contratos</p>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-sm text-muted-foreground">
               Registre vigência, escopo e condições para este cliente.
             </p>
           </div>
@@ -1031,6 +1060,7 @@ function ContractsEditor({
             type="button"
             variant="outline"
             size="sm"
+            className="self-start sm:self-auto"
             onClick={() =>
               fieldArray.append({
                 id: createId("contract"),
@@ -1047,18 +1077,18 @@ function ContractsEditor({
               })
             }
           >
-            <IconPlus className="mr-1 size-3.5" />
+            <IconPlus className="mr-2 size-4" />
             Novo contrato
           </Button>
         </div>
 
-        <div className="space-y-4">
+        <div className="space-y-6">
           {fieldArray.fields.map((field, index) => {
             const errors = form.formState.errors.contracts?.[index]
             return (
-              <Card key={field.id}>
+              <Card key={field.id} className="border border-border/60 shadow-sm">
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-                  <CardTitle className="text-base font-semibold">Contrato #{index + 1}</CardTitle>
+                  <CardTitle className="text-lg font-semibold">Contrato #{index + 1}</CardTitle>
                   <Button
                     type="button"
                     variant="ghost"
@@ -1069,9 +1099,11 @@ function ContractsEditor({
                     <IconTrash className="size-4" />
                   </Button>
                 </CardHeader>
-                <CardContent className="grid gap-4 md:grid-cols-2">
+                <CardContent className="grid gap-6 md:grid-cols-2">
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Tipo</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Tipo
+                    </Label>
                     <Controller
                       name={`contracts.${index}.contractType` as const}
                       control={form.control}
@@ -1091,34 +1123,46 @@ function ContractsEditor({
                       )}
                     />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>SKU/plano</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      SKU/plano
+                    </Label>
                     <Input {...form.register(`contracts.${index}.planSku` as const)} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Início</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Início
+                    </Label>
                     <Input type="date" {...form.register(`contracts.${index}.startDate` as const)} />
                     <FieldError message={errors?.startDate?.message as string | undefined} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Fim</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Fim
+                    </Label>
                     <Input type="date" {...form.register(`contracts.${index}.endDate` as const)} />
                     <FieldError message={errors?.endDate?.message as string | undefined} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Renovação</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Renovação
+                    </Label>
                     <Input type="date" {...form.register(`contracts.${index}.renewalDate` as const)} />
                   </div>
-                  <div>
+                  <div className="space-y-2">
-                    <Label>Valor (R$)</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Valor (R$)
+                    </Label>
                     <Input
                       type="number"
                       step="0.01"
                       {...form.register(`contracts.${index}.price` as const, { valueAsNumber: true })}
                     />
                   </div>
-                  <div className="md:col-span-2">
+                  <div className="md:col-span-2 space-y-2">
-                    <Label>Escopo</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Escopo
+                    </Label>
                     <Controller
                       name={`contracts.${index}.scope` as const}
                       control={form.control}
@@ -1138,8 +1182,10 @@ function ContractsEditor({
                       )}
                     />
                   </div>
-                  <div className="md:col-span-2">
+                  <div className="md:col-span-2 space-y-2">
-                    <Label>Observações</Label>
+                    <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Observações
+                    </Label>
                     <Textarea {...form.register(`contracts.${index}.notes` as const)} />
                   </div>
                 </CardContent>
@@ -1148,11 +1194,11 @@ function ContractsEditor({
           })}
         </div>
 
-        <div className="flex justify-end gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-          <Button type="button" variant="ghost" onClick={onCancel}>
+          <Button type="button" variant="ghost" className="whitespace-nowrap sm:w-auto" onClick={onCancel}>
             Cancelar
           </Button>
-          <Button type="submit">
+          <Button type="submit" className="whitespace-nowrap sm:w-auto">
             <IconPencil className="mr-2 size-4" />
             Salvar contratos
           </Button>

src/components/app-sidebar.tsx

@@ -106,8 +106,8 @@ const navigation: NavigationGroup[] = [
         url: "/admin/companies",
         icon: Building2,
         requiredRole: "admin",
-        children: [{ title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" }],
       },
+      { title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" },
       { title: "Máquinas", url: "/admin/machines", icon: MonitorCog, requiredRole: "admin" },
       { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
     ],

src/components/tickets/ticket-comments.rich.tsx

@@ -42,6 +42,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
   const isManager = normalizedRole === "manager"
   const canStaffComment = hasAssignee || isManager
   const canComment = isRequester || (isStaff && canStaffComment)
+  const allowTicketMentions = normalizedRole === "admin" || normalizedRole === "agent"
   const addComment = useMutation(api.tickets.addComment)
   const removeAttachment = useMutation(api.tickets.removeCommentAttachment)
   const updateComment = useMutation(api.tickets.updateComment)
@@ -303,6 +304,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
                         }
                         disabled={savingCommentId === commentId}
                         placeholder="Edite o comentário..."
+                        ticketMention={{ enabled: allowTicketMentions }}
                       />
                       <div className="mt-3 flex items-center justify-end gap-2">
                         <Button
@@ -381,7 +383,14 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
           </div>
         )}
         <form onSubmit={handleSubmit} className="mt-4 space-y-3">
-          <RichTextEditor value={body} onChange={setBody} placeholder="Escreva um comentário..." className="rounded-2xl border border-slate-200" disabled={!canComment} />
+          <RichTextEditor
+            value={body}
+            onChange={setBody}
+            placeholder="Escreva um comentário..."
+            className="rounded-2xl border border-slate-200"
+            disabled={!canComment}
+            ticketMention={{ enabled: allowTicketMentions }}
+          />
           <Dropzone
             onUploaded={(files) => setAttachmentsToSend((prev) => [...prev, ...files])}
             currentFileCount={attachmentsToSend.length}

src/components/tickets/ticket-summary-header.tsx

@@ -208,6 +208,8 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
   const [pausing, setPausing] = useState(false)
   const [exportingPdf, setExportingPdf] = useState(false)
   const [closeOpen, setCloseOpen] = useState(false)
+  const [assigneeChangeReason, setAssigneeChangeReason] = useState("")
+  const [assigneeReasonError, setAssigneeReasonError] = useState<string | null>(null)
   const selectedCategoryId = categorySelection.categoryId
   const selectedSubcategoryId = categorySelection.subcategoryId
   const dirty = useMemo(
@@ -321,12 +323,25 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
             setAssigneeSelection(currentAssigneeId)
             throw new Error("assignee-not-allowed")
           }
+          const reasonValue = assigneeChangeReason.trim()
+          if (reasonValue.length < 5) {
+            setAssigneeReasonError("Descreva o motivo com pelo menos 5 caracteres.")
+            toast.error("Informe um motivo para registrar a troca do responsável.", { id: "assignee" })
+            return
+          }
+          if (reasonValue.length > 1000) {
+            setAssigneeReasonError("Use no máximo 1.000 caracteres.")
+            toast.error("Reduza o motivo para até 1.000 caracteres.", { id: "assignee" })
+            return
+          }
+          setAssigneeReasonError(null)
           toast.loading("Atualizando responsável...", { id: "assignee" })
           try {
             await changeAssignee({
               ticketId: ticket.id as Id<"tickets">,
               assigneeId: assigneeSelection as Id<"users">,
               actorId: convexUserId as Id<"users">,
+              reason: reasonValue,
             })
             toast.success("Responsável atualizado!", { id: "assignee" })
             if (assigneeSelection) {
@@ -341,6 +356,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
                 })
               }
             }
+            setAssigneeChangeReason("")
           } catch (error) {
             console.error(error)
             toast.error("Não foi possível atualizar o responsável.", { id: "assignee" })
@@ -387,11 +403,15 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
     })
     setQueueSelection(currentQueueName)
     setAssigneeSelection(currentAssigneeId)
+    setAssigneeChangeReason("")
+    setAssigneeReasonError(null)
     setEditing(false)
   }
 
   useEffect(() => {
     if (editing) return
+    setAssigneeChangeReason("")
+    setAssigneeReasonError(null)
     setCategorySelection({
       categoryId: ticket.category?.id ?? "",
       subcategoryId: ticket.subcategory?.id ?? "",
@@ -1097,6 +1117,28 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
             <span className={sectionValueClass}>{assigneeState?.name ?? "Não atribuído"}</span>
           )}
         </div>
+        {editing && assigneeDirty ? (
+          <div className="flex flex-col gap-2 sm:col-span-2 lg:col-span-3">
+            <span className={sectionLabelClass}>Motivo da troca</span>
+            <Textarea
+              value={assigneeChangeReason}
+              onChange={(event) => {
+                setAssigneeChangeReason(event.target.value)
+                if (assigneeReasonError) {
+                  setAssigneeReasonError(null)
+                }
+              }}
+              placeholder="Explique brevemente por que o chamado será reatribuído..."
+              className="min-h-[96px]"
+            />
+            <p className="text-xs text-neutral-500">
+              O motivo é registrado como comentário interno visível para administradores e agentes.
+            </p>
+            {assigneeReasonError ? (
+              <p className="text-xs font-semibold text-rose-600">{assigneeReasonError}</p>
+            ) : null}
+          </div>
+        ) : null}
         <div className="flex flex-col gap-1">
           <span className={sectionLabelClass}>Criado em</span>
           <span className={sectionValueClass}>{format(ticket.createdAt, "dd/MM/yyyy HH:mm", { locale: ptBR })}</span>

src/components/ui/rich-text-editor.tsx

@@ -1,11 +1,21 @@
 "use client"
 
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import type { ReactNode } from "react"
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from "@tiptap/extension-link"
 import Placeholder from "@tiptap/extension-placeholder"
+import Mention from "@tiptap/extension-mention"
+import { ReactRenderer } from "@tiptap/react"
+import tippy, { type Instance, type Props as TippyProps } from "tippy.js"
 import { cn } from "@/lib/utils"
 import sanitize from "sanitize-html"
 import { Button } from "@/components/ui/button"
@@ -33,8 +43,356 @@ type RichTextEditorProps = {
   placeholder?: string
   disabled?: boolean
   minHeight?: number
+  ticketMention?: {
+    enabled?: boolean
+  }
 }
 
+type TicketMentionItem = {
+  id: string
+  reference: number
+  subject: string
+  status: string
+  priority: string
+  requesterName: string | null
+  assigneeName: string | null
+  companyName: string | null
+  url: string
+  updatedAt: string
+}
+
+type TicketMentionSuggestionProps = {
+  command: (item: TicketMentionItem) => void
+  items: TicketMentionItem[]
+  onRegister?: (handler: ((event: KeyboardEvent) => boolean) | null) => void
+}
+
+const TICKET_MENTION_CLASS = "ticket-mention"
+
+function formatMentionSubject(subject: string) {
+  if (!subject) return ""
+  return subject.length > 60 ? `${subject.slice(0, 57)}…` : subject
+}
+
+const statusLabels: Record<string, string> = {
+  PENDING: "Pendente",
+  AWAITING_ATTENDANCE: "Em andamento",
+  PAUSED: "Pausado",
+  RESOLVED: "Resolvido",
+}
+
+const statusTone: Record<string, string> = {
+  PENDING: "bg-amber-400",
+  AWAITING_ATTENDANCE: "bg-sky-500",
+  PAUSED: "bg-violet-500",
+  RESOLVED: "bg-emerald-500",
+}
+
+const priorityLabels: Record<string, string> = {
+  LOW: "Baixa",
+  MEDIUM: "Média",
+  HIGH: "Alta",
+  URGENT: "Urgente",
+}
+
+const mentionCache = new Map<string, TicketMentionItem[]>()
+let mentionAbortController: AbortController | null = null
+
+async function fetchTicketMentions(query: string): Promise<TicketMentionItem[]> {
+  const cacheKey = query.trim().toLowerCase()
+  if (mentionCache.has(cacheKey)) {
+    return mentionCache.get(cacheKey) ?? []
+  }
+
+  try {
+    mentionAbortController?.abort()
+    mentionAbortController = new AbortController()
+    const response = await fetch(`/api/tickets/mentions?q=${encodeURIComponent(query)}`, {
+      signal: mentionAbortController.signal,
+    })
+    if (!response.ok) {
+      return []
+    }
+    const json = (await response.json()) as { items?: TicketMentionItem[] }
+    const items = Array.isArray(json.items) ? json.items : []
+    mentionCache.set(cacheKey, items)
+    return items
+  } catch (error) {
+    if ((error as Error).name === "AbortError") {
+      return []
+    }
+    return []
+  }
+}
+
+function TicketMentionList({ items, command, onRegister }: TicketMentionSuggestionProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const selectItem = useCallback(
+    (index: number) => {
+      const item = items[index]
+      if (item) {
+        command(item)
+      }
+    },
+    [command, items]
+  )
+
+  const upHandler = useCallback(() => {
+    setSelectedIndex((prev) => {
+      const nextIndex = (prev + items.length - 1) % items.length
+      return nextIndex
+    })
+  }, [items.length])
+
+  const downHandler = useCallback(() => {
+    setSelectedIndex((prev) => {
+      const nextIndex = (prev + 1) % items.length
+      return nextIndex
+    })
+  }, [items.length])
+
+  const enterHandler = useCallback(() => {
+    selectItem(selectedIndex)
+  }, [selectItem, selectedIndex])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "ArrowUp") {
+        upHandler()
+        return true
+      }
+      if (event.key === "ArrowDown") {
+        downHandler()
+        return true
+      }
+      if (event.key === "Enter") {
+        enterHandler()
+        return true
+      }
+      return false
+    },
+    [downHandler, enterHandler, upHandler]
+  )
+
+  useEffect(() => {
+    onRegister?.(handleKeyDown)
+    return () => {
+      onRegister?.(null)
+    }
+  }, [handleKeyDown, onRegister])
+
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [items])
+
+  if (!items.length) {
+    return (
+      <div className="min-w-[260px] p-3 text-sm text-muted-foreground">
+        Nenhum chamado encontrado com esse termo.
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-h-72 min-w-[320px] space-y-1 overflow-y-auto p-2">
+      {items.map((item, index) => {
+        const isActive = index === selectedIndex
+        const status = statusLabels[item.status] ?? item.status
+        const statusDot = statusTone[item.status] ?? "bg-slate-400"
+        const priority = priorityLabels[item.priority] ?? item.priority
+        return (
+          <button
+            key={item.id}
+            type="button"
+            className={cn(
+              "w-full rounded-lg border border-transparent px-3 py-2 text-left transition",
+              isActive ? "border-slate-200 bg-slate-100" : "hover:bg-slate-50"
+            )}
+            onMouseEnter={() => setSelectedIndex(index)}
+            onMouseDown={(event) => {
+              event.preventDefault()
+              selectItem(index)
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-neutral-900">#{item.reference}</span>
+              <span className="text-xs font-medium uppercase tracking-wide text-neutral-500">{priority}</span>
+            </div>
+            <div className="mt-1 line-clamp-1 text-sm text-neutral-700">{formatMentionSubject(item.subject)}</div>
+            <div className="mt-1 flex items-center gap-2 text-xs text-neutral-500">
+              <span className="inline-flex items-center gap-1">
+                <span className={cn("inline-flex size-2 rounded-full", statusDot)} />
+                {status}
+              </span>
+              {item.companyName ? <span>• {item.companyName}</span> : null}
+              {item.assigneeName ? <span>• {item.assigneeName}</span> : null}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+TicketMentionList.displayName = "TicketMentionList"
+
+const TicketMentionListComponent = (props: TicketMentionSuggestionProps) => (
+  <TicketMentionList {...props} />
+)
+
+const TicketMentionExtension = Mention.extend({
+  name: "ticketMention",
+  addAttributes() {
+    return {
+      id: { default: null },
+      reference: { default: null },
+      subject: { default: null },
+      status: { default: null },
+      priority: { default: null },
+      url: { default: null },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: `a[data-ticket-mention="true"]`,
+        getAttrs: (dom: HTMLElement | string) => {
+          if (dom instanceof HTMLElement) {
+            return {
+              id: dom.dataset.ticketId ?? null,
+              reference: dom.dataset.ticketReference ?? null,
+              status: dom.dataset.ticketStatus ?? null,
+              priority: dom.dataset.ticketPriority ?? null,
+              subject: dom.getAttribute("data-ticket-subject") ?? dom.textContent ?? null,
+              url: dom.getAttribute("href") ?? null,
+            }
+          }
+          return {}
+        },
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+    const referenceValue =
+      HTMLAttributes.reference ?? HTMLAttributes["data-ticket-reference"] ?? ""
+    const reference = String(referenceValue ?? "")
+    const subjectValue =
+      HTMLAttributes.subject ?? HTMLAttributes["data-ticket-subject"] ?? ""
+    const subject = String(subjectValue ?? "")
+    const status = String(HTMLAttributes.status ?? HTMLAttributes["data-ticket-status"] ?? "PENDING").toUpperCase()
+    const priority = String(HTMLAttributes.priority ?? HTMLAttributes["data-ticket-priority"] ?? "MEDIUM").toUpperCase()
+    const href = String(HTMLAttributes.url ?? HTMLAttributes.href ?? "#")
+    return [
+      "a",
+      {
+        ...HTMLAttributes,
+        href,
+        "data-ticket-mention": "true",
+        "data-ticket-id": HTMLAttributes.id ?? HTMLAttributes["data-ticket-id"] ?? "",
+        "data-ticket-reference": reference ?? "",
+        "data-ticket-status": status,
+        "data-ticket-priority": priority,
+        "data-ticket-subject": subject ?? "",
+        class: TICKET_MENTION_CLASS,
+      },
+      [
+        "span",
+        { class: "ticket-mention-dot" },
+      ],
+      [
+        "span",
+        { class: "ticket-mention-ref" },
+        `#${reference ?? ""}`,
+      ],
+      [
+        "span",
+        { class: "ticket-mention-sep" },
+        "•",
+      ],
+      [
+        "span",
+        { class: "ticket-mention-subject" },
+        formatMentionSubject(subject ?? ""),
+      ],
+    ]
+  },
+  renderLabel({ node }: { node: { attrs: Record<string, unknown> } }) {
+    const subjectAttr = node.attrs.subject ?? node.attrs["data-ticket-subject"] ?? ""
+    const displayedSubject = typeof subjectAttr === "string" ? subjectAttr : String(subjectAttr ?? "")
+    const refAttr = node.attrs.reference ?? node.attrs.id ?? node.attrs["data-ticket-reference"] ?? ""
+    const reference = typeof refAttr === "string" ? refAttr : String(refAttr ?? "")
+    const subjectPart = displayedSubject ? ` • ${formatMentionSubject(displayedSubject)}` : ""
+    return `#${reference}${subjectPart}`
+  },
+}).configure({
+  suggestion: {
+    char: "@",
+    startOfLine: false,
+    allowSpaces: false,
+    render: () => {
+      let component: ReactRenderer | null = null
+      let popup: Instance<TippyProps> | null = null
+      let keydownHandler: ((event: KeyboardEvent) => boolean) | null = null
+      const registerHandler = (handler: ((event: KeyboardEvent) => boolean) | null) => {
+        keydownHandler = handler
+      }
+      return {
+        onStart: (props) => {
+          const listProps: TicketMentionSuggestionProps = {
+            command: props.command,
+            items: props.items,
+            onRegister: registerHandler,
+          }
+          component = new ReactRenderer(TicketMentionListComponent, {
+            props: listProps,
+            editor: props.editor,
+          })
+          if (!props.clientRect) return
+          popup = tippy(document.body, {
+            getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+          })
+        },
+        onUpdate(props) {
+          component?.updateProps({
+            command: props.command,
+            items: props.items,
+            onRegister: registerHandler,
+          })
+          if (!props.clientRect) return
+          popup?.setProps({
+            getReferenceClientRect: () => props.clientRect?.() ?? new DOMRect(),
+          })
+        },
+        onKeyDown(props) {
+          if (props.event.key === "Escape") {
+            popup?.hide()
+            return true
+          }
+          if (keydownHandler && keydownHandler(props.event)) {
+            return true
+          }
+          return false
+        },
+        onExit() {
+          popup?.destroy()
+          component?.destroy()
+          keydownHandler = null
+        },
+      }
+    },
+    items: async ({ query }) => {
+      return fetchTicketMentions(query)
+    },
+  },
+})
+
 export function RichTextEditor({
   value,
   onChange,
@@ -42,9 +400,10 @@ export function RichTextEditor({
   placeholder = "Escreva aqui...",
   disabled,
   minHeight = 120,
+  ticketMention,
 }: RichTextEditorProps) {
-  const editor = useEditor({
+  const extensions = useMemo(() => {
-    extensions: [
+    const baseExtensions = [
       StarterKit.configure({
         bulletList: { keepMarks: true },
         orderedList: { keepMarks: true },
@@ -56,6 +415,13 @@ export function RichTextEditor({
         HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
       }),
       Placeholder.configure({ placeholder }),
+    ]
+    return ticketMention?.enabled ? [...baseExtensions, TicketMentionExtension] : baseExtensions
+  }, [placeholder, ticketMention?.enabled])
+
+  const editor = useEditor({
+    extensions: [
+      ...extensions,
     ],
     editorProps: {
       attributes: {
@@ -300,15 +666,48 @@ export function sanitizeEditorHtml(html: string): string {
         "p","br","a","strong","em","u","s","blockquote","ul","ol","li","code","pre","span","h1","h2","h3"
       ],
       allowedAttributes: {
-        a: ["href","name","target","rel"],
+        a: [
-        span: ["style"],
+          "href",
+          "name",
+          "target",
+          "rel",
+          "class",
+          "data-ticket-mention",
+          "data-ticket-id",
+          "data-ticket-reference",
+          "data-ticket-status",
+          "data-ticket-priority",
+          "data-ticket-subject",
+          "title",
+        ],
+        span: [
+          "style",
+          "class",
+          "data-ticket-mention",
+          "data-ticket-id",
+          "data-ticket-reference",
+          "data-ticket-status",
+          "data-ticket-priority",
+          "data-ticket-subject",
+        ],
         code: ["class"],
         pre: ["class"],
       },
       allowedSchemes: ["http","https","mailto"],
       // prevent target=_self phishing
       transformTags: {
-        a: sanitize.simpleTransform("a", { rel: "noopener noreferrer", target: "_blank" }, true),
+        a: (tagName, attribs) => {
+          const isMention = attribs["data-ticket-mention"] === "true"
+          const nextAttribs = {
+            ...attribs,
+            rel: attribs.rel ?? "noopener noreferrer",
+            target: isMention ? "_self" : "_blank",
+          }
+          return {
+            tagName,
+            attribs: nextAttribs,
+          }
+        },
       },
       // disallow inline event handlers
       allowVulnerableTags: false,

tests/change-assignee-comment.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest"
+
+import { buildAssigneeChangeComment } from "../convex/tickets"
+
+describe("buildAssigneeChangeComment", () => {
+  it("inclui nomes antigos e novos e quebra o motivo em parágrafos", () => {
+    const html = buildAssigneeChangeComment("Transferir para o time B\nCliente solicitou gestor.", {
+      previousName: "Ana",
+      nextName: "Bruno",
+    })
+
+    expect(html).toContain("Ana")
+    expect(html).toContain("Bruno")
+    expect(html).toContain("<p>Transferir para o time B</p>")
+    expect(html).toContain("<p>Cliente solicitou gestor.</p>")
+  })
+
+  it("escapa caracteres perigosos", () => {
+    const html = buildAssigneeChangeComment("<script>alert(1)</script>", {
+      previousName: "<Ana>",
+      nextName: "Bruno & Co",
+    })
+
+    expect(html).toContain("&lt;Ana&gt;")
+    expect(html).toContain("Bruno &amp; Co")
+    expect(html).not.toContain("<script>")
+  })
+})
+