@prenta/admin 0.92.0 → 0.94.0

package/src/__tests__/views/page-tab.render.test.tsx

@@ -0,0 +1,226 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { DEFAULT_DIRECTIVES, type RobotsPermissions } from '@prenta/core/seo/robots-directives'
+import { PageTab } from '../../views/page-editor/PageTab.js'
+import type { EditorPage } from '../../lib/page-editor-service.js'
+
+const page: EditorPage = {
+  id: 'p1',
+  title: 'About Us',
+  slug: 'about',
+  path: '/about',
+  status: 'PUBLISHED',
+  parentPageId: null,
+  sections: [],
+  seoTitle: '',
+  seoDescription: '',
+  publishedAt: '2026-05-15T10:00:00.000Z',
+  updatedAt: '2026-06-01T09:30:00.000Z',
+  scheduledAt: null,
+  scheduledUnpublishAt: null,
+  authorName: '',
+  authorId: '',
+  builderOwned: false,
+}
+
+function renderTab(
+  overrides: {
+    page?: Partial<EditorPage>
+    directives?: Partial<RobotsPermissions>
+    publishedPath?: string | null
+    onDirectivesChange?: (d: RobotsPermissions) => void
+    onPageChange?: (p: Partial<EditorPage>) => void
+  } = {},
+) {
+  return render(
+    <PageTab
+      page={{ ...page, ...overrides.page }}
+      canEdit
+      publishedPath={overrides.publishedPath === undefined ? '/about' : overrides.publishedPath}
+      siteUrl="https://example.com"
+      directives={{ ...DEFAULT_DIRECTIVES, ...overrides.directives }}
+      onDirectivesChange={overrides.onDirectivesChange ?? (() => {})}
+      redirectOnPublish
+      onRedirectOnPublishChange={() => {}}
+      onPageChange={overrides.onPageChange ?? (() => {})}
+      onDuplicate={() => {}}
+      onTrash={() => {}}
+    />,
+  )
+}
+
+/**
+ * Only Address and Publishing are open by default; the rest are collapsed, and
+ * Radix unmounts closed content. Tests that assert on a collapsed group must
+ * open it first — which is also the interaction a real editor performs.
+ */
+function openGroup(name: RegExp) {
+  fireEvent.click(screen.getByRole('button', { name }))
+}
+
+describe('PageTab — address', () => {
+  it('says nothing about redirects while the page has not moved', () => {
+    renderTab()
+    expect(screen.queryByText(/URL CHANGED/)).toBeNull()
+    expect(screen.queryByText(/301 redirect/)).toBeNull()
+    cleanup()
+  })
+
+  it('offers a 301 naming both paths once a live page moves', () => {
+    renderTab({ page: { path: '/about-us' } })
+    expect(screen.getByText('URL CHANGED')).toBeTruthy()
+    expect(screen.getByText(/Create a 301 redirect on publish/)).toBeTruthy()
+    expect(screen.getByText('/about → /about-us')).toBeTruthy()
+    cleanup()
+  })
+
+  it('keeps path in lockstep when the slug was driving it', () => {
+    // The displayed URL and the 301 detector both read `path`. Updating only
+    // `slug` left a live `/about` → slug `about-us` with no warning and a
+    // full URL that still said /about.
+    const onPageChange = vi.fn()
+    renderTab({ onPageChange })
+    fireEvent.change(screen.getByLabelText(/URL slug/i), { target: { value: 'about-us' } })
+    expect(onPageChange).toHaveBeenCalledWith({ slug: 'about-us', path: '/about-us' })
+    cleanup()
+  })
+
+  it('leaves a custom path alone when the slug changes', () => {
+    const onPageChange = vi.fn()
+    renderTab({ page: { slug: 'about', path: '/team/about' }, onPageChange })
+    fireEvent.change(screen.getByLabelText(/URL slug/i), { target: { value: 'about-us' } })
+    expect(onPageChange).toHaveBeenCalledWith({ slug: 'about-us' })
+    cleanup()
+  })
+
+  it('warns without promising a 301 when the user cannot create redirects', () => {
+    render(
+      <PageTab
+        page={{ ...page, path: '/about-us' }}
+        canEdit
+        publishedPath="/about"
+        siteUrl="https://example.com"
+        directives={DEFAULT_DIRECTIVES}
+        onDirectivesChange={() => {}}
+        redirectOnPublish
+        onRedirectOnPublishChange={() => {}}
+        canCreateRedirect={false}
+        onPageChange={() => {}}
+        onDuplicate={() => {}}
+        onTrash={() => {}}
+      />,
+    )
+    expect(screen.getByText('URL CHANGED')).toBeTruthy()
+    expect(screen.queryByText(/Create a 301 redirect on publish/)).toBeNull()
+    expect(screen.getByText(/Ask an admin to create a 301/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('stays quiet when a page that was never live changes its slug', () => {
+    // Nothing points at the old path. Warning here would train editors to
+    // dismiss the warning that matters.
+    renderTab({ page: { path: '/about-us', status: 'DRAFT' }, publishedPath: null })
+    expect(screen.queryByText(/URL CHANGED/)).toBeNull()
+    cleanup()
+  })
+})
+
+describe('PageTab — search directives', () => {
+  it('summarises how many directives are restricted', () => {
+    renderTab()
+    expect(screen.getByText('OPEN')).toBeTruthy()
+    cleanup()
+
+    renderTab({ directives: { index: false, snippet: false } })
+    // `noindex` subsumes the snippet token, but both are still restrictions the
+    // editor chose, so the count reports two.
+    expect(screen.getByText('2 RESTRICTED')).toBeTruthy()
+    cleanup()
+  })
+
+  it('previews the exact head line, composed by the renderer’s own function', () => {
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText('<meta name="robots" content="noindex" />')).toBeTruthy()
+    cleanup()
+
+    renderTab()
+    openGroup(/Search directives/)
+    // Nothing is emitted when everything is permissive, and the preview says
+    // so rather than showing a blank box.
+    expect(screen.getByText(/no robots meta/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('shows each switch’s literal directive token', () => {
+    // The failure this prevents is flipping a switch whose consequence you
+    // could not name. `noindex` beside it makes the consequence the label.
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText('noindex')).toBeTruthy()
+    expect(screen.getByText('follow')).toBeTruthy()
+    cleanup()
+  })
+
+  it('disables snippet and archive under noindex', () => {
+    // They have no effect once the page is out of the index, and an enabled
+    // control that changes nothing is a lie about what it does.
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(
+      screen.getByRole('switch', { name: /Allow text snippets/ }).hasAttribute('disabled'),
+    ).toBe(true)
+    expect(
+      screen.getByRole('switch', { name: /Allow cached copies/ }).hasAttribute('disabled'),
+    ).toBe(true)
+    cleanup()
+  })
+
+  it('warns that publishing will not make a noindexed page findable', () => {
+    renderTab({ directives: { index: false } })
+    openGroup(/Search directives/)
+    expect(screen.getByText(/hidden from search/)).toBeTruthy()
+    cleanup()
+  })
+
+  it('reports a toggle as a permission, not a restriction', () => {
+    const onDirectivesChange = vi.fn()
+    renderTab({ onDirectivesChange })
+    openGroup(/Search directives/)
+    fireEvent.click(screen.getByRole('switch', { name: /Show in search results/ }))
+    expect(onDirectivesChange).toHaveBeenCalledWith(
+      expect.objectContaining({ index: false, follow: true }),
+    )
+    cleanup()
+  })
+})
+
+describe('PageTab — danger zone', () => {
+  it('asks before trashing, and says when the page is live', () => {
+    const onTrash = vi.fn()
+    render(
+      <PageTab
+        page={page}
+        canEdit
+        publishedPath="/about"
+        siteUrl="https://example.com"
+        directives={DEFAULT_DIRECTIVES}
+        onDirectivesChange={() => {}}
+        redirectOnPublish
+        onRedirectOnPublishChange={() => {}}
+        onPageChange={() => {}}
+        onDuplicate={() => {}}
+        onTrash={onTrash}
+      />,
+    )
+    openGroup(/Danger zone/)
+    fireEvent.click(screen.getByRole('button', { name: /Move to trash/ }))
+    expect(onTrash).not.toHaveBeenCalled()
+    expect(screen.getByText(/It is live, and will stop being served/)).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Move to trash' }))
+    expect(onTrash).toHaveBeenCalled()
+    cleanup()
+  })
+})

package/src/__tests__/views/section-class-parity.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest'
+import {
+  paddingClass as sitePadding,
+  backgroundClass as siteBackground,
+  isDark as siteIsDark,
+} from '@prenta/sections-react'
+import {
+  paddingClass as adminPadding,
+  backgroundClass as adminBackground,
+  isDarkBackground as adminIsDark,
+} from '../../views/page-editor/sections/parts.js'
+import { BACKGROUND_PRESETS, backgroundPreset } from '@prenta/core/page-sections'
+import type { SectionSettings } from '@prenta/core/page-sections'
+
+/**
+ * The editor canvas wraps each section itself rather than using `<Sections>`,
+ * so the admin applies ITS wrapper classes around a body rendered by
+ * sections-react. Two implementations, one rendered result.
+ *
+ * They are duplicated because they have to be: Tailwind generates utilities by
+ * scanning source text, and each package's stylesheet scans only its own `src/`
+ * tree. A literal shared from a third package is generated by nobody, and the
+ * section renders with no background — silently, with correct markup. So
+ * `@prenta/core` owns the DECISION (`backgroundPreset`) and each side maps it
+ * to its own strings; this file asserts the strings stayed in step.
+ */
+const settings = (over: Partial<SectionSettings> = {}) => over as SectionSettings
+
+/** One settings object per preset, so coverage follows the preset list. */
+const SETTINGS_FOR: Record<string, SectionSettings> = {
+  'gradient-purple': settings({ backgroundType: 'gradient', backgroundColor: 'purple' }),
+  'solid-purple': settings({ backgroundType: 'solid', backgroundColor: 'purple' }),
+  'solid-muted': settings({ backgroundType: 'solid', backgroundColor: 'muted' }),
+  plain: settings({ backgroundType: 'none' }),
+}
+
+describe('section wrapper classes', () => {
+  it('pads identically in the canvas and on the site', () => {
+    for (const paddingY of ['sm', 'md', 'lg', 'xl', undefined]) {
+      const s = settings({ paddingY } as Partial<SectionSettings>)
+      expect(adminPadding(s), `paddingY: ${paddingY}`).toBe(sitePadding(s as never))
+    }
+  })
+
+  it('pads with container steps, never viewport breakpoints', () => {
+    // A viewport step here would reflow the canvas against the editor window
+    // and undo the whole point of the container migration.
+    const xl = adminPadding(settings({ paddingY: 'xl' } as Partial<SectionSettings>))
+    expect(xl).toContain('@pv-')
+    expect(xl).not.toMatch(/(^|\s)(sm|md|lg|xl):/)
+  })
+
+  it('covers every declared preset', () => {
+    // Guards the fixture table itself: add a preset in core and this fails
+    // until it has settings here, so the assertions below cannot quietly stop
+    // covering it.
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]
+      expect(s, `no settings fixture for preset "${preset}"`).toBeDefined()
+      expect(backgroundPreset(s!), `settings for ${preset}`).toBe(preset)
+    }
+  })
+
+  it('paints every preset identically in the canvas and on the site', () => {
+    // The canvas is a preview of the public page. It previously used admin
+    // theme tokens, so in dark mode it showed a hero in `#9D71F0` on dark body
+    // sections while the live page rendered violet-600 on white — a page no
+    // visitor would ever see.
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]!
+      expect(adminBackground(s), `background for ${preset}`).toBe(siteBackground(s as never))
+    }
+  })
+
+  it('never paints the canvas with admin theme tokens', () => {
+    // The specific regression: theme tokens follow the editor's light/dark
+    // preference, and the live site does not.
+    for (const preset of BACKGROUND_PRESETS) {
+      const cls = adminBackground(SETTINGS_FOR[preset]!)
+      expect(cls, preset).not.toMatch(/\b(bg-card|bg-brand|bg-muted|text-foreground)\b/)
+    }
+  })
+
+  it('agrees on which backgrounds are dark', () => {
+    for (const preset of BACKGROUND_PRESETS) {
+      const s = SETTINGS_FOR[preset]!
+      expect(adminIsDark(s), preset).toBe(siteIsDark(s as never))
+    }
+  })
+
+  it('falls back to the plain preset for an unrecognised colour', () => {
+    // A consumer can put any string in `backgroundColor`. It must land on the
+    // default background rather than losing the background rules entirely.
+    const odd = settings({ backgroundType: 'solid', backgroundColor: 'chartreuse' })
+    expect(backgroundPreset(odd)).toBe('plain')
+    expect(adminBackground(odd)).toBe(siteBackground(odd as never))
+  })
+})

package/src/__tests__/views/sections-panel-design-owned.render.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { SectionsPanel } from '../../views/page-editor/SectionsPanel.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+/**
+ * Pages and posts are design-owned: the section list comes from the template in
+ * code. `SectionsPanel` therefore defaults to read-only, and only the template
+ * editor — the surface that authors a template — passes `structural`.
+ *
+ * The default direction is the point. A future consumer that forgets the flag
+ * must get the safe behaviour, not an editor that can silently restructure a
+ * design-owned page.
+ */
+
+function section(over: Partial<PageSection> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'hero',
+    name: 'Hero Banner',
+    visible: true,
+    content: {},
+    settings: {},
+    ...over,
+  } as PageSection
+}
+
+function renderPanel(over: Partial<Parameters<typeof SectionsPanel>[0]> = {}) {
+  return render(
+    <SectionsPanel
+      sections={[section(), section({ id: 's2', name: 'Mission' })]}
+      selectedId={null}
+      canEdit
+      onSelect={vi.fn()}
+      onToggleVisibility={vi.fn()}
+      {...over}
+    />,
+  )
+}
+
+describe('SectionsPanel — design-owned by default', () => {
+  it('offers no add, reorder, duplicate, or delete', () => {
+    renderPanel()
+    expect(screen.queryByRole('button', { name: /add section/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /drag to reorder/i })).toBeNull()
+    expect(screen.queryByRole('button', { name: /more actions/i })).toBeNull()
+  })
+
+  it('keeps the visibility toggle — the one structural property an editor owns', () => {
+    renderPanel()
+    expect(screen.getByRole('button', { name: 'Hide Hero Banner' })).toBeTruthy()
+  })
+
+  it('keeps sections selectable for editing', () => {
+    const onSelect = vi.fn()
+    renderPanel({ onSelect })
+    screen.getByText('Hero Banner').click()
+    expect(onSelect).toHaveBeenCalledWith('s1')
+  })
+
+  it('explains the absence rather than looking broken', () => {
+    // Without this the panel reads as a regression — "where did Add Section go"
+    // is the first thing a returning editor asks.
+    renderPanel()
+    expect(screen.getByText(/Layout is design-owned/i)).toBeTruthy()
+    expect(screen.getByText(/Hide a section to drop it from the live page/i)).toBeTruthy()
+  })
+
+  it('says the template renders nothing rather than inviting a first section', () => {
+    renderPanel({ sections: [] })
+    expect(screen.getByText(/template renders no sections/i)).toBeTruthy()
+    expect(screen.queryByText(/add one below/i)).toBeNull()
+  })
+})
+
+describe('SectionsPanel — structural opt-in', () => {
+  it('restores every structural affordance when asked', () => {
+    renderPanel({
+      structural: true,
+      onReorder: vi.fn(),
+      onDuplicate: vi.fn(),
+      onRequestDelete: vi.fn(),
+      onAdd: vi.fn(),
+    })
+    expect(screen.getByRole('button', { name: /add section/i })).toBeTruthy()
+    expect(screen.getAllByRole('button', { name: /drag to reorder/i })).toHaveLength(2)
+    expect(screen.getAllByRole('button', { name: /more actions/i })).toHaveLength(2)
+    expect(screen.queryByText(/Layout is design-owned/i)).toBeNull()
+  })
+
+  it('still locks externally-managed sections', () => {
+    // `unmanaged` sections are read-only even where structural editing is
+    // allowed — they are owned by a system outside the CMS.
+    renderPanel({
+      structural: true,
+      sections: [section({ unmanaged: true } as Partial<PageSection>)],
+      onReorder: vi.fn(),
+      onAdd: vi.fn(),
+    })
+    expect(screen.queryByRole('button', { name: /more actions/i })).toBeNull()
+    expect(screen.getByLabelText(/managed outside the editor/i)).toBeTruthy()
+  })
+})

package/src/__tests__/views/version-history-panel.render.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { VersionHistoryPanel } from '../../views/page-editor/VersionHistoryPanel.js'
+import type { PageVersion } from '../../lib/version-history.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+afterEach(cleanup)
+
+function section(id: string, content: Record<string, unknown>): PageSection {
+  return { id, sectionType: 'hero', name: 'Hero Banner', visible: true, content, settings: {} }
+}
+
+const NOW = new Date()
+const iso = (hoursAgo: number) => new Date(NOW.getTime() - hoursAgo * 3_600_000).toISOString()
+
+const VERSIONS: PageVersion[] = [
+  {
+    id: 'v3',
+    changeType: 'PUBLISH',
+    createdAt: iso(1),
+    author: { id: 'u1', name: 'Sarah Mills' },
+    sections: [section('s1', { heading: 'Third headline' })],
+  },
+  {
+    id: 'v2',
+    changeType: 'UPDATE',
+    createdAt: iso(2),
+    author: { id: 'u2', name: 'Dan Ito' },
+    sections: [section('s1', { heading: 'Second headline' })],
+  },
+  {
+    id: 'v1',
+    changeType: 'CREATE',
+    createdAt: iso(30),
+    author: { id: 'u1', name: 'Sarah Mills' },
+    sections: [section('s1', { heading: 'First headline' })],
+  },
+]
+
+function renderPanel(props: Partial<React.ComponentProps<typeof VersionHistoryPanel>> = {}) {
+  const onSelect = vi.fn()
+  const onRestore = vi.fn()
+  const onClose = vi.fn()
+  render(
+    <VersionHistoryPanel
+      versions={VERSIONS}
+      loading={false}
+      error={null}
+      selectedIndex={0}
+      onSelect={onSelect}
+      onClose={onClose}
+      onRestore={onRestore}
+      restoring={false}
+      canRestore
+      {...props}
+    />,
+  )
+  return { onSelect, onRestore, onClose }
+}
+
+describe('VersionHistoryPanel', () => {
+  it('groups entries under sticky day headings', () => {
+    renderPanel()
+    expect(screen.getByRole('heading', { name: 'Today' })).toBeTruthy()
+    // v1 is 30 hours back, so it lands on its own day.
+    expect(screen.getAllByRole('heading', { level: 3 }).length).toBeGreaterThan(1)
+  })
+
+  it('marks the newest entry as current and shows the published pill', () => {
+    renderPanel()
+    expect(screen.getByText('Current')).toBeTruthy()
+    expect(screen.getByText('Published')).toBeTruthy()
+    // No pill claims "Draft" — nothing in this codebase records one.
+    expect(screen.queryByText('Draft')).toBeNull()
+  })
+
+  it('summarises each entry by what that save changed', () => {
+    renderPanel()
+    // v3 changed one field against v2.
+    expect(screen.getByText(/Sarah Mills · 1 change$/)).toBeTruthy()
+    // v1 has no predecessor in the list, so it reports no computed changes
+    // rather than claiming it created everything.
+    expect(screen.getByText(/Sarah Mills · no content changes/)).toBeTruthy()
+  })
+
+  it('shows the computed field diff, old struck through and new after it', () => {
+    renderPanel()
+    // The newest changed entry auto-expands.
+    expect(screen.getByText('Heading')).toBeTruthy()
+    const oldValue = screen.getByText('Second headline')
+    const newValue = screen.getByText('Third headline')
+    expect(oldValue.className).toContain('line-through')
+    expect(newValue.className).not.toContain('line-through')
+  })
+
+  it('selects the version when its row is activated, which is what drives the canvas', () => {
+    const { onSelect } = renderPanel()
+    fireEvent.click(screen.getByText(/Dan Ito/))
+    expect(onSelect).toHaveBeenCalledWith(1)
+  })
+
+  it('offers Restore only on the selected older row', () => {
+    renderPanel({ selectedIndex: 0 })
+    // Selected row is the current one — restoring it is a no-op.
+    expect(screen.queryByRole('button', { name: /Restore this version/ })).toBeNull()
+
+    cleanup()
+    renderPanel({ selectedIndex: 1 })
+    const restore = screen.getByRole('button', { name: /Restore this version/ })
+    expect(restore).toBeTruthy()
+  })
+
+  it('shows the diff for whichever version is selected, including one selected from outside', () => {
+    // The review bar and the canvas both move the selection without the panel
+    // being clicked. When disclosure was tracked separately from selection,
+    // the diff described one version while the canvas rendered another — and
+    // Restore sat on a row that was not open.
+    renderPanel({ selectedIndex: 1 })
+    expect(screen.getByText('First headline')).toBeTruthy()
+    expect(screen.getByText('Second headline')).toBeTruthy()
+    expect(screen.queryByText('Third headline')).toBeNull()
+    expect(screen.getByRole('button', { name: /Restore this version/ })).toBeTruthy()
+  })
+
+  it('collapses the row it is already on rather than reselecting it', () => {
+    const { onSelect } = renderPanel({ selectedIndex: 0 })
+    expect(screen.getByText('Heading')).toBeTruthy()
+
+    fireEvent.click(screen.getByText(/Sarah Mills · 1 change/))
+
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(screen.queryByText('Heading')).toBeNull()
+  })
+
+  it('can restore the oldest version, which by definition has no diff to show', () => {
+    // Restore used to live inside the diff block, so a version with no
+    // computed changes — the oldest one held, or a metadata-only save — was
+    // reviewable and not restorable. That is the wrong way round: the oldest
+    // version is the one a rollback most often wants.
+    renderPanel({ selectedIndex: 2 })
+
+    expect(screen.getByText(/No section changes to show/)).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Restore this version/ })).toBeTruthy()
+  })
+
+  it('hides Restore from a user who cannot edit', () => {
+    renderPanel({ selectedIndex: 1, canRestore: false })
+    expect(screen.queryByRole('button', { name: /Restore this version/ })).toBeNull()
+  })
+
+  it('restores the version whose row was clicked', () => {
+    const { onRestore } = renderPanel({ selectedIndex: 1 })
+    fireEvent.click(screen.getByRole('button', { name: /Restore this version/ }))
+    expect(onRestore).toHaveBeenCalledWith(expect.objectContaining({ id: 'v2' }))
+  })
+
+  it('renders two non-adjacent groups sharing a day label without colliding', () => {
+    // `groupVersionsByDay` walks CONSECUTIVE runs, so an out-of-order page
+    // legitimately yields ['Today', 'Yesterday', 'Today'] — its own test
+    // asserts that. Keyed on the label, the second "Today" collides with the
+    // first and React mis-associates the two sections' contents.
+    const outOfOrder: PageVersion[] = [
+      { ...VERSIONS[0]!, id: 'a', createdAt: iso(1) },
+      { ...VERSIONS[1]!, id: 'b', createdAt: iso(30) },
+      { ...VERSIONS[2]!, id: 'c', createdAt: iso(2) },
+    ]
+
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    renderPanel({ versions: outOfOrder })
+
+    expect(screen.getAllByRole('heading', { name: 'Today' })).toHaveLength(2)
+    expect(
+      spy.mock.calls.some((call) => String(call[0]).includes('same key')),
+      'React reported duplicate keys',
+    ).toBe(false)
+    spy.mockRestore()
+  })
+
+  it('reports an empty history rather than an empty box', () => {
+    renderPanel({ versions: [] })
+    expect(screen.getByText(/No versions yet/)).toBeTruthy()
+  })
+
+  it('surfaces a load failure', () => {
+    renderPanel({ versions: [], error: 'Network unreachable' })
+    expect(screen.getByText('Network unreachable')).toBeTruthy()
+  })
+
+  it('announces itself as a named region so it is reachable without sight of the overlay', () => {
+    renderPanel()
+    const region = screen.getByRole('region', { name: 'Version history' })
+    expect(within(region).getByRole('button', { name: 'Close version history' })).toBeTruthy()
+  })
+})