@carlonicora/nextjs-jsonapi 5.4.0 → 5.6.0

package/src/features/blog/components/admin/BlogCategoriesList.tsx

@@ -12,7 +12,7 @@ import "../../hooks/useBlogCategoryTableStructure";
 import { BlogCategoryEditor } from "./BlogCategoryEditor";
 
 type BlogCategoriesListProps = {
-  /** Pass when the list is the page's own content inside a `RoundPageContainer fullWidth`. */
+  /** Pass only when the list is the page's whole content inside a `RoundPageContainer fullWidth`; omit it in a tab so the list keeps its bordered card. */
   fullWidth?: boolean;
 };
 

package/src/features/blog/components/admin/BlogCoverImageField.tsx

@@ -105,7 +105,7 @@ export function BlogCoverImageField({
                   alt={alt ?? label}
                   width={320}
                   height={180}
-                  className="h-auto max-h-48 w-auto rounded-md object-cover"
+                  className="h-auto max-h-48 w-auto max-w-full rounded-md object-cover"
                   unoptimized={isRemoteImageSrc(previewUrl ? undefined : currentUrl)}
                 />
               ) : (

package/src/features/blog/components/admin/BlogPostContainer.tsx

@@ -89,7 +89,6 @@ function BlogPostShell() {
       <RoundPageContainer
         module={Modules.BlogPost}
         id={post.id}
-        fullWidth
         forceHeader
         tabs={translations.map((translation) => ({
           sectionKey: translation.language,

package/src/features/blog/components/admin/BlogPostEditor.tsx

@@ -149,7 +149,7 @@ export function BlogPostEditor({ post, trigger, onSuccess }: BlogPostEditorProps
       onNavigate={(url) => router.push(url)}
       trigger={trigger}
     >
-      <div className="flex w-full flex-col gap-y-4">
+      <div className="flex h-full min-h-0 w-full flex-col gap-y-4">
         {!post && (
           <FormSelect
             form={form}
@@ -160,38 +160,45 @@ export function BlogPostEditor({ post, trigger, onSuccess }: BlogPostEditorProps
           />
         )}
         <FormInput form={form} id="title" name={t("blog.fields.title")} isRequired />
-        {post && (
-          <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
-        )}
-        <FormTextarea
-          form={form}
-          id="summary"
-          name={t("blog.fields.summary")}
-          description={t("blog.fields.summaryHelp")}
-        />
-        <BlogCoverImageField
-          form={form}
-          id="coverImage"
-          label={t("blog.fields.coverImage")}
-          keyPrefix={BLOG_POST_UPLOAD_PREFIX}
-          entityId={form.getValues("id")}
-          currentUrl={post?.coverImage}
-          alt={original?.coverImageAlt}
-          selection={cover}
-          onSelectionChange={setCover}
-        />
-        <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
-        <EntityMultiSelector<BlogCategoryInterface>
-          id="categories"
-          form={form}
-          label={t("blog.fields.categories")}
-          retriever={(params) => BlogCategoryService.findMany(params)}
-          module={Modules.BlogCategory}
-          getLabel={blogCategoryAdminName}
-          // A post's included categories carry no translations, so the stored chip
-          // names come from the category list.
-          getFormValueLabel={(value: { id: string; name?: string }) => value.name || categoryName(value.id)}
-        />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="flex flex-col gap-y-4">
+            {post && (
+              <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+            )}
+            <EntityMultiSelector<BlogCategoryInterface>
+              id="categories"
+              form={form}
+              label={t("blog.fields.categories")}
+              retriever={(params) => BlogCategoryService.findMany(params)}
+              module={Modules.BlogCategory}
+              getLabel={blogCategoryAdminName}
+              // A post's included categories carry no translations, so the stored chip
+              // names come from the category list.
+              getFormValueLabel={(value: { id: string; name?: string }) => value.name || categoryName(value.id)}
+            />
+            <FormTextarea
+              form={form}
+              id="summary"
+              name={t("blog.fields.summary")}
+              description={t("blog.fields.summaryHelp")}
+              className="min-h-24"
+            />
+          </div>
+          <div className="flex flex-col gap-y-4">
+            <BlogCoverImageField
+              form={form}
+              id="coverImage"
+              label={t("blog.fields.coverImage")}
+              keyPrefix={BLOG_POST_UPLOAD_PREFIX}
+              entityId={form.getValues("id")}
+              currentUrl={post?.coverImage}
+              alt={original?.coverImageAlt}
+              selection={cover}
+              onSelectionChange={setCover}
+            />
+            <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+          </div>
+        </div>
         <FormBlockNote
           uploadKeyPrefix={BLOG_POST_UPLOAD_PREFIX}
           form={form}
@@ -199,6 +206,8 @@ export function BlogPostEditor({ post, trigger, onSuccess }: BlogPostEditorProps
           name={t("blog.fields.body")}
           type="blog-post"
           isRequired
+          stretch
+          className="min-h-96"
           onEmptyChange={setIsBodyEmptyState}
         />
       </div>

package/src/features/blog/components/admin/BlogPostTranslationEditor.tsx

@@ -90,11 +90,17 @@ export function BlogPostTranslationEditor({ translation, trigger, onSuccess }: B
       onSuccess={onSuccess ?? (() => {})}
       trigger={trigger}
     >
-      <div className="flex w-full flex-col gap-y-4">
+      <div className="flex h-full min-h-0 w-full flex-col gap-y-4">
         <FormInput form={form} id="title" name={t("blog.fields.title")} isRequired />
-        <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
-        <FormTextarea form={form} id="summary" name={t("blog.fields.summary")} />
-        <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="flex flex-col gap-y-4">
+            <FormInput form={form} id="slug" name={t("blog.fields.slug")} description={t("blog.fields.slugHelp")} />
+            <FormTextarea form={form} id="summary" name={t("blog.fields.summary")} className="min-h-24" />
+          </div>
+          <div className="flex flex-col gap-y-4">
+            <FormInput form={form} id="coverImageAlt" name={t("blog.fields.coverImageAlt")} />
+          </div>
+        </div>
         <FormBlockNote
           uploadKeyPrefix={BLOG_POST_UPLOAD_PREFIX}
           form={form}
@@ -102,6 +108,8 @@ export function BlogPostTranslationEditor({ translation, trigger, onSuccess }: B
           name={t("blog.fields.body")}
           type="blog-post"
           isRequired
+          stretch
+          className="min-h-96"
           onEmptyChange={setIsBodyEmptyState}
         />
       </div>

package/src/features/blog/components/admin/BlogPostsList.tsx

@@ -12,7 +12,7 @@ import "../../hooks/useBlogPostTableStructure";
 import { BlogPostEditor } from "./BlogPostEditor";
 
 type BlogPostsListProps = {
-  /** Pass when the list is the page's own content inside a `RoundPageContainer fullWidth`. */
+  /** Pass only when the list is the page's whole content inside a `RoundPageContainer fullWidth`; omit it in a tab so the list keeps its bordered card. */
   fullWidth?: boolean;
 };
 

package/src/features/blog/components/public/BlogPostCard.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useFormatter } from "next-intl";
 import Image from "next/image";
 import { MicroLabel, SectionHeader } from "../../../../components/typography";
 import { Link } from "../../../../shadcnui";
@@ -59,16 +58,10 @@ export function BlogPostCard(props: {
   headingLevel?: "h2" | "h3";
 }) {
   const { post, categories, basePath, variant = "card", priority, headingLevel = "h2" } = props;
-  const format = useFormatter();
   const category = resolvePostCategory(post, categories);
   const isProminent = variant === "hero" || variant === "large";
 
-  const eyebrow =
-    variant === "row" && post.publishedAt
-      ? [category?.name, format.dateTime(new Date(post.publishedAt), { day: "numeric", month: "short" })]
-          .filter(Boolean)
-          .join(" · ")
-      : category?.name;
+  const eyebrow = category?.name;
 
   const text = (
     <div className="flex min-w-0 flex-col">
@@ -79,7 +72,7 @@ export function BlogPostCard(props: {
         </Link>
       </SectionHeader>
       {post.summary ? <p className="text-muted-foreground mt-2 text-sm leading-relaxed">{post.summary}</p> : null}
-      <BlogPostMeta post={post} showAuthor={isProminent} showDate={isProminent} className="mt-3" />
+      <BlogPostMeta post={post} showAuthor={isProminent} className="mt-3" />
     </div>
   );
 

package/src/features/blog/components/public/BlogPostMeta.tsx

@@ -7,8 +7,8 @@ import type { PublicBlogPost } from "../../types/blog-public.types";
 const ONE_DAY_MS = 24 * 60 * 60 * 1000;
 
 /**
- * "author · date · updated · reading time". Each part is opt-in so cards show
- * only the reading time while the hero and the post page show more.
+ * "author · date · updated · reading time". Each part except reading time is
+ * opt-in. The public blog shows no dates, so its callers pass only showAuthor.
  */
 export function BlogPostMeta(props: {
   post: PublicBlogPost;

package/src/features/blog/components/public/BlogPostView.tsx

@@ -2,6 +2,7 @@
 
 import { ArrowLeftIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import type { ReactNode } from "react";
 import { BlockNoteEditorContainer } from "../../../../components/editors/BlockNoteEditorContainer";
 import { ContentTitle } from "../../../../components/navigations/ContentTitle";
 import { SectionHeader } from "../../../../components/typography";
@@ -14,14 +15,19 @@ import { BlogPostMeta } from "./BlogPostMeta";
 /**
  * Public post page: back link, category, title, summary, meta, cover, body,
  * then up to three posts from the same category.
+ *
+ * `body` replaces the client-only editor with server-rendered content (the app
+ * passes BlockNoteServerContent from `@carlonicora/nextjs-jsonapi/blocknote/server`),
+ * so the post text is in the HTML crawlers read.
  */
 export function BlogPostView(props: {
   post: PublicBlogPost;
   categories: PublicBlogCategory[];
   related: PublicBlogPost[];
   basePath: string;
+  body?: ReactNode;
 }) {
-  const { post, categories, related, basePath } = props;
+  const { post, categories, related, basePath, body } = props;
   const t = useTranslations();
   const category = resolvePostCategory(post, categories);
   const more = related.slice(0, 3);
@@ -36,7 +42,7 @@ export function BlogPostView(props: {
         <header className="mt-8">
           <ContentTitle type={category?.name} element={post.title} headingLevel={1} className="mb-0" />
           {post.summary ? <p className="text-muted-foreground mt-3 text-sm leading-relaxed">{post.summary}</p> : null}
-          <BlogPostMeta post={post} showAuthor showDate showUpdated className="mt-4" />
+          <BlogPostMeta post={post} showAuthor className="mt-4" />
         </header>
         {post.coverImage ? (
           <BlogPostCover
@@ -48,7 +54,7 @@ export function BlogPostView(props: {
           />
         ) : null}
         <div className="mt-8">
-          <BlockNoteEditorContainer id={post.id} type="blog-post" initialContent={post.body} />
+          {body ?? <BlockNoteEditorContainer id={post.id} type="blog-post" initialContent={post.body} />}
         </div>
       </div>
       {more.length > 0 ? (

package/src/features/blog/components/public/__tests__/BlogList.spec.tsx

@@ -100,6 +100,8 @@ describe("BlogList", () => {
     expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1);
     expect(screen.getByRole("heading", { level: 1, name: "blog.public.title" })).toBeInTheDocument();
     expect(screen.getByText("blog.public.eyebrow")).toBeInTheDocument();
+    // The public blog shows no dates in any layout.
+    expect(screen.queryByText(/2026-10-12/)).not.toBeInTheDocument();
   });
 
   it("active category chip is marked and links back to all", () => {

package/src/features/blog/components/public/__tests__/BlogPostView.spec.tsx

@@ -100,24 +100,30 @@ describe("BlogPostView", () => {
     expect(screen.getByRole("link", { name: "Three-way scenes" })).toHaveAttribute("href", "/blog/three-way");
   });
 
-  it("shows updated only when the post changed more than a day after publishing", () => {
-    const { rerender } = render(<BlogPostView post={main} categories={cats} related={[]} basePath="/blog" />);
-    expect(screen.getByText(/blog\.public\.updated 2026-10-15/)).toBeInTheDocument();
+  it("shows neither the publish date nor the updated date", () => {
+    render(<BlogPostView post={main} categories={cats} related={[]} basePath="/blog" />);
+    expect(screen.queryByText(/2026-10-12/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/2026-10-15/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/blog\.public\.updated/)).not.toBeInTheDocument();
+  });
+
+  it("omits the more-in section when there are no related posts", () => {
+    render(<BlogPostView post={main} categories={cats} related={[]} basePath="/blog" />);
+    expect(screen.queryByText(/blog\.public\.moreIn/)).not.toBeInTheDocument();
+  });
 
-    rerender(
+  it("renders the body prop in place of the editor when given", () => {
+    render(
       <BlogPostView
-        post={{ ...main, updatedAt: "2026-10-12T15:00:00.000Z" }}
+        post={main}
         categories={cats}
         related={[]}
         basePath="/blog"
+        body={<div data-testid="server-body">Server-rendered text</div>}
       />,
     );
-    expect(screen.queryByText(/blog\.public\.updated/)).not.toBeInTheDocument();
-  });
-
-  it("omits the more-in section when there are no related posts", () => {
-    render(<BlogPostView post={main} categories={cats} related={[]} basePath="/blog" />);
-    expect(screen.queryByText(/blog\.public\.moreIn/)).not.toBeInTheDocument();
+    expect(screen.getByTestId("server-body")).toHaveTextContent("Server-rendered text");
+    expect(screen.queryByTestId("post-body")).not.toBeInTheDocument();
   });
 
   it("caps related posts at three", () => {

package/src/features/blog/server/fetchers.ts

@@ -28,21 +28,20 @@ export async function fetchPublicBlogPosts(params: {
   language: string;
   categorySlug?: string;
   search?: string;
-  page: number;
+  /** 1-based list page; ignored with `all`. */
+  page?: number;
+  /** Every matching post, read in API-sized pages (a sitemap). `hasMore` is then false. */
+  all?: boolean;
 }): Promise<PublicBlogList> {
+  if (params.all) return { posts: await fetchEveryPublicBlogPost(params), hasMore: false };
+
   // Matches the API cap (120 = 10 pages of 12); a larger ?page= is served as the last allowed one.
   const page = Math.min(10, Math.max(1, Math.floor(params.page || 1)));
   const size = BLOG_PAGE_SIZE * page;
 
-  const endpoint = new EndpointCreator({ endpoint: publicPostsEndpoint() });
-  endpoint.addAdditionalParam("language", params.language);
-  if (params.categorySlug) endpoint.addAdditionalParam("category", encodeURIComponent(params.categorySlug));
-  if (params.search) endpoint.addAdditionalParam("search", encodeURIComponent(params.search));
-  endpoint.addAdditionalParam("page[size]", String(size));
-
   const res = await ServerJsonApiGet({
     classKey: { ...Modules.BlogPost, cache: "minutes" },
-    endpoint: endpoint.generate(),
+    endpoint: publicPostsListEndpoint({ ...params, size }),
     language: params.language,
   });
   if (!res.ok) return { posts: [], hasMore: false };
@@ -54,6 +53,56 @@ export async function fetchPublicBlogPosts(params: {
   return { posts, hasMore };
 }
 
+function publicPostsListEndpoint(params: {
+  language: string;
+  categorySlug?: string;
+  search?: string;
+  size: number;
+  offset?: number;
+}): string {
+  const endpoint = new EndpointCreator({ endpoint: publicPostsEndpoint() });
+  endpoint.addAdditionalParam("language", params.language);
+  if (params.categorySlug) endpoint.addAdditionalParam("category", encodeURIComponent(params.categorySlug));
+  if (params.search) endpoint.addAdditionalParam("search", encodeURIComponent(params.search));
+  endpoint.addAdditionalParam("page[size]", String(params.size));
+  if (params.offset) endpoint.addAdditionalParam("page[offset]", String(params.offset));
+  return endpoint.generate();
+}
+
+// The API serves at most PUBLIC_MAX_PAGE_SIZE posts per request, so "all" walks
+// page[offset] until a short page comes back. MAX_ALL_PAGES only stops a runaway loop.
+const PUBLIC_MAX_PAGE_SIZE = 120;
+const MAX_ALL_PAGES = 100;
+
+async function fetchEveryPublicBlogPost(params: {
+  language: string;
+  categorySlug?: string;
+  search?: string;
+}): Promise<PublicBlogPost[]> {
+  const posts: PublicBlogPost[] = [];
+
+  // In sequence: a failing cached call throws, and parallel failing cached calls
+  // never close the response.
+  for (let index = 0; index < MAX_ALL_PAGES; index++) {
+    const res = await ServerJsonApiGet({
+      classKey: { ...Modules.BlogPost, cache: "minutes" },
+      endpoint: publicPostsListEndpoint({
+        ...params,
+        size: PUBLIC_MAX_PAGE_SIZE,
+        offset: index * PUBLIC_MAX_PAGE_SIZE,
+      }),
+      language: params.language,
+    });
+    if (!res.ok) break;
+
+    const batch = asArray<BlogPostInterface>(res.data);
+    posts.push(...batch.map(toPublicBlogPost));
+    if (batch.length < PUBLIC_MAX_PAGE_SIZE) break;
+  }
+
+  return posts;
+}
+
 export async function fetchPublicBlogPost(params: { language: string; slug: string }): Promise<PublicBlogPost | null> {
   const endpoint = new EndpointCreator({ endpoint: publicPostsEndpoint(), id: encodeURIComponent(params.slug) });
   endpoint.addAdditionalParam("language", params.language);

package/src/features/email-automation/components/containers/EmailAutomationsListContainer.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { RoundPageContainer } from "../../../../components";
+import { SharedProvider } from "../../../../contexts/SharedContext";
 import { Modules } from "../../../../core";
-import { AdministrationProvider } from "../../../administration/contexts/AdministrationContext";
+import { BreadcrumbItemData } from "../../../../interfaces";
 import { EmailAutomationsList } from "../lists/EmailAutomationsList";
 
 /**
@@ -15,13 +17,20 @@ import { EmailAutomationsList } from "../lists/EmailAutomationsList";
  *
  * No `forceHeader`: ContentListTable draws its own header row with the title
  * and the create action, exactly as the company and user list pages do.
+ *
+ * Publishes its own breadcrumb, as CompanyProvider does for the companies list:
+ * the list root comes first and has no href because it is the current page.
  */
 export function EmailAutomationsListContainer() {
+  const t = useTranslations();
+
+  const breadcrumbs: BreadcrumbItemData[] = [{ name: t("emailAutomations.admin.title") }];
+
   return (
-    <AdministrationProvider>
+    <SharedProvider value={{ breadcrumbs, title: { type: t("emailAutomations.admin.title") } }}>
       <RoundPageContainer module={Modules.EmailAutomation} fullWidth>
         <EmailAutomationsList fullWidth />
       </RoundPageContainer>
-    </AdministrationProvider>
+    </SharedProvider>
   );
 }

package/src/features/rbac/contexts/RbacContext.tsx

@@ -4,8 +4,6 @@ import { DownloadIcon, Loader2Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { SharedProvider } from "../../../contexts";
-import { Modules } from "../../../core";
-import { usePageUrlGenerator } from "../../../hooks";
 import { BreadcrumbItemData } from "../../../interfaces";
 import { Button } from "../../../shadcnui";
 import { showError, showToast } from "../../../utils/toast";
@@ -70,7 +68,6 @@ export const RbacProvider = ({
   moduleNames,
   outputPath = DEFAULT_OUTPUT_PATH,
 }: RbacProviderProps) => {
-  const generateUrl = usePageUrlGenerator();
   const t = useTranslations();
 
   const [matrix, setMatrix] = useState<RbacMatrix | null>(null);
@@ -149,10 +146,10 @@ export const RbacProvider = ({
 
   const breadcrumb = (): BreadcrumbItemData[] => {
     const response: BreadcrumbItemData[] = [];
-    response.push({
-      name: t(`entities.rbac`, { count: 2 }),
-      href: generateUrl({ page: Modules.RbacMatrix }),
-    });
+    // Unlinked: the provider only serves the RBAC page, so the root is always
+    // the current page. The dev matrix module has no pageUrl either, so a link
+    // built from it pointed at "undefined".
+    response.push({ name: t(`entities.rbac`, { count: 2 }) });
     return response;
   };
 

package/src/features/rbac/contexts/__tests__/RbacContext.spec.tsx

@@ -0,0 +1,42 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSharedContext } from "../../../../contexts/SharedContext";
+import { RbacService } from "../../data/RbacService";
+import { RbacProvider } from "../RbacContext";
+
+vi.mock("../../data/RbacService", () => ({
+  RbacService: {
+    fetchMatrix: vi.fn(async () => ({ matrix: {}, modulePaths: {} })),
+    saveMatrix: vi.fn(async () => undefined),
+  },
+}));
+
+// The provider refetches whenever `t` changes identity, and the global next-intl
+// mock in vitest.setup.ts builds a new `t` per call. A stable one keeps the fetch
+// to a single run. Labels still render as their own key.
+const { stableT } = vi.hoisted(() => ({ stableT: (key: string) => key }));
+vi.mock("next-intl", () => ({
+  useTranslations: () => stableT,
+  useLocale: () => "en",
+  useNow: () => new Date(),
+  useTimeZone: () => "UTC",
+  useFormatter: () => ({ dateTime: vi.fn(), number: vi.fn(), relativeTime: vi.fn() }),
+}));
+
+function BreadcrumbProbe() {
+  const { breadcrumbs } = useSharedContext();
+  return <span data-testid="breadcrumbs">{JSON.stringify(breadcrumbs)}</span>;
+}
+
+describe("RbacContext", () => {
+  it("publishes the page as an unlinked breadcrumb, since it is the current page", async () => {
+    render(
+      <RbacProvider>
+        <BreadcrumbProbe />
+      </RbacProvider>,
+    );
+
+    await waitFor(() => expect(RbacService.fetchMatrix).toHaveBeenCalled());
+    expect(screen.getByTestId("breadcrumbs")).toHaveTextContent(JSON.stringify([{ name: "entities.rbac" }]));
+  });
+});

package/src/features/tokenusage/components/TokenUsageAdminContainer.tsx

@@ -4,6 +4,7 @@ import { cn } from "../../../lib/utils";
 import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { RoundPageContainer } from "../../../components";
+import { Modules } from "../../../core";
 import {
   Card,
   CardAction,
@@ -75,7 +76,7 @@ export function TokenUsageAdminContainer() {
 
   if (error) {
     return (
-      <RoundPageContainer fullWidth forceHeader>
+      <RoundPageContainer module={Modules.TokenUsageAdminSummary} fullWidth forceHeader>
         <div className="p-4">
           <Card>
             <CardContent>
@@ -89,12 +90,12 @@ export function TokenUsageAdminContainer() {
 
   // Loading renders nothing in the body: the title bar (with the filter bar) is
   // already mounted, so a spinner would only make the controls jump on arrival.
-  if (isLoading) return <RoundPageContainer fullWidth forceHeader />;
+  if (isLoading) return <RoundPageContainer module={Modules.TokenUsageAdminSummary} fullWidth forceHeader />;
 
   const emptyLabel = t("token_usage.admin.no_data");
 
   return (
-    <RoundPageContainer fullWidth forceHeader>
+    <RoundPageContainer module={Modules.TokenUsageAdminSummary} fullWidth forceHeader>
       <div className="flex w-full flex-col gap-4 p-4">
         <TokenUsageAdminTiles summary={summary} metric={filters.metric} singleCustomerMode={hidePlatform} />
 

package/src/features/tokenusage/contexts/TokenUsageAdminContext.tsx

@@ -3,7 +3,6 @@
 import { useTranslations } from "next-intl";
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { SharedProvider } from "../../../contexts";
-import { usePageUrlGenerator } from "../../../hooks";
 import { BreadcrumbItemData } from "../../../interfaces";
 import { TokenUsageAdminFilterBar } from "../components/TokenUsageAdminFilterBar";
 import type { TokenUsageAdminBreakdownInterface } from "../data/tokenusage-admin-breakdown.interface";
@@ -12,13 +11,6 @@ import type { TokenUsageAdminTimelineInterface } from "../data/tokenusage-admin-
 import type { Granularity, Metric, StackBy } from "../data/tokenusage-admin.types";
 import { TokenUsageAdminService } from "../data/TokenUsageAdminService";
 
-/**
- * Default route the breadcrumb links back to. A host app that mounts the page
- * elsewhere overrides it with the `pageUrl` prop — the constant stays here
- * because the breadcrumb is built by this provider, not by the app.
- */
-const TOKEN_USAGE_ADMIN_PAGE_URL = "/administration/token-usage";
-
 /** Rows kept per ranked panel before the repository folds the tail into "other". */
 const DEFAULT_TOP_N = 10;
 
@@ -72,8 +64,6 @@ type TokenUsageAdminProviderProps = {
   initialTo?: string;
   /** Rows per ranked panel. Defaults to 10. */
   topN?: number;
-  /** Route the breadcrumb links back to. */
-  pageUrl?: string;
 };
 
 /**
@@ -91,10 +81,8 @@ export const TokenUsageAdminProvider = ({
   initialFrom,
   initialTo,
   topN = DEFAULT_TOP_N,
-  pageUrl = TOKEN_USAGE_ADMIN_PAGE_URL,
 }: TokenUsageAdminProviderProps) => {
   const t = useTranslations();
-  const generateUrl = usePageUrlGenerator();
 
   const [filters, setFilterState] = useState<TokenUsageAdminFilterState>(() => {
     const range = defaultRange();
@@ -185,12 +173,9 @@ export const TokenUsageAdminProvider = ({
     [byCompany],
   );
 
-  const breadcrumb = (): BreadcrumbItemData[] => [
-    {
-      name: t("token_usage.admin.title"),
-      href: generateUrl({ page: pageUrl }),
-    },
-  ];
+  // Unlinked: this provider only serves the token-usage page, so the root is
+  // always the current page.
+  const breadcrumb = (): BreadcrumbItemData[] => [{ name: t("token_usage.admin.title") }];
 
   const title = () => ({
     type: t("token_usage.admin.title"),

package/src/features/tokenusage/contexts/__tests__/TokenUsageAdminContext.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSharedContext } from "../../../../contexts/SharedContext";
 import { TokenUsageAdminService } from "../../data/TokenUsageAdminService";
 import { TokenUsageAdminProvider, useTokenUsageAdmin } from "../TokenUsageAdminContext";
 
@@ -16,6 +17,11 @@ function Probe() {
   return <span data-testid="mode">{String(ctx.singleCustomerMode)}</span>;
 }
 
+function BreadcrumbProbe() {
+  const { breadcrumbs } = useSharedContext();
+  return <span data-testid="breadcrumbs">{JSON.stringify(breadcrumbs)}</span>;
+}
+
 describe("TokenUsageAdminContext", () => {
   // The mocked service is module-level, so its call counts survive across tests.
   // Without this reset the per-test `toHaveBeenCalledTimes` assertions would
@@ -77,4 +83,15 @@ describe("TokenUsageAdminContext", () => {
     expect(calls).toHaveLength(3);
     expect(screen.getByTestId("mode")).toHaveTextContent("true");
   });
+
+  it("publishes the page as an unlinked breadcrumb, since it is the current page", async () => {
+    render(
+      <TokenUsageAdminProvider>
+        <BreadcrumbProbe />
+      </TokenUsageAdminProvider>,
+    );
+
+    await waitFor(() => expect(TokenUsageAdminService.getSummary).toHaveBeenCalled());
+    expect(screen.getByTestId("breadcrumbs")).toHaveTextContent(JSON.stringify([{ name: "token_usage.admin.title" }]));
+  });
 });