@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.1

package/src/ConversationHeader.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationHeader } from './ConversationHeader'
+import type { ConversationSummary } from './providers/types'
+
+const noop = () => {}
+
+const CONVERSATION: ConversationSummary = {
+  id: 'conv-1',
+  clientName: 'Anderson Silva',
+  whatsappNumber: '5511988887777',
+  channel: 'whatsapp',
+  mode: 'human',
+  assignedUserId: null,
+  waitingHuman: false,
+  unread: 0,
+  currentState: 'idle',
+  lastAt: '2026-01-01T12:00:00.000Z',
+  lastInboundAt: null,
+}
+
+describe('ConversationHeader sem medida da faixa', () => {
+  // Sem `ResizeObserver` (SSR e este teste de markup) o cabeçalho nasce completo. O recolhimento é
+  // medido no próprio elemento, e é verificado no navegador.
+  it('mostra utilitários e ações na faixa, sem duplicar no menu', () => {
+    const markup = renderToStaticMarkup(
+      <ConversationHeader
+        conversation={CONVERSATION}
+        onDownload={noop}
+        onOpenDocuments={noop}
+        onReturnToBot={noop}
+        onFinish={noop}
+      />,
+    )
+
+    expect(markup).toContain('aria-label="Baixar conversa"')
+    expect(markup).toContain('aria-label="Finalizar"')
+    expect(markup).not.toContain('aria-label="Mais ações"')
+  })
+
+  it('escreve o canal e o modo por extenso quando há espaço', () => {
+    const markup = renderToStaticMarkup(<ConversationHeader conversation={CONVERSATION} />)
+
+    expect(markup).toContain('atendimento humano')
+  })
+
+  // Emoji desenha diferente em cada sistema e não herda a cor do controle: os ícones do cabeçalho
+  // são SVG da biblioteca, como no resto do produto.
+  it('desenha os ícones como SVG, sem emoji no meio dos rótulos', () => {
+    const markup = renderToStaticMarkup(
+      <ConversationHeader
+        conversation={CONVERSATION}
+        onBack={noop}
+        onDownload={noop}
+        onOpenDocuments={noop}
+        onReturnToBot={noop}
+        onFinish={noop}
+      />,
+    )
+
+    expect(markup).toContain('lucide-download')
+    expect(markup).not.toContain('✕')
+    expect(markup).not.toContain('⬇️')
+  })
+})

package/src/ConversationHeader.tsx

@@ -6,14 +6,29 @@
  * papel do pacote saber a rota de cada host. Quem passa os handlers é o produto.
  */
 
-import { useState } from 'react'
+import { useRef, useState, type ReactNode } from 'react'
+import { ArrowLeft, Bot, Download, FileText, Headset, MoreVertical, UserRound, X } from 'lucide-react'
 
 import type { ConversationSummary } from './providers/types'
 import { capabilitiesOf, contactFlag, formatContactHandle } from './conversationChannel'
 import { cn } from './lib/cn'
+import { ICON_SIZE_ACTION, ICON_SIZE_INLINE } from './icon.constant'
+import { useContainerWidth } from './hooks/useContainerWidth'
 import { Avatar } from './Avatar'
 import { ChannelIcon } from './ChannelIcon'
 
