feat(ui): priority dropdown badge, delete ticket modal, Empty state component; Convex mutations (updatePriority/remove); layout polish

- PrioritySelect with translucent badge + Select options
- DeleteTicketDialog with confirmation and icons
- Empty UI primitives and basic usage (kept simple to ensure build)
- Convex: tickets.updatePriority & tickets.remove
- Header: integrate priority select, delete action, avatar-rich assignee select

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

@@ -16,6 +16,8 @@ import type { TicketWithDetails, TicketQueueSummary, TicketStatus } from "@/lib/
 import { Badge } from "@/components/ui/badge"
 import { Separator } from "@/components/ui/separator"
 import { TicketPriorityPill } from "@/components/tickets/priority-pill"
+import { PrioritySelect } from "@/components/tickets/priority-select"
+import { DeleteTicketDialog } from "@/components/tickets/delete-ticket-dialog"
 import { TicketStatusBadge } from "@/components/tickets/status-badge"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 
@@ -47,7 +49,7 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
             <Badge variant="outline" className="rounded-full px-3 py-1 text-xs uppercase tracking-wide">
               #{ticket.reference}
             </Badge>
-            <TicketPriorityPill priority={ticket.priority} />
+            <PrioritySelect ticketId={ticket.id as any} value={ticket.priority as any} />
             <TicketStatusBadge status={status} />
             <Select
               value={status}
@@ -77,6 +79,9 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
           </div>
           <h1 className="text-2xl font-semibold text-foreground break-words">{ticket.subject}</h1>
           <p className="max-w-2xl text-sm text-muted-foreground">{ticket.summary}</p>
+          <div className="ms-auto flex items-center gap-2">
+            <DeleteTicketDialog ticketId={ticket.id as any} />
+          </div>
         </div>
       </div>
       <Separator />
@@ -103,10 +108,18 @@ export function TicketSummaryHeader({ ticket }: TicketHeaderProps) {
               }
             }}
           >
-            <SelectTrigger className="h-8 w-[180px]"><SelectValue placeholder="Selecionar" /></SelectTrigger>
+            <SelectTrigger className="h-8 w-[220px]"><SelectValue placeholder="Selecionar" /></SelectTrigger>
             <SelectContent>
               {agents.map((a) => (
-                <SelectItem key={a._id} value={a._id}>{a.name}</SelectItem>
+                <SelectItem key={a._id} value={a._id}>
+                  <span className="inline-flex items-center gap-2">
+                    <span className="inline-flex size-6 items-center justify-center overflow-hidden rounded-full bg-muted">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      {a.avatarUrl ? <img src={a.avatarUrl} alt={a.name} className="h-6 w-6 rounded-full object-cover" /> : <span className="text-[10px] font-medium">{a.name.split(' ').slice(0,2).map(p=>p[0]).join('').toUpperCase()}</span>}
+                    </span>
+                    {a.name}
+                  </span>
+                </SelectItem>
               ))}
             </SelectContent>
           </Select>