Handle stale sync state in client UI

src/web/components/SyncStatus.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const bootCopy = {
+  'control-unreachable': {
+    title: 'Harbor недоступен',
+    message: 'Control plane не ответил. Проверьте, что контейнер запущен, и повторите запрос.',
+  },
+  'incompatible-api': {
+    title: 'Версия Harbor несовместима',
+    message: 'Интерфейс получил state неизвестной версии. Обновите frontend и control plane вместе.',
+  },
+  fatal: {
+    title: 'Harbor не удалось запустить',
+    message: 'Произошла непредвиденная ошибка. Технические детали помогут найти причину.',
+  },
+};
+
+export function BootStatePage({ transport, onRetry }) {
+  if (transport.bootStatus === 'loading') return <div className="app-loading">Harbor</div>;
+
+  const copy = bootCopy[transport.bootStatus] || bootCopy.fatal;
+  return (
+    <main className="app-boot">
+      <span>Harbor</span>
+      <h1>{copy.title}</h1>
+      <p>{copy.message}</p>
+      <button type="button" onClick={onRetry}>Повторить</button>
+      <details>
+        <summary>Технические детали</summary>
+        <code>{transport.error?.message}</code>
+        <pre>{`curl -i ${window.location.origin}/api/state\ndocker compose logs --tail=100`}</pre>
+      </details>
+    </main>
+  );
+}
+
+export function StaleBanner({ transport, onRetry }) {
+  if (!transport.stale) return null;
+  const lastSync = transport.lastSuccessfulSyncAt
+    ? new Date(transport.lastSuccessfulSyncAt).toLocaleTimeString('ru-RU')
+    : 'неизвестно';
+  const incompatible = transport.error?.kind === 'incompatible-api';
+
+  return (
+    <aside className="client-stale-banner" role="status">
+      <strong>{incompatible ? 'API несовместим' : 'Показано последнее известное состояние'}</strong>
+      <span>Последняя синхронизация: {lastSync}</span>
+      <button type="button" onClick={onRetry}>Повторить</button>
+    </aside>
+  );
+}