+
+
+
+ );
+}
diff --git a/components/academy/japan/LoopDiagram.tsx b/components/academy/japan/LoopDiagram.tsx
new file mode 100644
index 0000000000..2b6041ca66
--- /dev/null
+++ b/components/academy/japan/LoopDiagram.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+const STATIONS = [
+ {
+ id: "trace",
+ label: "オンライン",
+ title: "トレース",
+ meta: ["トレース", "セッション", "エージェント", "プロンプト"],
+ href: "/academy/japan/tracing",
+ },
+ {
+ id: "monitor",
+ label: "オンライン",
+ title: "モニタリング",
+ meta: ["ダッシュボード", "LLM-as-a-Judge", "フィードバック"],
+ href: "/academy/japan/monitoring",
+ },
+ {
+ id: "dataset",
+ label: "オフライン",
+ title: "データセット\n構築",
+ meta: ["データセット", "features-as-tests"],
+ href: "/academy/japan/datasets",
+ },
+ {
+ id: "change",
+ label: "オフライン",
+ title: "実験",
+ meta: ["プロンプト", "モデル", "コードのバリアント"],
+ href: "/academy/japan/experiments",
+ },
+ {
+ id: "eval",
+ label: "オフライン",
+ title: "評価",
+ meta: ["LLM-as-a-Judge", "カスタム評価", "アノテーション"],
+ href: "/academy/japan/evaluate",
+ },
+];
+
+// Design geometry (px) — fixed 1080×380 canvas, scaled to fit
+const LEFT_X = [0, 221, 442, 663, 884];
+const BOX_W = 196;
+const BOX_H = 200;
+const BOX_TOP = 40;
+const ARROW_Y = BOX_TOP + BOX_H / 2; // 140
+const INNER_W = 1080;
+const INNER_H = 380;
+
+// Synchronous estimate of the initial scale so the canvas is never shown at
+// native 1080px width before useLayoutEffect fires.
+// 0.56 is intentionally conservative (actual desktop scale is ~0.57–0.59),
+// so the useLayoutEffect correction is always a small upward nudge rather
+// than a shrink — growth is less visually jarring than shrink.
+// On mobile the column fills the viewport minus padding (~16px each side).
+function estimateInitialScale(): number {
+ if (typeof window === "undefined") return 0.56;
+ const vw = document.documentElement.clientWidth;
+ if (vw < 768) {
+ return Math.max(0.25, (vw - 32) / INNER_W);
+ }
+ return 0.56;
+}
+
+export function LoopDiagram({ highlight }: { highlight?: string } = {}) {
+ const pinnedIndex = highlight
+ ? STATIONS.findIndex((s) => s.id === highlight)
+ : -1;
+ const [active, setActive] = useState(pinnedIndex >= 0 ? pinnedIndex : 0);
+ const wrapRef = useRef(null);
+ const innerRef = useRef(null);
+
+ // Computed once per mount; only used for initial inline styles.
+ const estScale = estimateInitialScale();
+
+ // Cycle active station only when not pinned to a specific one
+ useEffect(() => {
+ if (pinnedIndex >= 0) return;
+ const id = setInterval(
+ () => setActive((p) => (p + 1) % STATIONS.length),
+ 1800,
+ );
+ return () => clearInterval(id);
+ }, [pinnedIndex]);
+
+ // Correct scale to exact container width, before first paint
+ useLayoutEffect(() => {
+ const wrap = wrapRef.current;
+ const inner = innerRef.current;
+ if (!wrap || !inner) return;
+ const fit = () => {
+ const scale = Math.min(1, wrap.clientWidth / INNER_W);
+ inner.style.transform = `scale(${scale})`;
+ wrap.style.height = `${INNER_H * scale}px`;
+ };
+ fit();
+ let rafId = 0;
+ const ro = new ResizeObserver(() => {
+ cancelAnimationFrame(rafId);
+ rafId = requestAnimationFrame(fit);
+ });
+ ro.observe(wrap);
+ return () => {
+ ro.disconnect();
+ cancelAnimationFrame(rafId);
+ };
+ }, []);
+
+ return (
+
+ {/* Initial height is set from the estimated scale so the wrapper never
+ starts at the full 380px natural height before useLayoutEffect runs. */}
+
+ {/* suppressHydrationWarning: SSR returns 0.56 (no window); client may
+ compute a slightly different value. useLayoutEffect corrects both
+ wrapper height and inner transform before first paint. */}
+
+ {/* SVG wires — drawn first so station cards layer above */}
+
+
+ {/* DEPLOY label centered on the bottom of the U */}
+