@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/flow/provenance/ProvenanceInspector.tsx

@@ -0,0 +1,201 @@
+// Evidence panel for the selected provenance item. Reading order: what it is
+// and whether it is proved, the quoted evidence, the obligations the proof
+// needs, the facts (who, when, values), the actions, then the relations in
+// both directions as buttons that move the selection along the trail.
+
+import { CircleCheck, CircleX, FileText, Hourglass, ShieldQuestion, X } from 'lucide-react'
+import { Button } from '../../index'
+import type { ObligationStatus, ProofObligation } from './proofTypes'
+import { ActorMark, HashCheck, ProofPill } from './ProvenanceNode'
+import { fill } from '../internal/labels'
+import { formatDateTime } from '../internal/format'
+import type { ProvenanceLabels } from './labels'
+import { proofKeyOf, relationsOf, type ProvLink, type ProvView, type ProvVertex } from './model'
+
+export interface ProvenanceInspectorProps {
+  vertex: ProvVertex
+  view: ProvView
+  labels: ProvenanceLabels
+  locale?: string
+  onSelect: (id: string) => void
+  /** Shows a close button (the panel is a sheet on narrow screens). */
+  onClose?: () => void
+  /** "Reread the source now" (retrievals and sources). */
+  onReread?: (id: string) => void
+  /** "Ask for verification". */
+  onRequestVerification?: (id: string) => void
+  /** Words for the item's time (for example a placeholder while dates are not known). */
+  formatTime?: (time: number, use: 'tick' | 'detail') => string
+  className?: string
+}
+
+const OBLIGATION_ICON: Record<ObligationStatus, typeof CircleCheck> = { ok: CircleCheck, pending: Hourglass, failed: CircleX }
+
+function Obligations({ list, l }: { list: ProofObligation[]; l: ProvenanceLabels }) {
+  return (
+    <ul className="ty-prov-obligations">
+      {list.map((o) => {
+        const Icon = OBLIGATION_ICON[o.status]
+        return (
+          <li key={o.id} className="ty-prov-obligation" data-status={o.status}>
+            <Icon className="ty-prov-obligation__icon" aria-hidden="true" focusable="false" />
+            <span className="ty-prov-obligation__text">
+              <span className="ty-prov-obligation__label">{o.label}</span>
+              <span className="ty-visually-hidden">
+                , <span>{l.obligationStatus[o.status]}</span>
+              </span>
+              {o.detail ? (
+                <code className="ty-prov-obligation__detail" dir="ltr">
+                  {o.detail}
+                </code>
+              ) : null}
+            </span>
+            {o.children?.length ? <Obligations list={o.children} l={l} /> : null}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+const capital = (s: string, locale?: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1)
+
+export function ProvenanceInspector({ vertex, view, labels: l, locale, onSelect, onClose, onReread, onRequestVerification, formatTime, className }: ProvenanceInspectorProps) {
+  const byId = new Map(view.vertices.map((v) => [v.id, v]))
+  const { back, ahead } = relationsOf(vertex.id, view.links)
+  const nameOf = (id: string) => {
+    const v = byId.get(id)
+    if (!v) return id
+    return v.type === 'item' ? `${l.kinds[v.item.kind]}: ${v.item.title}` : `${l.actorKinds[v.actor.kind]}: ${v.actor.name}`
+  }
+  const relations = (links: ProvLink[], way: 'back' | 'ahead', heading: string) =>
+    links.length ? (
+      <section className="ty-prov-inspector__relations" aria-labelledby={`ty-prov-rel-${way}-${vertex.id}`}>
+        <h3 id={`ty-prov-rel-${way}-${vertex.id}`} className="ty-prov-inspector__eyebrow">
+          {heading}
+        </h3>
+        <ul className="ty-prov-inspector__links">
+          {links.map((link) => {
+            const other = way === 'back' ? link.source : link.target
+            const phrase = way === 'back' ? l.relations[link.relation] : l.relationsReversed[link.relation]
+            return (
+              <li key={link.id}>
+                <button type="button" className="ty-prov-inspector__link" aria-label={`${phrase} ${nameOf(other)}`} onClick={() => onSelect(other)}>
+                  <span className="ty-prov-inspector__relation">{phrase}</span>
+                  <span className="ty-prov-inspector__target" dir="auto">
+                    {nameOf(other)}
+                  </span>
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+    ) : null
+
+  const title = vertex.type === 'item' ? vertex.item.title : vertex.actor.name
+  const eyebrow = vertex.type === 'item' ? fill(l.inFocus, { kind: capital(l.kinds[vertex.item.kind], locale) }, locale) : capital(l.actorKinds[vertex.actor.kind], locale)
+  const close = onClose ? (
+    <Button className="ty-prov-inspector__close" variant="quiet" size="compact" shape="circle" iconOnly accessibleLabel={l.closeInspector} leadingIcon={<X />} onPress={onClose} />
+  ) : null
+
+  if (vertex.type !== 'item') {
+    return (
+      <aside className={['ty-prov-inspector', className].filter(Boolean).join(' ')} aria-label={`${l.inspector}: ${title}`}>
+        <div className="ty-prov-inspector__top">
+          <span className="ty-prov-inspector__eyebrow">{eyebrow}</span>
+          {close}
+        </div>
+        <h2 className="ty-prov-inspector__title">{title}</h2>
+        <ActorMark actor={vertex.actor} />
+        {relations(ahead, 'ahead', l.relationsReversed.wasAttributedTo)}
+      </aside>
+    )
+  }
+
+  const item = vertex.item
+  const proof = proofKeyOf(item)
+  const note = item.proofReason ?? (item.proofState ? null : l.noCertificateYet)
+  // A reading, a source, or a claim resting on quoted evidence can be reread.
+  const canReread = !!onReread && (item.kind === 'retrieval' || item.kind === 'source' || (item.kind === 'assertion' && !!item.evidence))
+  return (
+    <aside className={['ty-prov-inspector', className].filter(Boolean).join(' ')} aria-label={`${l.inspector}: ${title}`}>
+      <div className="ty-prov-inspector__top">
+        <span className="ty-prov-inspector__eyebrow">{eyebrow}</span>
+        {close}
+      </div>
+      <h2 className="ty-prov-inspector__title" dir="auto">
+        {title}
+      </h2>
+      <div className="ty-prov-inspector__proof">
+        <ProofPill state={proof} word={l.proof[proof]} />
+        {note ? (
+          <span className="ty-prov-inspector__note">
+            {item.proofReason ? <span className="ty-visually-hidden">{l.reason}: </span> : null}
+            {note}
+          </span>
+        ) : null}
+        {item.hashCheck ? <HashCheck state={item.hashCheck} labels={l} /> : null}
+      </div>
+      {item.evidence ? (
+        <figure className="ty-prov-inspector__evidence">
+          <figcaption className="ty-visually-hidden">{l.evidence}</figcaption>
+          <blockquote className="ty-prov-inspector__quote" dir="auto">
+            {item.evidence}
+          </blockquote>
+        </figure>
+      ) : null}
+      {item.obligations?.length ? (
+        <section className="ty-prov-inspector__section" aria-labelledby={`ty-prov-obl-${vertex.id}`}>
+          <h3 id={`ty-prov-obl-${vertex.id}`} className="ty-prov-inspector__eyebrow">
+            {l.obligations}
+          </h3>
+          <Obligations list={item.obligations} l={l} />
+        </section>
+      ) : null}
+      {item.summary ? <p className="ty-prov-inspector__summary">{item.summary}</p> : null}
+      <dl className="ty-prov-inspector__facts">
+        {(item.details ?? []).map((d) => (
+          <div key={d.label} className="ty-prov-inspector__fact">
+            <dt>{d.label}</dt>
+            <dd data-mono={d.mono ? 'true' : undefined} dir={d.mono ? 'ltr' : 'auto'}>
+              {d.value}
+            </dd>
+          </div>
+        ))}
+        {item.actor && !item.details?.length ? (
+          <div className="ty-prov-inspector__fact">
+            <dt>{l.attributedTo}</dt>
+            <dd>
+              <ActorMark actor={item.actor} />
+            </dd>
+          </div>
+        ) : null}
+        {item.at ? (
+          <div className="ty-prov-inspector__fact">
+            <dt>{l.when}</dt>
+            <dd data-mono="true">
+              <time dateTime={item.at}>{formatTime && Number.isFinite(Date.parse(item.at)) ? formatTime(Date.parse(item.at), 'detail') : formatDateTime(item.at, locale)}</time>
+            </dd>
+          </div>
+        ) : null}
+      </dl>
+      {canReread || onRequestVerification ? (
+        <div className="ty-prov-inspector__actions">
+          {canReread ? (
+            <Button variant="secondary" leadingIcon={<FileText />} onPress={() => onReread!(vertex.id)}>
+              {l.reread}
+            </Button>
+          ) : null}
+          {onRequestVerification ? (
+            <Button variant="quiet" leadingIcon={<ShieldQuestion />} onPress={() => onRequestVerification(vertex.id)}>
+              {l.requestVerification}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {relations(back, 'back', l.cameFrom)}
+      {relations(ahead, 'ahead', l.madeFrom)}
+    </aside>
+  )
+}

package/src/flow/provenance/ProvenanceLegend.tsx

@@ -0,0 +1,66 @@
+// Key to the graph's two visual codes, each spelled out in words: how a line
+// is drawn tells the PROV relation, how a card's border is drawn tells the
+// proof state (design direction §2.11, §3.13). It sits in the graph's tool
+// row ('inline') or in a canvas corner ('panel').
+
+import type { ReactNode } from 'react'
+import { ProofBadge } from '../../index'
+import type { ProvenanceLabels } from './labels'
+import { PROOF_KEYS, PROV_RELATIONS, type ProofKey, type ProvRelation } from './model'
+
+export interface ProvenanceLegendProps {
+  labels: ProvenanceLabels
+  /** Proof states to explain (for example only those present in the view). */
+  states?: readonly ProofKey[]
+  /** Relations to explain; all four by default. */
+  relations?: readonly ProvRelation[]
+  variant?: 'inline' | 'panel'
+}
+
+interface KeyGroup {
+  heading: string
+  entries: Array<{ id: string; sample: ReactNode; word: ReactNode }>
+}
+
+function relationSample(r: ProvRelation) {
+  return (
+    <svg className="ty-prov-legend__line" data-relation={r} viewBox="0 0 32 8" aria-hidden="true" focusable="false">
+      <line x1="1" y1="4" x2="31" y2="4" />
+    </svg>
+  )
+}
+
+function proofSample(k: ProofKey) {
+  return <span className="ty-prov-legend__swatch" data-proof-state={k.replace('_', '-')} aria-hidden="true" />
+}
+
+export function ProvenanceLegend({ labels: l, states = PROOF_KEYS, relations = PROV_RELATIONS, variant = 'panel' }: ProvenanceLegendProps) {
+  const groups: KeyGroup[] = [
+    {
+      heading: l.relationLegend,
+      entries: relations.map((r) => ({ id: r, sample: relationSample(r), word: <span className="ty-prov-legend__word">{l.relations[r]}</span> })),
+    },
+    {
+      heading: l.legend,
+      entries: states.map((k) => ({ id: k, sample: proofSample(k), word: <ProofBadge state={k === 'none' ? null : k} size="inline" label={l.proof[k]} /> })),
+    },
+  ]
+  const shown = groups.filter((g) => g.entries.length)
+  return (
+    <section className="ty-prov-legend" data-variant={variant} aria-label={states.length ? l.legend : l.relationLegend} data-ty-surface-chrome="">
+      {shown.map((g) => (
+        <div key={g.heading} className="ty-prov-legend__group">
+          <h3 className="ty-prov-legend__title">{g.heading}</h3>
+          <ul className="ty-prov-legend__list">
+            {g.entries.map((e) => (
+              <li key={e.id} className="ty-prov-legend__row">
+                {e.sample}
+                {e.word}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </section>
+  )
+}

package/src/flow/provenance/ProvenanceNode.tsx

@@ -0,0 +1,171 @@
+// A provenance item (or an actor drawn as a node) on the canvas: one
+// 236×72 card with three lines, the kind glyph and title, the mono
+// identifier, then who acted and the check that matters for this item
+// (the hash state of a reading, or the proof word of a claim). Proof and
+// hash states always carry a word and an icon, never colour alone.
+
+import { useId, type KeyboardEvent, type ReactNode } from 'react'
+import { Bot, CircleCheck, CircleDashed, CircleMinus, CircleX, Hourglass, Server, ShieldCheck, ShieldQuestion, ShieldX, User } from 'lucide-react'
+import { Button as AriaButton } from 'react-aria-components'
+import { resolveIcon, FALLBACK_KIND_ICONS } from '../catalog/icons'
+import { fill } from '../internal/labels'
+import { useSurface } from '../surface/SurfaceContext'
+import type { ProvenanceLabels } from './labels'
+import { proofKeyOf, type ProofKey, type ProvActor, type ProvActorKind, type ProvItem } from './model'
+
+/** Canvas size a provenance card is laid out with before it is measured. */
+export const PROV_CARD = Object.freeze({ width: 236, height: 72 })
+export const ACTOR_CARD = Object.freeze({ width: 200, height: 60 })
+
+export function itemAccessibleName(item: ProvItem, l: ProvenanceLabels, locale?: string): string {
+  const actor = item.actor ? `${l.actorKinds[item.actor.kind]} ${item.actor.name}` : ''
+  return fill(l.nodeName, { kind: l.kinds[item.kind], title: item.title, proof: l.proof[proofKeyOf(item)], actor }, locale).replace(/,\s*$/, '')
+}
+
+/** Items whose proof word is worth a pill (claims, or any item with an explicit state). */
+export function showsProof(item: ProvItem): boolean {
+  return item.kind === 'assertion' || (item.proofState !== null && item.proofState !== undefined)
+}
+
+const ACTOR_GLYPH: Record<ProvActorKind, typeof Bot> = { agent: Bot, person: User, system: Server }
+
+/** Who acted: a small glyph box (dashed for agents, round for people, square for systems) and the name. */
+export function ActorMark({ actor, className }: { actor: Pick<ProvActor, 'kind' | 'name'>; className?: string }) {
+  const Glyph = ACTOR_GLYPH[actor.kind]
+  return (
+    <span className={['ty-prov-actor', className].filter(Boolean).join(' ')} data-kind={actor.kind}>
+      <span className="ty-prov-actor__glyph" aria-hidden="true">
+        <Glyph focusable="false" />
+      </span>
+      <span className="ty-prov-actor__name" dir="auto">
+        {actor.name}
+      </span>
+    </span>
+  )
+}
+
+const PROOF_GLYPH: Record<ProofKey, typeof CircleCheck> = { proved: CircleCheck, pending: Hourglass, refuted: CircleX, not_disclosed: CircleDashed, none: CircleMinus }
+
+/** The proof state as a pill: word and glyph, with a border style per state. */
+export function ProofPill({ state, word, size = 'regular' }: { state: ProofKey; word: string; size?: 'regular' | 'small' }) {
+  const Glyph = PROOF_GLYPH[state]
+  return (
+    <span className="ty-prov-proof" data-proof={state} data-size={size}>
+      <Glyph aria-hidden="true" focusable="false" />
+      {word}
+    </span>
+  )
+}
+
+/** "hash matches" / "not reread" / "hash does not match": icon and word, never colour alone. */
+export function HashCheck({ state, labels: l }: { state: NonNullable<ProvItem['hashCheck']>; labels: ProvenanceLabels }) {
+  const Icon = state === 'match' ? ShieldCheck : state === 'mismatch' ? ShieldX : ShieldQuestion
+  return (
+    <span className="ty-prov-hash" data-state={state}>
+      <Icon aria-hidden="true" focusable="false" />
+      {l.hash[state]}
+    </span>
+  )
+}
+
+export interface ProvenanceNodeProps {
+  item: ProvItem
+  labels: ProvenanceLabels
+  locale?: string
+  selected?: boolean
+  dimmed?: boolean
+  /** On the focus item's proof path (accent border). */
+  onPath?: boolean
+  /** The focus item itself (halo). */
+  focused?: boolean
+  onActivate: () => void
+  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void
+}
+
+/** Card chrome shared by items and actors: a full-size activator under three lines of text. */
+function CardShell({ name, words, onActivate, onKeyDown, attrs, children }: { name: string; words: string[]; onActivate: () => void; onKeyDown?: ((e: KeyboardEvent<HTMLElement>) => void) | undefined; attrs: Record<string, string | undefined>; children: ReactNode }) {
+  const surface = useSurface()
+  const describedBy = useId()
+  return (
+    <div className="ty-prov-card" {...attrs}>
+      <AriaButton
+        className="ty-prov-card__hit"
+        data-ty-node-focus=""
+        aria-label={name}
+        {...(words.length ? { 'aria-describedby': describedBy } : {})}
+        onPress={() => {
+          if (surface.justDragged()) return
+          onActivate()
+        }}
+        onKeyDown={(e) => onKeyDown?.(e)}
+      />
+      {children}
+      {words.length ? (
+        <span id={describedBy} className="ty-visually-hidden">
+          {words.join(', ')}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export function ProvenanceNode({ item, labels: l, locale, selected, dimmed, onPath, focused, onActivate, onKeyDown }: ProvenanceNodeProps) {
+  const proof = proofKeyOf(item)
+  const Icon = resolveIcon(FALLBACK_KIND_ICONS[item.kind])
+  const words = [...(focused ? [l.focusWord] : []), ...(onPath && !focused ? [l.proofPath] : []), ...(dimmed ? [l.offPath] : []), ...(item.hashCheck ? [l.hash[item.hashCheck]] : [])]
+  return (
+    <CardShell
+      name={itemAccessibleName(item, l, locale)}
+      words={words}
+      onActivate={onActivate}
+      onKeyDown={onKeyDown}
+      attrs={{ 'data-kind': item.kind, 'data-on-path': onPath ? 'true' : undefined, 'data-focus': focused ? 'true' : undefined, 'data-selected': selected ? 'true' : undefined, 'data-dimmed': dimmed ? 'true' : undefined }}
+    >
+      <span className="ty-prov-card__head" aria-hidden="true">
+        <Icon className="ty-prov-card__icon" focusable="false" />
+        <span className="ty-prov-card__title" dir="auto" title={item.title}>
+          {item.title}
+        </span>
+      </span>
+      <code className="ty-prov-card__id" dir="ltr" title={item.meta?.[0]} aria-hidden="true">
+        {item.meta?.[0] ?? ''}
+      </code>
+      <span className="ty-prov-card__foot" aria-hidden="true">
+        {item.actor ? <ActorMark actor={item.actor} /> : <span />}
+        {item.hashCheck ? <HashCheck state={item.hashCheck} labels={l} /> : showsProof(item) ? <ProofPill state={proof} word={l.proof[proof]} size="small" /> : null}
+      </span>
+    </CardShell>
+  )
+}
+
+export interface ActorNodeProps {
+  actor: ProvActor & { id: string }
+  labels: ProvenanceLabels
+  locale?: string
+  selected?: boolean
+  onActivate: () => void
+  onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void
+}
+
+/** An actor as its own node (only when "show actors as nodes" is on). */
+export function ActorNode({ actor, labels: l, locale, selected, onActivate, onKeyDown }: ActorNodeProps) {
+  return (
+    <CardShell
+      name={fill(l.actorNodeName, { kind: l.actorKinds[actor.kind], name: actor.name }, locale)}
+      words={[]}
+      onActivate={onActivate}
+      onKeyDown={onKeyDown}
+      attrs={{ 'data-kind': 'actor', 'data-selected': selected ? 'true' : undefined }}
+    >
+      <span className="ty-prov-card__head" aria-hidden="true">
+        <span className="ty-prov-card__title">{l.actorKinds[actor.kind]}</span>
+      </span>
+      <code className="ty-prov-card__id" dir="ltr" aria-hidden="true">
+        {actor.model ?? ''}
+      </code>
+      <span className="ty-prov-card__foot" aria-hidden="true">
+        <ActorMark actor={actor} />
+      </span>
+    </CardShell>
+  )
+}

package/src/flow/provenance/ProvenanceShellParts.test.tsx

@@ -0,0 +1,130 @@
+// Parts a host places in its own page: the question field and the view
+// switch, the canvas tools handed to a host dock, the filter chips, and the
+// view panels' host hooks (time words, actions).
+import { act, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { TympanProvider } from '../../index'
+import { expectNoAxeViolations } from '../../../test/axe'
+import type { CanvasToolItem } from '../toolbar/canvasTools'
+import { EditionCompare } from './EditionCompare'
+import { EMPTY_FILTERS, type ProvFilters, type ProvItem, type ProvStatement } from './model'
+import { NumberTrace } from './NumberTrace'
+import { defaultProvenanceLabels } from './labels'
+import { FilterChips } from './ProvenanceFilters'
+import { ProvenanceGraph, ProvenanceQuestion, ProvenanceViewSwitch, type ProvenanceViewMode } from './ProvenanceGraph'
+import { ProvenanceTimeline } from './ProvenanceTimeline'
+
+const coder = { id: 'c', kind: 'agent' as const, name: 'coder' }
+const items: ProvItem[] = [
+  { id: 'r', kind: 'retrieval', title: 'rd-0714', meta: ['sha256 [hash]'], actor: coder, proofState: null, hashCheck: 'not-reread', at: '2026-09-01T00:00:00Z' },
+  { id: 'a', kind: 'assertion', title: 'air.pm25_days_above_limit', meta: ['= above_limit'], actor: coder, proofState: null, evidence: '[quote]', at: '2026-09-02T00:00:00Z' },
+  { id: 'e', kind: 'edition', title: 'Edition 2026-09-20', actor: { kind: 'person', name: 'P' }, proofState: null, at: '2026-09-20T00:00:00Z' },
+]
+const statements: ProvStatement[] = [
+  { subject: 'a', relation: 'wasDerivedFrom', object: 'r' },
+  { subject: 'e', relation: 'wasDerivedFrom', object: 'a' },
+]
+
+describe('host-placed parts', () => {
+  it('switches views with a radio group of icons and words, and asks with the hint shown', async () => {
+    function Host() {
+      const [view, setView] = useState<ProvenanceViewMode>('graph')
+      const [focus, setFocus] = useState<string | null>('a')
+      return (
+        <>
+          <ProvenanceQuestion items={items} value={focus} onChange={setFocus} hint />
+          <ProvenanceViewSwitch value={view} onChange={setView} />
+          <p data-testid="view">{view}</p>
+        </>
+      )
+    }
+    const { container } = render(<Host />)
+    expect(screen.getByRole('combobox', { name: 'Where did this come from' })).toHaveValue('air.pm25_days_above_limit')
+    expect(screen.getByText('value, record, number or sentence')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('radio', { name: 'Certificate' }))
+    expect(screen.getByTestId('view')).toHaveTextContent('certificate')
+    expect(screen.getByRole('radiogroup', { name: 'View' }).querySelectorAll('svg')).toHaveLength(5)
+    await expectNoAxeViolations(container)
+  })
+
+  it('hands the canvas tools to a host dock, with the tree and export items, and draws no question row', async () => {
+    const got: CanvasToolItem[][] = []
+    const onExport = vi.fn()
+    render(<ProvenanceGraph items={items} statements={statements} defaultFocusId="a" showQuestionBar={false} onExport={onExport} renderTools={(t) => (got.push(t), <div data-testid="dock" />)} />)
+    expect(screen.queryByRole('group', { name: 'Provenance query' })).toBeNull()
+    expect(screen.getByTestId('dock')).toBeInTheDocument()
+    const ids = got.at(-1)!.map((i) => i.id)
+    expect(ids).toEqual(['select', 'pan', 'zoom-out', 'zoom-level', 'zoom-in', 'fit', 'auto-layout', 'list-view', 'export', 'search'])
+    expect(got.at(-1)!.find((i) => i.id === 'list-view')!.label).toBe('Navigable tree')
+    act(() => got.at(-1)!.find((i) => i.id === 'export')!.onPress!())
+    expect(onExport).toHaveBeenCalled()
+  })
+
+  it('filters by type, actor and proof from three chips that say what is chosen', async () => {
+    function Host() {
+      const [f, setF] = useState<ProvFilters>(EMPTY_FILTERS)
+      return <FilterChips value={f} onChange={setF} labels={defaultProvenanceLabels} />
+    }
+    render(<Host />)
+    await userEvent.click(screen.getByRole('button', { name: 'Type: all' }))
+    const dialog = await screen.findByRole('dialog', { name: 'Type: all' })
+    await userEvent.click(within(dialog).getByRole('checkbox', { name: 'assertion' }))
+    await userEvent.keyboard('{Escape}')
+    expect(screen.getByRole('button', { name: 'Type: 1 chosen' })).toHaveAttribute('data-active', 'true')
+    expect(screen.getByRole('button', { name: 'Actor: all' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Proof: all' })).toBeInTheDocument()
+  })
+
+  it('lets the host word the times (placeholders) and add actions under the selected event', () => {
+    render(<ProvenanceTimeline items={items} defaultSelectedId="a" formatTime={(t, use) => (t === Date.parse('2026-09-20T00:00:00Z') ? '2026-09-20' : use === 'tick' ? '[date]' : '[date time]')} renderDetailActions={() => <button type="button">See the answer</button>} />)
+    const detail = screen.getByRole('complementary', { name: 'Selected event' })
+    expect(detail).toHaveTextContent('[date time]')
+    expect(within(detail).getByRole('button', { name: 'See the answer' })).toBeInTheDocument()
+    expect(screen.getAllByText('[date]').length).toBeGreaterThan(0)
+    expect(screen.getByText('2026-09-20')).toBeInTheDocument()
+  })
+
+  it('opens the number panel at first, numbers the chain and offers graph and rerun', async () => {
+    const onOpenInGraph = vi.fn()
+    const n = { id: 'n', text: '26', caption: 'records of [phase 2]', chain: [{ id: 's', kind: 'manuscript' as const, title: 'Sentence', status: 'ok' as const }, { id: 'e', kind: 'edition' as const, title: 'Edition 2026-09-20', status: 'pending' as const }] }
+    const { container } = render(<NumberTrace passage={['Phase 2 has ', n, ' records.']} source="[file].tex" defaultOpenId="n" onOpenInGraph={onOpenInGraph} onRerun={() => {}} />)
+    const panel = screen.getByRole('region', { name: 'Where 26 comes from' })
+    expect(panel).toHaveTextContent('Selected number')
+    expect(panel).toHaveTextContent('records of [phase 2]')
+    expect(container.querySelectorAll('.ty-numtrace__index')).toHaveLength(2)
+    await userEvent.click(within(panel).getByRole('button', { name: 'Open in the graph' }))
+    expect(onOpenInGraph).toHaveBeenCalledWith(expect.objectContaining({ id: 'n' }))
+    await expectNoAxeViolations(container)
+  })
+
+  it('offers "see in the graph" and "ask for a review" on the selected change', async () => {
+    const onOpenInGraph = vi.fn()
+    const onRequestReview = vi.fn()
+    render(
+      <TympanProvider locale="pt-BR">
+        <EditionCompare
+          comparison={{ a: { id: 'a', label: '2026-09-20' }, b: { id: 'b', label: 'ao vivo' }, rows: [{ itemId: 'x', label: '[registro]', a: '[valor]', b: '[novo]', change: 'altered', aNote: 'fonte [id]' }] }}
+          defaultSelectedItemId="x"
+          onOpenInGraph={onOpenInGraph}
+          onRequestReview={onRequestReview}
+        />
+      </TympanProvider>,
+    )
+    expect(screen.getByText('Antes · 2026-09-20')).toBeInTheDocument()
+    expect(screen.getByText('fonte [id]')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Ver no grafo' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Pedir revisão' }))
+    expect(onOpenInGraph).toHaveBeenCalledWith('x')
+    expect(onRequestReview).toHaveBeenCalledWith('x')
+  })
+
+  it('offers "reread" on a claim resting on quoted evidence and words its time through the host', async () => {
+    render(<ProvenanceGraph items={items} statements={statements} defaultFocusId="a" onReread={() => {}} formatTime={() => '[date time]'} />)
+    const panel = screen.getByRole('complementary', { name: /^Evidence: air/ })
+    expect(within(panel).getByRole('button', { name: 'Reread the source now' })).toBeInTheDocument()
+    expect(panel).toHaveTextContent('[date time]')
+    expect(panel).toHaveTextContent('the verifier (G7a) has not issued a certificate yet')
+  })
+})