@nightkatana/kronosys-app 1.0.0-beta.20 → 1.0.0-beta.22

package/README.md

@@ -99,7 +99,7 @@ Sinon : `NODE_EXTRA_CA_CERTS` pointant vers le PEM racine de l’organisation, o
 
 ## Publication npm (`@nightkatana/kronosys-app`)
 
-La version est définie dans `package.json` (référence actuelle : **`1.0.0-beta.20`**). Avant la première publication : créer le scope **@nightkatana** sur [npmjs.com](https://www.npmjs.com/) si besoin, puis `npm login`. Depuis ce dossier :
+La version est définie dans `package.json` (référence actuelle : **`1.0.0-beta.22`**). Avant la première publication : créer le scope **@nightkatana** sur [npmjs.com](https://www.npmjs.com/) si besoin, puis `npm login`. Depuis ce dossier :
 
 ```bash
 npm publish --access public

package/app/changelog/page.tsx

@@ -1,22 +1,31 @@
 "use client";
 
-import { Suspense, useMemo } from "react";
+import { Suspense, useCallback, useMemo } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import ReactMarkdown, { type Components } from "react-markdown";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
 import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import {
   appShellHeaderClassName,
-  appShellHeaderToolRowClassName,
+  appShellHeaderTitleMetaRowClassName,
 } from "@/lib/appShellHeaderClasses";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
 import { changelogBundle } from "@/lib/changelogCopy";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { postKronosysAction } from "@/lib/kronosysApi";
+import { reportingNav } from "@/lib/reportingStrings";
 
 type LiveShape = { language?: string };
 
@@ -77,11 +86,28 @@ function ChangelogBody() {
   const lang: Lang = live?.language === "fr" ? "fr" : "en";
   const dt = dashboardStrings(lang);
   const c = useMemo(() => changelogBundle(lang), [lang]);
+  const nav = useMemo(() => reportingNav(lang), [lang]);
+
+  const postLang = useCallback(
+    async (next: Lang) => {
+      await postKronosysAction({ type: "setLanguage", lang: next });
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
+  );
+
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [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={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
@@ -105,23 +131,65 @@ function ChangelogBody() {
               <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
             </p>
           </div>
-          <div className="flex flex-wrap items-center gap-1.5">
-            <AppShellHeaderWallClock lang={lang} dt={dt} />
-            <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 });
-              }}
-            />
-          </div>
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={() => refresh({ routerInvalidate: true })}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
+              current="changelog"
+              labels={nav}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+              lang={lang}
+              dt={dt}
+            />
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <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)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main className="mx-auto w-full max-w-3xl px-5 pb-16 pt-6 sm:px-8 lg:px-10">

package/app/globals.css

@@ -7,7 +7,8 @@
 :root {
   /* Aligné sur le remap zinc clair (chaud, moins d’éblouissement). */
   --background: oklch(93.8% 0.011 82);
-  --foreground: oklch(24.5% 0.014 285);
+  /* Même teinte que zinc-900 du thème clair (évite texte légèrement bleuté sur fond chaud). */
+  --foreground: oklch(24.5% 0.013 84);
 }
 
 html.dark {
@@ -34,13 +35,14 @@ html:not(.dark) {
   --color-zinc-100: oklch(93.8% 0.011 82);
   --color-zinc-200: oklch(88.5% 0.012 84);
   --color-zinc-300: oklch(82% 0.014 84);
-  --color-zinc-400: oklch(68% 0.016 280);
-  --color-zinc-500: oklch(54% 0.018 285);
-  --color-zinc-600: oklch(44% 0.017 285);
-  --color-zinc-700: oklch(37% 0.014 285);
-  --color-zinc-800: oklch(30% 0.012 285);
-  --color-zinc-900: oklch(24.5% 0.014 285);
-  --color-zinc-950: oklch(18% 0.012 285);
+  /* Même famille chaude que zinc-50…300 (évite le saut vers ~280° qui « violettait » bordures / secondaire). */
+  --color-zinc-400: oklch(68% 0.014 84);
+  --color-zinc-500: oklch(54% 0.016 84);
+  --color-zinc-600: oklch(44% 0.015 84);
+  --color-zinc-700: oklch(37% 0.014 84);
+  --color-zinc-800: oklch(30% 0.013 84);
+  --color-zinc-900: oklch(24.5% 0.013 84);
+  --color-zinc-950: oklch(18% 0.012 84);
 }
 
 body {

package/app/guide/page.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { Suspense, useMemo, useState, type ReactNode } from "react";
+import {
+  Suspense,
+  useCallback,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { BookOpen, Search, X } from "lucide-react";
@@ -10,12 +16,14 @@ import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
-import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
+import { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { UserGuideBodyText } from "@/components/dashboard/UserGuideBodyText";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
@@ -64,6 +72,14 @@ function GuideContent() {
     await refresh();
   };
 
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
+  );
+
   const bulletList = (
     lines: string[],
     idPrefix: string,
@@ -120,42 +136,63 @@ function GuideContent() {
           </div>
           <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
-        <div className="flex w-full justify-end">
-          <div className={appShellHeaderToolbarClassName}>
-            <AppShellHeaderWallClock lang={lang} dt={dt} />
-            <AppShellCommandCenterPlaceholder />
-            <AppShellRouteNav
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={() => refresh({ routerInvalidate: true })}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               current="guide"
               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)}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <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)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main

package/app/implementation/page.tsx

@@ -10,29 +10,23 @@ import {
 } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import {
-  Ban,
-  Check,
-  ChevronDown,
-  Copy,
-  FileCode2,
-  ScrollText,
-  X,
-} from "lucide-react";
+import { Ban, Check, ChevronDown, Copy, 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 { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 import { implementationNotesBundle } from "@/lib/implementationNotes";
@@ -75,12 +69,7 @@ function coverageScreenReaderLabel(
       ? `${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";
+  const yn = lang === "fr" ? (checked ? "oui" : "non") : checked ? "yes" : "no";
   return `${columnLabel}: ${yn}`;
 }
 
@@ -145,7 +134,10 @@ function ImplementationGlyph(
   const { implemented, discarded } = props;
   if (discarded) {
     return (
-      <span className="inline-flex text-zinc-400 dark:text-zinc-500" aria-hidden>
+      <span
+        className="inline-flex text-zinc-400 dark:text-zinc-500"
+        aria-hidden
+      >
         <Ban className="size-4 shrink-0" strokeWidth={2.5} />
       </span>
     );
@@ -310,6 +302,14 @@ function ImplementationBody() {
     await refresh();
   };
 
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
+  );
+
   const copyStoryId = useCallback((storyId: string) => {
     copyTextToClipboard(storyId).then((ok) =>
       applyStoryCopyResult(storyId, ok, setCopyFeedback),
@@ -351,53 +351,63 @@ function ImplementationBody() {
           </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
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={() => refresh({ routerInvalidate: true })}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               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)}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <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)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <main className="mx-auto w-full max-w-4xl px-5 pb-16 pt-6 sm:px-8 lg:px-10">