diff --git a/ordinis-admin-ui/src/components/timetravel/TimeTravelModal.tsx b/ordinis-admin-ui/src/components/timetravel/TimeTravelModal.tsx
index d6c6e9a..031171f 100644
--- a/ordinis-admin-ui/src/components/timetravel/TimeTravelModal.tsx
+++ b/ordinis-admin-ui/src/components/timetravel/TimeTravelModal.tsx
@@ -1,8 +1,11 @@
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { ClockCounterClockwiseIcon, CaretLeftIcon, CaretRightIcon, XIcon } from '@phosphor-icons/react'
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/ui'
-import type { DictionaryDetail } from '@/api/client'
+import { Badge, Dialog, DialogContent, DialogTitle, DialogDescription } from '@/ui'
+import type { ChangelogEntry, DictionaryDetail } from '@/api/client'
+import { useChangelog } from '@/api/queries'
+import { kindBadgeVariant, kindIcon, kindLabel } from '@/components/changelog/kind-meta'
+import { ChangelogDiffModal } from '@/components/changelog/ChangelogDiffModal'
import { cn } from '@/lib/utils'
/**
@@ -18,8 +21,9 @@ import { cn } from '@/lib/utils'
*
Slider: HTML range + overlay version markers (top) + date
* markers (bottom). Cursor — dark circle.
*
Tabs: Что изменилось / Записи на момент / Структура и поля.
- * Backend diff endpoints отсутствуют — показываем empty/placeholder
- * состояния с подсказкой backend pending.
+ * «Что изменилось» — wired через {@code useChangelog} + filter
+ * events с {@code publishedAt >= picked}. Diff button открывает
+ * {@link ChangelogDiffModal} с full before/after JSON.
*
Footer: disclaimer + Закрыть / "Открыть v{X} как readonly" CTA
*
*
@@ -70,6 +74,19 @@ export function TimeTravelModal({
const [picked, setPicked] = useState(valueMs)
const [step, setStep] = useState('version')
const [tab, setTab] = useState<'changes' | 'records' | 'schema'>('changes')
+ /** Open ChangelogDiffModal для конкретной entry — full before/after JSON. */
+ const [diffEntryId, setDiffEntryId] = useState(undefined)
+
+ // Changelog для compare-since-picked: показываем events после picked moment.
+ // Размер 200 покрывает типичные dict'ы (5-50 events); cursor pagination
+ // можно добавить когда что-то будет с этим больше.
+ const changelog = useChangelog(detail.name, 200)
+ const eventsSincePicked = useMemo(() => {
+ if (!changelog.data) return []
+ return changelog.data.entries.filter(
+ (e) => new Date(e.publishedAt).getTime() >= picked,
+ )
+ }, [changelog.data, picked])
// Range: от min(marks, createdAt) до now+padding.
const createdMs = Date.parse(detail.createdAt)
@@ -248,7 +265,7 @@ export function TimeTravelModal({
active={tab === 'changes'}
onClick={() => setTab('changes')}
label={t('timeTravel.tabs.changes', { defaultValue: 'Что изменилось' })}
- count={0}
+ count={eventsSincePicked.length}
/>
{/* Tab content */}
-