@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.1

package/src/components/editors/BlockNoteEditor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BlockNoteSchema, defaultInlineContentSpecs, filterSuggestionItems, PartialBlock } from "@blocknote/core";
-import { en as coreEn } from "@blocknote/core/locales";
+import * as coreLocales from "@blocknote/core/locales";
 import {
   createReactInlineContentSpec,
   DefaultReactSuggestionItem,
@@ -23,7 +23,7 @@ import {
   PromptSuggestionMenu,
   useAIDictionary,
 } from "@blocknote/xl-ai";
-import { en as aiEn } from "@blocknote/xl-ai/locales";
+import * as aiLocales from "@blocknote/xl-ai/locales";
 import "@blocknote/xl-ai/style.css";
 import { DefaultChatTransport } from "ai";
 import { CheckIcon, LanguagesIcon, SparklesIcon, TypeIcon, WandSparklesIcon, XIcon } from "lucide-react";
@@ -137,6 +137,7 @@ function isDocumentEmpty(blocks: any[]): boolean {
 const createDiffActionsInlineContentSpec = (
   handleAcceptChange: (diffId: string) => void,
   handleRejectChange: (diffId: string) => void,
+  labels: { accept: string; reject: string },
 ) => {
   return createReactInlineContentSpec(
     {
@@ -155,7 +156,7 @@ const createDiffActionsInlineContentSpec = (
         return (
           <span className="diff-actions-container mx-2 inline-flex items-center gap-1 align-middle">
             <Button
-              title="Accept change"
+              title={labels.accept}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -165,7 +166,7 @@ const createDiffActionsInlineContentSpec = (
               <CheckIcon className="text-success h-3 w-3" />
             </Button>
             <Button
-              title="Reject change"
+              title={labels.reject}
               className="mx-2 p-0"
               onClick={(e) => {
                 e.preventDefault();
@@ -204,6 +205,7 @@ const createDiffActionsInlineContentSpec = (
  * with its own canonical prompt. NO prompt text lives in this file.
  */
 function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
+  const t = useTranslations();
   const editor = useBlockNoteEditor();
   const ai = useExtension(AIExtension);
   const dict = useAIDictionary();
@@ -269,7 +271,7 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
     // selection) because they operate on the whole document — they ignore any
     // active selection. Listed first so the first one is the
     // default-highlighted item.
-    const generateItems = generateActionItems(actions, invokeGenerate);
+    const generateItems = generateActionItems(actions, invokeGenerate, t);
 
     if (hasSelection) {
       // Selection-edit items + the always-available whole-document items.
@@ -280,7 +282,7 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
         ...generateItems,
         {
           key: "improve_writing",
-          title: "Improve Writing",
+          title: t("ui.editor.ai.improve_writing"),
           aliases: ["improve", "rewrite", "polish"],
           icon: <SparklesIcon size={18} />,
           size: "small" as const,
@@ -295,7 +297,7 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
         },
         {
           key: "fix_spelling",
-          title: "Fix Spelling",
+          title: t("ui.editor.ai.fix_spelling"),
           aliases: ["spelling", "grammar", "typo"],
           icon: <TypeIcon size={18} />,
           size: "small" as const,
@@ -310,7 +312,7 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
         },
         {
           key: "translate",
-          title: "Translate…",
+          title: t("ui.editor.ai.translate"),
           aliases: ["translate", "language"],
           icon: <LanguagesIcon size={18} />,
           size: "small" as const,
@@ -322,12 +324,12 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
           onItemClick: () => {
             expandSelectionToBlocks();
             pendingTypeRef.current = "translate";
-            setPrompt("Translate to ");
+            setPrompt(t("ui.editor.ai.translate_prefill"));
           },
         },
         {
           key: "simplify",
-          title: "Simplify",
+          title: t("ui.editor.ai.simplify"),
           aliases: ["simplify", "easier", "plain"],
           icon: <WandSparklesIcon size={18} />,
           size: "small" as const,
@@ -347,7 +349,7 @@ function NarrAIMenu({ actions }: { actions?: BlockNoteAiGenerateAction[] }) {
     // Free-form typing still works — once the user types, items hide and
     // Enter submits with no type (backend defaults to fill-template).
     return generateItems;
-  }, [editor, status, prompt, ai, expandSelectionToBlocks, actions]);
+  }, [editor, status, prompt, ai, expandSelectionToBlocks, actions, t]);
 
   const handleSubmit = useCallback(
     async (userPrompt: string) => {
@@ -466,8 +468,12 @@ export default function BlockNoteEditor({
   }, []);
 
   const DiffActionsInlineContent = useMemo(
-    () => createDiffActionsInlineContentSpec(handleAcceptChange, handleRejectChange),
-    [handleAcceptChange, handleRejectChange],
+    () =>
+      createDiffActionsInlineContentSpec(handleAcceptChange, handleRejectChange, {
+        accept: t("ui.editor.accept_change"),
+        reject: t("ui.editor.reject_change"),
+      }),
+    [handleAcceptChange, handleRejectChange, t],
   );
 
   const mentionSpec = useMemo(
@@ -657,6 +663,12 @@ export default function BlockNoteEditor({
     return undefined;
   }, [processedContent]);
 
+  // BlockNote's own UI text (slash menu, toolbar, AI menu) in the active
+  // language; English when BlockNote has no dictionary for it.
+  const language = locale.split("-")[0];
+  const coreDictionary = (coreLocales as Record<string, typeof coreLocales.en>)[language] ?? coreLocales.en;
+  const aiDictionary = (aiLocales as Record<string, typeof aiLocales.en>)[language] ?? aiLocales.en;
+
   const editor = useCreateBlockNote(
     useMemo(
       () => ({
@@ -667,9 +679,13 @@ export default function BlockNoteEditor({
         initialContent: validatedInitialContent,
         uploadFile: uploadImage,
         extensions: aiExtension ? [aiExtension] : undefined,
-        dictionary: aiExtension ? { ...coreEn, ai: aiEn } : undefined,
+        dictionary: aiExtension
+          ? { ...coreDictionary, ai: aiDictionary }
+          : coreDictionary === coreLocales.en
+            ? undefined
+            : coreDictionary,
       }),
-      [placeholder, t, schema, validatedInitialContent, uploadImage, aiExtension],
+      [placeholder, t, schema, validatedInitialContent, uploadImage, aiExtension, coreDictionary, aiDictionary],
     ),
   );
 

package/src/components/editors/BlockNoteEditorAiActions.tsx

@@ -21,17 +21,20 @@ export type AiGenerateMenuItem = {
   onItemClick: () => void;
 };
 
-const ITEMS: Record<BlockNoteAiGenerateAction, Omit<AiGenerateMenuItem, "onItemClick">> = {
+/** `titleKey` is a message key; the caller's translator resolves it to the shown title. */
+type AiGenerateItemDefinition = Omit<AiGenerateMenuItem, "onItemClick" | "title"> & { titleKey: string };
+
+const ITEMS: Record<BlockNoteAiGenerateAction, AiGenerateItemDefinition> = {
   "fill-template": {
     key: "generate_from_template",
-    title: "Generate from Template",
+    titleKey: "ui.editor.ai.generate_from_template",
     aliases: ["generate", "template", "fill"],
     icon: <LayoutTemplateIcon size={18} />,
     size: "small",
   },
   "draft-impression": {
     key: "suggest_impression",
-    title: "Suggest impression",
+    titleKey: "ui.editor.ai.suggest_impression",
     aliases: ["suggest", "impression"],
     icon: <SparklesIcon size={18} />,
     size: "small",
@@ -41,9 +44,10 @@ const ITEMS: Record<BlockNoteAiGenerateAction, Omit<AiGenerateMenuItem, "onItemC
 export function generateActionItems(
   actions: BlockNoteAiGenerateAction[] | undefined,
   invoke: (type: BlockNoteAiGenerateAction) => void,
+  translate: (key: string) => string,
 ): AiGenerateMenuItem[] {
-  return (actions ?? DEFAULT_AI_GENERATE_ACTIONS).map((type) => ({
-    ...ITEMS[type],
-    onItemClick: () => invoke(type),
-  }));
+  return (actions ?? DEFAULT_AI_GENERATE_ACTIONS).map((type) => {
+    const { titleKey, ...item } = ITEMS[type];
+    return { ...item, title: translate(titleKey), onItemClick: () => invoke(type) };
+  });
 }

package/src/components/editors/__tests__/{BlockNoteEditorAiActions.test.ts → BlockNoteEditorAiActions.spec.ts}

@@ -1,9 +1,16 @@
 import { describe, expect, it, vi } from "vitest";
 import { DEFAULT_AI_GENERATE_ACTIONS, generateActionItems } from "../BlockNoteEditorAiActions";
 
+/** Stands in for next-intl's translator: returns the English message for each key. */
+const english: Record<string, string> = {
+  "ui.editor.ai.generate_from_template": "Generate from Template",
+  "ui.editor.ai.suggest_impression": "Suggest impression",
+};
+const translate = (key: string) => english[key] ?? key;
+
 describe("generateActionItems", () => {
   it("defaults to Generate from Template only, so existing editors are unchanged", () => {
-    const items = generateActionItems(undefined, vi.fn());
+    const items = generateActionItems(undefined, vi.fn(), translate);
     expect(DEFAULT_AI_GENERATE_ACTIONS).toEqual(["fill-template"]);
     expect(items.map((i) => i.key)).toEqual(["generate_from_template"]);
     expect(items[0].title).toBe("Generate from Template");
@@ -11,7 +18,7 @@ describe("generateActionItems", () => {
 
   it("offers Suggest impression when asked, and invokes with that type", () => {
     const invoke = vi.fn();
-    const items = generateActionItems(["draft-impression"], invoke);
+    const items = generateActionItems(["draft-impression"], invoke, translate);
     expect(items.map((i) => i.key)).toEqual(["suggest_impression"]);
     expect(items[0].title).toBe("Suggest impression");
     items[0].onItemClick();
@@ -19,7 +26,7 @@ describe("generateActionItems", () => {
   });
 
   it("keeps the caller's order when both are requested", () => {
-    const items = generateActionItems(["draft-impression", "fill-template"], vi.fn());
+    const items = generateActionItems(["draft-impression", "fill-template"], vi.fn(), translate);
     expect(items.map((i) => i.key)).toEqual(["suggest_impression", "generate_from_template"]);
   });
 });

package/src/components/errors/ErrorDetails.tsx

@@ -1,9 +1,12 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../shadcnui";
 
 export function ErrorDetails({ title, message, code }: { title?: string; message: string; code: number }) {
+  const t = useTranslations();
+
   if (code === 403)
     return (
       <div className="w-xl max-w-xl">
@@ -12,10 +15,10 @@ export function ErrorDetails({ title, message, code }: { title?: string; message
             <CardTitle className="text-foreground flex flex-col items-center gap-y-4 pb-10 text-4xl">
               <Image src="/logo.webp" alt="Logo" width={100} height={100} priority />
               {/* <div>{code}</div> */}
-              <div>Unauthorised</div>
+              <div>{t("common.errors.unauthorised")}</div>
             </CardTitle>
             <CardDescription className="text-center text-lg">
-              We are sorry, but you are not allowed to access this content.
+              {t("common.errors.unauthorised_description")}
             </CardDescription>
           </CardHeader>
           <CardContent></CardContent>

package/src/components/forms/CommonAssociationForm.tsx

@@ -34,7 +34,7 @@ export function CommonAssociationTrigger({
   if (hasDestination)
     return (
       <div className="hover:text-accent cursor-pointer" onClick={onTrigger}>
-        Join
+        {t(`common.association.join`)}
       </div>
     );
 

package/src/components/forms/EntityMultiSelector.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useWatch } from "react-hook-form";
+import { useTranslations } from "next-intl";
 import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import { Badge } from "../../shadcnui/ui/badge";
 import { Input } from "../../shadcnui/ui/input";
@@ -43,8 +44,8 @@ export function EntityMultiSelector<T extends { id: string }>({
   id,
   form,
   label,
-  placeholder = "Search...",
-  emptyText = "No results found.",
+  placeholder: placeholderProp,
+  emptyText: emptyTextProp,
   isRequired = false,
   retriever,
   retrieverParams = {},
@@ -59,6 +60,9 @@ export function EntityMultiSelector<T extends { id: string }>({
   description,
   disabled = false,
 }: EntityMultiSelectorProps<T>) {
+  const t = useTranslations();
+  const placeholder = placeholderProp ?? t("ui.search.placeholder_global");
+  const emptyText = emptyTextProp ?? t("ui.search.no_results_found");
   const [open, setOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [options, setOptions] = useState<OptionData<T>[]>([]);

package/src/components/forms/EntitySelector.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { CircleX, Plus, RefreshCwIcon, SearchIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { Command, CommandItem, CommandList } from "../../shadcnui/ui/command";
 import { Input } from "../../shadcnui/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "../../shadcnui/ui/popover";
@@ -46,7 +47,7 @@ export default function EntitySelector<T extends BaseEntity>({
   ready = true,
   getLabel = (entity: T) => (entity as any).name,
   label,
-  placeholder = "Search...",
+  placeholder: placeholderProp,
   emptyText,
   isRequired = false,
   disabled = false,
@@ -62,6 +63,8 @@ export default function EntitySelector<T extends BaseEntity>({
   autoSelectSingle = false,
   useFormWatch: shouldUseFormWatch = false,
 }: EntitySelectorProps<T>) {
+  const t = useTranslations();
+  const placeholder = placeholderProp ?? t("ui.search.placeholder_global");
   const [open, setOpen] = useState<boolean>(false);
   const searchTermRef = useRef<string>("");
   const [searchTerm, setSearchTerm] = useState<string>("");

package/src/components/forms/FileUploader.tsx

@@ -201,7 +201,7 @@ export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React
         if (onFilesRejected) {
           const overflowRejections: FileRejection[] = overflow.map((file) => ({
             file: file as FileWithPath,
-            errors: [{ code: ErrorCode.TooManyFiles, message: `Too many files. Only ${maxFiles} allowed.` }],
+            errors: [{ code: ErrorCode.TooManyFiles, message: t("common.errors.file_too_many", { max: maxFiles }) }],
           }));
           const allRejections = [...rejectedFiles, ...overflowRejections];
           if (allRejections.length > 0) onFilesRejected(allRejections);
@@ -290,9 +290,10 @@ export const FileUploaderContent = forwardRef<HTMLDivElement, React.HTMLAttribut
   ({ children, className, ...props }, ref) => {
     const { orientation } = useFileUpload();
     const containerRef = useRef<HTMLDivElement>(null);
+    const t = useTranslations();
 
     return (
-      <div className={cn("w-full px-1")} ref={containerRef} aria-description="content file holder">
+      <div className={cn("w-full px-1")} ref={containerRef} aria-description={t("ui.labels.file_holder")}>
         <div
           {...props}
           ref={ref}

package/src/components/forms/MultiFileUploader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { FileIcon, FileImageIcon, FileSpreadsheetIcon, FileTextIcon, UploadIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { DropzoneOptions } from "react-dropzone";
@@ -70,6 +71,7 @@ export default function MultiFileUploader({ files, setFiles, multiple = false, c
 }
 
 const FilePreviewItem = ({ file, onRemoveClick }: { file: File; onRemoveClick: () => void }) => {
+  const t = useTranslations();
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
 
   useEffect(() => {
@@ -106,7 +108,7 @@ const FilePreviewItem = ({ file, onRemoveClick }: { file: File; onRemoveClick: (
       <button
         onClick={onRemoveClick}
         className="absolute top-1.5 end-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
-        aria-label="Remove file"
+        aria-label={t("ui.labels.remove_file")}
       >
         <XIcon className="h-3.5 w-3.5" />
       </button>

package/src/components/navigations/Breadcrumb.tsx

@@ -34,6 +34,7 @@ function BreadcrumbDesktop({
   rootLabel: string;
   showRoot: boolean;
 }) {
+  const t = useTranslations();
   const [open, setOpen] = useState<boolean>(false);
 
   return (
@@ -62,8 +63,8 @@ function BreadcrumbDesktop({
             <BreadcrumbSeparator />
             <BreadcrumbItem>
               <DropdownMenu open={open} onOpenChange={setOpen}>
-                <DropdownMenuTrigger className="flex items-center gap-1" aria-label="Toggle menu">
-                  <BreadcrumbEllipsis className="h-4 w-4" />
+                <DropdownMenuTrigger className="flex items-center gap-1" aria-label={t("ui.labels.toggle_menu")}>
+                  <BreadcrumbEllipsis className="h-4 w-4" label={t("ui.labels.more")} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
                   {items.slice(1, -ITEMS_TO_DISPLAY + 2).map((item, index) => (

package/src/components/navigations/Header.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useIsMobile } from "@/utils";
 import { useIsBreadcrumbRootHidden } from "../../contexts/BreadcrumbRootContext";
 import { useHeaderRootLabel } from "../../contexts/HeaderChildrenContext";
@@ -31,6 +32,7 @@ export function Header({
   className,
   hideSidebarTriggerOnMobile,
 }: HeaderProps) {
+  const t = useTranslations();
   const { breadcrumbs } = useSharedContext();
   const rootLabel = useHeaderRootLabel();
   const isRootHidden = useIsBreadcrumbRootHidden();
@@ -56,7 +58,7 @@ export function Header({
       <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between ps-2 pe-4">
         {isMobile && logo && <div className="flex shrink-0 flex-row items-center pe-1">{logo}</div>}
         {sidebar && !(isMobile && hideSidebarTriggerOnMobile) && (
-          <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />
+          <SidebarTrigger aria-label={t("ui.labels.toggle_sidebar")} id="sidebar-trigger" />
         )}
         {leftContent}
         <div className="flex w-full flex-row items-center justify-start max-md:min-w-0">

package/src/components/navigations/MobileNavigationBar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { useMobileNavigationItems, type MobileNavigationItem } from "../../contexts/MobileNavigationContext";
 import { Link } from "../../shadcnui";
@@ -50,6 +51,7 @@ function SlotContent({ item }: { item: MobileNavigationItem }) {
  * the end of the page.
  */
 export function MobileNavigationBar({ className }: { className?: string } = {}) {
+  const t = useTranslations();
   const items = useMobileNavigationItems();
   const isMobile = useIsMobile();
   const pathname = usePathname();
@@ -68,7 +70,7 @@ export function MobileNavigationBar({ className }: { className?: string } = {})
   // bar when held by the shell instead.
   return (
     <nav
-      aria-label="Primary"
+      aria-label={t("ui.labels.primary_navigation")}
       data-testid="mobile-navigation-bar"
       data-help="shell.mobile-nav"
       className={cn("bg-sidebar flex w-full shrink-0 flex-row items-stretch rounded-lg border", className)}

package/src/components/navigations/__tests__/Header.spec.tsx

@@ -50,11 +50,11 @@ function withShared(node: React.ReactNode) {
 describe("Header", () => {
   it("renders the sidebar toggle inside a SidebarProvider", () => {
     render(withShared(<SidebarProvider>{<Header />}</SidebarProvider>));
-    expect(screen.queryByRole("button", { name: "Toggle sidebar" })).not.toBeNull();
+    expect(screen.queryByRole("button", { name: "ui.labels.toggle_sidebar" })).not.toBeNull();
   });
 
   it("renders without a SidebarProvider and shows no sidebar toggle", () => {
     expect(() => render(withShared(<Header />))).not.toThrow();
-    expect(screen.queryByRole("button", { name: "Toggle sidebar" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "ui.labels.toggle_sidebar" })).toBeNull();
   });
 });

package/src/components/tables/__tests__/ContentListTable.spec.tsx

@@ -5,7 +5,7 @@ import { ContentListTable } from "../ContentListTable";
 // `ContentListTable` imports `useTableGenerator` from the `../../hooks` barrel,
 // which resolves columns through the table-generator registry. Mocking the
 // barrel (spreading the actual module so the other exports survive) is the same
-// approach the sibling `ContentListTable.test.tsx` in this folder uses; one
+// approach the sibling `ContentListTable.rendering.spec.tsx` in this folder uses; one
 // plain column is enough here.
 // `mockColumns.expandToggle` switches the mocked name cell to a button that
 // toggles row expansion (the `renderExpandedRow` suite), plus a second column so

package/src/components/tables/cells/cell.id.tsx

@@ -1,6 +1,18 @@
 import { ColumnDef } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
 import { Checkbox } from "../../../shadcnui";
 
+function SelectRowCheckbox({
+  checked,
+  onCheckedChange,
+}: {
+  checked: boolean;
+  onCheckedChange: (value: boolean) => void;
+}) {
+  const t = useTranslations();
+  return <Checkbox checked={checked} onCheckedChange={onCheckedChange} aria-label={t("ui.labels.select_row")} />;
+}
+
 export const cellId = (params: {
   name: string;
   checkedIds?: string[];
@@ -12,13 +24,12 @@ export const cellId = (params: {
     header: "",
     cell: ({ row }) =>
       params.toggleId ? (
-        <Checkbox
+        <SelectRowCheckbox
           checked={params.checkedIds?.includes(row.getValue(params.name)) || false}
           onCheckedChange={(value) => {
             row.toggleSelected(!!value);
             params.toggleId?.(row.getValue(params.name));
           }}
-          aria-label="Select row"
         />
       ) : null,
     enableSorting: false,

package/src/core/abstracts/AbstractService.ts

@@ -1,7 +1,7 @@
 import { ApiRequestDataTypeInterface } from "../interfaces/ApiRequestDataTypeInterface";
 import { ApiResponseInterface } from "../interfaces/ApiResponseInterface";
 import { setLastApiResponse } from "./lastApiResponse";
-import { getI18nServerLocale } from "../../i18n/config";
+import { getI18nServerLocale, getI18nSupportedLocales } from "../../i18n/config";
 
 export enum HttpMethod {
   GET = "GET",
@@ -68,8 +68,8 @@ export abstract class AbstractService {
     const pathSegments = window.location.pathname.split("/").filter(Boolean);
     const urlLocale = pathSegments[0];
 
-    // Validate against supported locales (currently only "en")
-    const supportedLocales = ["en"];
+    // Validate against the app's supported locales (default ["en"])
+    const supportedLocales = getI18nSupportedLocales();
     if (urlLocale && supportedLocales.includes(urlLocale)) {
       return urlLocale;
     }

package/src/core/abstracts/ClientAbstractService.ts

@@ -10,6 +10,7 @@ import {
   ClientJsonApiDelete,
 } from "../../client/JsonApiClient";
 import { setLastApiResponse } from "./lastApiResponse";
+import { getI18nSupportedLocales } from "../../i18n/config";
 // Duplicated to avoid importing from AbstractService which pulls in server code
 // These are exported so client services can import them from here instead of core
 export enum ClientHttpMethod {
@@ -72,8 +73,8 @@ export abstract class ClientAbstractService {
     const pathSegments = window.location.pathname.split("/").filter(Boolean);
     const urlLocale = pathSegments[0];
 
-    // Validate against supported locales (currently only "en")
-    const supportedLocales = ["en"];
+    // Validate against the app's supported locales (default ["en"])
+    const supportedLocales = getI18nSupportedLocales();
     if (urlLocale && supportedLocales.includes(urlLocale)) {
       return urlLocale;
     }

package/src/features/assistant-action/components/ApprovalActionCard.tsx

@@ -108,6 +108,69 @@ function humaniseKey(key: string): string {
   return words.charAt(0).toUpperCase() + words.slice(1);
 }
 
+/**
+ * The untyped call signature of next-intl's `t`. Every key below is computed
+ * from wire identifiers, so the generated message-key union cannot describe it.
+ */
+type LooseTranslate = ((key: string, values?: Record<string, unknown>) => string) & {
+  has?: (key: string) => boolean;
+};
+
+/**
+ * Translates `key` when the host app defines it, else `undefined`. `t.has` is
+ * the only non-throwing probe: a plain `t()` on a missing key either throws or
+ * returns the key path, depending on the app's next-intl error handler.
+ */
+function translateIfPresent(t: LooseTranslate, key: string, values?: Record<string, unknown>): string | undefined {
+  if (typeof t.has !== "function" || !t.has(key)) return undefined;
+  try {
+    const text = t(key, values);
+    return text && text !== key ? text : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Message-key segments a JSON:API type may be filed under in the app's
+ * `features.<feature>` namespace: `npcs` → `npc`, `knives` → `knife`,
+ * `stories` → `story`, `scene-cornerstones` → `scene-cornerstone` and
+ * `sceneCornerstone`.
+ */
+function featureKeyCandidates(type: string): string[] {
+  if (!type) return [];
+  const singulars = new Set<string>();
+  if (type.endsWith("ives")) singulars.add(`${type.slice(0, -4)}ife`);
+  if (type.endsWith("ies")) singulars.add(`${type.slice(0, -3)}y`);
+  if (type.endsWith("s")) singulars.add(type.slice(0, -1));
+  singulars.add(type);
+  const candidates = new Set<string>();
+  for (const singular of singulars) {
+    candidates.add(singular);
+    candidates.add(singular.replace(/[-_]+([a-z0-9])/g, (_, letter: string) => letter.toUpperCase()));
+  }
+  return [...candidates];
+}
+
+/**
+ * Label of an attribute or relationship, in the active language. Tries, in
+ * order: the entity editor's own label (`features.<feature>.fields.<key>.label`),
+ * the generic `ui.fields.<key>`, then the humanised key — so a field no app
+ * catalogue knows still renders exactly as it did before translation existed.
+ */
+function fieldLabel(t: LooseTranslate, type: string, key: string): string {
+  for (const feature of featureKeyCandidates(type)) {
+    const label = translateIfPresent(t, `features.${feature}.fields.${key}.label`);
+    if (label !== undefined) return label;
+  }
+  return translateIfPresent(t, `ui.fields.${key}`) ?? humaniseKey(key);
+}
+
+/** Singular entity name from the app's `entities.<type>` plural message, else the humanised type. */
+function entityName(t: LooseTranslate, type: string): string {
+  return translateIfPresent(t, `entities.${type}`, { count: 1 }) ?? humaniseType(type);
+}
+
 /**
  * Plain text of a BlockNote document, without importing BlockNote: walk the
  * blocks, concatenate the text runs of each block's `content`, recurse into
@@ -336,7 +399,9 @@ export function ApprovalActionCard({ actionId, summary, onResolved, hiddenRelati
   const presented = useMemo(() => parseOperatorProposal(actionProposal), [actionProposal]);
   const legacy = useMemo(() => (presented ? undefined : parseLegacyProposal(toolArgs)), [presented, toolArgs]);
   const isUpdate = toolName === "update_entity";
-  const entityLabel = humaniseType(presented?.type ?? legacy?.type ?? "");
+  const entityType = presented?.type ?? legacy?.type ?? "";
+  const loose = t as unknown as LooseTranslate;
+  const entityLabel = entityName(loose, entityType);
   const targetLabel = presented?.target?.label ?? "";
 
   const rows = useMemo<ProposalRow[]>(() => {
@@ -345,7 +410,9 @@ export function ApprovalActionCard({ actionId, summary, onResolved, hiddenRelati
     const attributes = presented?.attributes ?? legacy?.attributes;
     const attributeRows = Object.entries(attributes ?? {}).flatMap<ProposalRow>(([key, value]) => {
       const text = formatAttribute(value, yes, no);
-      return text === undefined ? [] : [{ key: `attribute:${key}`, label: humaniseKey(key), value: text }];
+      return text === undefined
+        ? []
+        : [{ key: `attribute:${key}`, label: fieldLabel(loose, entityType, key), value: text }];
     });
     if (!presented) return attributeRows;
 
@@ -353,7 +420,9 @@ export function ApprovalActionCard({ actionId, summary, onResolved, hiddenRelati
     const relationshipRows = Object.entries(presented.relationships ?? {}).flatMap<ProposalRow>(([key, refs]) => {
       if (hidden.has(key)) return [];
       const text = formatRefs(refs);
-      return text === undefined ? [] : [{ key: `relationship:${key}`, label: humaniseKey(key), value: text }];
+      return text === undefined
+        ? []
+        : [{ key: `relationship:${key}`, label: fieldLabel(loose, entityType, key), value: text }];
     });
 
     const linkRows: ProposalRow[] = [];
@@ -361,7 +430,7 @@ export function ApprovalActionCard({ actionId, summary, onResolved, hiddenRelati
       linkRows.push({
         key: "link:relationship",
         label: t("features.assistant.approval.proposal.relationship"),
-        value: humaniseKey(presented.relationship),
+        value: fieldLabel(loose, entityType, presented.relationship),
       });
     }
     const targetsText = formatRefs(presented.targets ?? []);
@@ -374,7 +443,7 @@ export function ApprovalActionCard({ actionId, summary, onResolved, hiddenRelati
     }
 
     return [...attributeRows, ...relationshipRows, ...linkRows];
-  }, [presented, legacy, t, hiddenRelationshipKeys]);
+  }, [presented, legacy, t, loose, entityType, hiddenRelationshipKeys]);
 
   const hasProposal = rows.length > 0;