Add failover channel events to activity journal

test/web/activity-journal-feature-contract.test.js

@@ -16,22 +16,40 @@ test('journal is the last Gateway-only drawer and refreshes whenever it opens',
   assert.match(feature, /assertActivityJournalPage\(await loadPage\(cursor\)\)/);
 });
 
-test('journal presents 30-day grouped history with refresh, pagination and stable states', () => {
+test('journal presents a semantic responsive timeline with stable states', () => {
   assert.match(feature, /Важные события хранятся 30 дней/);
   assert.match(feature, /Сегодня[\s\S]*Вчера/);
   assert.match(feature, /Обновить журнал/);
-  assert.match(feature, /M5 8V4m0 4h4/);
   assert.match(feature, /Показать ещё/);
   assert.match(feature, /Журнал временно недоступен[\s\S]*Повторить/);
   assert.match(styles, /\.client-journal-skeleton/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)/);
   assert.match(feature, /compactActivityJournalEvents\(events\)/);
   assert.match(model, /Подписки обновлялись без ошибок/);
+  assert.match(feature, /<ol>[\s\S]*<li[\s\S]*<time dateTime=\{event\.occurredAt\}/);
   assert.match(feature, /data-event-type=\{event\.type\}[\s\S]*data-severity=\{event\.severity\}[\s\S]*data-target-role=/);
-  assert.match(styles, /\.client-journal-event::before \{[^}]*background: var\(--client-journal-tone\); \}/);
+
+  const rowRule = styles.match(/\.client-journal-groups li \{[^}]*\}/)?.[0] || '';
+  const lineRule = styles.match(/\.client-journal-groups ol::before \{[^}]*\}/)?.[0] || '';
+  const dotRule = styles.match(/\.client-journal-event::before \{[^}]*\}/)?.[0] || '';
+  assert.match(rowRule, /min-height: 58px/);
+  assert.match(rowRule, /grid-template-columns: 52px minmax\(0, 1fr\)/);
+  assert.doesNotMatch(rowRule, /border-top/);
+  assert.match(lineRule, /width: 1px/);
+  assert.match(lineRule, /inset: 0 auto 0 -8px/);
+  assert.match(lineRule, /background: color-mix\(in oklch, var\(--client-border\) 48%, transparent\)/);
+  assert.doesNotMatch(lineRule, /--client-journal-tone|animation|transition/);
+  assert.match(dotRule, /width: 8px/);
+  assert.match(dotRule, /height: 8px/);
+  assert.match(dotRule, /border-radius: 50%/);
+  assert.match(dotRule, /inset: 15px auto auto -11\.5px/);
+  assert.match(dotRule, /background: var\(--client-journal-tone\)/);
+  assert.doesNotMatch(dotRule, /animation|transition/);
+
   assert.match(styles, /\.client-journal-event \.client-journal-time span \{ color: var\(--client-journal-tone\); \}/);
-  assert.match(styles, /\[data-event-type='subscription\.refreshed'\][\s\S]*\[data-event-type='failover\.recovered'\][\s\S]*--client-journal-tone: var\(--harbor-connect\)/);
-  assert.match(styles, /\[data-target-role='reserve'\] \{ --client-journal-tone: var\(--harbor-gateway\); \}/);
-  assert.match(styles, /\[data-event-type='failover\.waiting_for_idle'\][\s\S]*\[data-severity='warning'\] \{ --client-journal-tone: oklch\(0\.68 0\.14 72\); \}/);
+  assert.match(styles, /\[data-event-type='failover\.primary_recovered'\][\s\S]*--client-journal-tone: var\(--harbor-connect\)/);
+  assert.match(styles, /\[data-event-type='failover\.reserve_recovered'\][\s\S]*--client-journal-tone: var\(--harbor-gateway\)/);
+  assert.match(styles, /\[data-severity='warning'\] \{ --client-journal-tone: oklch\(0\.68 0\.14 72\); \}/);
   assert.match(styles, /\[data-severity='error'\] \{ --client-journal-tone: oklch\(0\.68 0\.15 28\); \}/);
+  assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.client-journal-groups li \{[^}]*grid-template-columns: 1fr;[^}]*\}[\s\S]*?\.client-journal-time \{[^}]*display: flex;/);
+  assert.match(styles, /@media \(prefers-reduced-motion: reduce\) \{[^}]*animation: none;/);
 });