From a564cd2de722e0b60980a60a34fa897637ea5815 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 02:13:32 -0300
Subject: [PATCH 1/6] fix: stabilize dashboard chart layout

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 web/src/app/dashboard/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/app/dashboard/page.tsx b/web/src/app/dashboard/page.tsx
index 14b9a99..4a0908a 100644
--- a/web/src/app/dashboard/page.tsx
+++ b/web/src/app/dashboard/page.tsx
@@ -17,7 +17,7 @@ export default function Dashboard() {
       }
     >
       <SectionCards />
-      <div className="grid gap-6 px-4 lg:grid-cols-[1.1fr_0.9fr] lg:px-6">
+      <div className="grid gap-6 px-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] lg:px-6 lg:[&>*]:min-w-0">
         <ChartAreaInteractive />
         <RecentTicketsPanel />
       </div>

From 0abb425d51c44d87497e979b3828439c3b50707d Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 02:16:53 -0300
Subject: [PATCH 2/6] feat: compact recent tickets panel on dashboard

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .../tickets/recent-tickets-panel.tsx          | 135 ++++++++++++++----
 1 file changed, 110 insertions(+), 25 deletions(-)

diff --git a/web/src/components/tickets/recent-tickets-panel.tsx b/web/src/components/tickets/recent-tickets-panel.tsx
index 17d587b..a41b65f 100644
--- a/web/src/components/tickets/recent-tickets-panel.tsx
+++ b/web/src/components/tickets/recent-tickets-panel.tsx
@@ -1,32 +1,117 @@
-"use client";
+"use client"
 
-import { useQuery } from "convex/react";
+import Link from "next/link"
+import { formatDistanceToNow } from "date-fns"
+import { ptBR } from "date-fns/locale"
+import { useQuery } from "convex/react"
 // @ts-expect-error Convex runtime API lacks TS declarations
-import { api } from "@/convex/_generated/api";
-import { DEFAULT_TENANT_ID } from "@/lib/constants";
-import { mapTicketsFromServerList } from "@/lib/mappers/ticket";
-import { TicketsTable } from "@/components/tickets/tickets-table";
+import { api } from "@/convex/_generated/api"
+import { DEFAULT_TENANT_ID } from "@/lib/constants"
+import { mapTicketsFromServerList } from "@/lib/mappers/ticket"
+import type { Ticket } from "@/lib/schemas/ticket"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { TicketPriorityPill } from "@/components/tickets/priority-pill"
+import { TicketStatusBadge } from "@/components/tickets/status-badge"
 
-export function RecentTicketsPanel() {
-  const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 10 });
-  if (ticketsRaw === undefined) {
-    return (
-      <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
-        <div className="grid gap-3">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="flex items-center justify-between gap-3">
-              <div className="h-4 w-56 animate-pulse rounded bg-slate-100" />
-              <div className="h-4 w-20 animate-pulse rounded bg-slate-100" />
-            </div>
-          ))}
+const metaBadgeClass =
+  "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700"
+
+const channelLabel: Record<string, string> = {
+  EMAIL: "E-mail",
+  WHATSAPP: "WhatsApp",
+  CHAT: "Chat",
+  PHONE: "Telefone",
+  API: "API",
+  MANUAL: "Manual",
+}
+
+function TicketRow({ ticket }: { ticket: Ticket }) {
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white/60 p-4 transition hover:border-slate-300 hover:bg-white">
+      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+        <div className="min-w-0 space-y-2">
+          <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
+            <span className="text-neutral-900">#{ticket.reference}</span>
+            <span className="rounded-full bg-[#00e8ff]/15 px-2 py-0.5 text-[11px] font-semibold text-[#006879]">
+              {ticket.queue ?? "Sem fila"}
+            </span>
+          </div>
+          <div className="space-y-1">
+            <Link href={`/tickets/${ticket.id}`} className="line-clamp-1 text-base font-semibold text-neutral-900 transition hover:text-neutral-700">
+              {ticket.subject}
+            </Link>
+            <p className="line-clamp-2 text-sm text-neutral-600">{ticket.summary ?? "Sem resumo"}</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
+            <span className="font-semibold text-neutral-700">{ticket.requester.name}</span>
+            <span className="text-neutral-400">•</span>
+            <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-stretch gap-2 text-right">
+          <TicketStatusBadge status={ticket.status} />
+          <TicketPriorityPill priority={ticket.priority} />
+          <div className="flex flex-wrap justify-end gap-2 text-xs">
+            <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
+            <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
+            {ticket.category ? (
+              <Badge className="inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
+                {ticket.category.name}
+                {ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
+              </Badge>
+            ) : (
+              <Badge className={metaBadgeClass}>Sem categoria</Badge>
+            )}
+          </div>
         </div>
       </div>
-    );
-  }
-  const tickets = mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]);
-  return (
-    <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
-      <TicketsTable tickets={tickets} />
     </div>
-  );
+  )
+}
+
+export function RecentTicketsPanel() {
+  const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 6 })
+
+  if (ticketsRaw === undefined) {
+    return (
+      <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold text-neutral-900">Últimos chamados</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="rounded-xl border border-slate-100 bg-slate-50/60 p-4">
+              <Skeleton className="mb-2 h-4 w-48" />
+              <Skeleton className="h-3 w-64" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const tickets = mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]).slice(0, 6)
+
+  return (
+    <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+      <CardHeader className="flex flex-row items-center justify-between pb-4">
+        <CardTitle className="text-base font-semibold text-neutral-900">Últimos chamados</CardTitle>
+        <Button asChild size="sm" variant="ghost" className="text-sm font-semibold text-[#006879] hover:bg-[#00e8ff]/10">
+          <Link href="/tickets">Ver todos</Link>
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {tickets.length === 0 ? (
+          <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/80 p-6 text-center text-sm text-neutral-600">
+            Nenhum ticket recente encontrado.
+          </div>
+        ) : (
+          tickets.map((ticket) => <TicketRow key={ticket.id} ticket={ticket} />)
+        )}
+      </CardContent>
+    </Card>
+  )
 }

