@adatechnology/conversations-ui 0.1.0-rc.8 → 0.1.0

package/src/listing/index.tsx

@@ -0,0 +1,202 @@
+/**
+ * Peças de listagem que toda tela tabular do pacote precisa ter iguais: cabeçalho ordenável,
+ * filtro de seleção múltipla, barra de ação em lote e paginação (regra `web.md` §7).
+ *
+ * Vivem aqui, e não dentro de cada tela, porque a alternativa já se provou pior: cada workspace
+ * recriava o seu, e o mesmo "limpar filtros" ficava em três lugares com três comportamentos.
+ */
+
+import { useState, type ReactNode } from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, X } from 'lucide-react'
+
+import { cn } from '../lib/cn'
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortableHeadProps {
+  readonly label: string
+  readonly field: string
+  readonly activeField: string
+  readonly direction: SortDirection
+  readonly onSort: (field: string) => void
+  readonly className?: string
+}
+
+export function SortableHead({ label, field, activeField, direction, onSort, className }: SortableHeadProps) {
+  const isActive = activeField === field
+  const Icon = !isActive ? ArrowUpDown : direction === 'asc' ? ArrowUp : ArrowDown
+
+  return (
+    <th scope="col" className={cn('px-3 py-2 text-left text-xs font-medium', className)}>
+      <button
+        data-cv-tooltip={label}
+        type="button"
+        onClick={() => onSort(field)}
+        aria-label={label}
+        className="inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100"
+      >
+        {label}
+        <Icon size={12} className={isActive ? '' : 'opacity-40'} aria-hidden="true" />
+      </button>
+    </th>
+  )
+}
+
+export interface FilterOption {
+  readonly value: string
+  readonly label: string
+}
+
+export interface MultiSelectFilterProps {
+  readonly label: string
+  readonly options: readonly FilterOption[]
+  readonly selected: readonly string[]
+  readonly onChange: (selected: readonly string[]) => void
+  readonly className?: string
+}
+
+export function MultiSelectFilter({ label, options, selected, onChange, className }: MultiSelectFilterProps) {
+  const [open, setOpen] = useState(false)
+
+  function toggle(value: string): void {
+    onChange(selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value])
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <button
+        data-cv-tooltip={label} aria-label={label}
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="cv-header-action inline-flex items-center gap-1"
+      >
+        {label}
+        {selected.length > 0 ? <span className="cv-filter-count">{selected.length}</span> : null}
+        <ChevronDown size={12} className={open ? 'rotate-180 transition-transform' : 'transition-transform'} aria-hidden="true" />
+      </button>
+
+      {open ? (
+        <>
+          {/* Sem a camada de fundo o dropdown só fechava clicando de novo no botão, e ficava aberto
+              por cima da tabela enquanto o usuário tentava clicar numa linha. */}
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="cv-filter-menu">
+            {options.map((option) => (
+              <label key={option.value} className="cv-filter-option">
+                <input
+                  type="checkbox"
+                  checked={selected.includes(option.value)}
+                  onChange={() => toggle(option.value)}
+                  className="cursor-pointer rounded border-gray-300 text-blue-600 dark:border-gray-600"
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+export interface BulkActionBarProps {
+  readonly selectedCount: number
+  readonly selectedLabel: (count: number) => string
+  readonly clearLabel: string
+  readonly onClear: () => void
+  readonly children?: ReactNode
+}
+
+export function BulkActionBar({ selectedCount, selectedLabel, clearLabel, onClear, children }: BulkActionBarProps) {
+  if (selectedCount === 0) return null
+
+  return (
+    <div className="cv-bulk-bar" role="toolbar" aria-label={selectedLabel(selectedCount)}>
+      <span className="text-xs font-medium">{selectedLabel(selectedCount)}</span>
+      {children}
+      <button data-cv-tooltip={clearLabel} aria-label={clearLabel} type="button" onClick={onClear} className="cv-header-action ml-auto inline-flex items-center gap-1">
+        <X size={12} aria-hidden="true" />
+        {clearLabel}
+      </button>
+    </div>
+  )
+}
+
+export interface ListingPaginationProps {
+  readonly page: number
+  readonly total: number
+  readonly perPage: number
+  readonly perPageOptions?: readonly number[]
+  readonly onPageChange: (page: number) => void
+  readonly onPerPageChange?: (perPage: number) => void
+  readonly labels: {
+    readonly show: string
+    readonly perPage: string
+    readonly total: (count: number) => string
+    readonly page: (current: number, last: number) => string
+    readonly previous: string
+    readonly next: string
+  }
+}
+
+export function ListingPagination({
+  page,
+  total,
+  perPage,
+  perPageOptions,
+  onPageChange,
+  onPerPageChange,
+  labels,
+}: ListingPaginationProps) {
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+
+  return (
+    <div className="cv-listing-pagination">
+      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        {onPerPageChange && perPageOptions ? (
+          <>
+            <span>{labels.show}</span>
+            <select
+              value={perPage}
+              onChange={(event) => onPerPageChange(Number(event.target.value))}
+              aria-label={labels.perPage}
+              className="cv-listing-perpage"
+            >
+              {perPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+            <span>{labels.perPage}</span>
+          </>
+        ) : null}
+        <span className="ml-1">{labels.total(total)}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          data-cv-tooltip={labels.previous}
+          type="button"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          aria-label={labels.previous}
+          className="cv-header-icon disabled:opacity-40"
+        >
+          ‹
+        </button>
+        <span className="text-xs text-gray-500">{labels.page(page, lastPage)}</span>
+        <button
+          data-cv-tooltip={labels.next}
+          type="button"
+          onClick={() => onPageChange(page + 1)}
+          disabled={page >= lastPage}
+          aria-label={labels.next}
+          className="cv-header-icon disabled:opacity-40"
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/pagination.constant.ts

@@ -0,0 +1,10 @@
+/**
+ * Rótulos dos controles de paginação. Os pagers da inbox, do painel de documentos e da biblioteca
+ * são o mesmo controle repetido: o texto mora aqui para os três dizerem a mesma coisa.
+ */
+export const PAGINATION_LABELS = {
+  first: 'Primeira página',
+  previous: 'Página anterior',
+  next: 'Próxima página',
+  last: 'Última página',
+} as const

package/src/preview/ConversationPreview.tsx

@@ -1,7 +1,11 @@
 /**
- * Visão lado-cliente: você digita como se fosse o cliente no WhatsApp e vê o bot responder. A
- * mensagem sai assinada para o webhook real, então o que roda aqui é o mesmo caminho de staging e
- * produção — webhook, parser, motor de conversa.
+ * Visão lado-cliente: você digita como se fosse o cliente e vê o bot responder. A mensagem sai pelo
+ * transporte real do canal — webhook assinado no WhatsApp, rota pública do widget no chat do site —,
+ * então o que roda aqui é o mesmo caminho de staging e produção: parser, motor de conversa, fluxo.
+ *
+ * O canal entra por `client` (a porta `ConversationSimulatorClient`), não por condicional aqui
+ * dentro: esta tela não sabe qual canal está simulando, e é o que permite o painel ficar no mesmo
+ * lugar da conversa para todos eles.
  *
  * É o layout de conversa de verdade (wallpaper, divisor de data, agrupamento de bolhas), não uma
  * casca de teste: o preview serve para julgar copy e fluxo, e isso só funciona se o que se vê
@@ -19,11 +23,24 @@ import { MessageBubble } from '../MessageBubble'
 import { MessageComposer } from '../MessageComposer'
 import { DateDivider } from '../DateDivider'
 import { ConversationWallpaper } from '../Wallpaper'
-import type { PreviewWebhookClient, SendPreviewMediaParams } from './createPreviewWebhookClient'
-import { AudioRecorderButton } from './AudioRecorderButton'
+import type { PreviewWebhookClient } from './createPreviewWebhookClient'
+import {
+  acceptsMediaKind,
+  isConversationSimulatorClient,
+  mediaKindOf,
+  SIMULATOR_FILE_MEDIA_KINDS,
+  toConversationSimulatorClient,
+  type ConversationSimulatorClient,
+  type SimulatorMediaKind,
+} from './ConversationSimulatorClient'
+import { AudioRecorderButton } from '../AudioRecorderButton'
 
 export type ConversationPreviewProps = {
-  client: PreviewWebhookClient
+  /**
+   * Transporte do canal. `PreviewWebhookClient` continua aceito — é o caminho WhatsApp de antes
+   * desta porta, adaptado aqui dentro para não obrigar host nenhum a mudar de chamada.
+   */
+  client: ConversationSimulatorClient | PreviewWebhookClient
   sse: SSEProvider
   conversationId: string
   loadMessages: (conversationId: string) => Promise<MessagePayload[]>
@@ -35,10 +52,9 @@ export type ConversationPreviewProps = {
    */
   pollIntervalMs?: number
   /**
-   * Como transformar um arquivo do disco (ou o áudio gravado) na referência que o webhook carrega.
-   * O caminho da Meta entrega mídia por `id`, e quem sabe hospedar o arquivo é o host — a SDK não
-   * inventa um endpoint de upload. Ausente, o compositor não oferece anexo nem gravação: melhor um
-   * botão que não existe do que um que falha ao ser tocado.
+   * Destino alternativo do upload, no canal que sobe a mídia antes de citá-la (o caminho da Meta
+   * entrega mídia por `id`). Sem isto, usa o do próprio `client`. Canal que manda os bytes direto
+   * ignora esta prop: quem decide referência × bytes é o adaptador do canal.
    */
   uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>
 }
@@ -49,12 +65,9 @@ export type PreviewUploadedMedia = {
   readonly filename?: string
 }
 
-/** Deriva o tipo de mídia do WhatsApp a partir do MIME do arquivo escolhido. */
-export function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'] {
-  if (mimeType.startsWith('image/')) return 'image'
-  if (mimeType.startsWith('video/')) return 'video'
-  if (mimeType.startsWith('audio/')) return 'audio'
-  return 'document'
+/** @deprecated Use `mediaKindOf`, que não nomeia canal. Mantido para quem já importa. */
+export function mediaTypeOf(mimeType: string): SimulatorMediaKind {
+  return mediaKindOf(mimeType)
 }
 
 // Mesma janela usada pelo WhatsApp para colar bolhas do mesmo autor: acima disso, a mensagem
@@ -128,6 +141,7 @@ export function ConversationPreview({
   const [messages, setMessages] = useState<MessagePayload[]>([])
   const [failure, setFailure] = useState<string | undefined>(undefined)
   const [loadFailure, setLoadFailure] = useState<string | undefined>(undefined)
+  const [isRecording, setIsRecording] = useState(false)
   // Mensagens que o servidor ainda não devolveu. Sem isto, quem não consegue LER a conversa (sessão
   // ausente, API fora) digita, envia com sucesso e não vê absolutamente nada mudar — o preview fica
   // indistinguível de quebrado. São descartadas assim que uma leitura dá certo: aí quem manda na
@@ -137,6 +151,14 @@ export function ConversationPreview({
   const bottomRef = useRef<HTMLDivElement>(null)
   loadMessagesRef.current = loadMessages
 
+  const simulator = useMemo(
+    () =>
+      isConversationSimulatorClient(client)
+        ? client
+        : toConversationSimulatorClient({ client, ...(uploadMedia ? { uploadMedia } : {}) }),
+    [client, uploadMedia],
+  )
+
   const refresh = useCallback(async (): Promise<void> => {
     try {
       const loaded = await loadMessagesRef.current(conversationId)
@@ -187,7 +209,10 @@ export function ConversationPreview({
   }, [pollIntervalMs, refresh])
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+    // `block: 'nearest'` e não o padrão ('start'): o padrão alinha o elemento ao topo da área
+    // visível MAIS PRÓXIMA que role — e quando o container do preview não tem altura limitada, essa
+    // área é a PÁGINA. O efeito era a tela inteira saltar para baixo ao abrir/usar o simulador.
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
   }, [messages])
 
   const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal])
@@ -202,7 +227,7 @@ export function ConversationPreview({
   async function handleSend(text: string): Promise<void> {
     setFailure(undefined)
     try {
-      await client.sendText(text)
+      await simulator.sendText(text)
       setPendingLocal((current) => [
         ...current,
         {
@@ -230,28 +255,38 @@ export function ConversationPreview({
 
   async function handleInteractiveSelect(selection: InteractiveSelection): Promise<void> {
     setFailure(undefined)
-    const reply = { id: selection.option.id, title: selection.option.title }
     try {
-      // Botão e lista são payloads diferentes para a Meta (`button_reply` × `list_reply`), e o
-      // roteador do fluxo lê campos distintos: tratar os dois como um só faria o menu responder no
-      // simulador e falhar no aparelho do cliente.
-      await (selection.kind === 'button' ? client.sendButtonReply(reply) : client.sendListReply(reply))
+      // A seleção viaja inteira (botão × lista) porque a forma de fio é do canal: a Meta separa
+      // `button_reply` de `list_reply` e o roteador do fluxo lê campos distintos, enquanto o chat do
+      // site manda o rótulo como texto. Decidir isso aqui faria o menu responder no simulador e
+      // falhar no aparelho do cliente.
+      await simulator.sendReply(selection)
       await refreshWithFollowUps()
     } catch (error) {
       setFailure(error instanceof Error ? error.message : 'Falha ao entregar a resposta no webhook.')
     }
   }
 
+  /**
+   * O transporte do canal diz se aceita mídia do cliente; a tela só pergunta.
+   *
+   * Antes isto era `uploadMedia` puro, e o microfone só aparecia no produto que lembrasse de montar
+   * o upload — de onde veio a divergência entre dois simuladores da mesma casa. Agora quem responde
+   * é o adaptador: no WhatsApp ele precisa de um destino de upload, no chat do site manda os bytes.
+   */
+  const sendMedia = simulator.sendMedia
+  const canAttachFile = SIMULATOR_FILE_MEDIA_KINDS.some((kind) => acceptsMediaKind(simulator, kind))
+  const canRecordAudio = acceptsMediaKind(simulator, 'audio')
+
   async function handleAttach(file: File): Promise<void> {
-    if (!uploadMedia) return
+    if (!sendMedia) return
     setFailure(undefined)
     try {
-      const uploaded = await uploadMedia(file)
-      await client.sendMedia({
-        mediaType: mediaTypeOf(uploaded.mimeType ?? file.type),
-        mediaId: uploaded.mediaId,
-        mimeType: uploaded.mimeType ?? file.type,
-        filename: uploaded.filename ?? file.name,
+      await sendMedia({
+        mediaKind: mediaKindOf(file.type),
+        file,
+        mimeType: file.type,
+        filename: file.name,
       })
       await refreshWithFollowUps()
     } catch (error) {
@@ -297,21 +332,25 @@ export function ConversationPreview({
         </p>
       ) : null}
 
-      <div className="flex items-end gap-1">
-        <div className="min-w-0 flex-1">
-          <MessageComposer
-            onSend={(text) => void handleSend(text)}
-            onAttach={uploadMedia ? (file) => void handleAttach(file) : undefined}
-            placeholder={placeholder ?? 'Escreva como o cliente…'}
-          />
-        </div>
-        {uploadMedia ? (
-          <AudioRecorderButton
-            onRecorded={(file) => void handleAttach(file)}
-            onFailure={(message) => setFailure(message)}
-          />
-        ) : null}
-      </div>
+      <MessageComposer
+        onSend={(text) => void handleSend(text)}
+        onAttach={canAttachFile ? (file) => void handleAttach(file) : undefined}
+        /* Gravando, o campo diz o que falta fazer: o botão é um interruptor e o segundo toque é
+           que envia — sem esse aviso o operador grava, não vê nada acontecer e conclui que o
+           microfone está quebrado. */
+        placeholder={
+          isRecording ? 'Gravando… toque no quadrado para ouvir' : (placeholder ?? 'Escreva como o cliente…')
+        }
+        idleAction={
+          canRecordAudio ? (
+            <AudioRecorderButton
+              onRecorded={(file) => void handleAttach(file)}
+              onFailure={(message) => setFailure(message)}
+              onRecordingChange={setIsRecording}
+            />
+          ) : undefined
+        }
+      />
     </div>
   )
 }

package/src/preview/ConversationSimulatorClient.ts

@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2026 Ada Technology. All rights reserved.
+ *
+ * This source code is proprietary and confidential. Unauthorized copying,
+ * modification, distribution, or use of this file, via any medium, is
+ * strictly prohibited without prior written permission from Ada Technology.
+ *
+ * Author: Anderson Filho <andersonfrfilho@gmail.com>
+ *
+ * Porta do simulador: o que a visão lado-cliente precisa saber fazer, sem canal no nome.
+ *
+ * O simulador nasceu falando WhatsApp — `PreviewWebhookClient`, payload assinado, mídia por
+ * `mediaId`. Só que a mesma casa atende pelo chat do próprio site, e simular ali não é uma segunda
+ * tela: é o mesmo painel, no mesmo lugar da conversa, com outro transporte. Sem esta porta cada
+ * canal novo viraria uma cópia da tela — e cópia de tela diverge, que é exatamente o que o
+ * `ConversationSimulatorPanel` existe para ter parado.
+ *
+ * O que é específico de canal fica no adaptador, nunca aqui:
+ * - **resposta de menu:** a Meta distingue `button_reply` de `list_reply`, e o roteador do fluxo lê
+ *   campos diferentes; o chat do site manda o rótulo como texto, que é literalmente o que o
+ *   visitante produz ao tocar no botão do widget. A porta entrega a seleção inteira e deixa cada
+ *   adaptador escolher a forma de fio.
+ * - **mídia:** a Meta entrega por REFERÊNCIA (sobe o arquivo primeiro, o webhook carrega o `id`); o
+ *   widget manda os BYTES no `FormData`. A porta trafega o `File` que a tela tem em mão — quem
+ *   tiver passo de upload faz o upload por dentro.
+ */
+
+import type { InteractiveSelection } from '../types'
+import type { PreviewUploadedMedia } from './createPreviewMediaUploader'
+import type { PreviewWebhookClient } from './createPreviewWebhookClient'
+
+/**
+ * Tipos de mídia que o cliente pode mandar de dentro do simulador.
+ *
+ * Subconjunto proposital do que a Meta aceita: `sticker` chega do aparelho, mas não há como
+ * escolher um no seletor de arquivo do navegador — oferecer o tipo aqui seria um caminho morto.
+ */
+export type SimulatorMediaKind = 'image' | 'video' | 'audio' | 'document'
+
+/** Os tipos que saem do seletor de arquivo. `audio` fica de fora: ele vem do microfone. */
+export const SIMULATOR_FILE_MEDIA_KINDS: readonly SimulatorMediaKind[] = ['image', 'video', 'document']
+
+/** Deriva o tipo de mídia a partir do MIME do arquivo escolhido. */
+export function mediaKindOf(mimeType: string): SimulatorMediaKind {
+  if (mimeType.startsWith('image/')) return 'image'
+  if (mimeType.startsWith('video/')) return 'video'
+  if (mimeType.startsWith('audio/')) return 'audio'
+  return 'document'
+}
+
+export type SendSimulatorMediaParams = {
+  readonly mediaKind: SimulatorMediaKind
+  /** O arquivo do disco ou o áudio recém-gravado. Referência × bytes é decisão do adaptador. */
+  readonly file: File
+  readonly mimeType?: string
+  readonly filename?: string
+  readonly caption?: string
+}
+
+export type ConversationSimulatorClient = {
+  sendText(text: string): Promise<void>
+  sendReply(selection: InteractiveSelection): Promise<void>
+  /**
+   * Ausente = este canal não recebe mídia do cliente, e o compositor não desenha clipe nem
+   * microfone. Melhor um botão que não existe do que um que falha ao ser tocado.
+   */
+  sendMedia?(params: SendSimulatorMediaParams): Promise<void>
+  /**
+   * Restringe o que `sendMedia` aceita. Ausente = todos os tipos.
+   *
+   * Existe porque canal com meia capacidade é comum: o chat do site sobe áudio (a API transcreve)
+   * mas não tem rota para imagem. Sem esta lista o clipe e o microfone apareciam juntos, e um dos
+   * dois falhava ao ser tocado.
+   */
+  readonly acceptedMediaKinds?: readonly SimulatorMediaKind[]
+}
+
+/** Responde se o compositor deve desenhar o affordance daquele tipo. */
+export function acceptsMediaKind(client: ConversationSimulatorClient, kind: SimulatorMediaKind): boolean {
+  if (!client.sendMedia) return false
+
+  return client.acceptedMediaKinds?.includes(kind) ?? true
+}
+
+export type ToSimulatorClientParams = {
+  readonly client: PreviewWebhookClient
+  /** Destino alternativo do upload. Sem isto, usa o do próprio `client`. */
+  readonly uploadMedia?: (file: File) => Promise<PreviewUploadedMedia>
+}
+
+/**
+ * Distingue a porta neutra do cliente WhatsApp legado, que continua aceito na prop.
+ *
+ * Leitura estrutural e não `instanceof`: os dois são objetos literais devolvidos por fábrica, e o
+ * host pode ter montado o seu à mão.
+ */
+export function isConversationSimulatorClient(
+  candidate: ConversationSimulatorClient | PreviewWebhookClient,
+): candidate is ConversationSimulatorClient {
+  return typeof (candidate as ConversationSimulatorClient).sendReply === 'function'
+}
+
+/**
+ * Adapta o cliente WhatsApp (webhook assinado ou ponte) para a porta neutra.
+ *
+ * O upload vive aqui dentro porque ele é uma etapa DO CANAL: no caminho da Meta a mídia precisa
+ * existir como `id` antes do webhook citá-la. Sem passo de upload disponível, `sendMedia` sai
+ * ausente — é o que mantém o clipe escondido em host que não montou destino para o arquivo, o
+ * comportamento que já existia antes desta porta.
+ */
+export function toConversationSimulatorClient({
+  client,
+  uploadMedia,
+}: ToSimulatorClientParams): ConversationSimulatorClient {
+  const upload = uploadMedia ?? client.uploadMedia
+
+  const base: ConversationSimulatorClient = {
+    sendText: (text) => client.sendText(text),
+    sendReply: (selection) => {
+      const reply = { id: selection.option.id, title: selection.option.title }
+      return selection.kind === 'button' ? client.sendButtonReply(reply) : client.sendListReply(reply)
+    },
+  }
+
+  if (!upload) return base
+
+  return {
+    ...base,
+    sendMedia: async ({ mediaKind, file, mimeType, filename, caption }) => {
+      const uploaded = await upload(file)
+      await client.sendMedia({
+        // O tipo sai do MIME que o upload devolveu quando ele existe: host que normaliza o formato
+        // (áudio gravado em `webm` que sobe como `ogg`) mudava de tipo, e a mídia chegava como
+        // documento.
+        mediaType: uploaded.mimeType ? mediaKindOf(uploaded.mimeType) : mediaKind,
+        mediaId: uploaded.mediaId,
+        mimeType: uploaded.mimeType ?? mimeType ?? file.type,
+        filename: uploaded.filename ?? filename ?? file.name,
+        ...(caption ? { caption } : {}),
+      })
+    },
+  }
+}

package/src/preview/ConversationSimulatorPanel.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationSimulatorPanel, type ConversationSimulatorPanelProps } from './ConversationSimulatorPanel'
+import { createMockSSEProvider } from './createMockSSEProvider'
+import { createPreviewStore } from './previewStore'
+
+function markupOf(overrides: Partial<ConversationSimulatorPanelProps> = {}): string {
+  const store = createPreviewStore({ conversations: [], messages: {} })
+
+  return renderToStaticMarkup(
+    <ConversationSimulatorPanel
+      conversationId="5511900000042"
+      onClose={() => {}}
+      client={{ sendText: async () => {}, sendInteractiveReply: async () => {} } as never}
+      sse={createMockSSEProvider({ store })}
+      loadMessages={async () => []}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ConversationSimulatorPanel', () => {
+  it('mostra o telefone formatado pelo host, e não o id cru', () => {
+    expect(markupOf({ displayNumber: '+55 (11) 90000-0042' })).toContain('+55 (11) 90000-0042')
+  })
+
+  it('cai no id da conversa quando o host não formata', () => {
+    expect(markupOf()).toContain('5511900000042')
+  })
+
+  it('avisa para onde a mensagem vai, para ninguém achar que é conversa de mentira', () => {
+    expect(markupOf()).toContain('entrega no webhook real')
+  })
+
+  it('dá nome acessível ao botão de fechar, que só tem ícone', () => {
+    expect(markupOf()).toContain('aria-label="Fechar simulador"')
+  })
+
+  it('aceita rótulos parciais do host sem exigir o conjunto inteiro', () => {
+    const markup = markupOf({ labels: { title: 'Testar fluxo' } })
+
+    expect(markup).toContain('Testar fluxo')
+    // O que não foi sobrescrito continua no default.
+    expect(markup).toContain('aria-label="Fechar simulador"')
+  })
+
+  it('renderiza ação extra do host no cabeçalho', () => {
+    expect(markupOf({ headerActions: <button type="button">Rodar roteiro</button> })).toContain('Rodar roteiro')
+  })
+
+  it('nomeia o próprio aside, para o leitor de tela distinguir do transcript ao lado', () => {
+    expect(markupOf()).toContain('aria-label="Simulador do cliente"')
+  })
+})