reliability semi-fix

components/recap/RecapBanners.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useI18n } from "@/lib/i18n/useI18n";
+
+type Props = {
+  moldChangeStartMs: number | null;
+  offlineForMin: number | null;
+  ongoingStopMin: number | null;
+};
+
+function toInt(value: number | null | undefined) {
+  if (value == null || Number.isNaN(value)) return 0;
+  return Math.max(0, Math.round(value));
+}
+
+export default function RecapBanners({ moldChangeStartMs, offlineForMin, ongoingStopMin }: Props) {
+  const { t, locale } = useI18n();
+
+  const moldStartLabel = moldChangeStartMs
+    ? new Date(moldChangeStartMs).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })
+    : "--:--";
+
+  return (
+    <div className="space-y-2">
+      {moldChangeStartMs ? (
+        <div className="rounded-xl border border-amber-400/40 bg-amber-400/10 px-3 py-2 text-sm text-amber-200">
+          {t("recap.banner.moldChange", { time: moldStartLabel })}
+        </div>
+      ) : null}
+
+      {offlineForMin != null && offlineForMin > 10 ? (
+        <div className="rounded-xl border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+          {t("recap.banner.offline", { min: toInt(offlineForMin) })}
+        </div>
+      ) : null}
+
+      {ongoingStopMin != null && ongoingStopMin > 0 ? (
+        <div className="rounded-xl border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+          {t("recap.banner.ongoingStop", { min: toInt(ongoingStopMin) })}
+        </div>
+      ) : null}
+    </div>
+  );
+}