@nightkatana/kronosys-app 1.0.0-beta.13 → 1.0.0-beta.15

package/app/globals.css

@@ -48,6 +48,22 @@ body {
   color: var(--foreground);
 }
 
+@keyframes kronosys-route-transition-in-kf {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.kronosys-route-transition-in {
+  animation: kronosys-route-transition-in-kf 170ms ease-out both;
+  will-change: opacity, transform;
+}
+
 /* Minuteur focus : clignotement sous 5 min (travail / longue pause), accent violet sous 30 s */
 @keyframes kronosys-krono-focus-blink {
   0%,
@@ -187,11 +203,77 @@ html.dark .kronosys-datetime-popover select option {
   transform-origin: center center;
 }
 
+/* Tâche en pause : halo ambre léger (minuteur arrêté) */
+@keyframes kronosys-task-paused-ring-kf {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px rgb(234 179 8 / 0.28),
+      0 0 12px -4px rgb(234 179 8 / 0.12);
+  }
+  50% {
+    box-shadow:
+      0 0 0 3px rgb(234 179 8 / 0.42),
+      0 0 18px -2px rgb(234 179 8 / 0.22);
+  }
+}
+
+.kronosys-task-paused-blink {
+  animation: kronosys-task-paused-ring-kf 1.75s ease-in-out infinite;
+}
+
+/* Tâche lancée : pulse léger tant que le minuteur roule */
+@keyframes kronosys-task-running-pulse-kf {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px rgb(16 185 129 / 0.22),
+      0 0 10px -5px rgb(16 185 129 / 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 0 2px rgb(16 185 129 / 0.36),
+      0 0 18px -4px rgb(16 185 129 / 0.18);
+  }
+}
+
+.kronosys-task-running-pulse {
+  animation: kronosys-task-running-pulse-kf 2.2s ease-in-out infinite;
+}
+
+/* Tâche terminée : pulse unique vert (succès) */
+@keyframes kronosys-task-finish-celebrate-kf {
+  0% {
+    box-shadow: 0 0 0 0 rgb(16 185 129 / 0);
+    transform: scale(1);
+  }
+  45% {
+    box-shadow:
+      0 0 0 4px rgb(16 185 129 / 0.35),
+      0 0 20px -4px rgb(16 185 129 / 0.28);
+    transform: scale(1.012);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgb(16 185 129 / 0);
+    transform: scale(1);
+  }
+}
+
+.kronosys-task-finish-celebrate {
+  animation: kronosys-task-finish-celebrate-kf 0.7s ease-out 1 both;
+  transform-origin: center center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto !important;
   }
 
+  .kronosys-route-transition-in {
+    animation: none;
+    transform: none;
+  }
+
   .kronosys-krono-focus-time-blink {
     animation: none;
     opacity: 1;
@@ -207,4 +289,20 @@ html.dark .kronosys-datetime-popover select option {
     animation: none;
     opacity: 1;
   }
+
+  .kronosys-task-paused-blink {
+    animation: none;
+    box-shadow: none;
+  }
+
+  .kronosys-task-running-pulse {
+    animation: none;
+    box-shadow: none;
+  }
+
+  .kronosys-task-finish-celebrate {
+    animation: none;
+    transform: none;
+    box-shadow: none;
+  }
 }

package/app/guide/page.tsx

@@ -7,7 +7,13 @@ import { BookOpen, Search, X } from "lucide-react";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import { postKronosysAction } from "@/lib/kronosysApi";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
-import { appShellHeaderClassName, appShellHeaderToolRowClassName } from "@/lib/appShellHeaderClasses";
+import {
+  appShellHeaderClassName,
+  appShellHeaderTitleMetaRowClassName,
+  appShellHeaderToolbarClassName,
+} from "@/lib/appShellHeaderClasses";
+import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
 import { UserGuideBodyText } from "@/components/dashboard/UserGuideBodyText";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
@@ -21,7 +27,10 @@ import { sectionSearchHaystack, userGuideBundle } from "@/lib/userGuideCopy";
 
 type LiveShape = { language?: string };
 
-function filterSections(query: string, sections: ReturnType<typeof userGuideBundle>["sections"]): number[] {
+function filterSections(
+  query: string,
+  sections: ReturnType<typeof userGuideBundle>["sections"],
+): number[] {
   const q = query.trim().toLowerCase();
   if (q.length === 0) {
     return sections.map((_, i) => i);
@@ -44,14 +53,21 @@ function GuideContent() {
   const nav = useMemo(() => reportingNav(lang), [lang]);
   const dt = dashboardStrings(lang);
   const bundle = useMemo(() => userGuideBundle(lang), [lang]);
-  const visible = useMemo(() => filterSections(q, bundle.sections), [q, bundle.sections]);
+  const visible = useMemo(
+    () => filterSections(q, bundle.sections),
+    [q, bundle.sections],
+  );
 
   const postLang = async (next: Lang) => {
     await postKronosysAction({ type: "setLanguage", lang: next });
     await refresh();
   };
 
-  const bulletList = (lines: string[], idPrefix: string, listType: "ul" | "ol" = "ul"): ReactNode => {
+  const bulletList = (
+    lines: string[],
+    idPrefix: string,
+    listType: "ul" | "ol" = "ul",
+  ): ReactNode => {
     const listClass =
       listType === "ol"
         ? "mt-2 list-inside list-decimal space-y-1.5 pl-0.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300"
@@ -71,7 +87,7 @@ function GuideContent() {
   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={appShellHeaderToolRowClassName}>
+        <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
@@ -83,8 +99,13 @@ function GuideContent() {
               <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">{bundle.pageTitle}</span>
-              <span className="inline-flex items-center text-violet-500 dark:text-violet-400" aria-hidden>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {bundle.pageTitle}
+              </span>
+              <span
+                className="inline-flex items-center text-violet-500 dark:text-violet-400"
+                aria-hidden
+              >
                 <BookOpen className="size-5" strokeWidth={2} />
               </span>
             </div>
@@ -96,12 +117,17 @@ function GuideContent() {
               <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
             </p>
           </div>
-          <div className="flex flex-wrap items-center gap-1.5">
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
+        </div>
+        <div className="flex w-full justify-end">
+          <div className={appShellHeaderToolbarClassName}>
+            <AppShellCommandCenterPlaceholder />
             <AppShellRouteNav
               current="guide"
               labels={nav}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
+              reserveGlobalPauseSlot
             />
             <ThemeToggle lang={lang} />
             <PageRefreshButton
@@ -121,7 +147,9 @@ function GuideContent() {
               labelEn="English"
               labelFr="Français"
               menuHeading={lang === "fr" ? "Langue" : "Language"}
-              triggerAriaLabel={lang === "fr" ? "Langue de l’interface" : "Interface language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
               onSelect={(next) => void postLang(next)}
             />
           </div>
@@ -133,9 +161,14 @@ function GuideContent() {
         data-user-guide-scrolled=""
       >
         <p className="max-w-3xl text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
-          <UserGuideBodyText line={bundle.pageSubtitle} sessionId={dashboardSessionNavId} />
+          <UserGuideBodyText
+            line={bundle.pageSubtitle}
+            sessionId={dashboardSessionNavId}
+          />
+        </p>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {bundle.lastUpdated}
         </p>
-        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">{bundle.lastUpdated}</p>
 
         <form
           onSubmit={(e) => e.preventDefault()}
@@ -179,7 +212,10 @@ function GuideContent() {
         </form>
 
         {visible.length === 0 && q.trim() ? (
-          <output className="mt-8 block text-sm text-zinc-500 dark:text-zinc-400" aria-live="polite">
+          <output
+            className="mt-8 block text-sm text-zinc-500 dark:text-zinc-400"
+            aria-live="polite"
+          >
             {bundle.searchNoResults}
           </output>
         ) : null}
@@ -230,8 +266,14 @@ function GuideContent() {
                   </h2>
                   <div className="mt-3 space-y-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
                     {s.paragraphs.map((p, pIdx) => (
-                      <p key={`${s.id}-p${pIdx}`} className="[&:not(:first-of-type)]:pt-0.5">
-                        <UserGuideBodyText line={p} sessionId={dashboardSessionNavId} />
+                      <p
+                        key={`${s.id}-p${pIdx}`}
+                        className="[&:not(:first-of-type)]:pt-0.5"
+                      >
+                        <UserGuideBodyText
+                          line={p}
+                          sessionId={dashboardSessionNavId}
+                        />
                       </p>
                     ))}
                     {s.steps && s.steps.length > 0 ? (
@@ -251,7 +293,9 @@ function GuideContent() {
                       </div>
                     ) : null}
                   </div>
-                  {s.bullets && s.bullets.length > 0 ? bulletList(s.bullets, s.id) : null}
+                  {s.bullets && s.bullets.length > 0
+                    ? bulletList(s.bullets, s.id)
+                    : null}
                 </article>
               );
             })}

package/app/implementation/page.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { Check, FileCode2, 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 { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { implementationNotesBundle } from "@/lib/implementationNotes";
+import { reportingNav } from "@/lib/reportingStrings";
+import { postKronosysAction } from "@/lib/kronosysApi";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+
+type LiveShape = { language?: string };
+
+const IMPLEMENTATION_REVIEW_STORAGE_KEY = "kronosys.implementation.review.v2";
+
+function userStoryScreenReaderLabel(lang: Lang, implemented: boolean): string {
+  if (lang === "fr") {
+    return implemented ? "Capacité livrée." : "Absent ou hors périmètre.";
+  }
+  return implemented ? "Capability shipped." : "Missing or out of scope.";
+}
+
+function useImplementationReviewState() {
+  const [reviewed, setReviewed] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(IMPLEMENTATION_REVIEW_STORAGE_KEY);
+      if (raw) {
+        const parsed = JSON.parse(raw) as Record<string, boolean>;
+        if (parsed && typeof parsed === "object") {
+          setReviewed(parsed);
+        }
+      }
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const setReviewedKey = useCallback((key: string, value: boolean) => {
+    setReviewed((prev) => {
+      const next = { ...prev, [key]: value };
+      try {
+        localStorage.setItem(
+          IMPLEMENTATION_REVIEW_STORAGE_KEY,
+          JSON.stringify(next),
+        );
+      } catch {
+        /* ignore */
+      }
+      return next;
+    });
+  }, []);
+
+  const resetReviewed = useCallback(() => {
+    setReviewed({});
+    try {
+      localStorage.removeItem(IMPLEMENTATION_REVIEW_STORAGE_KEY);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  return { reviewed, setReviewedKey, resetReviewed };
+}
+
+function ImplementationGlyph(props: Readonly<{ implemented: boolean }>) {
+  const { implemented } = props;
+  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 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 { reviewed, setReviewedKey, resetReviewed } =
+    useImplementationReviewState();
+
+  const postLang = async (next: Lang) => {
+    await postKronosysAction({ type: "setLanguage", lang: next });
+    await refresh();
+  };
+
+  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}>
+            <AppShellCommandCenterPlaceholder />
+            <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-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {notes.lastUpdated}
+        </p>
+        <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+          <p className="text-xs text-zinc-500 dark:text-zinc-500">
+            {notes.repositoryDocLabel}
+          </p>
+          <button
+            type="button"
+            className="rounded-md border border-zinc-300 bg-white px-2 py-1 text-xs 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"
+            onClick={resetReviewed}
+            aria-label={notes.checklistResetAria}
+          >
+            {notes.checklistResetLabel}
+          </button>
+        </div>
+
+        <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>
+          <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>
+                    <tbody>
+                      {group.stories.map((story, idx) => {
+                        const rowKey = `sg:${group.id}:s${idx}`;
+                        const isReviewed = !!reviewed[rowKey];
+                        const srMark = userStoryScreenReaderLabel(
+                          lang,
+                          story.implemented,
+                        );
+                        return (
+                          <tr
+                            key={`${group.id}-${idx}`}
+                            className={
+                              idx === 0
+                                ? ""
+                                : "border-t border-zinc-200 dark:border-zinc-700/80"
+                            }
+                          >
+                            <td className="w-10 align-top px-2 py-2.5">
+                              <span className="sr-only">{srMark} </span>
+                              <ImplementationGlyph
+                                implemented={story.implemented}
+                              />
+                            </td>
+                            <td className="py-2.5 pr-2 leading-snug">
+                              {story.text}
+                            </td>
+                            <td className="w-12 shrink-0 align-top px-1 py-2.5 text-center">
+                              <input
+                                type="checkbox"
+                                className="size-4 rounded border-zinc-300 text-violet-600 focus:ring-violet-500 dark:border-zinc-600 dark:bg-zinc-900 dark:text-violet-500 dark:focus:ring-violet-400"
+                                checked={isReviewed}
+                                onChange={(e) =>
+                                  setReviewedKey(rowKey, e.target.checked)
+                                }
+                                aria-label={
+                                  isReviewed
+                                    ? notes.checklistUnmarkAria
+                                    : notes.checklistMarkAria
+                                }
+                              />
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+            ))}
+          </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>
+  );
+}

package/app/layout.tsx

@@ -7,6 +7,7 @@ import { KronosysPackageVersionProvider } from "@/components/KronosysPackageVers
 import { DashboardToastProvider } from "@/components/dashboard/DashboardToastProvider";
 import { KronosysPayloadProvider } from "@/components/KronosysPayloadProvider";
 import { AppShellLiveSessionDrawer } from "@/components/dashboard/AppShellLiveSessionDrawer";
+import { RouteTransition } from "@/components/RouteTransition";
 import { readKronosysPackageVersion } from "@/lib/readKronosysPackageVersion";
 import { getThemeBootstrapScript } from "@/lib/theme";
 import "./globals.css";
@@ -27,7 +28,10 @@ export const metadata: Metadata = {
     "Kronosys : sessions, tâches, KronoFocus — application web locale (Next.js + SQLite).",
   applicationName: "Kronosys Dashboard",
   icons: {
-    icon: [{ url: "/icon-192.png", sizes: "192x192", type: "image/png" }, { url: "/icon-512.png", sizes: "512x512", type: "image/png" }],
+    icon: [
+      { url: "/icon-192.png", sizes: "192x192", type: "image/png" },
+      { url: "/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
     apple: [{ url: "/apple-icon.png", sizes: "180x180", type: "image/png" }],
   },
   appleWebApp: {
@@ -58,13 +62,17 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="flex min-h-full flex-col font-sans">
-        <script dangerouslySetInnerHTML={{ __html: getThemeBootstrapScript() }} />
+        <script
+          dangerouslySetInnerHTML={{ __html: getThemeBootstrapScript() }}
+        />
         <ThemeProvider>
           <KronosysPackageVersionProvider version={kronosysPackageVersion}>
             <DashboardToastProvider>
               <KronosysPayloadProvider>
                 <PwaRegister />
-                <div className="flex min-h-full flex-1 flex-col">{children}</div>
+                <div className="flex min-h-full flex-1 flex-col">
+                  <RouteTransition>{children}</RouteTransition>
+                </div>
                 <AppShellLiveSessionDrawer />
                 <SiteLegalFooter />
               </KronosysPayloadProvider>