@carlonicora/nextjs-jsonapi 3.23.0 → 3.24.0

package/src/features/assistant-message/components/__tests__/EntityMentionLink.spec.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
+import { configureI18n } from "../../../../i18n";
+import { EntityMentionLink } from "../EntityMentionLink";
+
+beforeAll(() => {
+  // The package Link resolves its inner component at runtime and throws if i18n
+  // was never configured (src/i18n/config.ts).
+  configureI18n({
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    useTranslations: () => (key: string) => key,
+    usePathname: () => "/",
+    Link: ({
+      href,
+      children,
+      prefetch: _prefetch,
+      ...rest
+    }: {
+      href: string;
+      children: React.ReactNode;
+      [key: string]: any;
+    }) => (
+      <a href={href} {...rest}>
+        {children}
+      </a>
+    ),
+  });
+  ModuleRegistry.register("Account" as any, { name: "accounts", pageUrl: "/accounts" } as any);
+});
+
+describe("EntityMentionLink", () => {
+  it("renders a link to the entity page for a registered module", () => {
+    render(<>{EntityMentionLink({ type: "accounts", id: "a1", alias: "Rossi" })}</>);
+    const link = screen.getByRole("link", { name: "Rossi" });
+    expect(link).toHaveAttribute("href", "/accounts/a1");
+    expect(link).toHaveTextContent("Rossi");
+  });
+
+  it("renders through the package Link (locale-aware, link typography role)", () => {
+    render(<>{EntityMentionLink({ type: "accounts", id: "a1", alias: "Rossi" })}</>);
+    const link = screen.getByRole("link", { name: "Rossi" });
+    expect(link.className).toContain("text-primary font-medium");
+  });
+
+  it("renders plain text with no link for an unknown type", () => {
+    render(<>{EntityMentionLink({ type: "unknown-things", id: "x1", alias: "Mystery" })}</>);
+    expect(screen.getByText("Mystery")).toBeInTheDocument();
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+  });
+});

package/src/features/assistant-message/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./MessageItem";
 export * from "./MessageList";
 export { MessageSourcesPanel } from "./parts/MessageSourcesPanel";
+export * from "./EntityMentionLink";

package/src/features/assistant-message/components/parts/tabs/ContentsTab.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import type { ApiDataInterface } from "../../../../../core";
 import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
 import { usePageUrlGenerator } from "../../../../../hooks";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui/ui/table";
 import type { ChunkInterface, ChunkRelationshipMeta } from "../../../../chunk/data/ChunkInterface";
 import { useEntityLabel } from "./useEntityLabel";
