@actuate-media/cms-admin 0.11.0 → 0.12.1

package/src/__tests__/components/comment-side-panel.test.tsx

@@ -0,0 +1,343 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, beforeEach, vi } from 'vitest'
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { CommentSidePanel, type CommentsApi } from '../../components/CommentSidePanel.js'
+import type { Comment, CommentOutcome } from '../../lib/comments-client.js'
+
+function ok<T>(value: T): CommentOutcome<T> {
+  return { ok: true, result: value }
+}
+
+function err(error = 'boom', status = 500): CommentOutcome<never> {
+  return { ok: false, error, status }
+}
+
+function comment(overrides: Partial<Comment> = {}): Comment {
+  return {
+    id: 'c-1',
+    documentId: 'doc-1',
+    parentId: null,
+    userId: 'user-1',
+    body: 'Hello there',
+    anchor: null,
+    resolvedAt: null,
+    resolvedById: null,
+    deletedAt: null,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    updatedAt: '2026-01-01T00:00:00.000Z',
+    isResolved: false,
+    ...overrides,
+  }
+}
+
+/**
+ * Build a fresh in-memory CommentsApi stub for each test. We expose
+ * the `list` payload as `state.rows` so tests can poke server state
+ * directly and verify the panel re-fetches after every mutation.
+ */
+function createFakeApi() {
+  const rows: Comment[] = []
+  const calls: { name: string; args: unknown[] }[] = []
+
+  const stub: CommentsApi = {
+    list: vi.fn(async (_documentId: string, opts?: { includeResolved?: boolean }) => {
+      calls.push({ name: 'list', args: [opts] })
+      const visible = rows.filter(
+        (c) => (opts?.includeResolved ? true : !c.isResolved) && c.deletedAt === null,
+      )
+      return ok(visible)
+    }),
+    create: vi.fn(async (input) => {
+      calls.push({ name: 'create', args: [input] })
+      const created = comment({
+        id: `c-${rows.length + 1}`,
+        body: input.body,
+        anchor: input.anchor ?? null,
+        parentId: input.parentId ?? null,
+        userId: 'current',
+      })
+      rows.push(created)
+      return ok(created)
+    }),
+    update: vi.fn(async (id, body) => {
+      calls.push({ name: 'update', args: [id, body] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.body = body
+      return ok(row)
+    }),
+    resolve: vi.fn(async (id) => {
+      calls.push({ name: 'resolve', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.isResolved = true
+      row.resolvedAt = '2026-01-02T00:00:00.000Z'
+      return ok(row)
+    }),
+    reopen: vi.fn(async (id) => {
+      calls.push({ name: 'reopen', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.isResolved = false
+      row.resolvedAt = null
+      return ok(row)
+    }),
+    remove: vi.fn(async (id) => {
+      calls.push({ name: 'remove', args: [id] })
+      const row = rows.find((r) => r.id === id)
+      if (!row) return err('not found', 404)
+      row.deletedAt = '2026-01-02T00:00:00.000Z'
+      return ok(row)
+    }),
+  }
+
+  return { api: stub, rows, calls }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('CommentSidePanel — loading & list', () => {
+  it('renders an empty state once the list call resolves', async () => {
+    const { api } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="current" api={api} />)
+    expect(screen.getByText('Loading…')).toBeTruthy()
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    expect(api.list).toHaveBeenCalledWith('doc-1', { includeResolved: false })
+  })
+
+  it('groups roots + replies into a single card', async () => {
+    const { api, rows } = createFakeApi()
+    rows.push(comment({ id: 'root', body: 'root' }))
+    rows.push(
+      comment({
+        id: 'reply',
+        parentId: 'root',
+        body: 'reply',
+        createdAt: '2026-01-01T00:00:01.000Z',
+      }),
+    )
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-root')).toBeTruthy())
+    expect(screen.getByTestId('comment-body-root').textContent).toBe('root')
+    expect(screen.getByTestId('comment-body-reply').textContent).toBe('reply')
+  })
+
+  it('hides resolved threads until the toggle is flipped', async () => {
+    const { api, rows } = createFakeApi()
+    rows.push(comment({ id: 'open', body: 'open' }))
+    rows.push(
+      comment({
+        id: 'closed',
+        body: 'closed',
+        isResolved: true,
+        resolvedAt: '2026-01-02T00:00:00.000Z',
+      }),
+    )
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-open')).toBeTruthy())
+    expect(screen.queryByTestId('comment-thread-closed')).toBeNull()
+
+    fireEvent.click(screen.getByTestId('include-resolved-toggle'))
+    await waitFor(() => expect(screen.getByTestId('comment-thread-closed')).toBeTruthy())
+    // Most-recent list call should have flipped `includeResolved`.
+    expect(api.list).toHaveBeenLastCalledWith('doc-1', { includeResolved: true })
+  })
+
+  it('surfaces a server failure through onError', async () => {
+    const { api } = createFakeApi()
+    ;(api.list as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('CSRF', 403))
+    const onError = vi.fn()
+    render(
+      <CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} onError={onError} />,
+    )
+    await waitFor(() => expect(onError).toHaveBeenCalledWith('CSRF'))
+  })
+})
+
+describe('CommentSidePanel — compose', () => {
+  it('disables the submit button while the draft is empty', async () => {
+    const { api } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    const btn = screen.getByTestId('comment-submit') as HTMLButtonElement
+    expect(btn.disabled).toBe(true)
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: 'hello' },
+    })
+    expect((screen.getByTestId('comment-submit') as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('posts a new comment, clears the draft, and refreshes', async () => {
+    const { api, calls } = createFakeApi()
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" api={api} />)
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: '  fresh thought  ' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('comment-submit'))
+    })
+
+    expect(calls.some((c) => c.name === 'create')).toBe(true)
+    const createCall = calls.find((c) => c.name === 'create')!
+    expect((createCall.args[0] as { body: string }).body).toBe('fresh thought')
+    expect((screen.getByTestId('comment-composer') as HTMLTextAreaElement).value).toBe('')
+    expect(calls.filter((c) => c.name === 'list').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('forwards onComposeAnchor result into the create call', async () => {
+    const { api, calls } = createFakeApi()
+    const onComposeAnchor = vi.fn().mockReturnValue({ from: 'AQ==', to: 'Ag==' })
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="user-1"
+        api={api}
+        onComposeAnchor={onComposeAnchor}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+    fireEvent.change(screen.getByTestId('comment-composer'), {
+      target: { value: 'anchored' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('comment-submit'))
+    })
+
+    expect(onComposeAnchor).toHaveBeenCalledTimes(1)
+    const createCall = calls.find((c) => c.name === 'create')!
+    expect((createCall.args[0] as { anchor: unknown }).anchor).toEqual({
+      from: 'AQ==',
+      to: 'Ag==',
+    })
+  })
+})
+
+describe('CommentSidePanel — reply, edit, resolve, delete', () => {
+  async function setupWith(rowsInit: Comment[]) {
+    const fake = createFakeApi()
+    for (const row of rowsInit) fake.rows.push(row)
+    const renderResult = render(
+      <CommentSidePanel documentId="doc-1" currentUserId="user-1" isAdmin={false} api={fake.api} />,
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId(`comment-thread-${rowsInit[0]!.id}`)).toBeTruthy(),
+    )
+    return { ...fake, ...renderResult }
+  }
+
+  it('replies through the thread input + clears it on submit', async () => {
+    const { api, calls } = await setupWith([
+      comment({ id: 'root', userId: 'user-1', body: 'root' }),
+    ])
+    fireEvent.change(screen.getByTestId('reply-input-root'), {
+      target: { value: 'hi back' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('reply-submit-root'))
+    })
+
+    const replyCall = calls.find(
+      (c) => c.name === 'create' && (c.args[0] as { parentId?: string | null }).parentId === 'root',
+    )
+    expect(replyCall).toBeDefined()
+    expect((screen.getByTestId('reply-input-root') as HTMLInputElement).value).toBe('')
+    expect(api.list).toHaveBeenCalled()
+  })
+
+  it('shows edit + delete only on comments the user owns (non-admin)', async () => {
+    await setupWith([
+      comment({ id: 'mine', userId: 'user-1', body: 'mine' }),
+      comment({
+        id: 'theirs',
+        userId: 'someone-else',
+        body: 'theirs',
+        createdAt: '2026-01-01T00:00:01.000Z',
+      }),
+    ])
+    expect(screen.queryByTestId('edit-mine')).toBeTruthy()
+    expect(screen.queryByTestId('delete-mine')).toBeTruthy()
+    expect(screen.queryByTestId('edit-theirs')).toBeNull()
+    expect(screen.queryByTestId('delete-theirs')).toBeNull()
+  })
+
+  it('admins see edit + delete on every comment', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'theirs', userId: 'someone-else' }))
+    render(<CommentSidePanel documentId="doc-1" currentUserId="user-1" isAdmin api={fake.api} />)
+    await waitFor(() => expect(screen.getByTestId('comment-thread-theirs')).toBeTruthy())
+    expect(screen.getByTestId('edit-theirs')).toBeTruthy()
+    expect(screen.getByTestId('delete-theirs')).toBeTruthy()
+  })
+
+  it('edits a comment body in place', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1', body: 'before' })])
+    fireEvent.click(screen.getByTestId('edit-c1'))
+    fireEvent.change(screen.getByTestId('edit-textarea-c1'), {
+      target: { value: 'after' },
+    })
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('edit-save-c1'))
+    })
+    expect(api.update).toHaveBeenCalledWith('c1', 'after')
+    await waitFor(() => expect(screen.getByTestId('comment-body-c1').textContent).toBe('after'))
+  })
+
+  it('cancels an edit without writing', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1', body: 'before' })])
+    fireEvent.click(screen.getByTestId('edit-c1'))
+    fireEvent.change(screen.getByTestId('edit-textarea-c1'), {
+      target: { value: 'never saved' },
+    })
+    fireEvent.click(screen.getByTestId('edit-cancel-c1'))
+    expect(api.update).not.toHaveBeenCalled()
+    expect(screen.getByTestId('comment-body-c1').textContent).toBe('before')
+  })
+
+  it('resolves an open thread and reopens a closed one', async () => {
+    const { api, rows } = await setupWith([comment({ id: 'open', userId: 'user-1', body: 'open' })])
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('resolve-open'))
+    })
+    expect(api.resolve).toHaveBeenCalledWith('open')
+    // Flip the toggle so resolved comments stay in the list, then reopen.
+    fireEvent.click(screen.getByTestId('include-resolved-toggle'))
+    await waitFor(() => expect(screen.getByTestId('resolve-open')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('resolve-open'))
+    })
+    expect(api.reopen).toHaveBeenCalledWith('open')
+    expect(rows[0]!.isResolved).toBe(false)
+  })
+
+  it('deletes a comment and refreshes', async () => {
+    const { api } = await setupWith([comment({ id: 'c1', userId: 'user-1' })])
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('delete-c1'))
+    })
+    expect(api.remove).toHaveBeenCalledWith('c1')
+    await waitFor(() => expect(screen.queryByTestId('comment-thread-c1')).toBeNull())
+  })
+
+  it('notifies onActiveCommentChange when a thread is clicked', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'c1', userId: 'user-1' }))
+    const onActive = vi.fn()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="user-1"
+        api={fake.api}
+        onActiveCommentChange={onActive}
+      />,
+    )
+    await waitFor(() => expect(screen.getByTestId('comment-thread-c1')).toBeTruthy())
+    fireEvent.click(screen.getByTestId('comment-thread-c1'))
+    expect(onActive).toHaveBeenCalledWith('c1')
+  })
+})

