lct-11: таймеры ГОСТ и баннер режима на АРМ курсанта

Опрос (75 с) — крупным индикатором: это центральная метрика продукта,
и она обязана быть видна курсанту, преподавателю и залу одновременно.
Три состояния норматива — единственное место, где цвет несёт смысл.

Фронт время не считает и рисует ровно те цифры, что прислал сервер:
метрика по часам браузера недоказуема.

Баннер режима определяет доступность подсказки: в контрольном режиме
кнопки нет, и это часть нормы контроля.

frontend/src/features/mode-banner/ModeBanner.tsx

@@ -0,0 +1,17 @@
+// Баннер режима. Виден на всех четырёх экранах и определяет доступность подсказки:
+// в контрольном режиме опоры нет, и это часть нормы контроля (docs/product/MODES.md).
+
+import type { SessionMode } from "@/shared/types/generated";
+
+const LABELS: Record<SessionMode, string> = {
+  training: "Тренировочный режим — подсказки доступны",
+  exam: "Контрольный режим — подсказки недоступны",
+  self: "Самостоятельная работа — подсказки доступны",
+};
+
+export const hintsAllowed = (mode: SessionMode | undefined): boolean => mode !== "exam";
+
+export function ModeBanner({ mode }: { mode: SessionMode | undefined }) {
+  if (!mode) return null;
+  return <div className={`mode-banner mode-${mode}`}>{LABELS[mode]}</div>;
+}

frontend/src/features/timers/Timers.tsx

@@ -0,0 +1,54 @@
+// Таймеры ГОСТ Р 22.7.03-2021.
+//
+// Три состояния — единственное место, где цвет несёт смысл (docs/arch/FRONTEND.md).
+// `interview` (75 с) — центральная метрика продукта: она крупная и видна курсанту,
+// преподавателю и на внешнем мониторе одновременно (docs/arch/CONTRACT.md).
+
+import type { TimerSnapshot } from "@/shared/types/generated";
+
+import { clock } from "./clock";
+
+const TITLES: Record<string, string> = {
+  answer: "Ответ на звонок",
+  interview: "Опрос",
+  dds_notify: "Оповещение ДДС",
+  dds_ack: "Подтверждение ДДС",
+  zone_check: "Зона ответственности",
+  callback: "Обратный дозвон",
+  close: "Снятие с контроля",
+};
+
+/** Крупный индикатор опроса. `big` — для внешнего монитора: читается с последнего ряда. */
+export function InterviewTimer({ timers, big = false }: { timers: TimerSnapshot[]; big?: boolean }) {
+  const interview = timers.find((timer) => timer.code === "interview");
+  if (!interview) return null;
+  return (
+    <div className={`interview state-${interview.state}${big ? " interview-big" : ""}`}>
+      <span className="interview-label">Опрос</span>
+      <span className="interview-value">{clock(interview.elapsed_ms)}</span>
+      <span className="interview-limit">норматив {clock(interview.limit_ms)}</span>
+    </div>
+  );
+}
+
+export function Timers({ timers }: { timers: TimerSnapshot[] }) {
+  if (timers.length === 0) return null;
+  return (
+    <table className="grid">
+      <tbody>
+        {timers.map((timer) => (
+          <tr key={timer.code}>
+            <th>
+              {TITLES[timer.code] ?? timer.code}
+              {(timer.attempt ?? 1) > 1 && ` · попытка ${timer.attempt}`}
+            </th>
+            <td className={`state-${timer.state}`}>
+              {clock(timer.elapsed_ms)} из {clock(timer.limit_ms)}
+              {timer.stopped && " · остановлен"}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

frontend/src/features/timers/clock.ts

@@ -0,0 +1,5 @@
+/** Миллисекунды → мм:сс. Отдельным модулем без импортов: так проверяется в Node. */
+export function clock(ms: number): string {
+  const total = Math.max(0, Math.round(ms / 1000));
+  return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+}