From d73b1e44685b07355212b43dd6bd8b8c7191ea34 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 02:19:21 -0300
Subject: [PATCH 3/6] style: align badges in dashboard tickets panel

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .../tickets/recent-tickets-panel.tsx          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/web/src/components/tickets/recent-tickets-panel.tsx b/web/src/components/tickets/recent-tickets-panel.tsx
index a41b65f..67ffb74 100644
--- a/web/src/components/tickets/recent-tickets-panel.tsx
+++ b/web/src/components/tickets/recent-tickets-panel.tsx
@@ -31,7 +31,7 @@ const channelLabel: Record<string, string> = {
 function TicketRow({ ticket }: { ticket: Ticket }) {
   return (
     <div className="rounded-xl border border-slate-200 bg-white/60 p-4 transition hover:border-slate-300 hover:bg-white">
-      <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
         <div className="min-w-0 space-y-2">
           <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
             <span className="text-neutral-900">#{ticket.reference}</span>
@@ -51,19 +51,25 @@ function TicketRow({ ticket }: { ticket: Ticket }) {
             <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
           </div>
         </div>
-        <div className="flex shrink-0 flex-col items-stretch gap-2 text-right">
-          <TicketStatusBadge status={ticket.status} />
-          <TicketPriorityPill priority={ticket.priority} />
-          <div className="flex flex-wrap justify-end gap-2 text-xs">
-            <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
-            <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
+        <div className="flex shrink-0 flex-col gap-3 text-right md:w-[240px]">
+          <div className="flex flex-wrap justify-end gap-2">
+            <TicketStatusBadge status={ticket.status} />
+            <TicketPriorityPill priority={ticket.priority} />
+          </div>
+          <div className="grid gap-2 text-xs text-neutral-600">
+            <div className="flex flex-wrap justify-end gap-x-2 gap-y-1">
+              <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
+              <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
+            </div>
             {ticket.category ? (
-              <Badge className="inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
+              <Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
                 {ticket.category.name}
                 {ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
               </Badge>
             ) : (
-              <Badge className={metaBadgeClass}>Sem categoria</Badge>
+              <Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700">
+                Sem categoria
+              </Badge>
             )}
           </div>
         </div>

From de7314cff10ccb949781390cfcf08f52f2cdc594 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 02:22:12 -0300
Subject: [PATCH 4/6] style: reposition category badge in dashboard tickets

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 .../tickets/recent-tickets-panel.tsx          | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/web/src/components/tickets/recent-tickets-panel.tsx b/web/src/components/tickets/recent-tickets-panel.tsx
index 67ffb74..0b77068 100644
--- a/web/src/components/tickets/recent-tickets-panel.tsx
+++ b/web/src/components/tickets/recent-tickets-panel.tsx
@@ -50,27 +50,25 @@ function TicketRow({ ticket }: { ticket: Ticket }) {
             <span className="text-neutral-400">•</span>
             <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
           </div>
+          {ticket.category ? (
+            <Badge className="inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
+              {ticket.category.name}
+              {ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
+            </Badge>
+          ) : (
+            <Badge className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700">
+              Sem categoria
+            </Badge>
+          )}
         </div>
-        <div className="flex shrink-0 flex-col gap-3 text-right md:w-[240px]">
+        <div className="flex shrink-0 flex-col gap-3 text-right md:w-[220px]">
           <div className="flex flex-wrap justify-end gap-2">
             <TicketStatusBadge status={ticket.status} />
             <TicketPriorityPill priority={ticket.priority} />
           </div>
-          <div className="grid gap-2 text-xs text-neutral-600">
-            <div className="flex flex-wrap justify-end gap-x-2 gap-y-1">
-              <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
-              <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
-            </div>
-            {ticket.category ? (
-              <Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
-                {ticket.category.name}
-                {ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
-              </Badge>
-            ) : (
-              <Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700">
-                Sem categoria
-              </Badge>
-            )}
+          <div className="flex flex-wrap justify-end gap-x-2 gap-y-1 text-xs text-neutral-600">
+            <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
+            <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
           </div>
         </div>
       </div>

From 9b16f3cd1eeff808adb1d666426a9f5cbb7f39a5 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 02:27:39 -0300
Subject: [PATCH 5/6] feat: animate realtime recent tickets panel

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 web/src/app/globals.css                       | 15 ++++++
 .../tickets/recent-tickets-panel.tsx          | 48 +++++++++++++++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 2f2ba1d..400c7d2 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -137,4 +137,19 @@
   .rich-text h3 { @apply text-base font-semibold my-2; }
   .rich-text code { @apply rounded bg-muted px-1 py-0.5 text-xs; }
   .rich-text pre { @apply my-3 overflow-x-auto rounded bg-muted p-3 text-xs; }
+
+  @keyframes recent-ticket-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .recent-ticket-enter {
+    animation: recent-ticket-enter 0.45s ease-out;
+  }
 }
diff --git a/web/src/components/tickets/recent-tickets-panel.tsx b/web/src/components/tickets/recent-tickets-panel.tsx
index 0b77068..d65850c 100644
--- a/web/src/components/tickets/recent-tickets-panel.tsx
+++ b/web/src/components/tickets/recent-tickets-panel.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useMemo, useRef, useState } from "react"
 import Link from "next/link"
 import { formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
@@ -28,9 +29,11 @@ const channelLabel: Record<string, string> = {
   MANUAL: "Manual",
 }
 
-function TicketRow({ ticket }: { ticket: Ticket }) {
+function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
   return (
-    <div className="rounded-xl border border-slate-200 bg-white/60 p-4 transition hover:border-slate-300 hover:bg-white">
+    <div
+      className={`rounded-xl border border-slate-200 bg-white/60 p-4 transition-all duration-300 hover:border-slate-300 hover:bg-white ${entering ? "recent-ticket-enter" : ""}`}
+    >
       <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
         <div className="min-w-0 space-y-2">
           <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
@@ -78,6 +81,41 @@ function TicketRow({ ticket }: { ticket: Ticket }) {
 
 export function RecentTicketsPanel() {
   const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 6 })
+  const [enteringId, setEnteringId] = useState<string | null>(null)
+  const previousIdsRef = useRef<string[]>([])
+
+  const tickets = useMemo(
+    () => mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]).slice(0, 6),
+    [ticketsRaw]
+  )
+
+  useEffect(() => {
+    if (ticketsRaw === undefined) {
+      previousIdsRef.current = []
+      return
+    }
+    const ids = tickets.map((ticket) => ticket.id)
+    const previous = previousIdsRef.current
+    if (!ids.length) {
+      previousIdsRef.current = ids
+      return
+    }
+    if (!previous.length) {
+      previousIdsRef.current = ids
+      return
+    }
+    const topId = ids[0]
+    if (!previous.includes(topId)) {
+      setEnteringId(topId)
+    }
+    previousIdsRef.current = ids
+  }, [tickets, ticketsRaw])
+
+  useEffect(() => {
+    if (!enteringId) return
+    const timer = window.setTimeout(() => setEnteringId(null), 600)
+    return () => window.clearTimeout(timer)
+  }, [enteringId])
 
   if (ticketsRaw === undefined) {
     return (
@@ -97,8 +135,6 @@ export function RecentTicketsPanel() {
     )
   }
 
-  const tickets = mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]).slice(0, 6)
-
   return (
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="flex flex-row items-center justify-between pb-4">
@@ -113,7 +149,9 @@ export function RecentTicketsPanel() {
             Nenhum ticket recente encontrado.
           </div>
         ) : (
-          tickets.map((ticket) => <TicketRow key={ticket.id} ticket={ticket} />)
+          tickets.map((ticket) => (
+            <TicketRow key={ticket.id} ticket={ticket} entering={ticket.id === enteringId} />
+          ))
         )}
       </CardContent>
     </Card>

From c5864dbefdfb801d10e2f4051893edc3c90d6c2b Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 03:12:53 -0300
Subject: [PATCH 6/6] feat: refine ticket creation and comments experience

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 web/src/app/globals.css                       |  10 +
 .../components/tickets/category-select.tsx    |   6 +-
 .../components/tickets/new-ticket-dialog.tsx  | 323 ++++++++++--------
 .../tickets/ticket-comments.rich.tsx          |   2 +-
 web/src/components/tickets/tickets-table.tsx  |  34 +-
 5 files changed, 216 insertions(+), 159 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 400c7d2..fcd5555 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -138,6 +138,16 @@
   .rich-text code { @apply rounded bg-muted px-1 py-0.5 text-xs; }
   .rich-text pre { @apply my-3 overflow-x-auto rounded bg-muted p-3 text-xs; }
 
+  .rich-text .ProseMirror.is-editor-empty::before,
+  .rich-text .ProseMirror p.is-editor-empty:first-child::before {
+    color: #94a3b8;
+    content: attr(data-placeholder);
+    pointer-events: none;
+    height: 0;
+    float: left;
+    font-weight: 400;
+  }
+
   @keyframes recent-ticket-enter {
     0% {
       opacity: 0;
diff --git a/web/src/components/tickets/category-select.tsx b/web/src/components/tickets/category-select.tsx
index 522fdcf..679e860 100644
--- a/web/src/components/tickets/category-select.tsx
+++ b/web/src/components/tickets/category-select.tsx
@@ -25,6 +25,7 @@ interface CategorySelectProps {
   subcategoryLabel?: string
   className?: string
   secondaryEmptyLabel?: string
+  layout?: "grid" | "stacked"
 }
 
 function findCategory(categories: TicketCategory[], categoryId: string | null) {
@@ -44,6 +45,7 @@ export function CategorySelectFields({
   subcategoryLabel = "Secundária",
   secondaryEmptyLabel = "Selecione uma categoria primária",
   className,
+  layout = "grid",
 }: CategorySelectProps) {
   const { categories, isLoading } = useTicketCategories(tenantId)
   const activeCategory = useMemo(() => findCategory(categories, categoryId), [categories, categoryId])
@@ -74,8 +76,10 @@ export function CategorySelectFields({
     }
   }, [categoryId, secondaryOptions, subcategoryId, onSubcategoryChange])
 
+  const containerClass = layout === "stacked" ? "flex flex-col gap-3" : "grid gap-3 sm:grid-cols-2"
+
   return (
-    <div className={cn("grid gap-3 sm:grid-cols-2", className)}>
+    <div className={cn(containerClass, className)}>
       <div className="space-y-1.5">
         <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
           <IconFolders className="size-3.5" /> {categoryLabel}
diff --git a/web/src/components/tickets/new-ticket-dialog.tsx b/web/src/components/tickets/new-ticket-dialog.tsx
index e070859..d3b993e 100644
--- a/web/src/components/tickets/new-ticket-dialog.tsx
+++ b/web/src/components/tickets/new-ticket-dialog.tsx
@@ -20,19 +20,14 @@ import { toast } from "sonner"
 import { Spinner } from "@/components/ui/spinner"
 import { Dropzone } from "@/components/ui/dropzone"
 import { RichTextEditor } from "@/components/ui/rich-text-editor"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
 import {
   PriorityIcon,
-  priorityBadgeClass,
-  priorityItemClass,
   priorityStyles,
-  priorityTriggerClass,
 } from "@/components/tickets/priority-select"
 import { CategorySelectFields } from "@/components/tickets/category-select"
 
 const schema = z.object({
-  subject: z.string().min(3, "Informe um assunto"),
+  subject: z.string().optional(),
   summary: z.string().optional(),
   description: z.string().optional(),
   priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
@@ -70,9 +65,36 @@ export function NewTicketDialog() {
   const queueValue = form.watch("queueName") ?? "NONE"
   const categoryIdValue = form.watch("categoryId")
   const subcategoryIdValue = form.watch("subcategoryId")
+  const isSubmitted = form.formState.isSubmitted
   const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
   const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
 
+  const handleCategoryChange = (value: string) => {
+    const previous = form.getValues("categoryId") ?? ""
+    const next = value ?? ""
+    form.setValue("categoryId", next, {
+      shouldDirty: previous !== next && previous !== "",
+      shouldTouch: true,
+      shouldValidate: isSubmitted,
+    })
+    if (!isSubmitted) {
+      form.clearErrors("categoryId")
+    }
+  }
+
+  const handleSubcategoryChange = (value: string) => {
+    const previous = form.getValues("subcategoryId") ?? ""
+    const next = value ?? ""
+    form.setValue("subcategoryId", next, {
+      shouldDirty: previous !== next && previous !== "",
+      shouldTouch: true,
+      shouldValidate: isSubmitted,
+    })
+    if (!isSubmitted) {
+      form.clearErrors("subcategoryId")
+    }
+  }
+
   async function submit(values: z.infer<typeof schema>) {
     if (!userId) return
     const subjectTrimmed = (values.subject ?? "").trim()
@@ -129,146 +151,159 @@ export function NewTicketDialog() {
           Novo ticket
         </Button>
       </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Novo ticket</DialogTitle>
-          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
-        </DialogHeader>
-        <form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="subject">Assunto</FieldLabel>
-                <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
-                <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="summary">Resumo</FieldLabel>
-                <textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} {...form.register("summary")} />
-              </Field>
-              <Field>
-                <FieldLabel>Descrição</FieldLabel>
-                <RichTextEditor
-                  value={form.watch("description") || ""}
-                  onChange={(html) => form.setValue("description", html)}
-                  placeholder="Detalhe o problema, passos para reproduzir, links, etc."
-                />
-              </Field>
-              <Field>
-                <FieldLabel>Anexos</FieldLabel>
-                <Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
-                <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
-              </Field>
-              <Field>
-                <CategorySelectFields
-                  tenantId={DEFAULT_TENANT_ID}
-                  categoryId={categoryIdValue || null}
-                  subcategoryId={subcategoryIdValue || null}
-                  onCategoryChange={(value) => {
-                    form.setValue("categoryId", value, { shouldDirty: true, shouldValidate: true })
-                  }}
-                  onSubcategoryChange={(value) => {
-                    form.setValue("subcategoryId", value, { shouldDirty: true, shouldValidate: true })
-                  }}
-                />
-                {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
-                  <FieldError className="mt-1 space-y-0.5">
-                    <>
-                      {form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
-                      {form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
-                    </>
-                  </FieldError>
-                ) : null}
-              </Field>
-              <div className="grid gap-3 sm:grid-cols-3">
-                <Field>
-                  <FieldLabel>Prioridade</FieldLabel>
-                  <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
-                    <SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between")}>
-                      <SelectValue>
-                        <Badge className={cn(priorityBadgeClass, priorityStyles[priorityValue]?.badgeClass)}>
-                          <PriorityIcon value={priorityValue} />
-                          {priorityStyles[priorityValue]?.label ?? priorityValue}
-                        </Badge>
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
-                        <SelectItem key={option} value={option} className={priorityItemClass}>
-                          <span className="inline-flex items-center gap-2">
-                            <PriorityIcon value={option} />
-                            {priorityStyles[option].label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel>Canal</FieldLabel>
-                  <Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
-                    <SelectTrigger className={selectTriggerClass}>
-                      <SelectValue placeholder="Canal" />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      <SelectItem value="EMAIL" className={selectItemClass}>
-                        E-mail
-                      </SelectItem>
-                      <SelectItem value="WHATSAPP" className={selectItemClass}>
-                        WhatsApp
-                      </SelectItem>
-                      <SelectItem value="CHAT" className={selectItemClass}>
-                        Chat
-                      </SelectItem>
-                      <SelectItem value="PHONE" className={selectItemClass}>
-                        Telefone
-                      </SelectItem>
-                      <SelectItem value="API" className={selectItemClass}>
-                        API
-                      </SelectItem>
-                      <SelectItem value="MANUAL" className={selectItemClass}>
-                        Manual
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel>Fila</FieldLabel>
-                  <Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
-                    <SelectTrigger className={selectTriggerClass}>
-                      <SelectValue placeholder="Sem fila" />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      <SelectItem value="NONE" className={selectItemClass}>
-                        Sem fila
-                      </SelectItem>
-                      {queues.map((q) => (
-                        <SelectItem key={q.id} value={q.name} className={selectItemClass}>
-                          {q.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
+      <DialogContent className="max-w-4xl gap-0 overflow-hidden rounded-3xl border border-slate-200 bg-white p-0 shadow-2xl lg:max-w-5xl">
+        <div className="max-h-[88vh] overflow-y-auto">
+          <div className="space-y-5 px-6 py-7 sm:px-8 md:px-10">
+            <form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
+              <div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
+                <DialogHeader className="gap-1.5 p-0">
+                  <DialogTitle className="text-xl font-semibold text-neutral-900">Novo ticket</DialogTitle>
+                  <DialogDescription className="text-sm text-neutral-600">
+                    Preencha as informações básicas para abrir um chamado.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex justify-end md:min-w-[140px]">
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30 disabled:opacity-60"
+                  >
+                    {loading ? (
+                      <>
+                        <Spinner className="me-2" /> Criando…
+                      </>
+                    ) : (
+                      "Criar"
+                    )}
+                  </Button>
+                </div>
               </div>
-            </FieldGroup>
-          </FieldSet>
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              disabled={loading}
-              className="rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30 disabled:opacity-60"
-            >
-              {loading ? (
-                <>
-                  <Spinner className="me-2" /> Criando…
-                </>
-              ) : (
-                "Criar"
-              )}
-            </Button>
+              <FieldSet>
+                <FieldGroup className="lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
+                  <div className="space-y-4">
+                    <Field>
+                      <FieldLabel htmlFor="subject">Assunto</FieldLabel>
+                      <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
+                      <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor="summary">Resumo</FieldLabel>
+                      <textarea
+                        id="summary"
+                        className="min-h-[96px] w-full rounded-lg border border-slate-300 bg-background p-3 text-sm shadow-sm focus-visible:border-[#00d6eb] focus-visible:outline-none"
+                        {...form.register("summary")}
+                      />
+                    </Field>
+                    <Field>
+                      <FieldLabel>Descrição</FieldLabel>
+                      <RichTextEditor
+                        value={form.watch("description") || ""}
+                        onChange={(html) => form.setValue("description", html)}
+                        placeholder="Detalhe o problema, passos para reproduzir, links, etc."
+                      />
+                    </Field>
+                    <Field>
+                      <FieldLabel>Anexos</FieldLabel>
+                      <Dropzone
+                        onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
+                        className="space-y-1.5 [&>div:first-child]:rounded-2xl [&>div:first-child]:p-4 [&>div:first-child]:pb-5 [&>div:first-child]:shadow-sm"
+                      />
+                      <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
+                    </Field>
+                  </div>
+                  <div className="space-y-4">
+                    <Field>
+                      <CategorySelectFields
+                        tenantId={DEFAULT_TENANT_ID}
+                        categoryId={categoryIdValue || null}
+                        subcategoryId={subcategoryIdValue || null}
+                        onCategoryChange={handleCategoryChange}
+                        onSubcategoryChange={handleSubcategoryChange}
+                        categoryLabel="Categoria primária"
+                        subcategoryLabel="Categoria secundária"
+                        layout="stacked"
+                      />
+                      {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
+                        <FieldError className="mt-1 space-y-0.5">
+                          <>
+                            {form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
+                            {form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
+                          </>
+                        </FieldError>
+                      ) : null}
+                    </Field>
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1 xl:gap-4">
+                      <Field>
+                        <FieldLabel>Prioridade</FieldLabel>
+                        <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Escolha a prioridade" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
+                              <SelectItem key={option} value={option} className={selectItemClass}>
+                                <span className="inline-flex items-center gap-2">
+                                  <PriorityIcon value={option} />
+                                  {priorityStyles[option].label}
+                                </span>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <FieldLabel>Canal</FieldLabel>
+                        <Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Canal" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            <SelectItem value="EMAIL" className={selectItemClass}>
+                              E-mail
+                            </SelectItem>
+                            <SelectItem value="WHATSAPP" className={selectItemClass}>
+                              WhatsApp
+                            </SelectItem>
+                            <SelectItem value="CHAT" className={selectItemClass}>
+                              Chat
+                            </SelectItem>
+                            <SelectItem value="PHONE" className={selectItemClass}>
+                              Telefone
+                            </SelectItem>
+                            <SelectItem value="API" className={selectItemClass}>
+                              API
+                            </SelectItem>
+                            <SelectItem value="MANUAL" className={selectItemClass}>
+                              Manual
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <FieldLabel>Fila</FieldLabel>
+                        <Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Sem fila" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            <SelectItem value="NONE" className={selectItemClass}>
+                              Sem fila
+                            </SelectItem>
+                            {queues.map((q) => (
+                              <SelectItem key={q.id} value={q.name} className={selectItemClass}>
+                                {q.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    </div>
+                  </div>
+                </FieldGroup>
+              </FieldSet>
+            </form>
           </div>
-        </form>
+        </div>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/src/components/tickets/ticket-comments.rich.tsx b/web/src/components/tickets/ticket-comments.rich.tsx
index c75f7e0..7855ffd 100644
--- a/web/src/components/tickets/ticket-comments.rich.tsx
+++ b/web/src/components/tickets/ticket-comments.rich.tsx
@@ -177,7 +177,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="px-4 pb-3">
         <CardTitle className="flex items-center gap-2 text-lg font-semibold text-neutral-900">
-          <IconMessage className="size-5 text-neutral-900" /> Conversa
+          <IconMessage className="size-5 text-neutral-900" /> Comentários
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-6 px-4 pb-6">
diff --git a/web/src/components/tickets/tickets-table.tsx b/web/src/components/tickets/tickets-table.tsx
index c168069..5f666ed 100644
--- a/web/src/components/tickets/tickets-table.tsx
+++ b/web/src/components/tickets/tickets-table.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
 
@@ -36,7 +36,8 @@ const cellClass = "px-6 py-5 align-top text-sm text-neutral-700 first:pl-8 last:
 const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
 const channelBadgeClass = "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
 const categoryBadgeClass = "inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-2.5 py-0.5 text-[11px] font-semibold text-[#02414d]"
-const tableRowClass = "group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
+const tableRowClass =
+  "group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
 
 function formatDuration(ms?: number) {
   if (!ms || ms <= 0) return "—"
@@ -88,6 +89,7 @@ export type TicketsTableProps = {
 
 export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
   const [now, setNow] = useState(() => Date.now())
+  const router = useRouter()
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -142,15 +144,24 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
           </TableHeader>
           <TableBody>
             {tickets.map((ticket) => (
-              <TableRow key={ticket.id} className={tableRowClass}>
+              <TableRow
+                key={ticket.id}
+                className={`${tableRowClass} cursor-pointer`}
+                role="link"
+                tabIndex={0}
+                onClick={() => router.push(`/tickets/${ticket.id}`)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault()
+                    router.push(`/tickets/${ticket.id}`)
+                  }
+                }}
+              >
                 <TableCell className={cellClass}>
                   <div className="flex flex-col gap-1">
-                    <Link
-                      href={`/tickets/${ticket.id}`}
-                      className="font-semibold tracking-tight text-neutral-900 transition hover:text-neutral-700"
-                    >
+                    <span className="font-semibold tracking-tight text-neutral-900">
                       #{ticket.reference}
-                    </Link>
+                    </span>
                     <span className="text-xs text-neutral-500">
                       {ticket.queue ?? "Sem fila"}
                     </span>
@@ -158,12 +169,9 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
                 </TableCell>
                 <TableCell className={cellClass}>
                   <div className="flex flex-col gap-1.5">
-                    <Link
-                      href={`/tickets/${ticket.id}`}
-                      className="line-clamp-1 text-[15px] font-semibold text-neutral-900 transition hover:text-neutral-700"
-                    >
+                    <span className="line-clamp-1 text-[15px] font-semibold text-neutral-900">
                       {ticket.subject}
-                    </Link>
+                    </span>
                     <span className="line-clamp-1 text-sm text-neutral-600">
                       {ticket.summary ?? "Sem resumo"}
                     </span>