+import { Link } from "../../../../../shadcnui/custom/link";
 
 interface Props {
   citations: (ChunkInterface & ChunkRelationshipMeta)[];

package/src/features/assistant-message/components/parts/tabs/ReferencesTab.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import type { ApiDataInterface } from "../../../../../core";
 import { ModuleRegistry } from "../../../../../core/registry/ModuleRegistry";
 import { usePageUrlGenerator } from "../../../../../hooks";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui/ui/table";
 import { useEntityLabel } from "./useEntityLabel";
+import { Link } from "../../../../../shadcnui/custom/link";
 
 interface Props {
   references: ApiDataInterface[];
@@ -42,7 +42,7 @@ export function ReferencesTab({ references }: Props) {
           return (
             <TableRow key={`${ref.type}/${ref.id}`}>
               <TableCell>
-                <Link href={href} target="_blank" rel="noopener noreferrer" className="font-medium">
+                <Link href={href} target="_blank" rel="noopener noreferrer">
                   {ref.identifier}
                 </Link>
               </TableCell>

package/src/features/auth/components/forms/__tests__/Logout.spec.tsx

@@ -37,7 +37,8 @@ describe("Logout", () => {
     // We need to delete the original location first
     // @ts-expect-error - deleting window.location for mocking purposes
     delete window.location;
-    window.location = {
+    // The DOM lib types `window.location` as accessor-only; jsdom lets the test replace it.
+    (window as unknown as { location: Location }).location = {
       ...originalLocation,
       get href() {
         return windowLocationHref;
@@ -50,7 +51,7 @@ describe("Logout", () => {
 
   afterEach(() => {
     // Restore original location
-    window.location = originalLocation;
+    (window as unknown as { location: Location }).location = originalLocation;
   });
 
   describe("Scenario: Clears storage when storageKeys provided", () => {

package/src/features/oauth/components/OAuthClientForm.tsx

@@ -17,7 +17,12 @@ import {
 } from "../../../shadcnui";
 import { OAuthRedirectUriInput } from "./OAuthRedirectUriInput";
 import { OAuthScopeSelector } from "./OAuthScopeSelector";
-import { OAuthClientCreateRequest, OAuthClientInterface, DEFAULT_GRANT_TYPES } from "../interfaces/oauth.interface";
+import {
+  OAuthClientCreateRequest,
+  OAuthClientInterface,
+  OAuthScopeInfo,
+  DEFAULT_GRANT_TYPES,
+} from "../interfaces/oauth.interface";
 
 export interface OAuthClientFormProps {
   /** Existing client for edit mode (undefined = create mode) */
@@ -28,6 +33,10 @@ export interface OAuthClientFormProps {
   onCancel: () => void;
   /** Whether form is submitting */
   isLoading?: boolean;
+  /** Scopes the app offers in the selector (defaults to AVAILABLE_OAUTH_SCOPES) */
+  availableScopes?: OAuthScopeInfo[];
+  /** Scopes preselected in create mode (edit mode uses client.allowedScopes) */
+  defaultScopes?: string[];
 }
 
 interface FormState {
@@ -47,14 +56,21 @@ interface FormErrors {
 /**
  * Form for creating or editing an OAuth client
  */
-export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false }: OAuthClientFormProps) {
+export function OAuthClientForm({
+  client,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  availableScopes,
+  defaultScopes = [],
+}: OAuthClientFormProps) {
   const isEditMode = !!client;
 
   const [formState, setFormState] = useState<FormState>({
     name: client?.name || "",
     description: client?.description || "",
     redirectUris: client?.redirectUris?.length ? client.redirectUris : [""],
-    allowedScopes: client?.allowedScopes || [],
+    allowedScopes: client ? client.allowedScopes || [] : defaultScopes,
     isConfidential: client?.isConfidential ?? true,
   });
 
@@ -117,7 +133,7 @@ export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false
               id="name"
               value={formState.name}
               onChange={(e) => setFormState((s) => ({ ...s, name: e.target.value }))}
-              placeholder="My Lightroom Plugin"
+              placeholder="My Application"
               disabled={isLoading}
               className={errors.name ? "border-destructive" : ""}
             />
@@ -149,6 +165,7 @@ export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false
           <OAuthScopeSelector
             value={formState.allowedScopes}
             onChange={(scopes) => setFormState((s) => ({ ...s, allowedScopes: scopes }))}
+            availableScopes={availableScopes}
             error={errors.allowedScopes}
             disabled={isLoading}
           />

package/src/features/oauth/components/__tests__/OAuthClientForm.spec.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { OAuthClientForm } from "../OAuthClientForm";
+import { OAUTH_SCOPE_DISPLAY, OAuthClientInterface } from "../../interfaces/oauth.interface";
+
+const scopeCheckbox = (name: string) => screen.getByRole("checkbox", { name: new RegExp(name) });
+
+const makeClient = (allowedScopes: string[]): OAuthClientInterface =>
+  ({
+    name: "Existing app",
+    description: undefined,
+    redirectUris: ["https://example.com/callback"],
+    allowedScopes,
+    isConfidential: true,
+  }) as unknown as OAuthClientInterface;
+
+describe("OAuthClientForm", () => {
+  it("renders only the scopes passed in availableScopes", () => {
+    render(<OAuthClientForm onSubmit={vi.fn()} onCancel={vi.fn()} availableScopes={[OAUTH_SCOPE_DISPLAY.mcp]} />);
+
+    expect(screen.getByText("MCP Server Access")).toBeTruthy();
+    expect(screen.queryByText("Read Access")).toBeNull();
+    expect(screen.queryByText("Write Access")).toBeNull();
+  });
+
+  it("preselects defaultScopes in create mode", () => {
+    render(
+      <OAuthClientForm
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        availableScopes={[OAUTH_SCOPE_DISPLAY.read, OAUTH_SCOPE_DISPLAY.mcp]}
+        defaultScopes={["mcp"]}
+      />,
+    );
+
+    expect(scopeCheckbox("MCP Server Access").getAttribute("aria-checked")).toBe("true");
+    expect(scopeCheckbox("Read Access").getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("uses client.allowedScopes instead of defaultScopes in edit mode", () => {
+    render(
+      <OAuthClientForm
+        client={makeClient(["read"])}
+        onSubmit={vi.fn()}
+        onCancel={vi.fn()}
+        availableScopes={[OAUTH_SCOPE_DISPLAY.read, OAUTH_SCOPE_DISPLAY.mcp]}
+        defaultScopes={["mcp"]}
+      />,
+    );
+
+    expect(scopeCheckbox("Read Access").getAttribute("aria-checked")).toBe("true");
+    expect(scopeCheckbox("MCP Server Access").getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("offers the generic scope list by default, without Only35 scopes", () => {
+    render(<OAuthClientForm onSubmit={vi.fn()} onCancel={vi.fn()} />);
+
+    expect(screen.getByText("MCP Server Access")).toBeTruthy();
+    expect(screen.getByText("Read Access")).toBeTruthy();
+    expect(screen.queryByText("View Photographs")).toBeNull();
+    expect(screen.queryByText("View Rolls")).toBeNull();
+  });
+});

package/src/features/oauth/components/consent/OAuthCompanySelector.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../shadcnui";
+import { MicroLabel } from "../../../../components/typography";
+
+export interface OAuthCompanySelectorProps {
+  /** The user's companies (studios) */
+  companies: Array<{ id: string; name: string }>;
+  /** The selected company id */
+  value: string | undefined;
+  /** Called with the newly selected company id */
+  onChange: (id: string) => void;
+}
+
+/**
+ * Studio (company) picker for the OAuth consent screen.
+ * Renders nothing when the user belongs to a single company.
+ */
+export function OAuthCompanySelector({ companies, value, onChange }: OAuthCompanySelectorProps) {
+  const t = useTranslations();
+
+  const items = useMemo<Record<string, string>>(
+    () => Object.fromEntries(companies.map((company) => [company.id, company.name])),
+    [companies],
+  );
+
+  if (companies.length <= 1) return null;
+
+  return (
+    <div className="space-y-3">
+      <MicroLabel as="h3">{t("oauth.consent.company_label")}</MicroLabel>
+      <Select
+        items={items}
+        value={value ?? null}
+        onValueChange={(selected) => {
+          if (selected) onChange(String(selected));
+        }}
+      >
+        <SelectTrigger className="w-full" aria-label={t("oauth.consent.company_label")}>
+          <SelectValue placeholder={t("oauth.consent.company_label")} />
+        </SelectTrigger>
+        <SelectContent>
+          {companies.map((company) => (
+            <SelectItem key={company.id} value={company.id}>
+              {company.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/features/oauth/components/consent/OAuthConsentActions.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Button } from "../../../../shadcnui";
 
 export interface OAuthConsentActionsProps {
@@ -15,13 +16,15 @@ export interface OAuthConsentActionsProps {
  * Action buttons for OAuth consent screen
  */
 export function OAuthConsentActions({ onApprove, onDeny, isLoading = false }: OAuthConsentActionsProps) {
+  const t = useTranslations();
+
   return (
     <div className="flex flex-col sm:flex-row gap-3">
       <Button variant="outline" onClick={onDeny} disabled={isLoading} className="flex-1">
-        Deny
+        {t("oauth.consent.deny")}
       </Button>
       <Button onClick={onApprove} disabled={isLoading} className="flex-1">
-        {isLoading ? "Authorizing..." : "Authorize"}
+        {isLoading ? t("oauth.consent.authorizing") : t("oauth.consent.authorize")}
       </Button>
     </div>
   );

package/src/features/oauth/components/consent/OAuthConsentHeader.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { Shield } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { ContentTitle } from "../../../../components";
 import { OAuthClientInterface } from "../../interfaces/oauth.interface";
 
 export interface OAuthConsentHeaderProps {
@@ -8,15 +10,17 @@ export interface OAuthConsentHeaderProps {
   client: OAuthClientInterface;
   /** Optional logo URL override */
   logoUrl?: string;
-  /** Application name (e.g., "Only35") */
-  appName?: string;
+  /** Application name shown in the header */
+  appName: string;
 }
 
 /**
  * Header component for OAuth consent screen
  * Shows platform logo and requesting app information
  */
-export function OAuthConsentHeader({ client, logoUrl, appName = "Only35" }: OAuthConsentHeaderProps) {
+export function OAuthConsentHeader({ client, logoUrl, appName }: OAuthConsentHeaderProps) {
+  const t = useTranslations();
+
   return (
     <div className="text-center space-y-4">
       {/* Platform Logo */}
@@ -32,9 +36,9 @@ export function OAuthConsentHeader({ client, logoUrl, appName = "Only35" }: OAut
 
       {/* Authorization Request */}
       <div className="space-y-2">
-        <h1 className="text-primary text-3xl font-semibold">Authorize {client.name}</h1>
-        <p className="text-muted-foreground">
-          <span className="font-medium text-foreground">{client.name}</span> wants to access your {appName} account
+        <ContentTitle element={t("oauth.consent.title", { client: client.name })} className="mb-0 justify-center" />
+        <p className="text-muted-foreground text-sm">
+          {t("oauth.consent.wants_access", { client: client.name, appName })}
         </p>
       </div>
     </div>

package/src/features/oauth/components/consent/OAuthConsentScreen.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import { ExternalLink, AlertTriangle, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardFooter, Separator, Alert, AlertDescription } from "../../../../shadcnui";
 import { OAuthConsentHeader } from "./OAuthConsentHeader";
 import { OAuthScopeList } from "./OAuthScopeList";
 import { OAuthConsentActions } from "./OAuthConsentActions";
+import { OAuthCompanySelector } from "./OAuthCompanySelector";
 import { useOAuthConsent } from "../../hooks/useOAuthConsent";
 import { OAuthConsentRequest } from "../../interfaces/oauth.interface";
 
@@ -13,12 +15,17 @@ export interface OAuthConsentScreenProps {
   params: OAuthConsentRequest;
   /** Optional platform logo URL */
   logoUrl?: string;
-  /** Platform name */
-  appName?: string;
+  /** Platform name, shown on the consent screen */
+  appName: string;
   /** Terms of Service URL */
   termsUrl?: string;
   /** Privacy Policy URL */
   privacyUrl?: string;
+  /**
+   * The studio open in the host app's session, used as the default studio
+   * choice. Needed by apps that do not mount the package UserProvider.
+   */
+  defaultCompanyId?: string;
 }
 
 /**
@@ -40,11 +47,16 @@ export interface OAuthConsentScreenProps {
 export function OAuthConsentScreen({
   params,
   logoUrl,
-  appName = "Only35",
+  appName,
   termsUrl = "/terms",
   privacyUrl = "/privacy",
+  defaultCompanyId,
 }: OAuthConsentScreenProps) {
-  const { clientInfo, isLoading, error, approve, deny, isSubmitting } = useOAuthConsent(params);
+  const t = useTranslations();
+  const { clientInfo, isLoading, error, approve, deny, isSubmitting, companyId, setCompanyId } = useOAuthConsent(
+    params,
+    { defaultCompanyId },
+  );
 
   // Loading state
   if (isLoading) {
@@ -53,7 +65,7 @@ export function OAuthConsentScreen({
         <Card className="w-full max-w-md">
           <CardContent className="flex flex-col items-center justify-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-            <p className="mt-4 text-muted-foreground">Loading authorization request...</p>
+            <p className="mt-4 text-muted-foreground text-sm">{t("oauth.consent.loading")}</p>
           </CardContent>
         </Card>
       </div>
@@ -68,9 +80,7 @@ export function OAuthConsentScreen({
           <CardContent className="py-8">
             <Alert variant="destructive">
               <AlertTriangle className="h-4 w-4" />
-              <AlertDescription>
-                {error?.message || "Invalid authorization request. Please try again."}
-              </AlertDescription>
+              <AlertDescription>{error?.message || t("oauth.consent.invalid_request")}</AlertDescription>
             </Alert>
           </CardContent>
         </Card>
@@ -79,6 +89,7 @@ export function OAuthConsentScreen({
   }
 
   const { client, scopes } = clientInfo;
+  const companies = clientInfo.companies ?? [];
 
   return (
     <div className="min-h-dvh flex items-center justify-center p-4 bg-muted/30">
@@ -94,11 +105,20 @@ export function OAuthConsentScreen({
 
           <Separator />
 
+          {/* Studio */}
+          {companies.length > 1 && (
+            <>
+              <OAuthCompanySelector companies={companies} value={companyId} onChange={setCompanyId} />
+
+              <Separator />
+            </>
+          )}
+
           {/* Redirect URI Notice */}
           <div className="flex items-start gap-2 text-sm text-muted-foreground">
             <ExternalLink className="h-4 w-4 mt-0.5 flex-shrink-0" />
             <div>
-              <span>Authorizing will redirect you to:</span>
+              <span>{t("oauth.consent.redirect_notice")}</span>
               <p className="tabular-nums text-xs mt-1 break-all">{params.redirectUri}</p>
             </div>
           </div>
@@ -110,13 +130,13 @@ export function OAuthConsentScreen({
         {/* Footer */}
         <CardFooter className="justify-center">
           <p className="text-xs text-center text-muted-foreground">
-            By authorizing, you agree to the app's{" "}
+            {t("oauth.consent.agreement")}{" "}
             <a href={termsUrl} className="hover:text-foreground" target="_blank" rel="noopener">
-              Terms of Service
+              {t("oauth.consent.terms")}
             </a>{" "}
-            and{" "}
+            {t("oauth.consent.and")}{" "}
             <a href={privacyUrl} className="hover:text-foreground" target="_blank" rel="noopener">
-              Privacy Policy
+              {t("oauth.consent.privacy")}
             </a>
             .
           </p>

package/src/features/oauth/components/consent/OAuthScopeList.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Eye, Pencil, Image, Upload, Film, FolderPlus, User, Shield, LucideIcon } from "lucide-react";
 import { OAuthScopeInfo } from "../../interfaces/oauth.interface";
 import { MicroLabel } from "../../../../components/typography";
@@ -25,13 +26,15 @@ const SCOPE_ICONS: Record<string, LucideIcon> = {
  * List of requested OAuth scopes for consent display
  */
 export function OAuthScopeList({ scopes }: OAuthScopeListProps) {
+  const t = useTranslations();
+
   if (scopes.length === 0) {
     return null;
   }
 
   return (
     <div className="space-y-3">
-      <MicroLabel as="h3">This will allow the application to:</MicroLabel>
+      <MicroLabel as="h3">{t("oauth.consent.scopes_heading")}</MicroLabel>
       <ul className="space-y-3">
         {scopes.map((scope) => {
           const IconComponent = scope.icon ? SCOPE_ICONS[scope.icon] : Eye;

package/src/features/oauth/components/consent/__tests__/OAuthConsentHeader.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { OAuthConsentHeader } from "../OAuthConsentHeader";
+
+const CLIENT = { id: "client-1", name: "Claude" } as any;
+
+describe("OAuthConsentHeader", () => {
+  it("renders the consent title through ContentTitle (page-title recipe), not a raw <h1>", () => {
+    const { container } = render(<OAuthConsentHeader client={CLIENT} appName="Test" />);
+
+    expect(container.querySelector("h1")).toBeNull();
+    const title = screen.getByText("oauth.consent.title");
+    expect(title.className).toContain("text-primary text-3xl font-semibold");
+  });
+
+  it("keeps the title centred with no extra bottom margin", () => {
+    const { container } = render(<OAuthConsentHeader client={CLIENT} appName="Test" />);
+
+    const wrapper = screen.getByText("oauth.consent.title").parentElement?.parentElement as HTMLElement;
+    expect(wrapper.className).toContain("justify-center");
+    expect(wrapper.className).toContain("mb-0");
+    expect(wrapper.className).not.toContain("mb-4");
+    expect(container.firstElementChild?.className).toContain("text-center");
+  });
+});