package/src/__tests__/components/notification-bell.test.tsx

@@ -0,0 +1,213 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { NotificationBell, type NotificationsApi } from '../../components/NotificationBell.js'
+import type { Notification, NotificationOutcome } from '../../lib/notifications-client.js'
+
+function ok<T>(value: T): NotificationOutcome<T> {
+  return { ok: true, result: value }
+}
+
+function err(error = 'boom', status = 500): NotificationOutcome<never> {
+  return { ok: false, error, status }
+}
+
+function row(overrides: Partial<Notification> = {}): Notification {
+  return {
+    id: 'n-1',
+    userId: 'user-1',
+    kind: 'comment_reply',
+    documentId: 'doc-1',
+    commentId: 'c-1',
+    payload: {
+      kind: 'comment_reply',
+      actorId: 'someone',
+      actorName: 'Someone',
+      excerpt: 'hi',
+    },
+    readAt: null,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    ...overrides,
+  }
+}
+
+function createFakeApi() {
+  let rows: Notification[] = []
+  const calls: { name: string; args: unknown[] }[] = []
+  const api: NotificationsApi = {
+    list: vi.fn(async (opts) => {
+      calls.push({ name: 'list', args: [opts] })
+      return ok(opts.includeRead ? rows : rows.filter((r) => r.readAt === null))
+    }),
+    unread: vi.fn(async () => {
+      calls.push({ name: 'unread', args: [] })
+      return ok(rows.filter((r) => r.readAt === null).length)
+    }),
+    markRead: vi.fn(async (id) => {
+      calls.push({ name: 'markRead', args: [id] })
+      const target = rows.find((r) => r.id === id)
+      if (!target) return err('not found', 404)
+      target.readAt = '2026-01-02T00:00:00.000Z'
+      return ok(target)
+    }),
+    markAllRead: vi.fn(async () => {
+      calls.push({ name: 'markAllRead', args: [] })
+      let n = 0
+      for (const r of rows) {
+        if (r.readAt === null) {
+          r.readAt = '2026-01-02T00:00:00.000Z'
+          n++
+        }
+      }
+      return ok(n)
+    }),
+  }
+  return {
+    api,
+    calls,
+    setRows: (next: Notification[]) => {
+      rows = next
+    },
+    rows: () => rows,
+  }
+}
+
+describe('NotificationBell — badge', () => {
+  it('shows the unread badge from the unread() call', async () => {
+    const fake = createFakeApi()
+    fake.setRows([row(), row({ id: 'n-2' })])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+  })
+
+  it('hides the badge when count is 0', async () => {
+    const fake = createFakeApi()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    // Let the initial unread() settle.
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('clamps the badge at "99+"', async () => {
+    const fake = createFakeApi()
+    fake.setRows(Array.from({ length: 150 }, (_, i) => row({ id: `n-${i}` })))
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('99+'))
+  })
+
+  it('polls unread() at pollIntervalMs', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+    try {
+      const fake = createFakeApi()
+      render(<NotificationBell api={fake.api} pollIntervalMs={5000} />)
+      await waitFor(() => expect(fake.api.unread).toHaveBeenCalledTimes(1))
+      await act(async () => {
+        vi.advanceTimersByTime(5000)
+      })
+      expect(fake.api.unread).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
+
+describe('NotificationBell — dropdown', () => {
+  it('shows the empty state when there are no rows', async () => {
+    const fake = createFakeApi()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-dropdown')).toBeTruthy())
+    await waitFor(() => expect(screen.getByText('All caught up.')).toBeTruthy())
+  })
+
+  it('renders one button per row with the formatted summary', async () => {
+    const fake = createFakeApi()
+    fake.setRows([
+      row({
+        id: 'n-a',
+        payload: {
+          kind: 'comment_reply',
+          actorId: 'x',
+          actorName: 'Alice',
+          excerpt: 'good',
+        },
+      }),
+      row({
+        id: 'n-b',
+        kind: 'comment_resolved',
+        payload: {
+          kind: 'comment_resolved',
+          actorId: 'y',
+          actorName: 'Bob',
+          rootExcerpt: 'fix',
+        },
+      }),
+    ])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-a')).toBeTruthy())
+    expect(screen.getByTestId('bell-row-n-a').textContent).toContain('Alice replied')
+    expect(screen.getByTestId('bell-row-n-b').textContent).toContain('Bob resolved')
+  })
+
+  it('marks a row read optimistically, then via the API', async () => {
+    const fake = createFakeApi()
+    const onSelect = vi.fn()
+    fake.setRows([row()])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onSelect={onSelect} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-row-n-1'))
+    })
+    expect(fake.api.markRead).toHaveBeenCalledWith('n-1')
+    expect(onSelect).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('bell-badge')).toBeNull()
+  })
+
+  it('rolls back the optimistic update when markRead fails', async () => {
+    const fake = createFakeApi()
+    ;(fake.api.markRead as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('server', 500))
+    const onError = vi.fn()
+    fake.setRows([row()])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-row-n-1'))
+    })
+    expect(onError).toHaveBeenCalledWith('server')
+    // The badge should bounce back to 1.
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+  })
+
+  it('marks all read in one click and disables the button after', async () => {
+    const fake = createFakeApi()
+    fake.setRows([row(), row({ id: 'n-2' })])
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
+    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(screen.getByTestId('bell-mark-all')).toBeTruthy())
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('bell-mark-all'))
+    })
+    expect(fake.api.markAllRead).toHaveBeenCalled()
+    expect((screen.getByTestId('bell-mark-all') as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('surfaces list() errors via onError', async () => {
+    const fake = createFakeApi()
+    ;(fake.api.list as ReturnType<typeof vi.fn>).mockResolvedValueOnce(err('CSRF', 403))
+    const onError = vi.fn()
+    render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
+    await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
+    fireEvent.click(screen.getByTestId('bell-button'))
+    await waitFor(() => expect(onError).toHaveBeenCalledWith('CSRF'))
+  })
+})

