@adatechnology/conversations-ui 0.4.2 → 0.6.0

package/src/participant/ParticipantComposer.tsx

@@ -0,0 +1,167 @@
+import { useRef, useState, type ChangeEvent, type FormEvent } from 'react'
+
+import { channelCapabilityFor } from '../channelCapability'
+import type { ConversationChannel } from '../conversationChannel'
+import { formatFileSize } from '../lib/format'
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import { maxBytesForChannel, reduceFilesSelection, type ParticipantFileRejection } from './participantFileValidation'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { applyQuickReply } from './participantQuickReply'
+
+export type ParticipantComposerProps = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly files: readonly File[]
+  readonly onFilesChange: (files: readonly File[]) => void
+  readonly onSend: () => void
+  readonly labels: ParticipantConversationsLabels
+  /** Absent means the `app` channel. */
+  readonly channel?: ConversationChannel
+  readonly disabled?: boolean
+  /** Blocks only the send button: the field stays editable while a send is in flight. */
+  readonly isSending?: boolean
+  readonly maxLength?: number
+  /** MIME types or wildcards offered to the file picker and enforced before sending. */
+  readonly acceptedTypes?: readonly string[]
+  /** Tapping a chip fills the text; it never sends. Absent or empty means no strip. */
+  readonly quickReplies?: readonly QuickReply[]
+}
+
+type QuickReplyStripProps = {
+  readonly quickReplies: readonly QuickReply[]
+  readonly labels: ParticipantConversationsLabels
+  readonly onPick: (body: string) => void
+}
+
+function QuickReplyStrip({ quickReplies, labels, onPick }: QuickReplyStripProps) {
+  return (
+    <div className="cv-p-quick" role="group" aria-label={labels.quickRepliesGroup}>
+      {quickReplies.map((quickReply) => (
+        <button key={quickReply.id} type="button" className="cv-p-chip" onClick={() => onPick(quickReply.body)}>
+          {quickReply.title}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+type FileListProps = {
+  readonly files: readonly File[]
+  readonly labels: ParticipantConversationsLabels
+  readonly onRemove: (file: File) => void
+}
+
+function FileList({ files, labels, onRemove }: FileListProps) {
+  if (files.length === 0) return null
+  return (
+    <ul className="cv-p-files" aria-label={labels.attachmentsList}>
+      {files.map((file, index) => (
+        <li key={`${file.name}-${file.size}-${index}`} className="cv-p-files__item">
+          <span className="cv-p-files__name">{file.name}</span>
+          <span className="cv-p-files__size">{formatFileSize(file.size)}</span>
+          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} onClick={() => onRemove(file)}>
+            <span aria-hidden="true">×</span>
+            <span className="cv-p-sr-only">{labels.removeAttachment}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function rejectionText(rejection: ParticipantFileRejection, labels: ParticipantConversationsLabels): string {
+  return rejection === 'tooLarge' ? labels.attachmentTooLarge : labels.attachmentTypeNotAccepted
+}
+
+type AttachControlProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly disabled: boolean
+  readonly acceptedTypes?: readonly string[]
+  readonly onChosen: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+function AttachControl({ labels, disabled, acceptedTypes, onChosen }: AttachControlProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        className="cv-p-composer__file-input"
+        type="file"
+        multiple
+        hidden
+        accept={acceptedTypes?.join(',')}
+        onChange={onChosen}
+      />
+      <button type="button" className="cv-p-button" disabled={disabled} onClick={() => fileInputRef.current?.click()}>
+        <span aria-hidden="true">＋</span>
+        <span className="cv-p-sr-only">{labels.attach}</span>
+      </button>
+    </>
+  )
+}
+
+function useFileSelection(props: ParticipantComposerProps) {
+  const [rejection, setRejection] = useState<ParticipantFileRejection | undefined>(undefined)
+  const { files, onFilesChange, channel } = props
+  const maxBytes = maxBytesForChannel(channel)
+
+  function handleFilesChosen(event: ChangeEvent<HTMLInputElement>): void {
+    const chosen = Array.from(event.target.files ?? [])
+    event.target.value = ''
+    const result = reduceFilesSelection({ current: files, incoming: chosen, maxBytes, acceptedTypes: props.acceptedTypes })
+    setRejection(result.rejected[0]?.reason)
+    if (result.files.length !== files.length) onFilesChange(result.files)
+  }
+
+  function handleRemoveFile(file: File): void {
+    setRejection(undefined)
+    onFilesChange(files.filter((current) => current !== file))
+  }
+
+  return { rejection, handleFilesChosen, handleRemoveFile }
+}
+
+export function ParticipantComposer(props: ParticipantComposerProps) {
+  const { value, onChange, files, onSend, labels, channel = 'app', disabled = false, isSending = false } = props
+  const { rejection, handleFilesChosen, handleRemoveFile } = useFileSelection(props)
+  const canSend = !disabled && !isSending && (value.trim().length > 0 || files.length > 0)
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault()
+    if (canSend) onSend()
+  }
+
+  return (
+    <form className="cv-p-composer" onSubmit={handleSubmit}>
+      {props.quickReplies && props.quickReplies.length > 0 ? (
+        <QuickReplyStrip quickReplies={props.quickReplies} labels={labels} onPick={(body) => onChange(applyQuickReply(value, body))} />
+      ) : null}
+      <FileList files={files} labels={labels} onRemove={handleRemoveFile} />
+      {rejection ? (
+        <p className="cv-p-composer__error" role="alert">
+          {rejectionText(rejection, labels)}
+        </p>
+      ) : null}
+      <div className="cv-p-composer__row">
+        {channelCapabilityFor(channel).attachments.accepted ? (
+          <AttachControl labels={labels} disabled={disabled} acceptedTypes={props.acceptedTypes} onChosen={handleFilesChosen} />
+        ) : null}
+        <textarea
+          className="cv-p-composer__input"
+          aria-label={labels.messageInputLabel}
+          placeholder={labels.messageInputPlaceholder}
+          rows={1}
+          value={value}
+          maxLength={props.maxLength}
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value)}
+        />
+        <button type="submit" className="cv-p-button cv-p-button--primary" disabled={!canSend}>
+          <span aria-hidden="true">➤</span>
+          <span className="cv-p-sr-only">{labels.send}</span>
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/participant/ParticipantConversations.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantConversations } from './ParticipantConversations'
+import { ParticipantConversationsScreen, type ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
+import type { ParticipantConversationsApi } from './participantApi.types'
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+
+const API: ParticipantConversationsApi = {
+  listConversations: async () => ({ data: [] }),
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  markRead: async () => undefined,
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+const GROUPS = [{ subjectType: 'invoice', label: 'Invoices' }]
+
+function renderScreen(overrides: Partial<ParticipantConversationsScreenProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantConversationsScreen
+      api={API}
+      subjectGroups={GROUPS}
+      selected={undefined}
+      onSelect={() => undefined}
+      inbox={{
+        status: 'ready',
+        conversations: [buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })],
+        hasMore: false,
+        refresh: async () => undefined,
+        loadMore: async () => undefined,
+        markSubjectRead: () => undefined,
+      }}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantConversations', () => {
+  it('renders the list without any ConversationsProvider around it', () => {
+    const markup = renderToStaticMarkup(
+      <ParticipantConversations api={API} subjectGroups={GROUPS} selected={undefined} onSelect={() => undefined} />,
+    )
+
+    expect(markup).toContain('cv-p-inbox')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+
+  it('renders the inbox rows when selected is undefined', () => {
+    const markup = renderScreen()
+
+    expect(markup).toContain('cv-p-inbox')
+    expect(markup).toContain('Invoice 4521')
+    expect(markup).not.toContain('cv-p-thread')
+  })
+
+  it('mounts the conversation shell with the subject label when selected is set', () => {
+    const markup = renderScreen({ selected: { subjectType: 'invoice', subjectId: '1' } })
+
+    expect(markup).toContain('cv-p-thread__title')
+    expect(markup).toContain('Invoice 4521')
+    expect(markup).not.toContain('cv-p-inbox')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('shows the not-found state when the subject is absent and the api cannot open it', () => {
+    const markup = renderScreen({ selected: { subjectType: 'invoice', subjectId: '999' } })
+
+    expect(markup).toContain('Conversation not found')
+  })
+
+  it('merges partial labels over the defaults', () => {
+    const markup = renderScreen({ labels: { inboxTitle: 'Minhas conversas' } })
+
+    expect(markup).toContain('Minhas conversas')
+  })
+
+  it('applies the theme as --cv-p-* variables and the class names on the wrapper', () => {
+    const markup = renderScreen({
+      theme: { primaryColor: '#123456' },
+      className: 'host-wrapper',
+      classNames: { inbox: 'host-inbox' },
+    })
+
+    expect(markup).toContain('--cv-p-accent:#123456')
+    expect(markup).toContain('host-wrapper')
+    expect(markup).toContain('host-inbox')
+  })
+})

package/src/participant/ParticipantConversations.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import type { ConversationChannel } from '../conversationChannel'
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ConversationsTheme } from '../types'
+import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
+import type {
+  ParticipantConversationsClassNames,
+  ParticipantSubjectGroup,
+  ParticipantSubjectIconRenderer,
+} from './participant.types'
+import type { ParticipantConversationsApi, ParticipantPendingMessage } from './participantApi.types'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { useParticipantInbox } from './useParticipantInbox'
+
+export type ParticipantConversationsProps = {
+  api: ParticipantConversationsApi
+  subjectGroups: readonly ParticipantSubjectGroup[]
+  /** undefined renders the list; defined renders that conversation. */
+  selected: ParticipantSubjectRef | undefined
+  onSelect: (subject: ParticipantSubjectRef) => void
+  onBack?: () => void
+  channel?: ConversationChannel
+  labels?: Partial<ParticipantConversationsLabels>
+  locale?: string
+  theme?: ConversationsTheme
+  className?: string
+  classNames?: Partial<ParticipantConversationsClassNames>
+  pendingMessages?: readonly ParticipantPendingMessage[]
+  onRetryPending?: (clientMessageId: string) => void
+  quickReplies?: readonly QuickReply[]
+  renderSubjectIcon?: ParticipantSubjectIconRenderer
+  renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
+  onOpenSubject?: (subject: ParticipantSubjectRef) => void
+}
+
+export function ParticipantConversations(props: ParticipantConversationsProps) {
+  const inbox = useParticipantInbox(props.api)
+  const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox
+
+  return (
+    <ParticipantConversationsScreen
+      {...props}
+      inbox={{ status, conversations, hasMore, refresh, loadMore, markSubjectRead }}
+    />
+  )
+}

package/src/participant/ParticipantConversationsScreen.tsx

@@ -0,0 +1,78 @@
+import { useMemo, useReducer, useRef, useState } from 'react'
+
+import { ParticipantInbox } from './ParticipantInbox'
+import type { ParticipantConversationsProps } from './ParticipantConversations'
+import { ParticipantThreadScreen } from './ParticipantThreadScreen'
+import { draftKey, type ParticipantDrafts } from './participantDrafts'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { isInboxSearchVisible } from './participantProtocol'
+import { participantSendStatesReducer } from './participantSendStates'
+import { buildParticipantThemeStyle } from './participantTheme'
+import type { UseParticipantInboxResult } from './useParticipantInbox'
+
+export type ParticipantConversationsScreenProps = ParticipantConversationsProps & {
+  readonly inbox: Pick<
+    UseParticipantInboxResult,
+    'status' | 'conversations' | 'hasMore' | 'refresh' | 'loadMore' | 'markSubjectRead'
+  >
+}
+
+const ALL_FILTER = 'all'
+
+export function ParticipantConversationsScreen(props: ParticipantConversationsScreenProps) {
+  const { selected, inbox, subjectGroups, classNames } = props
+  const [filter, setFilter] = useState(ALL_FILTER)
+  const [searchQuery, setSearchQuery] = useState('')
+  const draftsRef = useRef<ParticipantDrafts>(new Map())
+  const [sendStates, dispatchSendStates] = useReducer(participantSendStatesReducer, new Map())
+  const labels = useMemo(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels])
+  const view = useMemo(
+    () =>
+      groupParticipantConversations({
+        conversations: inbox.conversations,
+        subjectGroups,
+        filter,
+        searchQuery,
+      }),
+    [inbox.conversations, subjectGroups, filter, searchQuery],
+  )
+  const isSearchVisible = isInboxSearchVisible({ conversations: inbox.conversations, searchQuery })
+  const rootClassName = ['cv-p-root', props.className, classNames?.root].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName} style={buildParticipantThemeStyle(props.theme)}>
+      {selected === undefined ? (
+        <div className={['cv-p-root__screen', classNames?.inbox].filter(Boolean).join(' ')}>
+          <ParticipantInbox
+            view={view}
+            subjectGroups={subjectGroups}
+            filter={filter}
+            onFilterChange={setFilter}
+            onSelect={props.onSelect}
+            labels={labels}
+            status={inbox.status}
+            refresh={() => void inbox.refresh()}
+            hasMore={inbox.hasMore}
+            loadMore={() => void inbox.loadMore()}
+            locale={props.locale}
+            renderSubjectIcon={props.renderSubjectIcon}
+            search={{ value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }}
+          />
+        </div>
+      ) : (
+        <div className={['cv-p-root__screen', classNames?.thread].filter(Boolean).join(' ')}>
+          <ParticipantThreadScreen
+            key={draftKey(selected)}
+            {...props}
+            selected={selected}
+            labels={labels}
+            draftsRef={draftsRef}
+            sendStates={sendStates}
+            dispatchSendStates={dispatchSendStates}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/participant/ParticipantInbox.test.tsx

@@ -0,0 +1,244 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import type { ParticipantSubjectGroup } from './participant.types'
+import { ParticipantInbox, type ParticipantInboxProps } from './ParticipantInbox'
+
+const GROUPS: readonly ParticipantSubjectGroup[] = [
+  { subjectType: 'invoice', label: 'Invoice' },
+  { subjectType: 'incident', label: 'Incident' },
+]
+
+const CONVERSATIONS = [
+  buildConversation({
+    subjectId: '1',
+    subjectLabel: 'Awaiting one',
+    awaitingParticipant: true,
+    unreadCount: 2,
+    lastMessagePreview: 'Please send the photo',
+  }),
+  buildConversation({ subjectId: '2', subjectLabel: 'Invoice two' }),
+  buildConversation({ subjectId: '3', subjectType: 'incident', subjectLabel: 'Incident three' }),
+  buildConversation({ subjectId: '4', subjectLabel: 'Old one', status: 'closed' }),
+]
+
+type RenderOverrides = {
+  conversations?: typeof CONVERSATIONS
+  filter?: string
+  status?: 'idle' | 'loading' | 'ready' | 'error'
+  hasMore?: boolean
+  renderSubjectIcon?: ParticipantInboxProps['renderSubjectIcon']
+}
+
+function render(overrides: RenderOverrides = {}): string {
+  const view = groupParticipantConversations({
+    conversations: overrides.conversations ?? CONVERSATIONS,
+    subjectGroups: GROUPS,
+    filter: overrides.filter,
+  })
+  return renderToStaticMarkup(
+    <ParticipantInbox
+      view={view}
+      subjectGroups={GROUPS}
+      filter={overrides.filter ?? 'all'}
+      onFilterChange={() => undefined}
+      onSelect={() => undefined}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      status={overrides.status ?? 'ready'}
+      refresh={() => undefined}
+      hasMore={overrides.hasMore ?? false}
+      loadMore={() => undefined}
+      renderSubjectIcon={overrides.renderSubjectIcon}
+    />,
+  )
+}
+
+describe('ParticipantInbox channels and subject icon', () => {
+  const withChannels = [
+    buildConversation({ subjectId: '9', subjectLabel: 'Chatty', channels: ['whatsapp', 'app'], iconName: 'file-text' }),
+  ]
+
+  it('shows channel badges only when the conversation has channels', () => {
+    expect(render({ conversations: withChannels })).toContain('cv-p-channel--app')
+    expect(render()).not.toContain('cv-p-channels')
+  })
+
+  it('keeps the badge order stable and the accessible text present', () => {
+    const markup = render({ conversations: withChannels })
+
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+  })
+
+  it('row badges are phrasing content: no list inside the row button, header keeps its list', () => {
+    const markup = render({ conversations: withChannels })
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+
+    expect(button).toContain('cv-p-channels')
+    expect(button).not.toContain('<ul')
+    expect(button).not.toContain('<li')
+    expect(button).toContain('Channels in this conversation: ')
+  })
+
+  it('treats false and empty string from renderSubjectIcon as absent', () => {
+    const groups = [{ subjectType: 'invoice', label: 'Invoice', icon: 'GRP' }]
+    const view = groupParticipantConversations({ conversations: withChannels, subjectGroups: groups })
+    const renderWith = (renderSubjectIcon: ParticipantInboxProps['renderSubjectIcon']) =>
+      renderToStaticMarkup(
+        <ParticipantInbox
+          view={view}
+          subjectGroups={groups}
+          filter="all"
+          onFilterChange={() => undefined}
+          onSelect={() => undefined}
+          labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+          status="ready"
+          refresh={() => undefined}
+          hasMore={false}
+          loadMore={() => undefined}
+          renderSubjectIcon={renderSubjectIcon}
+        />,
+      )
+
+    expect(renderWith(() => false)).toContain('GRP')
+    expect(renderWith(() => '')).toContain('GRP')
+    expect(renderWith(() => <i data-custom="1" />)).not.toContain('GRP')
+  })
+
+  it('uses renderSubjectIcon when it returns a node', () => {
+    const markup = render({
+      renderSubjectIcon: (conversation) => <i data-icon={conversation.iconName ?? 'none'} />,
+      conversations: withChannels,
+    })
+
+    expect(markup).toContain('cv-p-inbox__icon')
+    expect(markup).toContain('data-icon="file-text"')
+  })
+
+  it('falls back to the group icon when renderSubjectIcon returns null or undefined', () => {
+    const groups = [{ subjectType: 'invoice', label: 'Invoice', icon: 'GRP' }]
+    const view = groupParticipantConversations({ conversations: withChannels, subjectGroups: groups })
+    const renderWith = (renderSubjectIcon: ParticipantInboxProps['renderSubjectIcon']) =>
+      renderToStaticMarkup(
+        <ParticipantInbox
+          view={view}
+          subjectGroups={groups}
+          filter="all"
+          onFilterChange={() => undefined}
+          onSelect={() => undefined}
+          labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+          status="ready"
+          refresh={() => undefined}
+          hasMore={false}
+          loadMore={() => undefined}
+          renderSubjectIcon={renderSubjectIcon}
+        />,
+      )
+
+    expect(renderWith(() => null)).toContain('GRP')
+    expect(renderWith(() => undefined)).toContain('GRP')
+    expect(renderWith(undefined)).toContain('GRP')
+    expect(renderWith(() => <i data-custom="1" />)).not.toContain('GRP')
+  })
+})
+
+describe('ParticipantInbox', () => {
+  it('renders section headers with label and count, awaiting highlighted', () => {
+    const markup = render()
+
+    expect(markup).toContain('Waiting for your reply')
+    expect(markup).toContain('cv-p-section--awaiting')
+    expect(markup).toContain('Invoice')
+    expect(markup).toContain('Incident')
+  })
+
+  it('renders rows as buttons with the subject label as text and the preview', () => {
+    const markup = render()
+
+    expect(markup).toContain('<button')
+    expect(markup).toContain('Awaiting one')
+    expect(markup).toContain('Please send the photo')
+    expect(markup).toContain('cv-p-row__kind')
+    expect(markup).toContain('cv-p-row--awaiting')
+  })
+
+  it('shows an unread badge with accessible text only when there are unread messages', () => {
+    const markup = render()
+
+    expect(markup).toContain('2 unread')
+    expect(markup.match(/cv-p-row__unread/g)?.length).toBe(1)
+  })
+
+  it('puts closed conversations inside a collapsible details', () => {
+    const markup = render()
+
+    expect(markup).toContain('<details')
+    expect(markup).toContain('Closed')
+    expect(markup).toContain('Old one')
+  })
+
+  it('renders filters only when showFilters is true', () => {
+    const withFilters = render()
+    const single = render({ conversations: [CONVERSATIONS[1] as (typeof CONVERSATIONS)[number]] })
+
+    expect(withFilters).toContain('cv-p-filters')
+    expect(withFilters).toContain('aria-pressed="true"')
+    expect(single).not.toContain('cv-p-filters')
+  })
+
+  it('renders the empty state when there are no sections', () => {
+    const markup = render({ conversations: [] })
+
+    expect(markup).toContain('No conversations yet')
+    expect(markup).not.toContain('cv-p-row"')
+  })
+
+  it('while loading shows a busy skeleton and never the empty state', () => {
+    const markup = render({ conversations: [], status: 'loading' })
+
+    expect(markup).toContain('aria-busy="true"')
+    expect(markup).toContain('Loading…')
+    expect(markup).not.toContain('No conversations yet')
+    expect(render({ conversations: [], status: 'idle' })).not.toContain('No conversations yet')
+  })
+
+  it('on error shows an alert with retry and never the empty state', () => {
+    const markup = render({ conversations: [], status: 'error' })
+
+    expect(markup).toContain('role="alert"')
+    expect(markup).toContain('Could not load')
+    expect(markup).toContain('Retry')
+    expect(markup).not.toContain('No conversations yet')
+    expect(markup).not.toContain('aria-busy="true"')
+  })
+
+  it('on success shows the empty state without busy or alert', () => {
+    const markup = render({ conversations: [], status: 'ready' })
+
+    expect(markup).toContain('No conversations yet')
+    expect(markup).not.toContain('role="alert"')
+    expect(markup).toContain('aria-busy="false"')
+  })
+
+  it('keeps the rows and adds the alert when a later request fails', () => {
+    const markup = render({ status: 'error' })
+
+    expect(markup).toContain('Awaiting one')
+    expect(markup).toContain('role="alert"')
+  })
+
+  it('shows load more only when there is a next page', () => {
+    expect(render()).not.toContain('Load more')
+    expect(render({ hasMore: true })).toContain('Load more')
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = render()
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})