@nightkatana/kronosys-app 1.0.0-beta.2 → 1.0.0-beta.21

package/app/implementation/page.tsx

@@ -0,0 +1,700 @@
+"use client";
+
+import {
+  Suspense,
+  useCallback,
+  useMemo,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import {
+  Ban,
+  Check,
+  ChevronDown,
+  Copy,
+  FileCode2,
+  ScrollText,
+  X,
+} from "lucide-react";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
+import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
+import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import {
+  appShellHeaderClassName,
+  appShellHeaderTitleMetaRowClassName,
+  appShellHeaderToolbarClassName,
+} from "@/lib/appShellHeaderClasses";
+import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
+import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { implementationNotesBundle } from "@/lib/implementationNotes";
+import type {
+  ImplementationNotesBundle,
+  ImplementationUserStory,
+} from "@/lib/implementationNotes";
+import { copyTextToClipboard } from "@/lib/copyToClipboard";
+import { businessRulesMatrixBundle } from "@/lib/businessRulesMatrix";
+import { reportingNav } from "@/lib/reportingStrings";
+import { postKronosysAction } from "@/lib/kronosysApi";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+
+type LiveShape = { language?: string };
+
+function userStoryScreenReaderLabel(
+  lang: Lang,
+  implemented: boolean,
+  discarded?: boolean,
+): string {
+  if (discarded) {
+    return lang === "fr"
+      ? "Intention écartée volontairement ; documentée pour éviter les rediscussions."
+      : "Intent voluntarily discarded; kept on record to avoid reopening the same debate.";
+  }
+  if (lang === "fr") {
+    return implemented ? "Capacité livrée." : "Absent ou hors périmètre.";
+  }
+  return implemented ? "Capability shipped." : "Missing or out of scope.";
+}
+
+function coverageScreenReaderLabel(
+  lang: Lang,
+  columnLabel: string,
+  checked: boolean | undefined,
+  discarded?: boolean,
+): string {
+  if (discarded) {
+    return lang === "fr"
+      ? `${columnLabel} : sans objet pour une ligne écartée.`
+      : `${columnLabel}: not applicable for a discarded intent.`;
+  }
+  const yn =
+    lang === "fr"
+      ? checked ? "oui" : "non"
+      : checked
+        ? "yes"
+        : "no";
+  return `${columnLabel}: ${yn}`;
+}
+
+function implementationCopyFeedbackMessage(
+  lang: Lang,
+  status: "copied" | "failed",
+): string {
+  if (status === "copied") {
+    return lang === "fr" ? "Copié" : "Copied";
+  }
+  return lang === "fr"
+    ? "Copie impossible (navigateur ou contexte HTTP)."
+    : "Could not copy (browser or non-HTTPS context).";
+}
+
+type StoryCopyFeedback = {
+  storyId: string;
+  status: "copied" | "failed";
+};
+
+function applyStoryCopyResult(
+  storyId: string,
+  ok: boolean,
+  setCopyFeedback: Dispatch<SetStateAction<StoryCopyFeedback | null>>,
+): void {
+  setCopyFeedback({ storyId, status: ok ? "copied" : "failed" });
+  globalThis.setTimeout(() => {
+    setCopyFeedback((prev) => (prev?.storyId === storyId ? null : prev));
+  }, 2500);
+}
+
+function stableStoryUuid(groupId: string, index: number): string {
+  const seed = `${groupId}:${index}`;
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash ^= seed.codePointAt(i) ?? 0;
+    hash = Math.imul(hash, 16777619);
+  }
+  const toHex = (value: number) => (value >>> 0).toString(16).padStart(8, "0");
+  const part1 = toHex(hash);
+  const part2 = toHex(hash ^ 0x9e3779b9);
+  const part3Raw = toHex(hash ^ 0x85ebca6b).slice(0, 4);
+  const part4Raw = toHex(hash ^ 0xc2b2ae35).slice(0, 4);
+  const part5 = `${toHex(hash ^ 0x27d4eb2f)}${toHex(hash ^ 0x165667b1).slice(
+    0,
+    4,
+  )}`;
+  const part3 = `${(
+    (Number.parseInt(part3Raw[0] ?? "0", 16) & 0x0f) |
+    0x40
+  ).toString(16)}${part3Raw.slice(1)}`;
+  const part4 = `${(
+    (Number.parseInt(part4Raw[0] ?? "0", 16) & 0x3) |
+    0x8
+  ).toString(16)}${part4Raw.slice(1)}`;
+  return `${part1}-${part2.slice(0, 4)}-${part3}-${part4}-${part5}`;
+}
+
+function ImplementationGlyph(
+  props: Readonly<{ implemented: boolean; discarded?: boolean }>,
+) {
+  const { implemented, discarded } = props;
+  if (discarded) {
+    return (
+      <span className="inline-flex text-zinc-400 dark:text-zinc-500" aria-hidden>
+        <Ban className="size-4 shrink-0" strokeWidth={2.5} />
+      </span>
+    );
+  }
+  if (implemented) {
+    return (
+      <span
+        className="inline-flex text-emerald-600 dark:text-emerald-500"
+        aria-hidden
+      >
+        <Check className="size-4 shrink-0" strokeWidth={2.5} />
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex text-red-600 dark:text-red-500" aria-hidden>
+      <X className="size-4 shrink-0" strokeWidth={2.5} />
+    </span>
+  );
+}
+
+function CoverageGlyph(props: Readonly<{ checked: boolean }>) {
+  const { checked } = props;
+  if (checked) {
+    return (
+      <span
+        className="inline-flex text-emerald-600 dark:text-emerald-500"
+        aria-hidden
+      >
+        <Check className="size-4 shrink-0" strokeWidth={2.5} />
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex text-red-600 dark:text-red-500" aria-hidden>
+      <X className="size-4 shrink-0" strokeWidth={2.5} />
+    </span>
+  );
+}
+
+function ImplementationStoryExpandedBlock(
+  props: Readonly<{
+    storyKey: string;
+    story: ImplementationUserStory;
+    notes: ImplementationNotesBundle;
+  }>,
+) {
+  const { storyKey, story, notes } = props;
+  return (
+    <section
+      id={`implementation-story-extra-${storyKey}`}
+      aria-labelledby={`implementation-story-toggle-${storyKey}`}
+      className="border-l-2 border-violet-200 pl-3 text-[11px] leading-snug text-zinc-600 dark:border-violet-600/60 dark:text-zinc-400"
+    >
+      {story.detail ? <p>{story.detail}</p> : null}
+      {story.example ? (
+        <p className={story.detail ? "mt-2" : ""}>
+          <span className="font-medium text-zinc-700 dark:text-zinc-300">
+            {notes.storyDetailExampleLabel}
+          </span>{" "}
+          {story.example}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+function ImplementationStoryPrimaryCell(
+  props: Readonly<{
+    story: ImplementationUserStory;
+    storyKey: string;
+    expanded: boolean;
+    onToggle: () => void;
+    notes: ImplementationNotesBundle;
+  }>,
+) {
+  const { story, storyKey, expanded, onToggle, notes } = props;
+  const hasExtra = Boolean(story.detail || story.example);
+
+  return (
+    <td className="py-2.5 pr-2 align-top leading-snug">
+      <div className="flex gap-1.5">
+        <span className="inline-flex size-7 shrink-0 items-start justify-center pt-0.5">
+          {hasExtra ? (
+            <button
+              type="button"
+              className="rounded-md p-0.5 text-zinc-500 transition hover:bg-zinc-200/90 hover:text-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+              aria-expanded={expanded}
+              aria-controls={`implementation-story-extra-${storyKey}`}
+              id={`implementation-story-toggle-${storyKey}`}
+              onClick={onToggle}
+              aria-label={
+                expanded
+                  ? notes.storyDetailsToggleCollapse
+                  : notes.storyDetailsToggleExpand
+              }
+            >
+              <ChevronDown
+                className={`size-4 shrink-0 transition-transform duration-150 ease-out motion-reduce:transition-none ${
+                  expanded ? "rotate-180" : ""
+                }`}
+                aria-hidden
+              />
+            </button>
+          ) : null}
+        </span>
+        <div className="min-w-0 flex-1 space-y-2">
+          <div className="flex flex-wrap items-start gap-x-2 gap-y-1.5">
+            {story.discarded ? (
+              <span className="inline-flex shrink-0 rounded-full border border-zinc-300 bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-zinc-600 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
+                {notes.storyDiscardedBadge}
+              </span>
+            ) : null}
+            <p className="min-w-0 flex-1 text-sm text-zinc-800 dark:text-zinc-200">
+              {story.text}
+            </p>
+          </div>
+          {expanded && hasExtra ? (
+            <ImplementationStoryExpandedBlock
+              storyKey={storyKey}
+              story={story}
+              notes={notes}
+            />
+          ) : null}
+        </div>
+      </div>
+    </td>
+  );
+}
+
+function ImplementationBody() {
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+  const { payload, refresh } = useKronosysPayload();
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const dt = dashboardStrings(lang);
+  const nav = useMemo(() => reportingNav(lang), [lang]);
+  const notes = useMemo(() => implementationNotesBundle(lang), [lang]);
+  const businessRules = useMemo(() => businessRulesMatrixBundle(lang), [lang]);
+  const [copyFeedback, setCopyFeedback] = useState<StoryCopyFeedback | null>(
+    null,
+  );
+  const [expandedStoryIds, setExpandedStoryIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  const toggleStoryExpanded = useCallback((storyKey: string) => {
+    setExpandedStoryIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(storyKey)) {
+        next.delete(storyKey);
+      } else {
+        next.add(storyKey);
+      }
+      return next;
+    });
+  }, []);
+
+  const postLang = async (next: Lang) => {
+    await postKronosysAction({ type: "setLanguage", lang: next });
+    await refresh();
+  };
+
+  const copyStoryId = useCallback((storyId: string) => {
+    copyTextToClipboard(storyId).then((ok) =>
+      applyStoryCopyResult(storyId, ok, setCopyFeedback),
+    );
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
+      <header className={appShellHeaderClassName}>
+        <div className={appShellHeaderTitleMetaRowClassName}>
+          <div className="flex min-w-0 flex-col gap-1">
+            <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+              <Link
+                href={withDashboardSessionParam("/", dashboardSessionNavId)}
+                className="text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+              >
+                Kronosys
+              </Link>
+              <span className="text-zinc-400 dark:text-zinc-600" aria-hidden>
+                /
+              </span>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {notes.pageTitle}
+              </span>
+              <span
+                className="inline-flex items-center text-violet-500 dark:text-violet-400"
+                aria-hidden
+              >
+                <FileCode2 className="size-5" strokeWidth={2} />
+              </span>
+            </div>
+            <p className="flex flex-wrap items-center gap-x-2 text-xs font-medium leading-snug text-zinc-500 dark:text-zinc-400">
+              <span>{dt.brandTagline}</span>
+              <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                ·
+              </span>
+              <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+            </p>
+          </div>
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
+        </div>
+        <div className="flex w-full justify-end">
+          <div className={appShellHeaderToolbarClassName}>
+            <AppShellHeaderWallClock lang={lang} dt={dt} />
+            <AppShellCommandCenterPlaceholder />
+            <Link
+              href={withDashboardSessionParam(
+                "/changelog",
+                dashboardSessionNavId,
+              )}
+              className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 hover:text-violet-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-violet-300"
+              aria-label={notes.openChangelogAria}
+              title={notes.openChangelogTooltip}
+            >
+              <ScrollText size={18} />
+            </Link>
+            <AppShellRouteNav
+              current="implementation"
+              labels={nav}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+              reserveGlobalPauseSlot
+            />
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={async () => {
+                return await refresh({ routerInvalidate: true });
+              }}
+            />
+            <LanguageMenu
+              lang={lang}
+              labelEn="English"
+              labelFr="Français"
+              menuHeading={lang === "fr" ? "Langue" : "Language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
+              onSelect={(next) => void postLang(next)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-4xl px-5 pb-16 pt-6 sm:px-8 lg:px-10">
+        <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+          {notes.pageSubtitle}
+        </p>
+        <p className="mt-2 text-xs font-medium text-zinc-700 dark:text-zinc-300">
+          {notes.statusKeyLine}
+        </p>
+        <p className="mt-1 text-xs leading-snug text-zinc-500 dark:text-zinc-500">
+          {notes.storyDiscardedLegendLine}
+        </p>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {notes.lastUpdated}
+        </p>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {notes.repositoryDocLabel}
+        </p>
+
+        <section
+          className="mt-8 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-800/60"
+          aria-labelledby="implementation-user-stories-heading"
+        >
+          <h2
+            id="implementation-user-stories-heading"
+            className="text-base font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {notes.storyGroupsHeading}
+          </h2>
+          <p className="mt-2 text-xs leading-snug text-zinc-500 dark:text-zinc-500">
+            {notes.storyExpandHintLine}
+          </p>
+          <div className="mt-6 space-y-8">
+            {notes.storyGroups.map((group) => (
+              <section
+                key={group.id}
+                id={group.id}
+                className="rounded-lg border border-zinc-100 bg-zinc-50/80 p-3 dark:border-zinc-700/80 dark:bg-zinc-900/40"
+                aria-labelledby={`${group.id}-heading`}
+              >
+                <h3
+                  id={`${group.id}-heading`}
+                  className="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
+                >
+                  {group.title}
+                </h3>
+                {group.lead ? (
+                  <p className="mt-1.5 text-xs leading-snug text-zinc-600 dark:text-zinc-400">
+                    {group.lead}
+                  </p>
+                ) : null}
+                <div className="mt-3 overflow-x-auto">
+                  <table className="w-full border-collapse text-left text-sm text-zinc-700 dark:text-zinc-300">
+                    <caption className="sr-only">{group.title}</caption>
+                    <thead>
+                      <tr className="border-b border-zinc-200 text-xs uppercase tracking-wide text-zinc-500 dark:border-zinc-700/80 dark:text-zinc-400">
+                        <th className="px-2 py-2 text-left font-semibold">
+                          {notes.storyColumnLabel}
+                        </th>
+                        <th className="w-28 px-1 py-2 text-left font-semibold">
+                          UUID
+                        </th>
+                        <th className="w-10 px-2 py-2 text-left font-semibold">
+                          {notes.implementationColumnLabel}
+                        </th>
+                        <th className="w-16 px-1 py-2 text-center font-semibold">
+                          {notes.integrationColumnLabel}
+                        </th>
+                        <th className="w-14 px-1 py-2 text-center font-semibold">
+                          {notes.e2eColumnLabel}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {group.stories.map((story, idx) => {
+                        const storyUuid = stableStoryUuid(group.id, idx);
+                        const storyKey = `${group.id}-${idx}`;
+                        const srMark = userStoryScreenReaderLabel(
+                          lang,
+                          story.implemented,
+                          story.discarded,
+                        );
+                        return (
+                          <tr
+                            key={`${group.id}-${idx}`}
+                            className={
+                              idx === 0
+                                ? ""
+                                : "border-t border-zinc-200 dark:border-zinc-700/80"
+                            }
+                          >
+                            <ImplementationStoryPrimaryCell
+                              story={story}
+                              storyKey={storyKey}
+                              expanded={expandedStoryIds.has(storyKey)}
+                              onToggle={() => toggleStoryExpanded(storyKey)}
+                              notes={notes}
+                            />
+                            <td className="w-28 align-top px-1 py-2.5">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  copyStoryId(storyUuid);
+                                }}
+                                className="inline-flex shrink-0 items-center gap-1 rounded-md border border-zinc-300 bg-white px-1.5 py-1 text-[10px] font-medium text-zinc-700 shadow-sm hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700/80"
+                                aria-label={
+                                  lang === "fr"
+                                    ? `Copier l’identifiant ${storyUuid}`
+                                    : `Copy identifier ${storyUuid}`
+                                }
+                                title={
+                                  lang === "fr"
+                                    ? "Copier l’identifiant du point"
+                                    : "Copy story identifier"
+                                }
+                              >
+                                <Copy className="size-3.5" />
+                                <span className="font-mono leading-none">
+                                  {storyUuid.slice(0, 8)}
+                                </span>
+                              </button>
+                              {copyFeedback?.storyId === storyUuid ? (
+                                <p
+                                  className={
+                                    copyFeedback.status === "copied"
+                                      ? "mt-1 text-[10px] text-emerald-600 dark:text-emerald-500"
+                                      : "mt-1 text-[10px] text-red-600 dark:text-red-500"
+                                  }
+                                >
+                                  {implementationCopyFeedbackMessage(
+                                    lang,
+                                    copyFeedback.status,
+                                  )}
+                                </p>
+                              ) : null}
+                            </td>
+                            <td className="w-10 align-top px-2 py-2.5">
+                              <span className="sr-only">{srMark} </span>
+                              <ImplementationGlyph
+                                implemented={story.implemented}
+                                discarded={story.discarded}
+                              />
+                            </td>
+                            <td className="w-16 shrink-0 align-top px-1 py-2.5 text-center">
+                              <span className="sr-only">
+                                {coverageScreenReaderLabel(
+                                  lang,
+                                  notes.integrationColumnLabel,
+                                  story.integrationChecked,
+                                  story.discarded,
+                                )}
+                              </span>
+                              {story.discarded ? (
+                                <span
+                                  className="text-zinc-400 dark:text-zinc-500"
+                                  aria-hidden
+                                >
+                                  —
+                                </span>
+                              ) : (
+                                <CoverageGlyph
+                                  checked={story.integrationChecked === true}
+                                />
+                              )}
+                            </td>
+                            <td className="w-14 shrink-0 align-top px-1 py-2.5 text-center">
+                              <span className="sr-only">
+                                {coverageScreenReaderLabel(
+                                  lang,
+                                  notes.e2eColumnLabel,
+                                  story.e2eChecked,
+                                  story.discarded,
+                                )}
+                              </span>
+                              {story.discarded ? (
+                                <span
+                                  className="text-zinc-400 dark:text-zinc-500"
+                                  aria-hidden
+                                >
+                                  —
+                                </span>
+                              ) : (
+                                <CoverageGlyph
+                                  checked={story.e2eChecked === true}
+                                />
+                              )}
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+            ))}
+          </div>
+        </section>
+
+        <section
+          className="mt-8 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-800/60"
+          aria-labelledby="implementation-business-rules-heading"
+        >
+          <h2
+            id="implementation-business-rules-heading"
+            className="text-base font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {businessRules.heading}
+          </h2>
+          <p className="mt-2 text-xs leading-snug text-zinc-600 dark:text-zinc-400">
+            {businessRules.subtitle}
+          </p>
+          <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-500">
+            {businessRules.statusLegend}
+          </p>
+          <div className="mt-4 overflow-x-auto">
+            <table className="w-full border-collapse text-left text-xs text-zinc-700 dark:text-zinc-300">
+              <caption className="sr-only">{businessRules.heading}</caption>
+              <thead>
+                <tr className="border-b border-zinc-200 text-[11px] uppercase tracking-wide text-zinc-500 dark:border-zinc-700/80 dark:text-zinc-400">
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.id}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.domain}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.rule}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.status}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.code}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.tests}
+                  </th>
+                  <th className="px-2 py-2 text-left font-semibold">
+                    {businessRules.columns.note}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {businessRules.rows.map((row, idx) => (
+                  <tr
+                    key={row.id}
+                    className={
+                      idx === 0
+                        ? ""
+                        : "border-t border-zinc-200 dark:border-zinc-700/80"
+                    }
+                  >
+                    <td className="px-2 py-2 align-top font-mono text-[11px]">
+                      {row.id}
+                    </td>
+                    <td className="px-2 py-2 align-top">{row.domain}</td>
+                    <td className="px-2 py-2 align-top leading-snug">
+                      {row.title}
+                    </td>
+                    <td className="px-2 py-2 align-top">
+                      <span className="inline-flex rounded-full border border-zinc-300 bg-zinc-100 px-2 py-0.5 text-[11px] dark:border-zinc-600 dark:bg-zinc-700/60">
+                        {businessRules.statuses[row.status]}
+                      </span>
+                    </td>
+                    <td className="px-2 py-2 align-top leading-snug">
+                      {row.codeRefs.join(", ")}
+                    </td>
+                    <td className="px-2 py-2 align-top leading-snug">
+                      {row.testRefs.join(", ")}
+                    </td>
+                    <td className="px-2 py-2 align-top leading-snug">
+                      {row.note ?? "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </main>
+      <ScrollToTopFab
+        ariaLabel={lang === "fr" ? "Retour en haut de la page" : "Back to top"}
+      />
+    </div>
+  );
+}
+
+export default function ImplementationPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-zinc-100 px-6 py-10 text-sm text-zinc-500 dark:bg-zinc-900">
+          Kronosys…
+        </div>
+      }
+    >
+      <ImplementationBody />
+    </Suspense>
+  );
+}