package/src/__tests__/components/offline-status.test.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { OfflineStatus, describeOfflineStatus } from '../../components/OfflineStatus.js'
+
+describe('describeOfflineStatus', () => {
+  it('error wins over everything', () => {
+    expect(describeOfflineStatus('connected', 'error').tone).toBe('bad')
+    expect(describeOfflineStatus('disconnected', 'error').tone).toBe('bad')
+  })
+
+  it('reports Synced when offline is unsupported but socket is connected', () => {
+    const out = describeOfflineStatus('connected', 'unsupported')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Synced')
+  })
+
+  it('warns when offline is unsupported and socket is disconnected', () => {
+    expect(describeOfflineStatus('disconnected', 'unsupported').tone).toBe('warn')
+  })
+
+  it('shows Connecting… when offline is unsupported and socket is connecting', () => {
+    expect(describeOfflineStatus('connecting', 'unsupported').label).toBe('Connecting…')
+  })
+
+  it('reports Restoring local copy… while IndexedDB is loading', () => {
+    expect(describeOfflineStatus('connecting', 'loading').label).toMatch(/Restoring/)
+    expect(describeOfflineStatus('connecting', 'pending').label).toMatch(/Restoring/)
+  })
+
+  it('reports Saved & synced when both ready', () => {
+    const out = describeOfflineStatus('connected', 'ready')
+    expect(out.tone).toBe('good')
+    expect(out.label).toBe('Saved & synced')
+  })
+
+  it('reports Saved locally when offline is ready but socket is disconnected', () => {
+    const out = describeOfflineStatus('disconnected', 'ready')
+    expect(out.tone).toBe('warn')
+    expect(out.label).toMatch(/Saved locally/)
+  })
+
+  it('reports Saved locally — reconnecting… while reconnecting', () => {
+    expect(describeOfflineStatus('connecting', 'ready').label).toMatch(/reconnecting/)
+  })
+})
+
+describe('<OfflineStatus />', () => {
+  it('renders the resolved label + tone', () => {
+    render(<OfflineStatus connection="connected" offline="ready" />)
+    const chip = screen.getByTestId('offline-status')
+    expect(chip.textContent).toContain('Saved & synced')
+    expect(chip.dataset.tone).toBe('good')
+  })
+
+  it('switches tone when conditions change', () => {
+    const { rerender } = render(<OfflineStatus connection="connected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('good')
+    rerender(<OfflineStatus connection="disconnected" offline="ready" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('warn')
+    rerender(<OfflineStatus connection="connected" offline="error" />)
+    expect(screen.getByTestId('offline-status').dataset.tone).toBe('bad')
+  })
+})

package/src/__tests__/components/presence-chips-helpers.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+
+import { nameToInitials } from '../../components/PresenceChips.js'
+
+describe('nameToInitials', () => {
+  it('returns the first letter of a single name', () => {
+    expect(nameToInitials('Alice')).toBe('A')
+  })
+
+  it('returns the first letter of two name parts', () => {
+    expect(nameToInitials('Alice Cooper')).toBe('AC')
+  })
+
+  it('caps at two letters for three+ part names', () => {
+    expect(nameToInitials('Mary Jane Watson')).toBe('MJ')
+  })
+
+  it('uppercases the result', () => {
+    expect(nameToInitials('alice cooper')).toBe('AC')
+  })
+
+  it('trims surrounding whitespace before processing', () => {
+    expect(nameToInitials('  Alice  ')).toBe('A')
+  })
+
+  it('collapses multiple whitespace separators', () => {
+    expect(nameToInitials('Alice    Cooper')).toBe('AC')
+  })
+
+  it('falls back to "?" for an empty string', () => {
+    expect(nameToInitials('')).toBe('?')
+  })
+
+  it('falls back to "?" for a whitespace-only string', () => {
+    expect(nameToInitials('   ')).toBe('?')
+  })
+
+  it('handles a single emoji name without crashing', () => {
+    const result = nameToInitials('🐱 Whiskers')
+    // JS upper-case is a no-op for the cat — test just confirms we don't crash
+    // and return *something* with two character-positions.
+    expect(result.length).toBeGreaterThan(0)
+  })
+})