@carlonicora/nextjs-jsonapi 3.11.0 → 3.13.0

package/src/features/handbook/components/lists/HandbookContents.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { RoundPageContainer } from "../../../../components/containers/RoundPageContainer";
+import { Modules } from "../../../../core";
+import { HandbookProvider } from "../../contexts/HandbookContext";
+import { handbookSectionSummary, handbookSectionTitle } from "../../data/handbookDisplay";
+import { HandbookPageInterface } from "../../data/HandbookPageInterface";
+import { HandbookPageService } from "../../data/HandbookPageService";
+import { HandbookSectionInterface } from "../../data/HandbookSectionInterface";
+import { HandbookSectionService } from "../../data/HandbookSectionService";
+import { HandbookAskSheet } from "../containers/HandbookAskSheet";
+import HandbookSyncButton from "../forms/HandbookSyncButton";
+import { HandbookIndexStatus } from "../parts/HandbookIndexStatus";
+import { HandbookSectionGroup } from "./HandbookSectionGroup";
+
+type RenderedSection = {
+  key: string;
+  title: string;
+  summary?: string;
+  pages: HandbookPageInterface[];
+};
+
+/**
+ * The contents surface: the manual's table of contents, replacing the four
+ * column table of indexed files.
+ *
+ * It owns `RoundPageContainer` rather than being handed one, because
+ * `RoundPageContainerTitle` reads its heading from `useSharedContext()` and the
+ * provider that supplies it therefore has to be an ANCESTOR of the container —
+ * exactly the composition `HandbookAskContainer` already uses. See the
+ * hand-off note: the plan put the provider inside the container, which throws.
+ */
+export default function HandbookContents() {
+  const t = useTranslations();
+
+  const [pages, setPages] = useState<HandbookPageInterface[]>([]);
+  const [sections, setSections] = useState<HandbookSectionInterface[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [reloadToken, setReloadToken] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setIsLoading(true);
+
+      // The two loads are INDEPENDENT on purpose. A failed section read must
+      // not take the pages down with it: without sections the contents page
+      // falls back to the raw section keys, which is exactly what an nja
+      // application with no README index renders anyway.
+      const loadedPages = HandbookPageService.findMany({ fetchAll: true })
+        .then((result) => {
+          if (!cancelled) setPages(result ?? []);
+        })
+        .catch(() => {
+          if (!cancelled) setPages([]);
+        });
+
+      const loadedSections = HandbookSectionService.findMany()
+        .then((result) => {
+          if (!cancelled) setSections(result ?? []);
+        })
+        .catch(() => {
+          if (!cancelled) setSections([]);
+        });
+
+      await Promise.allSettled([loadedPages, loadedSections]);
+      if (!cancelled) setIsLoading(false);
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadToken]);
+
+  /** `HandbookSyncButton` awaits this before it toasts; re-running the effect refetches both resources. */
+  const refresh = useCallback(async () => {
+    setReloadToken((token) => token + 1);
+  }, []);
+
+  const renderedSections = useMemo(
+    () => buildSections({ pages, sections, untitled: t("handbook.sections.untitled") }),
+    [pages, sections, t],
+  );
+
+  return (
+    <HandbookProvider
+      functions={
+        <>
+          <HandbookAskSheet />
+          <HandbookSyncButton refresh={refresh} />
+          <HandbookIndexStatus pages={pages} />
+        </>
+      }
+    >
+      {/*
+        NOT `fullWidth`. That flag strips the container's `mx-auto max-w-6xl`
+        and its padding (RoundPageContainer.tsx:477-484) — it exists for the
+        edge-to-edge table this page replaced. A contents page is prose: it
+        wants the same centred, padded column every other non-table page in the
+        app uses, and a summary line running to 1900px is unreadable.
+      */}
+      <RoundPageContainer module={Modules.HandbookPage} forceHeader>
+        {isLoading ? null : renderedSections.length === 0 ? (
+          <span className="text-muted-foreground text-sm">{t("handbook.empty")}</span>
+        ) : (
+          <div className="flex w-full flex-col gap-10">
+            {renderedSections.map((section) => (
+              <HandbookSectionGroup
+                key={section.key}
+                title={section.title}
+                summary={section.summary}
+                pages={section.pages}
+              />
+            ))}
+          </div>
+        )}
+      </RoundPageContainer>
+    </HandbookProvider>
+  );
+}
+
+/**
+ * Turns the two loaded lists into the sections the page renders, in order.
+ *
+ * Three degradations, all of them load-bearing:
+ *
+ * 1. No sections loaded — the endpoint failed, or the application has no
+ *    README index — falls back to the distinct `section` values of the pages,
+ *    sorted, with the raw key as the heading and no blurb.
+ * 2. A section declared by the index but matching no page renders with its
+ *    blurb and an empty list. Visible drift beats a silently dropped heading.
+ * 3. A page whose `section` is empty or matches no loaded section lands in a
+ *    trailing group. A file at the root of the tree is one of those.
+ *
+ * The grouping and both sorts read `section`, `order` and `path`, which stay
+ * English: the manual is indexed in English and only shown translated. The two
+ * strings a section actually prints go through the display helpers, so a
+ * translated section renders translated and an untranslated one renders the
+ * English original it was indexed under.
+ */
+function buildSections(params: {
+  pages: HandbookPageInterface[];
+  sections: HandbookSectionInterface[];
+  untitled: string;
+}): RenderedSection[] {
+  const byOrder = (a: string, b: string) => a.localeCompare(b);
+
+  const ordered: { key: string; title: string; summary?: string }[] =
+    params.sections.length > 0
+      ? [...params.sections]
+          .sort((a, b) => byOrder(a.order || a.key, b.order || b.key))
+          .map((section) => ({
+            key: section.key,
+            title: handbookSectionTitle(section) || section.key,
+            summary: handbookSectionSummary(section),
+          }))
+      : Array.from(new Set(params.pages.map((page) => page.section).filter((key) => !!key)))
+          .sort(byOrder)
+          .map((key) => ({ key, title: key }));
+
+  const known = new Set(ordered.map((section) => section.key));
+
+  const grouped = new Map<string, HandbookPageInterface[]>();
+  const leftovers: HandbookPageInterface[] = [];
+
+  for (const page of params.pages) {
+    const key = page.section;
+    if (!key || !known.has(key)) {
+      leftovers.push(page);
+      continue;
+    }
+
+    const existing = grouped.get(key);
+    if (existing) existing.push(page);
+    else grouped.set(key, [page]);
+  }
+
+  const sortPages = (pages: HandbookPageInterface[]) =>
+    [...pages].sort((a, b) => byOrder(a.order || a.path || a.title, b.order || b.path || b.title));
+
+  const response: RenderedSection[] = ordered.map((section) => ({
+    ...section,
+    pages: sortPages(grouped.get(section.key) ?? []),
+  }));
+
+  if (leftovers.length > 0)
+    response.push({ key: "", title: params.untitled, summary: undefined, pages: sortPages(leftovers) });
+
+  return response;
+}

