feat: preview de imagens com modal, download com nome correto; cartões (Conversa/Detalhes/Timeline) com sombra e padding; alias '@/convex/_generated/api'; payloads legíveis (nome de fila/responsável, label de status) e timeline amigável; Dropzone no 'Novo ticket' com comentário inicial; microtipografia refinada

web/src/components/tickets/recent-tickets-panel.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useQuery } from "convex/react";
+// @ts-ignore
+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 { Spinner } from "@/components/ui/spinner";
+
+export function RecentTicketsPanel() {
+  const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 10 });
+  if (ticketsRaw === undefined) {
+    return (
+      <div className="rounded-xl border bg-card p-6 text-sm text-muted-foreground">
+        <Spinner className="me-2" /> Carregando tickets…
+      </div>
+    );
+  }
+  const tickets = mapTicketsFromServerList(ticketsRaw as any[]);
+  return (
+    <div className="rounded-xl border bg-card">
+      <TicketsTable tickets={tickets as any} />
+    </div>
+  );
+}