@adatechnology/conversations-ui 0.1.0-rc.26 → 0.1.0-rc.27

package/src/settings/WhatsAppTemplateSettingsForm.tsx

@@ -132,6 +132,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.templateLabel}</label>
             <button
+              data-cv-tooltip={labels.refreshList} aria-label={labels.refreshList}
               type="button"
               onClick={onRefreshTemplates}
               disabled={loadingTemplates}
@@ -180,6 +181,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.variablesLabel}</label>
             <button
+              data-cv-tooltip={labels.addVariable} aria-label={labels.addVariable}
               type="button"
               onClick={() => onVariablesChange([...variables, ''])}
               className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
@@ -198,7 +200,7 @@ export function WhatsAppTemplateSettingsForm({
                     key={available.token}
                     type="button"
                     onClick={() => insertVariable(available.token)}
-                    title={`Inserir ${available.token}`}
+                    data-cv-tooltip={`Inserir ${available.token}`} aria-label={`Inserir ${available.token}`}
                     className="inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
                   >
                     <code className="text-blue-600 dark:text-blue-300">{available.token}</code>
@@ -233,7 +235,7 @@ export function WhatsAppTemplateSettingsForm({
                   type="button"
                   onClick={() => removeVariable(index)}
                   className="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0"
-                  title={labels.removeVariable}
+                  data-cv-tooltip={labels.removeVariable} aria-label={labels.removeVariable}
                 >
                   <Trash2 size={14} />
                 </button>
@@ -250,6 +252,7 @@ export function WhatsAppTemplateSettingsForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
             type="submit"
             disabled={saving || !selectedTemplateName.trim()}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WhatsAppTemplatesSettings.tsx

@@ -78,6 +78,7 @@ export function WhatsAppTemplatesSettings({
     <div className="space-y-4">
       <nav className="flex gap-1 border-b" role="tablist">
         <button
+          data-cv-tooltip={labels.selectTab} aria-label={labels.selectTab}
           type="button"
           role="tab"
           aria-selected={tab === TEMPLATE_SETTINGS_TAB.SELECT}
@@ -91,6 +92,7 @@ export function WhatsAppTemplatesSettings({
             que não leva a nada. */}
         {create ? (
           <button
+            data-cv-tooltip={labels.createTab} aria-label={labels.createTab}
             type="button"
             role="tab"
             aria-selected={tab === TEMPLATE_SETTINGS_TAB.CREATE}

package/src/styles.css

@@ -22,7 +22,12 @@
 
 /* Botão de ação do cabeçalho de conversa e do aviso de janela. Vive no stylesheet, como o
    .cv-wallpaper, para não depender da configuração de Tailwind do consumidor. */
+/* `inline-flex` com gap em todo controle com ícone: o ícone é SVG e, como elemento inline, assentava
+   na baseline do texto — o traço ficava um fio abaixo do rótulo em cada botão. */
 .cv-header-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.375rem;
   padding: 0.375rem 0.75rem;
@@ -34,6 +39,9 @@
 .dark .cv-header-action { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
 .cv-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.375rem 0.5rem;
@@ -100,6 +108,9 @@
 
 /* Voltar do master/detail: existe só onde lista e conversa não cabem lado a lado. */
 .cv-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.25rem 0.5rem;
@@ -110,6 +121,13 @@
 @media (min-width: 1024px) { .cv-back { display: none; } }
 .dark .cv-back { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
+/* Contador do cabeçalho da inbox: ícone e número na mesma linha de base ótica. */
+.cv-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 /* Utilitários de densidade: em tela estreita o texto das ações vira ícone, porque rótulo longo
    empilha e come a altura útil da conversa. */
 .cv-only-wide { display: none; }
@@ -328,6 +346,9 @@
 }
 
 .cv-workspace-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   border: 1px solid rgb(229 231 235);
   border-radius: 0.375rem;
   padding: 0.5rem 0.75rem;
@@ -495,24 +516,48 @@
 }
 .dark .cv-workspace-search { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
+/* Linha única com rolagem, e não wrap: quebrando, a fila de janelas empurrava a categoria e a
+   lista para baixo toda vez que a coluna estreitava. */
 .cv-workspace-chips {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   font-size: 0.75rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.cv-workspace-chips__legend { color: rgb(107 114 128); }
+.cv-workspace-chips::-webkit-scrollbar { display: none; }
+.cv-workspace-chips__legend { color: rgb(107 114 128); flex-shrink: 0; }
 .cv-workspace-chip {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 0.25rem;
+  white-space: nowrap;
   border-radius: 0.375rem;
   padding: 0.25rem 0.5rem;
 }
 .cv-workspace-chip--on { background: rgb(229 231 235); }
 .dark .cv-workspace-chip--on { background: rgb(51 65 85); }
-.cv-workspace-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
+
+/* A cor do próprio rótulo é o estado da janela; selecionado, o mesmo tom vira o fundo. */
+.cv-workspace-chip--fresh { color: rgb(22 163 74); }
+.cv-workspace-chip--warning { color: rgb(202 138 4); }
+.cv-workspace-chip--critical { color: rgb(220 38 38); }
+.cv-workspace-chip--expired { color: rgb(107 114 128); }
+.cv-workspace-chip--fresh.cv-workspace-chip--on { background: rgb(220 252 231); }
+.cv-workspace-chip--warning.cv-workspace-chip--on { background: rgb(254 249 195); }
+.cv-workspace-chip--critical.cv-workspace-chip--on { background: rgb(254 226 226); }
+.cv-workspace-chip--expired.cv-workspace-chip--on { background: rgb(229 231 235); }
+.dark .cv-workspace-chip--fresh { color: rgb(74 222 128); }
+.dark .cv-workspace-chip--warning { color: rgb(250 204 21); }
+.dark .cv-workspace-chip--critical { color: rgb(248 113 113); }
+.dark .cv-workspace-chip--expired { color: rgb(148 163 184); }
+.dark .cv-workspace-chip--fresh.cv-workspace-chip--on { background: rgb(20 83 45); }
+.dark .cv-workspace-chip--warning.cv-workspace-chip--on { background: rgb(113 63 18); }
+.dark .cv-workspace-chip--critical.cv-workspace-chip--on { background: rgb(127 29 29); }
+.dark .cv-workspace-chip--expired.cv-workspace-chip--on { background: rgb(51 65 85); }
 
 .cv-workspace-selectall {
   display: flex;
@@ -842,3 +887,54 @@
   font-size: 0.75rem;
 }
 .dark .cv-listing-perpage { border-color: rgb(71 85 105); }
+
+/* Dica de ação (ver `Tooltip.tsx`). Impressa em `document.body`, então a posição é da janela e o
+   `z-index` fica acima de qualquer painel do produto. */
+.cv-tooltip {
+  position: fixed;
+  z-index: 9999;
+  max-width: min(16rem, 90vw);
+  transform: translate(-50%, -100%);
+  border-radius: 0.375rem;
+  background: rgb(17 24 39 / 95%);
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  color: #fff;
+  text-align: center;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+  pointer-events: none;
+  animation: cv-tooltip-in 90ms ease-out;
+}
+
+.cv-tooltip--bottom {
+  transform: translate(-50%, 0);
+}
+
+.dark .cv-tooltip {
+  background: rgb(243 244 246 / 96%);
+  color: rgb(17 24 39);
+}
+
+@keyframes cv-tooltip-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cv-tooltip { animation: none; }
+}
+
+/* Barra de composição: fundo neutro para separar da conversa e para os atalhos e o campo de texto
+   terem contraste próprio. Sobre branco, régua branca e campo cinza-claro se confundiam num bloco
+   só, sem hierarquia. */
+.cv-composer-bar {
+  border-top: 1px solid rgb(229 231 235);
+  background: rgb(240 242 245);
+  padding: 0.625rem 0.75rem;
+}
+
+.dark .cv-composer-bar {
+  border-top-color: rgb(51 65 85);
+  background: rgb(17 24 39);
+}

package/src/workspace/BulkTemplateModal.tsx

@@ -70,7 +70,7 @@ export function BulkTemplateModal({
             <h3>{labels.templateModalTitle}</h3>
             <p>{labels.templateModalAvailable(templates.length)}</p>
           </div>
-          <button type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
+          <button data-cv-tooltip={labels.templateModalCancel} type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
             ✕
           </button>
         </header>
@@ -89,6 +89,7 @@ export function BulkTemplateModal({
           {filtered.length === 0 ? <p className="cv-workspace-empty">{labels.templateModalEmpty}</p> : null}
           {filtered.map((template) => (
             <button
+              data-cv-tooltip={template.name} aria-label={template.name}
               key={template.name}
               type="button"
               // Reclicar desmarca: sem isso não havia como voltar ao template padrão depois de
@@ -113,10 +114,11 @@ export function BulkTemplateModal({
         ) : null}
 
         <footer className="cv-workspace-modal__footer">
-          <button type="button" onClick={onClose}>
+          <button data-cv-tooltip={labels.templateModalCancel} aria-label={labels.templateModalCancel} type="button" onClick={onClose}>
             {labels.templateModalCancel}
           </button>
           <button
+            data-cv-tooltip={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)} aria-label={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
             type="button"
             disabled={sending || expiredCount === 0}
             onClick={() => onSend(selected || undefined)}

package/src/workspace/ConversationPane.tsx

@@ -5,7 +5,7 @@
  * última mensagem, outro engolia falha de anexo, outro não abria a biblioteca de arquivos.
  */
 
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 
 import { AudioRecorderButton } from '../AudioRecorderButton'
 import { ConversationContextPanel, type ConversationContextEntry } from '../ConversationContextPanel'
@@ -36,7 +36,8 @@ export interface ConversationPaneProps {
   readonly now: number
   readonly busy: boolean
   readonly labels: ConversationsWorkspaceLabels
-  readonly onTakeover?: (() => void) | undefined
+  /** Devolve a promessa quando o host a tem: o envio de template espera a tomada antes de sair. */
+  readonly onTakeover?: (() => void | Promise<void>) | undefined
   readonly onReturnToBot?: (() => void) | undefined
   readonly onFinish?: (() => void) | undefined
   readonly onBack: () => void
@@ -139,6 +140,9 @@ export function ConversationPane({
   const [selectedMessageIds, setSelectedMessageIds] = useState<ReadonlySet<string>>(new Set())
   const [draft, setDraft] = useState(initialComposerText ?? '')
   const [queuedFiles, setQueuedFiles] = useState<readonly File[]>([])
+  const [isSendingDraft, setIsSendingDraft] = useState(false)
+  /** Ref, não estado: entre dois cliques seguidos o React ainda não teria repintado a trava. */
+  const sendInFlightRef = useRef(false)
 
   // Trocar de conversa zera as duas coisas: seleção de mensagem e rascunho pertencem à thread, e
   // levá-los adiante faria copiar o trecho errado ou responder ao cliente errado.
@@ -187,18 +191,31 @@ export function ConversationPane({
    * Falha vira aviso na tela em vez de exceção silenciosa: o atendente escreveu ou gravou, achou
    * que mandou, e sem retorno não teria como saber que o cliente não recebeu nada.
    */
-  async function runSend(action: () => Promise<unknown>, fallback: string): Promise<void> {
+  /** Devolve se o envio passou: limpar o rascunho depois de uma falha apagaria o texto do operador. */
+  async function runSend(action: () => Promise<unknown>, fallback: string): Promise<boolean> {
     setSendFailure(undefined)
     try {
       await action()
       await refetch()
+      return true
     } catch (error: unknown) {
       setSendFailure(error instanceof Error ? error.message : fallback)
+      return false
     }
   }
 
-  async function handleSend(text: string): Promise<void> {
-    await runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure)
+  async function handleSend(text: string): Promise<boolean> {
+    return runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure)
+  }
+
+  /**
+   * Reabrir a janela é ato de atendente: quem manda o template quer conversar. A tomada vai antes do
+   * envio — se ficasse depois, a resposta do cliente chegaria com a conversa ainda no bot e o fluxo
+   * automático responderia por cima de quem acabou de reabri-la.
+   */
+  async function handleSendTemplate(): Promise<void> {
+    if (conversation.mode !== 'human' && onTakeover) await onTakeover()
+    await runSend(() => api.sendTemplate(conversation.id, {}), labels.sendFailure)
   }
 
   /**
@@ -206,17 +223,28 @@ export function ConversationPane({
    * frase embaixo, e mandar as duas separadas invertia a ordem quando a mídia demorava a subir.
    */
   async function handleRichSend(): Promise<void> {
-    if (onSendAttachments && queuedFiles.length > 0) {
-      const files = queuedFiles
-      const caption = draft
-      await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
-      setQueuedFiles([])
-      setDraft('')
-      return
+    // O upload da mídia demora e não dá retorno na tela; sem esta trava o segundo clique — ou o
+    // Enter impaciente — mandava o mesmo arquivo outra vez.
+    if (sendInFlightRef.current) return
+    sendInFlightRef.current = true
+    setIsSendingDraft(true)
+    try {
+      if (onSendAttachments && queuedFiles.length > 0) {
+        const files = queuedFiles
+        const caption = draft
+        const didSend = await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
+        if (didSend) {
+          setQueuedFiles([])
+          setDraft('')
+        }
+        return
+      }
+      if (!draft.trim()) return
+      if (await handleSend(draft)) setDraft('')
+    } finally {
+      sendInFlightRef.current = false
+      setIsSendingDraft(false)
     }
-    if (!draft.trim()) return
-    await handleSend(draft)
-    setDraft('')
   }
 
   async function handleAttach(file: File): Promise<void> {
@@ -309,10 +337,10 @@ export function ConversationPane({
         <div className="cv-workspace-selection">
           <span>{labels.messagesSelected(selectedMessageIds.size)}</span>
           <div className="cv-workspace-selection__actions">
-            <button type="button" onClick={() => setSelectedMessageIds(new Set())}>
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={() => setSelectedMessageIds(new Set())}>
               {labels.bulkClear}
             </button>
-            <button type="button" onClick={copySelectedMessages}>
+            <button data-cv-tooltip={labels.copySelected} aria-label={labels.copySelected} type="button" onClick={copySelectedMessages}>
               {labels.copySelected}
             </button>
           </div>
@@ -328,7 +356,7 @@ export function ConversationPane({
       {blocked ? (
         <WindowExpiredNotice
           disabled={busy}
-          onSendTemplate={() => void api.sendTemplate(conversation.id, {}).then(() => refetch())}
+          onSendTemplate={() => void handleSendTemplate()}
         />
       ) : botOwnsConversation ? (
         // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
@@ -348,7 +376,8 @@ export function ConversationPane({
                 }
               : {})}
           placeholder={labels.composerPlaceholder}
-          isSending={busy}
+          isSending={busy || isSendingDraft}
+          hasQueuedAttachments={queuedFiles.length > 0}
           {...(onRecordAudio
             ? {
                 idleAction: (
@@ -367,6 +396,7 @@ export function ConversationPane({
                       <li key={`${file.name}-${index}`}>
                         <span>{file.name}</span>
                         <button
+                          data-cv-tooltip={labels.attachmentRemove}
                           type="button"
                           aria-label={labels.attachmentRemove}
                           onClick={() =>

package/src/workspace/ConversationsInboxList.tsx

@@ -14,6 +14,7 @@ import { WINDOW_FILTERS } from '../conversationWindow'
 import type { ConversationSummary } from '../providers/types'
 import type { ConversationsWorkspaceLabels } from './labels'
 import type { UseConversationsInboxResult } from './useConversationsInbox'
+import { PAGINATION_LABELS } from '../pagination.constant'
 
 export interface ConversationsInboxListProps {
   readonly inbox: UseConversationsInboxResult
@@ -44,16 +45,17 @@ export function ConversationsInboxList({
         <div className="cv-workspace-bulk">
           <span className="cv-workspace-bulk__count">{labels.bulkSelected(inbox.selectedIds.size)}</span>
           <div className="cv-workspace-bulk__actions">
-            <button type="button" onClick={inbox.clearBulkSelection}>
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={inbox.clearBulkSelection}>
               {labels.bulkClear}
             </button>
             {onSendTemplateToSelected ? (
-              <button type="button" onClick={onSendTemplateToSelected} disabled={inbox.busy}>
+              <button data-cv-tooltip={labels.bulkTemplate} aria-label={labels.bulkTemplate} type="button" onClick={onSendTemplateToSelected} disabled={inbox.busy}>
                 {labels.bulkTemplate}
               </button>
             ) : null}
             {inbox.canFinalize ? (
               <button
+                data-cv-tooltip={labels.bulkFinalize} aria-label={labels.bulkFinalize}
                 type="button"
                 disabled={inbox.busy}
                 onClick={() => {
@@ -89,9 +91,15 @@ export function ConversationsInboxList({
               type="button"
               onClick={() => inbox.setWindowFilter(filter.value)}
               aria-pressed={inbox.windowFilter === filter.value}
-              className={`cv-workspace-chip${inbox.windowFilter === filter.value ? ' cv-workspace-chip--on' : ''}`}
+              data-cv-tooltip={filter.label} aria-label={filter.label}
+              className={[
+                'cv-workspace-chip',
+                filter.tone ? `cv-workspace-chip--${filter.tone}` : '',
+                inbox.windowFilter === filter.value ? 'cv-workspace-chip--on' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
             >
-              {filter.dotClass ? <span className={`cv-workspace-dot ${filter.dotClass}`} /> : null}
               {filter.label}
             </button>
           ))}
@@ -103,6 +111,7 @@ export function ConversationsInboxList({
             <span className="cv-workspace-chips__legend">{labels.channelLegend}</span>
             {inbox.channelFilters.map((filter) => (
               <button
+                data-cv-tooltip={filter.label} aria-label={filter.label}
                 key={filter.value}
                 type="button"
                 onClick={() => inbox.setChannelFilter(filter.value)}
@@ -150,14 +159,14 @@ export function ConversationsInboxList({
       <div className="cv-workspace-pager">
         <span>{labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount)}</span>
         <div className="cv-workspace-pager__buttons">
-          <button type="button" onClick={() => inbox.goToPage(1)} disabled={inbox.page === 1} aria-label="Primeira página">
+          <button type="button" onClick={() => inbox.goToPage(1)} disabled={inbox.page === 1} aria-label={PAGINATION_LABELS.first} data-cv-tooltip={PAGINATION_LABELS.first}>
             «
           </button>
           <button
             type="button"
             onClick={() => inbox.goToPage(inbox.page - 1)}
             disabled={inbox.page === 1}
-            aria-label="Página anterior"
+            aria-label={PAGINATION_LABELS.previous} data-cv-tooltip={PAGINATION_LABELS.previous}
           >
             ‹
           </button>
@@ -166,7 +175,7 @@ export function ConversationsInboxList({
             type="button"
             onClick={() => inbox.goToPage(inbox.page + 1)}
             disabled={inbox.page === inbox.pageCount}
-            aria-label="Próxima página"
+            aria-label={PAGINATION_LABELS.next} data-cv-tooltip={PAGINATION_LABELS.next}
           >
             ›
           </button>
@@ -174,7 +183,7 @@ export function ConversationsInboxList({
             type="button"
             onClick={() => inbox.goToPage(inbox.pageCount)}
             disabled={inbox.page === inbox.pageCount}
-            aria-label="Última página"
+            aria-label={PAGINATION_LABELS.last} data-cv-tooltip={PAGINATION_LABELS.last}
           >
             »
           </button>

package/src/workspace/ConversationsWorkspace.tsx

@@ -12,7 +12,9 @@
  */
 
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Check, CheckCheck, FlaskConical, Hourglass, Mail, MessagesSquare } from 'lucide-react'
 
+import { ICON_SIZE_ACTION, ICON_SIZE_INLINE } from '../icon.constant'
 import type { ConversationContextEntry } from '../ConversationContextPanel'
 import type { ConversationHeaderUtility } from '../ConversationHeader'
 import type { QuickReply } from '../MessageComposer'
@@ -23,6 +25,7 @@ import { ConversationPane } from './ConversationPane'
 import { ConversationsInboxList } from './ConversationsInboxList'
 import { DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, type ConversationsWorkspaceLabels } from './labels'
 import { useConversationsInbox, type UseConversationsInboxResult } from './useConversationsInbox'
+import { TooltipLayer } from '../Tooltip'
 
 export interface ConversationsWorkspaceSimulator {
   /**
@@ -32,7 +35,8 @@ export interface ConversationsWorkspaceSimulator {
   render(params: { conversationId: string; close: () => void }): ReactNode
   /** Ausente = ligado. Serve para esconder fora de desenvolvimento sem condicionar o JSX. */
   readonly enabled?: boolean
-  readonly icon?: string
+  /** Ícone da biblioteca (lucide) no utilitário do cabeçalho. Ausente, entra o frasco de teste. */
+  readonly icon?: ReactNode
   readonly label?: string
 }
 
@@ -166,7 +170,7 @@ export function ConversationsWorkspace({
       ...fromProduct,
       {
         key: 'simulator',
-        icon: simulator?.icon ?? '🧪',
+        icon: simulator?.icon ?? <FlaskConical size={ICON_SIZE_ACTION} />,
         label: simulator?.label ?? 'Simular cliente',
         active: simulatorOpen,
         run: () => setSimulatorOpen((open) => !open),
@@ -176,22 +180,23 @@ export function ConversationsWorkspace({
 
   return (
     <div className={`cv-workspace${className ? ` ${className}` : ''}`}>
+      <TooltipLayer />
       {/* Cabeçalho denso em tela estreita: ícone + número. O rótulo escrito ocupava três linhas em
           375px e empurrava a lista para fora da tela. */}
       <header className="cv-workspace-header">
         <div className="cv-workspace-header__titles">
           <h1>{labels.title}</h1>
           <p>
-            <span title={labels.conversations}>
-              💬 {inbox.totalCount}
+            <span data-cv-tooltip={labels.conversations} className="cv-stat">
+              <MessagesSquare size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.totalCount}
               <span className="cv-only-wide"> {labels.conversations}</span>
             </span>
-            <span title={labels.waiting} className="cv-workspace-header__waiting">
-              ⏳ {inbox.waitingCount}
+            <span data-cv-tooltip={labels.waiting} className="cv-stat cv-workspace-header__waiting">
+              <Hourglass size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.waitingCount}
               <span className="cv-only-wide"> {labels.waiting}</span>
             </span>
-            <span title={labels.unread}>
-              ✉️ {inbox.unreadCount}
+            <span data-cv-tooltip={labels.unread} className="cv-stat">
+              <Mail size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.unreadCount}
               <span className="cv-only-wide"> {labels.unread}</span>
             </span>
           </p>
@@ -202,22 +207,24 @@ export function ConversationsWorkspace({
             type="button"
             onClick={() => inbox.setWaitingOnly(!inbox.waitingOnly)}
             aria-pressed={inbox.waitingOnly}
-            title={labels.waitingOnly}
+            data-cv-tooltip={labels.waitingOnly} aria-label={labels.waitingOnly}
             className={inbox.waitingOnly ? 'cv-workspace-toggle cv-workspace-toggle--on' : 'cv-workspace-toggle'}
           >
-            ⏳<span className="cv-only-wide"> {labels.waitingOnly}</span>
+            <Hourglass size={ICON_SIZE_ACTION} aria-hidden="true" />
+            <span className="cv-only-wide">{labels.waitingOnly}</span>
           </button>
           {/* O contador só aparece com seleção: " (0)" era texto morto ao lado do ícone. */}
           <button
             type="button"
             onClick={() => void inbox.markSelectedAsRead()}
             disabled={inbox.selectedIds.size === 0 || inbox.busy}
-            title={labels.markSelectedAsRead}
+            data-cv-tooltip={labels.markSelectedAsRead}
             aria-label={labels.markSelectedAsRead}
             className="cv-workspace-toggle"
           >
-            ✓<span className="cv-only-wide"> {labels.markSelectedAsRead}</span>
-            {inbox.selectedIds.size > 0 ? ` (${inbox.selectedIds.size})` : ''}
+            <Check size={ICON_SIZE_ACTION} aria-hidden="true" />
+            <span className="cv-only-wide">{labels.markSelectedAsRead}</span>
+            {inbox.selectedIds.size > 0 ? <span>({inbox.selectedIds.size})</span> : null}
           </button>
           {/* Só com não lida na tela e só onde o host implementa a rota: sem isso o botão zerava
               nada e ainda assim ocupava o cabeçalho. */}
@@ -226,10 +233,11 @@ export function ConversationsWorkspace({
               type="button"
               onClick={() => void inbox.markAllAsRead()}
               disabled={inbox.busy}
-              title={labels.markAllAsRead}
+              data-cv-tooltip={labels.markAllAsRead} aria-label={labels.markAllAsRead}
               className="cv-workspace-toggle"
             >
-              ✓✓<span className="cv-only-wide"> {labels.markAllAsRead}</span>
+              <CheckCheck size={ICON_SIZE_ACTION} aria-hidden="true" />
+              <span className="cv-only-wide">{labels.markAllAsRead}</span>
             </button>
           ) : null}
           {renderHeaderActions?.(inbox)}
@@ -283,7 +291,7 @@ export function ConversationsWorkspace({
               now={inbox.now}
               busy={inbox.busy}
               labels={labels}
-              {...(inbox.canTakeover ? { onTakeover: () => void inbox.takeover(selected.id) } : {})}
+              {...(inbox.canTakeover ? { onTakeover: () => inbox.takeover(selected.id) } : {})}
               {...(inbox.canTakeover ? { onReturnToBot: () => void inbox.releaseToBot(selected.id) } : {})}
               {...(inbox.canFinalize ? { onFinish: () => void inbox.finalize(selected.id) } : {})}
               {...(flowLabelOf ? { flowLabel: flowLabelOf(selected) } : {})}

package/src/workspace/useConversationsInbox.ts

@@ -265,8 +265,11 @@ export function useConversationsInbox(params: UseConversationsInboxParams = {}):
     selectedConversation: conversations.find((conversation) => conversation.id === selectedId),
     loading,
     now,
-    totalCount: conversations.length,
-    unreadCount: conversations.reduce((total, conversation) => total + conversation.unread, 0),
+    // Com paginação no servidor `conversations` é só a página, então contar o array mostrava o
+    // tamanho da página no lugar do tamanho da base. Não lidas e aguardando seguem sendo da página:
+    // somar a base inteira exige agregado do servidor, que a listagem não devolve.
+    totalCount: params.serverPaginated ? total : conversations.length,
+    unreadCount: conversations.reduce((sum, conversation) => sum + conversation.unread, 0),
     waitingCount: conversations.filter((conversation) => conversation.waitingHuman).length,
     filteredCount: totalForPaging,
     expiredSelectedCount: conversations.filter(