+/**
+ * Larguras do próprio cabeçalho (em px) que decidem o quanto ele recolhe. São da faixa, não da
+ * janela: com a prévia do simulador aberta a coluna fica com metade da tela, e pelo breakpoint da
+ * janela o cabeçalho continuava desenhando tudo — sobrava uma letra do nome do cliente.
+ *
+ * Abaixo da primeira, os utilitários (ícones de consulta) viram itens do menu ⋮ e o telefone volta a
+ * caber; abaixo da segunda, até as ações escritas entram no menu, porque nem elas cabem sem comer o
+ * nome. Quem identifica a conversa é o nome — ele é o último a ceder espaço.
+ */
+const HEADER_UTILITIES_MIN_WIDTH = 720
+const HEADER_ACTIONS_MIN_WIDTH = 600
+
 export interface ConversationHeaderLabels {
   botMode: string
   humanMode: string
@@ -27,8 +42,10 @@ export interface ConversationHeaderLabels {
 }
 
 export const DEFAULT_CONVERSATION_HEADER_LABELS: ConversationHeaderLabels = {
-  botMode: '🤖 atendimento automático',
-  humanMode: '🧑‍💼 atendimento humano',
+  // Sem emoji no rótulo: quem desenha o modo é o ícone ao lado, e o emoji embutido no texto voltava
+  // a aparecer no tooltip e no leitor de tela como um caractere sem nome.
+  botMode: 'atendimento automático',
+  humanMode: 'atendimento humano',
   returnToBot: 'Devolver ao bot',
   finish: 'Finalizar',
   takeover: 'Assumir atendimento',
@@ -59,13 +76,26 @@ export interface ConversationHeaderClassNames {
  */
 export interface ConversationHeaderUtility {
   key: string
-  /** Emoji, para casar com os utilitários nativos do cabeçalho. */
-  icon: string
+  /** Ícone da biblioteca (lucide), no tamanho dos utilitários nativos: `<Play size={16} />`. */
+  icon: ReactNode
   label: string
   run: () => void
   active?: boolean
 }
 
+/** Utilitário já resolvido para desenho: o `active` opcional do contrato vira estado explícito. */
+type ResolvedUtility = ConversationHeaderUtility & { active: boolean }
+
+/** Ação de atendimento pronta para virar botão na faixa ou item do menu ⋮. */
+type HeaderAction = {
+  key: string
+  icon: ReactNode
+  label: string
+  hint: string
+  run: () => void
+  className: string
+}
+
 export interface ConversationHeaderProps {
   conversation: ConversationSummary
   busy?: boolean
@@ -105,42 +135,92 @@ export function ConversationHeader({
   const flag = contactFlag({ handle, channel: conversation.channel })
   const capabilities = capabilitiesOf(conversation.channel)
   const [menuOpen, setMenuOpen] = useState(false)
+  const headerRef = useRef<HTMLElement>(null)
+  const headerWidth = useContainerWidth(headerRef)
+
+  // Sem medida ainda (SSR, primeiro render) o cabeçalho nasce completo: é o layout correto na maior
+  // parte dos casos, e recolher depois não tira nada do lugar de quem já estava lendo.
+  const showsUtilitiesInline = headerWidth === undefined || headerWidth >= HEADER_UTILITIES_MIN_WIDTH
+  const showsActionsInline = headerWidth === undefined || headerWidth >= HEADER_ACTIONS_MIN_WIDTH
 
   // Utilitários: ícone no desktop, item de menu no celular. Três ícones lado a lado em 375px não
   // caberiam com área de toque decente, e nenhum deles é a ação principal do atendimento.
-  const utilities = [
+  const utilityCandidates: readonly (ResolvedUtility | undefined)[] = [
     onOpenDocuments
-      ? { key: 'documents', icon: '📄', label: labels.documents, run: onOpenDocuments, active: documentsOpen }
+      ? {
+          key: 'documents',
+          icon: <FileText size={ICON_SIZE_ACTION} />,
+          label: labels.documents,
+          run: onOpenDocuments,
+          active: documentsOpen,
+        }
+      : undefined,
+    onDownload
+      ? {
+          key: 'download',
+          icon: <Download size={ICON_SIZE_ACTION} />,
+          label: labels.download,
+          run: onDownload,
+          active: false,
+        }
       : undefined,
-    onDownload ? { key: 'download', icon: '⬇️', label: labels.download, run: onDownload, active: false } : undefined,
     ...(extraUtilities ?? []).map((utility) => ({ ...utility, active: utility.active ?? false })),
-  ].filter(
-    (utility): utility is { key: string; icon: string; label: string; run: () => void; active: boolean } =>
-      Boolean(utility),
-  )
+  ]
+  const utilities = utilityCandidates.filter((utility): utility is ResolvedUtility => Boolean(utility))
 
   // Lista única de ações: alimenta os botões do desktop e o menu do celular, para as duas
   // superfícies nunca divergirem sobre o que está disponível.
-  const actions = [
+  // `hint` existe separado do `label` porque o host pode traduzir o rótulo com prefixo ou contagem:
+  // no tooltip isso vira ruído, e é o texto limpo que descreve a ação.
+  const actionCandidates: readonly (HeaderAction | undefined)[] = [
     !isHuman && onTakeover
-      ? { key: 'takeover', label: labels.takeover, run: onTakeover, className: 'cv-header-action--primary' }
+      ? {
+          key: 'takeover',
+          icon: <Headset size={ICON_SIZE_ACTION} />,
+          label: labels.takeover,
+          hint: labels.takeover,
+          run: onTakeover,
+          className: 'cv-header-action--primary',
+        }
+      : undefined,
+    isHuman && onReturnToBot
+      ? {
+          key: 'release',
+          icon: <Bot size={ICON_SIZE_ACTION} />,
+          label: labels.returnToBot,
+          hint: labels.returnToBot,
+          run: onReturnToBot,
+          className: '',
+        }
       : undefined,
-    isHuman && onReturnToBot ? { key: 'release', label: labels.returnToBot, run: onReturnToBot, className: '' } : undefined,
     isHuman && onFinish
-      ? { key: 'finish', label: `✕ ${labels.finish}`, run: onFinish, className: 'cv-header-action--danger' }
+      ? {
+          key: 'finish',
+          icon: <X size={ICON_SIZE_ACTION} />,
+          label: labels.finish,
+          hint: labels.finish,
+          run: onFinish,
+          className: 'cv-header-action--danger',
+        }
       : undefined,
-  ].filter((action): action is { key: string; label: string; run: () => void; className: string } => Boolean(action))
+  ]
+  const actions = actionCandidates.filter((action): action is HeaderAction => Boolean(action))
 
-  // No celular utilitários e ações moram no mesmo menu: utilitários primeiro, porque são consulta e
-  // não alteram estado da conversa.
+  // O menu recebe só o que não coube na faixa: utilitários primeiro, porque são consulta e não
+  // alteram estado da conversa. Nada aparece nos dois lugares — item duplicado é o operador achando
+  // que são duas coisas diferentes.
   const menuItems = [
-    ...utilities.map((utility) => ({
-      key: utility.key,
-      label: `${utility.icon} ${utility.label}`,
-      run: utility.run,
-      className: '',
-    })),
-    ...actions,
+    ...(showsUtilitiesInline
+      ? []
+      : utilities.map((utility) => ({
+          key: utility.key,
+          icon: utility.icon,
+          label: utility.label,
+          hint: utility.label,
+          run: utility.run,
+          className: '',
+        }))),
+    ...(showsActionsInline ? [] : actions),
   ]
 
   // `flex-nowrap` no cabeçalho: com wrap, o nome do cliente ocupava a largura toda em 375px e
@@ -148,6 +228,7 @@ export function ConversationHeader({
   // fora da tela. O bloco de identificação encurta (truncate) em vez de empurrar.
   return (
     <header
+      ref={headerRef}
       className={cn(
         'flex flex-nowrap items-center justify-between gap-3 border-b px-4 py-3',
         classNames?.root,
@@ -158,76 +239,93 @@ export function ConversationHeader({
         {/* Voltar existe só em tela estreita, onde lista e conversa não cabem juntas: sem ele, abrir
             uma conversa no celular é um beco sem saída. A classe some acima de 1024px. */}
         {onBack ? (
-          <button type="button" onClick={onBack} className="cv-back cv-touch" aria-label={labels.back} title={labels.back}>
-            ←
+          <button type="button" onClick={onBack} className="cv-back cv-touch" aria-label={labels.back} data-cv-tooltip={labels.back}>
+            <ArrowLeft size={ICON_SIZE_ACTION} aria-hidden="true" />
           </button>
         ) : null}
         {/* Sem nome, o Avatar cai na silhueta — melhor que dois dígitos do telefone como iniciais. */}
         <Avatar name={conversation.clientName} size="md" />
         <div className="min-w-0">
           <p className={cn('truncate font-medium', classNames?.name)}>{conversation.clientName ?? displayHandle}</p>
-          <p className={cn('truncate text-xs text-gray-500', classNames?.meta)}>
+          {/* Flex com `items-center`, não texto corrido: ícone de canal e emoji de modo têm altura
+              maior que a fonte, e como elementos inline cada um assentava na própria baseline —
+              telefone, canal e modo saíam em três alturas diferentes. O gap substitui as margens. */}
+          <p className={cn('flex min-w-0 flex-nowrap items-center gap-2 overflow-hidden text-xs text-gray-500', classNames?.meta)}>
             {/* Bandeira derivada do DDI e só quando o identificador é telefone. Estava fixa em 🇧🇷,
                 o que rotulava qualquer contato como brasileiro. */}
-            {flag ? `${flag} ` : ''}
-            {displayHandle}
-            {/* Em tela estreita sobra o ícone do canal e o emoji do modo: o rótulo escrito empurra o
+            <span className="truncate">
+              {flag ? `${flag} ` : ''}
+              {displayHandle}
+            </span>
+            {/* Em faixa estreita sobra só o ícone do canal e o do modo: o rótulo escrito empurra o
                 telefone para fora e não diz nada que o ícone já não diga. */}
-            <span className="ml-2 inline-flex items-center gap-1">
+            <span className="inline-flex flex-shrink-0 items-center gap-1">
               <ChannelIcon channel={conversation.channel} />
-              <span className="cv-only-wide">{capabilities.label}</span>
+              {showsUtilitiesInline ? <span>{capabilities.label}</span> : null}
             </span>
-            <span className="ml-2 cv-only-wide">{isHuman ? labels.humanMode : labels.botMode}</span>
-            <span className="ml-1 cv-only-narrow" title={isHuman ? labels.humanMode : labels.botMode}>
-              {isHuman ? '🧑‍💼' : '🤖'}
+            <span
+              className="inline-flex flex-shrink-0 items-center gap-1"
+              // Sem o rótulo escrito, o ícone sozinho não diria nada ao leitor de tela.
+              {...(showsUtilitiesInline
+                ? {}
+                : { role: 'img', 'aria-label': isHuman ? labels.humanMode : labels.botMode, 'data-cv-tooltip': isHuman ? labels.humanMode : labels.botMode })}
+            >
+              {isHuman ? (
+                <UserRound size={ICON_SIZE_INLINE} aria-hidden="true" />
+              ) : (
+                <Bot size={ICON_SIZE_INLINE} aria-hidden="true" />
+              )}
+              {showsUtilitiesInline ? <span>{isHuman ? labels.humanMode : labels.botMode}</span> : null}
             </span>
           </p>
         </div>
       </div>
 
       <div className={cn('flex shrink-0 items-center gap-2', classNames?.actions)}>
-        {/* Desktop: utilitários como ícone e ações como botão, tudo visível de uma vez. */}
-        <div className={cn('hidden items-center gap-2 lg:flex', classNames?.desktopActions)}>
-          {utilities.map((utility) => (
+        {/* Faixa larga: utilitários como ícone e ações como botão, tudo visível de uma vez. */}
+        <div className={cn('flex items-center gap-2', classNames?.desktopActions)}>
+          {(showsUtilitiesInline ? utilities : []).map((utility) => (
             <button
               key={utility.key}
               type="button"
               onClick={utility.run}
               disabled={busy}
               aria-pressed={utility.active}
-              title={utility.label}
+              data-cv-tooltip={utility.label}
               aria-label={utility.label}
               className={`cv-header-icon ${utility.active ? 'cv-header-icon--active' : ''}`}
             >
               {utility.icon}
             </button>
           ))}
-          {actions.map((action) => (
+          {(showsActionsInline ? actions : []).map((action) => (
             <button
               key={action.key}
               type="button"
               onClick={action.run}
               disabled={busy}
+              data-cv-tooltip={action.hint} aria-label={action.hint}
               className={`cv-header-action ${action.className}`}
             >
+              {action.icon}
               {action.label}
             </button>
           ))}
         </div>
 
-        {/* Celular: um único ⋮ com tudo dentro. Três ícones de 30px lado a lado violavam o mínimo
-            de 44px de área de toque e disputavam espaço com o nome do cliente. */}
+        {/* Faixa estreita: um único ⋮ com o que não coube. Ícones de 30px lado a lado violavam o
+            mínimo de 44px de área de toque e disputavam espaço com o nome do cliente. */}
         {menuItems.length > 0 ? (
-          <div className={cn('cv-menu lg:hidden', classNames?.mobileMenu)}>
+          <div className={cn('cv-menu', classNames?.mobileMenu)}>
             <button
               type="button"
               onClick={() => setMenuOpen(!menuOpen)}
               aria-expanded={menuOpen}
               aria-label={labels.moreActions}
-              title={labels.moreActions}
+              data-cv-tooltip={labels.moreActions}
               className="cv-header-icon cv-touch"
             >
-              ⋮
+              <MoreVertical size={ICON_SIZE_ACTION} aria-hidden="true" />
             </button>
 
             {menuOpen ? (
@@ -242,8 +340,10 @@ export function ConversationHeader({
                       item.run()
                     }}
                     disabled={busy}
+                    data-cv-tooltip={item.hint} aria-label={item.hint}
                     className={`cv-header-action cv-touch ${item.className}`}
                   >
+                    {item.icon}
                     {item.label}
                   </button>
                 ))}

package/src/ConversationListItem.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { CHAT_TEXT_PRIMARY_CLASS, CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import { Avatar } from './Avatar'
 import { contactFlag, formatContactHandle } from './conversationChannel'
 import type { ConversationSummary } from './providers/types'
@@ -128,6 +129,7 @@ export const ConversationListItem = ({
 
   return (
     <button
+      data-cv-tooltip={name} aria-label={name}
       onClick={handleClick}
       className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${highlightActive ? "hover:bg-[#f0f2f5]" : ""} ${showDivider ? "border-b border-[#e9edef]" : ""}`}
       style={{
@@ -148,29 +150,29 @@ export const ConversationListItem = ({
           <div className="flex items-center gap-1.5 min-w-0">
             {/* Sem nome, o título já é o telefone — a bandeira vai nele. */}
             {!conversation.clientName && flag ? <span aria-hidden>{flag}</span> : null}
-            <span className="text-[16px] text-[#111b21] truncate">{name}</span>
+            <span className={`text-[16px] ${CHAT_TEXT_PRIMARY_CLASS} truncate`}>{name}</span>
             {windowStatus && windowStatus.label === 'expired' && (
-              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title={expiredWindowLabel} />
+              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" data-cv-tooltip={expiredWindowLabel} />
             )}
             {windowStatus && windowStatus.label === 'warning' && (
-              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title={warningWindowLabel} />
+              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" data-cv-tooltip={warningWindowLabel} />
             )}
           </div>
           {timestamp && (
-            <span className="text-xs text-[#667781] flex-shrink-0">{timestamp}</span>
+            <span className={`text-xs ${CHAT_TEXT_SECONDARY_CLASS} flex-shrink-0`}>{timestamp}</span>
           )}
         </div>
         {/* Telefone só como subtítulo quando o título é o nome — repetir o número embaixo dele
             mesmo gastaria uma linha para dizer duas vezes a mesma coisa. */}
         {conversation.clientName ? (
-          <div className="flex items-center gap-1 text-xs text-[#667781]">
+          <div className={`flex items-center gap-1 text-xs ${CHAT_TEXT_SECONDARY_CLASS}`}>
             {flag ? <span aria-hidden>{flag}</span> : null}
             <span className="truncate">{displayHandle}</span>
           </div>
         ) : null}
 
         <div className="flex items-center justify-between mt-0.5">
-          <span className="text-sm text-[#667781] truncate max-w-[180px]">
+          <span className={`text-sm ${CHAT_TEXT_SECONDARY_CLASS} truncate max-w-[180px]`}>
             {preview.icon && <span className="mr-1">{preview.icon}</span>}
             {preview.preview || 'Sem mensagens'}
           </span>

package/src/ConversationLocalesProvider.tsx

@@ -22,6 +22,20 @@ export interface ConversationLocales {
     untitledDocument: string
     downloadFile: string
   }
+  transcription: {
+    label: string
+    copy: string
+    copied: string
+    transcribe: string
+    transcribing: string
+    retry: string
+    failed: string
+    /** Áudio processado sem fala detectada — distinto de "não transcrito". */
+    empty: string
+    unsupported: string
+    showMore: string
+    showLess: string
+  }
   selection: {
     select: string
   }
@@ -53,6 +67,19 @@ const DEFAULT_LOCALES: ConversationLocales = {
     untitledDocument: 'Documento',
     downloadFile: 'Baixar',
   },
+  transcription: {
+    label: 'Transcrição',
+    copy: 'Copiar',
+    copied: 'Copiado!',
+    transcribe: 'Transcrever áudio',
+    transcribing: 'Transcrevendo...',
+    retry: 'Transcrever novamente',
+    failed: 'Falha ao transcrever — tentar novamente',
+    empty: 'Sem fala detectada',
+    unsupported: 'Formato de áudio não suportado para transcrição',
+    showMore: 'ver transcrição completa',
+    showLess: 'ver menos',
+  },
   selection: {
     select: 'Selecionar',
   },
@@ -76,6 +103,7 @@ export interface ConversationLocalesProviderProps {
 export function ConversationLocalesProvider({ children, locales }: ConversationLocalesProviderProps) {
   const merged: ConversationLocales = {
     bubble: { ...DEFAULT_LOCALES.bubble, ...locales?.bubble },
+    transcription: { ...DEFAULT_LOCALES.transcription, ...locales?.transcription },
     selection: { ...DEFAULT_LOCALES.selection, ...locales?.selection },
     dateDivider: { ...DEFAULT_LOCALES.dateDivider, ...locales?.dateDivider },
   }

package/src/ConversationRow.tsx

@@ -7,8 +7,11 @@
  * como se opera uma fila de atendimento no WhatsApp.
  */
 
+import { AlarmClock, Bot, Hourglass, Play, UserRound } from 'lucide-react'
+
 import { ConversationListItem } from './ConversationListItem'
 import { capabilitiesOf } from './conversationChannel'
+import { ICON_SIZE_ACTION, ICON_SIZE_PILL } from './icon.constant'
 import { cn } from './lib/cn'
 import { ChannelIcon } from './ChannelIcon'
 import type { ConversationSummary } from './providers/types'
@@ -18,6 +21,7 @@ import {
   windowOf,
   type ConversationWindow,
 } from './conversationWindow'
+import { REPLY_LATENCY, replyLatencyOf } from './replyLatency'
 
 
 const WINDOW_TITLE: Record<ConversationWindow, string> = {
@@ -31,6 +35,16 @@ const WINDOW_TITLE: Record<ConversationWindow, string> = {
 // Abaixo disto a conversa é recente e o aviso de "parada" só faria ruído.
 const STALLED_THRESHOLD_MS = 60 * 60 * 1000
 
+// Verde só até 6h: a partir daí o selo perde a cor de "tudo certo", que é o sinal que o operador
+// varre na lista. Crítico ganha vermelho para não se confundir com uma espera de 7h.
+const REPLY_LATENCY_PILL_CLASS = {
+  [REPLY_LATENCY.WITHIN]: 'cv-pill--success',
+  [REPLY_LATENCY.LATE]: 'cv-pill--warning',
+  [REPLY_LATENCY.CRITICAL]: 'cv-pill--danger',
+} as const
+
+const TAKEOVER_LABEL = 'Continuar Atendimento'
+
 const WINDOW_BAR_CLASS: Record<ConversationWindow, string> = {
   [CONVERSATION_WINDOW.ALL]: 'bg-transparent',
   [CONVERSATION_WINDOW.FRESH]: 'bg-green-500',
@@ -76,6 +90,13 @@ export function ConversationRow({
   // ao `waitingHuman` escondia justamente o caso ruim: conversa assumida e esquecida.
   const isStalled = stalledMs > STALLED_THRESHOLD_MS
   const isWaiting = conversation.mode === 'bot' && conversation.waitingHuman
+  // Espera do cliente por resposta — outra coisa que a janela de sessão acima: aqui o relógio para
+  // quando alguém responde. Ver `replyLatency.ts`.
+  const replyLatency = replyLatencyOf({
+    lastDirection: conversation.lastDirection,
+    lastInboundAt: conversation.lastInboundAt,
+    now,
+  })
 
   // Realce e hover ficam na linha inteira: com eles no item, só o bloco dele ficava cinza enquanto
   // checkbox, barra lateral e pills continuavam brancos — parecia meia linha selecionada.
@@ -85,7 +106,7 @@ export function ConversationRow({
           duplica as bolinhas que o próprio ConversationListItem já desenha. */}
       <span
         className={cn('w-1 shrink-0', WINDOW_BAR_CLASS[window], classNames?.windowBar)}
-        title={WINDOW_TITLE[window]}
+        data-cv-tooltip={WINDOW_TITLE[window]}
         aria-label={WINDOW_TITLE[window]}
       />
 
@@ -118,16 +139,41 @@ export function ConversationRow({
             <ChannelIcon channel={conversation.channel} /> {capabilities.label}
           </span>
           {conversation.mode === 'human' ? (
-            <span className="cv-pill cv-pill--success">🧑‍💼 em atendimento</span>
+            <span className="cv-pill cv-pill--success">
+              <UserRound size={ICON_SIZE_PILL} aria-hidden="true" /> em atendimento
+            </span>
+          ) : null}
+          {isWaiting ? (
+            <span className="cv-pill cv-pill--warning">
+              <Hourglass size={ICON_SIZE_PILL} aria-hidden="true" /> aguardando atendimento
+            </span>
+          ) : null}
+          {!isWaiting && conversation.mode === 'bot' ? (
+            <span className="cv-pill">
+              <Bot size={ICON_SIZE_PILL} aria-hidden="true" /> bot ativo
+            </span>
+          ) : null}
+          {replyLatency ? (
+            <span className={cn('cv-pill', REPLY_LATENCY_PILL_CLASS[replyLatency])}>
+              <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> sem resposta há{' '}
+              {formatStalledFor(conversation.lastInboundAt ?? conversation.lastAt, now)}
+            </span>
           ) : null}
-          {isWaiting ? <span className="cv-pill cv-pill--warning">⏳ aguardando atendimento</span> : null}
-          {!isWaiting && conversation.mode === 'bot' ? <span className="cv-pill">🤖 bot ativo</span> : null}
           {isStalled ? (
-            <span className="cv-pill cv-pill--danger">⏱️ parada há {formatStalledFor(conversation.lastAt, now)}</span>
+            <span className="cv-pill cv-pill--danger">
+              <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> parada há{' '}
+              {formatStalledFor(conversation.lastAt, now)}
+            </span>
           ) : null}
           {isWaiting ? (
-            <button type="button" onClick={onTakeover} disabled={busy} className="cv-header-action">
-              ▶️ Continuar Atendimento
+            <button
+              type="button"
+              onClick={onTakeover}
+              disabled={busy}
+              data-cv-tooltip={TAKEOVER_LABEL} aria-label={TAKEOVER_LABEL}
+              className="cv-header-action"
+            >
+              <Play size={ICON_SIZE_ACTION} aria-hidden="true" /> {TAKEOVER_LABEL}
             </button>
           ) : null}
         </div>

package/src/DarkModeToggle.test.tsx

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { DarkModeToggle } from './DarkModeToggle'
+
+const noop = () => undefined
+
+describe('DarkModeToggle', () => {
+  it('nomeia o destino do clique, não o tema atual', () => {
+    const markup = renderToStaticMarkup(<DarkModeToggle isDark={false} onToggle={noop} />)
+
+    expect(markup).toContain('aria-label="Tema escuro"')
+  })
+
+  it('inverte o rótulo quando o tema escuro está no ar', () => {
+    const markup = renderToStaticMarkup(<DarkModeToggle isDark onToggle={noop} />)
+
+    expect(markup).toContain('aria-label="Tema claro"')
+  })
+
+  it('aceita rótulo do host', () => {
+    const markup = renderToStaticMarkup(
+      <DarkModeToggle isDark={false} onToggle={noop} labels={{ toDark: 'Modo noturno' }} />,
+    )
+
+    expect(markup).toContain('aria-label="Modo noturno"')
+  })
+
+  it('só-ícone garante a área de toque mínima', () => {
+    const markup = renderToStaticMarkup(<DarkModeToggle isDark={false} onToggle={noop} />)
+
+    expect(markup).toContain('cv-touch')
+  })
+
+  it('com rótulo visível dispensa a área de toque forçada e o tooltip', () => {
+    const markup = renderToStaticMarkup(<DarkModeToggle isDark={false} onToggle={noop} showLabel />)
+
+    expect(markup).not.toContain('cv-touch')
+    expect(markup).not.toContain('data-cv-tooltip')
+    expect(markup).toContain('Tema escuro')
+  })
+
+  it('deixa o host trocar a aparência sem herdar o utilitário do pacote', () => {
+    const markup = renderToStaticMarkup(
+      <DarkModeToggle isDark={false} onToggle={noop} className="rounded-2xl px-4" />,
+    )
+
+    expect(markup).toContain('rounded-2xl')
+    expect(markup).not.toContain('rounded-lg')
+    expect(markup).not.toContain('px-3')
+  })
+
+  /** Trava o contorno da limitação documentada: token do host não é família conhecida do merge. */
+  it('resolve raio de token do host quando ele vem na forma arbitrária', () => {
+    const markup = renderToStaticMarkup(
+      <DarkModeToggle isDark={false} onToggle={noop} className="rounded-[var(--radius-panel)]" />,
+    )
+
+    expect(markup).not.toContain('rounded-lg')
+  })
+
+  it('cede o tamanho do ícone quando o host manda classe', () => {
+    const markup = renderToStaticMarkup(
+      <DarkModeToggle isDark={false} onToggle={noop} classNames={{ icon: 'size-4' }} />,
+    )
+
+    expect(markup).toContain('size-4')
+    expect(markup).not.toContain('width="16"')
+  })
+
+  it('marca o ícone como decorativo — o rótulo já é anunciado', () => {
+    const markup = renderToStaticMarkup(<DarkModeToggle isDark={false} onToggle={noop} />)
+
+    expect(markup).toContain('aria-hidden="true"')
+  })
+})