package/src/features/handbook/components/lists/HandbookSectionGroup.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useMemo } from "react";
+
+import { MicroLabel, SectionHeader } from "../../../../components/typography";
+import { Modules } from "../../../../core";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { Link } from "../../../../shadcnui";
+import { handbookPageSummary, handbookPageTitle } from "../../data/handbookDisplay";
+import { HandbookPageInterface } from "../../data/HandbookPageInterface";
+
+type HandbookSectionGroupProps = {
+  /** Rendered as the section's `h2`. Already prettified and translated by the caller. */
+  title: string;
+  /** The README blurb for the section, already translated by the caller. */
+  summary?: string;
+  /** The section's pages, already sorted by `order` by the caller. */
+  pages: HandbookPageInterface[];
+};
+
+/**
+ * One section of the contents page: a heading, its blurb, and its pages.
+ *
+ * A page whose path nests below the section's own directory
+ * (`02-framework/rulebook/frontend/01-models.md` inside `02-framework`) is not
+ * a peer of the section's direct pages, so it renders under a micro-label
+ * naming the intermediate directories. The nesting is read off the path rather
+ * than stored, because the filesystem is the only place it is declared.
+ */
+export function HandbookSectionGroup({ title, summary, pages }: HandbookSectionGroupProps) {
+  const generateUrl = usePageUrlGenerator();
+
+  const { direct, nested } = useMemo(() => splitByNesting(pages), [pages]);
+
+  return (
+    <section className="flex flex-col gap-4">
+      {/*
+        The rule belongs to the heading block, not between the sections: it
+        marks where a section starts, so the generous gap above it reads as
+        separation and the tight gap below it as belonging.
+      */}
+      <div className="flex flex-col gap-1 border-b pb-3">
+        <SectionHeader level={2}>{title}</SectionHeader>
+        {summary ? <p className="text-muted-foreground text-sm">{summary}</p> : null}
+      </div>
+
+      {direct.length > 0 ? <HandbookPageRows pages={direct} generateUrl={generateUrl} /> : null}
+
+      {nested.map((group) => (
+        <div key={group.label} className="flex flex-col gap-1.5 pt-2">
+          <MicroLabel>{group.label}</MicroLabel>
+          <HandbookPageRows pages={group.pages} generateUrl={generateUrl} />
+        </div>
+      ))}
+    </section>
+  );
+}
+
+function HandbookPageRows({
+  pages,
+  generateUrl,
+}: {
+  pages: HandbookPageInterface[];
+  generateUrl: ReturnType<typeof usePageUrlGenerator>;
+}) {
+  return (
+    <ul className="divide-border/60 flex flex-col divide-y">
+      {pages.map((page) => {
+        // The translation when the ingest matched one, the English original
+        // when it did not. Resolved once per row rather than per element.
+        const summary = handbookPageSummary(page);
+
+        return (
+          <li key={page.id}>
+            {/*
+              The whole row is the link, not just the title: the summary describes
+              the same destination, and a second click target beside it would be a
+              second thing to aim at for no second outcome.
+
+              `text-sm` on the title and `text-xs` on the summary, not the
+              inherited base size — a row is a detail pair (roles 13 and 12), and
+              at base size it competed with the section heading above it instead
+              of sitting under it.
+            */}
+            <Link
+              href={generateUrl({ page: Modules.HandbookPage, id: page.id })}
+              className="hover:bg-muted/40 -mx-2 block rounded-md px-2 py-2"
+            >
+              <span className="text-primary block text-sm font-medium">{handbookPageTitle(page)}</span>
+              {summary ? (
+                <span className="text-muted-foreground mt-0.5 block text-xs font-normal">{sentenceCase(summary)}</span>
+              ) : null}
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+/**
+ * The README writes each summary as a continuation of its link — "— boot, log
+ * in, create a proceeding" — so pasted in raw every row starts lowercase. Here
+ * the summary is a sentence of its own and reads as one.
+ *
+ * Only an ASCII letter is raised: several summaries open with a backtick
+ * (`` `defineEntity()` and everything derived from it ``) or a quotation mark,
+ * and those must survive untouched.
+ */
+function sentenceCase(summary: string): string {
+  const first = summary.charAt(0);
+  if (first < "a" || first > "z") return summary;
+  return first.toUpperCase() + summary.slice(1);
+}
+
+/**
+ * Splits a section's pages into the ones that sit directly in its directory and
+ * the ones that sit in a directory below it, keyed by the intermediate path.
+ *
+ * `03-backend/testing.md` is direct. `02-framework/rulebook/frontend/01-models.md`
+ * belongs to the group `rulebook / frontend`. The groups come out in path order
+ * and always after the direct pages, so a section reads as its own pages first
+ * and its sub-topics after.
+ */
+function splitByNesting(pages: HandbookPageInterface[]): {
+  direct: HandbookPageInterface[];
+  nested: { label: string; pages: HandbookPageInterface[] }[];
+} {
+  const direct: HandbookPageInterface[] = [];
+  const groups = new Map<string, HandbookPageInterface[]>();
+
+  for (const page of pages) {
+    const segments = (page.order || page.path || "").split("/").filter((segment) => segment.length > 0);
+    // Drop the filename, then the section's own directory.
+    const intermediate = segments.slice(0, -1).slice(1);
+
+    if (intermediate.length === 0) {
+      direct.push(page);
+      continue;
+    }
+
+    const label = intermediate.join(" / ");
+    const existing = groups.get(label);
+    if (existing) existing.push(page);
+    else groups.set(label, [page]);
+  }
+
+  const nested = Array.from(groups.entries())
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([label, groupPages]) => ({ label, pages: groupPages }));
+
+  return { direct, nested };
+}

package/src/features/handbook/components/lists/__tests__/HandbookContents.spec.tsx

@@ -0,0 +1,247 @@
+import { render, screen, within } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ApiRequestDataTypeInterface } from "../../../../../core/interfaces/ApiRequestDataTypeInterface";
+import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
+import { configureI18n } from "../../../../../i18n";
+import { HandbookPageService } from "../../../data/HandbookPageService";
+import { HandbookSectionService } from "../../../data/HandbookSectionService";
+import HandbookContents from "../HandbookContents";
+
+// `vi.mock` factories are hoisted above every module-scope const, so the rows
+// come from `vi.hoisted()` rather than from a plain const.
+const { pages, sections } = vi.hoisted(() => ({
+  pages: [
+    {
+      id: "p1",
+      title: "Reading order",
+      section: "00-start-here",
+      order: "00-start-here/reading-order.md",
+      path: "00-start-here/reading-order.md",
+      summary: "The three paths.",
+      aiStatus: "completed",
+      wordCount: 10,
+    },
+    {
+      id: "p2",
+      title: "Testing the API",
+      section: "03-backend",
+      order: "03-backend/testing.md",
+      path: "03-backend/testing.md",
+      summary: undefined,
+      aiStatus: "failed",
+      wordCount: 20,
+    },
+    {
+      id: "p3",
+      title: "Frontend models",
+      section: "02-framework",
+      order: "02-framework/rulebook/frontend/01-models.md",
+      path: "02-framework/rulebook/frontend/01-models.md",
+      summary: "AbstractApiData.",
+      aiStatus: "completed",
+      wordCount: 30,
+    },
+  ],
+  sections: [
+    { id: "s1", key: "00-start-here", title: "Start here", summary: "Get the stack running.", order: "00-start-here" },
+    { id: "s2", key: "02-framework", title: "Framework", summary: undefined, order: "02-framework" },
+    { id: "s3", key: "03-backend", title: "Backend", summary: "The API.", order: "03-backend" },
+  ],
+}));
+
+vi.mock("../../../data/HandbookPageService", () => ({
+  HandbookPageService: { findMany: vi.fn(), sync: vi.fn() },
+}));
+
+vi.mock("../../../data/HandbookSectionService", () => ({
+  HandbookSectionService: { findMany: vi.fn() },
+}));
+
+// The sheet is the ask surface's (Task I). It is not under test here, and it
+// needs providers this spec has no reason to mount.
+vi.mock("../../containers/HandbookAskSheet", () => ({
+  HandbookAskSheet: () => <div data-testid="handbook-ask-sheet" />,
+}));
+
+// The suite-wide next-intl stub returns the key and drops the values, which
+// would hide the two numbers the status line exists to show. This one keeps
+// them, so `{count} pagine · sincronizzato {date}` is still asserted on the
+// numbers rather than on a translated string this package does not own.
+vi.mock("next-intl", () => {
+  const makeT = () => {
+    const t = (key: string, values?: Record<string, unknown>) =>
+      values ? `${key} ${Object.values(values).join(" ")}`.trimEnd() : key;
+    (t as any).has = () => true;
+    return t;
+  };
+  return {
+    useTranslations: () => makeT(),
+    useLocale: () => "en",
+    useNow: () => new Date(),
+    useTimeZone: () => "UTC",
+    useFormatter: () => ({
+      dateTime: () => "sync-date",
+      number: (value: unknown) => String(value),
+      relativeTime: () => "",
+    }),
+  };
+});
+
+// The header is the provider's job (Task F). Stubbed as
+// HandbookPageContainer.spec.tsx stubs it, except that this stub renders
+// `functions`: the ask launcher, Sincronizza and the status line are handed to
+// the header through that prop, so dropping it would delete half of this
+// component's output from the test.
+vi.mock("../../../contexts/HandbookContext", () => ({
+  HandbookProvider: ({ children, functions }: { children?: ReactNode; functions?: ReactNode }) => (
+    <>
+      <div data-testid="page-functions">{functions}</div>
+      {children}
+    </>
+  ),
+  useHandbookContext: () => ({}),
+}));
+
+// RoundPageContainer is page chrome — header, details panel, url rewriting.
+// Stubbed exactly as HandbookAskContainer.spec.tsx stubs it.
+vi.mock("../../../../../components/containers/RoundPageContainer", () => ({
+  RoundPageContainer: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+}));
+
+const registerIfAbsent = (key: string, module: ApiRequestDataTypeInterface) => {
+  try {
+    ModuleRegistry.get(key as any);
+  } catch {
+    ModuleRegistry.register(key, module);
+  }
+};
+
+beforeAll(() => {
+  registerIfAbsent("HandbookPage", {
+    name: "handbookpages",
+    pageUrl: "/administration/handbook",
+  } as any);
+
+  // The package `Link` resolves the app's next-intl Link at runtime; without a
+  // configured i18n it throws rather than rendering an anchor.
+  configureI18n({
+    useRouter: () => ({
+      push: () => {},
+      replace: () => {},
+      back: () => {},
+      forward: () => {},
+      refresh: () => {},
+      prefetch: () => {},
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/administration/handbook",
+    Link: ({ href, children, ...props }: any) => (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    ),
+  });
+});
+
+describe("HandbookContents", () => {
+  beforeEach(() => {
+    vi.mocked(HandbookPageService.findMany)
+      .mockReset()
+      .mockResolvedValue(pages as any);
+    vi.mocked(HandbookSectionService.findMany)
+      .mockReset()
+      .mockResolvedValue(sections as any);
+  });
+
+  it("renders sections in order with their blurbs", async () => {
+    render(<HandbookContents />);
+    const headings = await screen.findAllByRole("heading", { level: 2 });
+    expect(headings.map((h) => h.textContent)).toEqual(["Start here", "Framework", "Backend"]);
+    expect(screen.getByText("Get the stack running.")).toBeInTheDocument();
+  });
+
+  it("renders a page summary when it has one and nothing when it does not", async () => {
+    render(<HandbookContents />);
+    expect(await screen.findByText("The three paths.")).toBeInTheDocument();
+    const row = screen.getByRole("link", { name: /Testing the API/ });
+    expect(within(row).queryByText("—")).not.toBeInTheDocument();
+    expect(row.textContent).toBe("Testing the API");
+  });
+
+  it("groups a nested page under its intermediate directory", async () => {
+    render(<HandbookContents />);
+    expect(await screen.findByText("rulebook / frontend")).toBeInTheDocument();
+  });
+
+  it("counts failures in the status line", async () => {
+    render(<HandbookContents />);
+    expect(await screen.findByText(/1/)).toBeInTheDocument();
+  });
+
+  it("renders no table", async () => {
+    render(<HandbookContents />);
+    await screen.findAllByRole("heading", { level: 2 });
+    expect(screen.queryByRole("table")).not.toBeInTheDocument();
+  });
+
+  /**
+   * The manual is INDEXED in English and SHOWN translated: every string on this
+   * surface prefers the translation that travels beside the English original,
+   * and falls back to the original when the ingest matched none.
+   *
+   * The fixtures are the suite's own, with a translation added to exactly one
+   * page and one section — so the same render proves both halves of the rule.
+   */
+  describe("display translation", () => {
+    const translatedPages = pages.map((page) =>
+      page.id === "p1" ? { ...page, displayTitle: "Ordine di lettura", displaySummary: "I tre percorsi." } : page,
+    );
+    const translatedSections = sections.map((section) =>
+      section.key === "00-start-here"
+        ? { ...section, displayTitle: "Da qui si parte", displaySummary: "Avvia lo stack." }
+        : section,
+    );
+
+    beforeEach(() => {
+      vi.mocked(HandbookPageService.findMany).mockResolvedValue(translatedPages as any);
+      vi.mocked(HandbookSectionService.findMany).mockResolvedValue(translatedSections as any);
+    });
+
+    it("renders a translated section heading and blurb, and the English ones where there is no translation", async () => {
+      render(<HandbookContents />);
+      const headings = await screen.findAllByRole("heading", { level: 2 });
+      expect(headings.map((h) => h.textContent)).toEqual(["Da qui si parte", "Framework", "Backend"]);
+      expect(screen.getByText("Avvia lo stack.")).toBeInTheDocument();
+      expect(screen.queryByText("Get the stack running.")).not.toBeInTheDocument();
+      // The untranslated section still reads in English.
+      expect(screen.getByText("The API.")).toBeInTheDocument();
+    });
+
+    it("renders a translated page row and falls back to English for an untranslated one", async () => {
+      render(<HandbookContents />);
+      expect(await screen.findByRole("link", { name: /Ordine di lettura/ })).toBeInTheDocument();
+      expect(screen.queryByRole("link", { name: /Reading order/ })).not.toBeInTheDocument();
+      expect(screen.getByText("I tre percorsi.")).toBeInTheDocument();
+      expect(screen.getByRole("link", { name: /Frontend models/ })).toBeInTheDocument();
+    });
+
+    it("orders sections and pages by the untranslated keys", async () => {
+      render(<HandbookContents />);
+      const headings = await screen.findAllByRole("heading", { level: 2 });
+      // `order` and `section` stay English, so the translated section keeps its
+      // place rather than sorting under its Italian initial.
+      expect(headings.map((h) => h.textContent)).toEqual(["Da qui si parte", "Framework", "Backend"]);
+      expect(await screen.findByText("rulebook / frontend")).toBeInTheDocument();
+    });
+  });
+
+  it("falls back to raw section keys when the section load fails", async () => {
+    vi.mocked(HandbookSectionService.findMany).mockRejectedValueOnce(new Error("500"));
+    render(<HandbookContents />);
+    const headings = await screen.findAllByRole("heading", { level: 2 });
+    expect(headings.map((h) => h.textContent)).toEqual(["00-start-here", "02-framework", "03-backend"]);
+    expect(screen.getByRole("link", { name: /Reading order/ })).toBeInTheDocument();
+  });
+});

package/src/features/handbook/components/parts/HandbookIndexStatus.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useFormatter, useTranslations } from "next-intl";
+import { useMemo } from "react";
+
+import { HandbookPageInterface } from "../../data/HandbookPageInterface";
+
+type HandbookIndexStatusProps = {
+  pages: HandbookPageInterface[];
+};
+
+/**
+ * `aiStatus` values written by the ingest. Only `failed` means the page is not
+ * answerable; `pending` and `in_progress` are a sync still running and say
+ * nothing about the index being wrong.
+ */
+const FAILURE_STATUSES = new Set(["failed", "error"]);
+
+/**
+ * The one line of index bookkeeping the reading surface keeps.
+ *
+ * Word counts and per-page AI badges left the contents page; how many pages
+ * there are and when they were last synced did not, because that is the one
+ * question the administrator who pressed Sincronizza actually has. Both values
+ * are derived from the loaded pages — nothing new is stored for either, and
+ * `updatedAt` is framework-managed.
+ */
+export function HandbookIndexStatus({ pages }: HandbookIndexStatusProps) {
+  const t = useTranslations();
+  const format = useFormatter();
+
+  const lastSynced = useMemo(() => {
+    let latest: Date | undefined = undefined;
+
+    for (const page of pages) {
+      const updatedAt = page.updatedAt;
+      if (!(updatedAt instanceof Date) || Number.isNaN(updatedAt.getTime())) continue;
+      if (!latest || updatedAt.getTime() > latest.getTime()) latest = updatedAt;
+    }
+
+    return latest;
+  }, [pages]);
+
+  const failures = useMemo(
+    () => pages.filter((page) => FAILURE_STATUSES.has((page.aiStatus ?? "").toLowerCase())).length,
+    [pages],
+  );
+
+  return (
+    <span className="text-muted-foreground text-xs tabular-nums">
+      {t("handbook.contents.status", {
+        count: pages.length,
+        date: lastSynced ? format.dateTime(lastSynced, { dateStyle: "medium" }) : "",
+      })}
+      {failures > 0 ? (
+        <span className="text-destructive ms-2 tabular-nums">
+          {t("handbook.contents.failures", { count: failures })}
+        </span>
+      ) : null}
+    </span>
+  );
+}