@carlonicora/nextjs-jsonapi 3.22.0 → 3.24.0

package/src/features/assistant/contexts/AssistantContext.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { PlusCircleIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { SharedProvider } from "../../../contexts";
+import { Button } from "../../../shadcnui";
 import { useSocketContext } from "../../../contexts/SocketContext";
 import { BreadcrumbItemData, JsonApiHydratedDataInterface, Modules, rehydrate, rehydrateList } from "../../../core";
 import { usePageUrlGenerator } from "../../../hooks";
@@ -40,6 +42,10 @@ interface AssistantContextValue {
   setOperatorMode(value: boolean): void;
   /** Appends a message returned outside the send flow (e.g. an approve/deny resume). */
   appendResolvedMessage(message: AssistantMessageInterface): void;
+  /** The scope a NEW thread will bind to. Starts from the provider's `scope` prop. */
+  scope?: { type: string; id: string };
+  /** Changes the scope a new thread binds to. Ignored once a thread is active. */
+  setScope(scope?: { type: string; id: string }): void;
 }
 
 const AssistantContext = createContext<AssistantContextValue | undefined>(undefined);
@@ -141,6 +147,9 @@ export function AssistantProvider({
   const [operatorMode, setOperatorMode] = useState<boolean>(
     () => dehydratedAssistant?.jsonApi?.attributes?.engine === "operator",
   );
+  // The scope the next created thread binds to. Starts from the `scope` prop
+  // and can be changed by the host (e.g. a scope picker) until a thread exists.
+  const [pendingScope, setPendingScope] = useState<{ type: string; id: string } | undefined>(scope);
   const { socket } = useSocketContext();
 
   const sendMessage = useCallback(
@@ -172,6 +181,35 @@ export function AssistantProvider({
       };
       socket?.on("assistant:status", handler);
 
+      // A new thread is named and persisted before its answer runs; the server
+      // announces it on `assistant:created` so the thread list and the URL
+      // update immediately instead of when the long create request returns.
+      let createdHandled = false;
+      const createdHandler = (payload: {
+        assistant?: { data?: JsonApiHydratedDataInterface["jsonApi"]; included?: any[] };
+      }) => {
+        if (createdHandled) return;
+        const data = payload?.assistant?.data;
+        if (!data || typeof data !== "object" || typeof data.id !== "string" || !data.id) return;
+        let thread: AssistantInterface;
+        try {
+          thread = rehydrate<AssistantInterface>(Modules.Assistant, {
+            jsonApi: data,
+            included: payload.assistant?.included ?? [],
+          });
+        } catch {
+          return;
+        }
+        if (!thread?.id) return;
+        createdHandled = true;
+        setAssistant(thread);
+        setThreads((prev) => [thread, ...prev.filter((row) => row.id !== thread.id)]);
+        if (manageUrl && typeof window !== "undefined") {
+          window.history.replaceState(null, "", resolveThreadUrl(thread.id));
+        }
+      };
+      if (!assistant) socket?.on("assistant:created", createdHandler);
+
       try {
         if (!assistant) {
           const input = {
@@ -181,7 +219,7 @@ export function AssistantProvider({
             handbookMode: opts?.handbookMode ?? retrievalMode?.handbookMode,
             limitToHandbookPageId: opts?.limitToHandbookPageId ?? retrievalMode?.limitToHandbookPageId,
             contentBlocks: opts?.contentBlocks,
-            boundContent: scope,
+            boundContent: pendingScope,
           };
           const created = operatorMode
             ? await AssistantService.createOperator(input)
@@ -189,7 +227,11 @@ export function AssistantProvider({
           const msgs = await AssistantMessageService.findByAssistant({ assistantId: created.id });
           setAssistant(created);
           setMessages(msgs);
-          setThreads((prev) => [created, ...prev]);
+          setThreads((prev) =>
+            prev.some((row) => row.id === created.id)
+              ? prev.map((row) => (row.id === created.id ? created : row))
+              : [created, ...prev],
+          );
           if (manageUrl && typeof window !== "undefined") {
             window.history.replaceState(null, "", resolveThreadUrl(created.id));
           }
@@ -219,11 +261,12 @@ export function AssistantProvider({
         });
       } finally {
         socket?.off("assistant:status", handler);
+        if (!assistant) socket?.off("assistant:created", createdHandler);
         setSending(false);
         setStatus(undefined);
       }
     },
-    [assistant, messages, socket, operatorMode, scope, retrievalMode, manageUrl, resolveThreadUrl],
+    [assistant, messages, socket, operatorMode, pendingScope, retrievalMode, manageUrl, resolveThreadUrl],
   );
 
   const appendResolvedMessage = useCallback((message: AssistantMessageInterface) => {
@@ -278,10 +321,20 @@ export function AssistantProvider({
     setMessages([]);
     setFailedMessageIds(new Set());
     setOperatorMode(false);
+    setPendingScope(scope);
     if (manageUrl && typeof window !== "undefined") {
       window.history.replaceState(null, "", resolveThreadUrl());
     }
-  }, [manageUrl, resolveThreadUrl]);
+  }, [manageUrl, resolveThreadUrl, scope]);
+
+  const setScope = useCallback(
+    (next?: { type: string; id: string }) => {
+      // An existing thread is already bound; its scope cannot change.
+      if (assistant) return;
+      setPendingScope(next);
+    },
+    [assistant],
+  );
 
   const deleteThread = useCallback(async (id: string) => {
     await AssistantService.delete({ id });
@@ -329,6 +382,8 @@ export function AssistantProvider({
       operatorMode,
       setOperatorMode,
       appendResolvedMessage,
+      scope: pendingScope,
+      setScope,
     }),
     [
       assistant,
@@ -346,6 +401,8 @@ export function AssistantProvider({
       deleteThread,
       operatorMode,
       appendResolvedMessage,
+      pendingScope,
+      setScope,
     ],
   );
 
@@ -360,9 +417,36 @@ export function AssistantProvider({
 
   // `entities.tasks` was a copy-paste from another feature and rendered
   // "Tasks" as the page heading of every assistant page.
-  const title = {
-    type: titleOverride ?? t("entities.assistants", { count: 2 }),
-  };
+  // Shaped like the conversations page heading: the open thread's title as the
+  // element, and the new-thread action in the shared header so it stays
+  // reachable when the thread-list panel is collapsed.
+  const title = useMemo(() => {
+    const response: { type: string; element?: string; functions?: React.ReactNode } = {
+      type: titleOverride ?? t("entities.assistants", { count: assistant ? 1 : 2 }),
+    };
+
+    if (assistant?.title) {
+      response.element = assistant.title.length > 25 ? `${assistant.title.substring(0, 25)}...` : assistant.title;
+    }
+
+    response.functions = [
+      <Button
+        key="new-assistant"
+        data-testid="assistant-new-button"
+        size="sm"
+        variant={`outline`}
+        onClick={(e) => {
+          e.preventDefault();
+          startNew();
+        }}
+      >
+        <PlusCircleIcon className="me-2 h-3.5 w-3.5" />
+        {t("features.assistant.new")}
+      </Button>,
+    ];
+
+    return response;
+  }, [assistant, startNew, t, titleOverride]);
 
   return (
     <AssistantContext.Provider value={value}>

package/src/features/assistant/contexts/__tests__/AssistantContext.spec.tsx

@@ -4,6 +4,8 @@ import { AssistantProvider, useAssistantContext } from "../AssistantContext";
 import { AssistantService } from "../../data/AssistantService";
 import { AssistantMessageService } from "../../../assistant-message/data/AssistantMessageService";
 import { useSocketContext } from "../../../../contexts/SocketContext";
+import { useSharedContext } from "../../../../contexts";
+import { render, screen, fireEvent } from "@testing-library/react";
 import type { JsonApiHydratedDataInterface } from "../../../../core";
 import { ModuleRegistry } from "../../../../core/registry/ModuleRegistry";
 import { DataClassRegistry } from "../../../../core/registry/DataClassRegistry";
@@ -636,4 +638,198 @@ describe("AssistantContext", () => {
 
     replaceState.mockRestore();
   });
+
+  it("setScope binds the first message's thread", async () => {
+    const replaceState = vi.spyOn(window.history, "replaceState").mockImplementation(() => {});
+    const create = vi.fn().mockResolvedValue(buildAssistantStub({ id: "a-scoped" }));
+    AssistantService.create = create;
+    AssistantMessageService.findByAssistant = vi.fn().mockResolvedValue([]);
+
+    const { result } = renderHook(() => useAssistantContext(), {
+      wrapper: ({ children }) => <AssistantProvider>{children}</AssistantProvider>,
+    });
+    expect(result.current.scope).toBeUndefined();
+
+    act(() => {
+      result.current.setScope({ type: "proceedings", id: "p1" });
+    });
+    expect(result.current.scope).toEqual({ type: "proceedings", id: "p1" });
+
+    await act(async () => {
+      await result.current.sendMessage("hello");
+    });
+
+    expect(create).toHaveBeenCalledWith(expect.objectContaining({ boundContent: { type: "proceedings", id: "p1" } }));
+
+    // Once a thread exists its scope is fixed.
+    act(() => {
+      result.current.setScope({ type: "proceedings", id: "p2" });
+    });
+    expect(result.current.scope).toEqual({ type: "proceedings", id: "p1" });
+    replaceState.mockRestore();
+  });
+
+  it("the provider scope prop still filters the thread list", async () => {
+    const findMany = vi.fn().mockResolvedValue([]);
+    AssistantService.findMany = findMany;
+
+    const scope = { type: "campaigns", id: "camp-1" };
+    const { result } = renderHook(() => useAssistantContext(), {
+      wrapper: ({ children }) => <AssistantProvider scope={scope}>{children}</AssistantProvider>,
+    });
+
+    await waitFor(() => expect(findMany).toHaveBeenCalledWith({ boundType: "campaigns", boundId: "camp-1" }));
+    expect(result.current.scope).toEqual(scope);
+
+    act(() => {
+      result.current.setScope({ type: "proceedings", id: "p1" });
+    });
+
+    expect(findMany).not.toHaveBeenCalledWith({ boundType: "proceedings", boundId: "p1" });
+    expect(findMany).toHaveBeenLastCalledWith({ boundType: "campaigns", boundId: "camp-1" });
+  });
+
+  it("page heading: thread title as element and a new-thread button that resets the thread", async () => {
+    const replaceState = vi.spyOn(window.history, "replaceState").mockImplementation(() => {});
+    const existing = buildAssistantDehydrated({ id: "a-h", title: "A thread title longer than 25 chars" });
+    let ctx: ReturnType<typeof useAssistantContext> | undefined;
+    function Probe() {
+      ctx = useAssistantContext();
+      const { title } = useSharedContext();
+      return (
+        <div>
+          <span data-testid="element">{title.element}</span>
+          {title.functions}
+        </div>
+      );
+    }
+    render(
+      <AssistantProvider dehydratedAssistant={existing}>
+        <Probe />
+      </AssistantProvider>,
+    );
+    expect(screen.getByTestId("element")).toHaveTextContent("A thread title longer tha...");
+    fireEvent.click(screen.getByTestId("assistant-new-button"));
+    await waitFor(() => expect(ctx?.assistant).toBeUndefined());
+    expect(screen.getByTestId("element")).toBeEmptyDOMElement();
+    expect(replaceState).toHaveBeenCalledWith(null, "", "/assistants");
+  });
+
+  describe("assistant:created", () => {
+    function fakeSocket() {
+      const handlers: Record<string, (payload: any) => void> = {};
+      const socket = {
+        on: vi.fn((evt: string, h: any) => {
+          handlers[evt] = h;
+        }),
+        off: vi.fn((evt: string) => {
+          delete handlers[evt];
+        }),
+      };
+      vi.mocked(useSocketContext).mockReturnValue({ socket, isConnected: true } as any);
+      return { socket, handlers };
+    }
+
+    function createdEvent(id: string, title: string) {
+      return {
+        assistant: {
+          data: { type: "assistants", id, attributes: { title, messageCount: 0 } },
+          included: [],
+        },
+      };
+    }
+
+    it("names the thread, lists it and swaps the URL before the create request returns", async () => {
+      const replaceState = vi.spyOn(window.history, "replaceState").mockImplementation(() => {});
+      const { socket, handlers } = fakeSocket();
+      let resolveCreate!: (value: unknown) => void;
+      AssistantService.create = vi.fn().mockImplementation(() => new Promise((resolve) => (resolveCreate = resolve)));
+      AssistantMessageService.findByAssistant = vi.fn().mockResolvedValue([buildMessageStub({ role: "user" })]);
+
+      const { result } = renderHook(() => useAssistantContext(), {
+        wrapper: ({ children }) => <AssistantProvider>{children}</AssistantProvider>,
+      });
+      await waitFor(() => expect(result.current.threadsLoading).toBe(false));
+
+      let sendPromise: Promise<void>;
+      await act(async () => {
+        sendPromise = result.current.sendMessage("first question");
+        await Promise.resolve();
+      });
+      expect(socket.on).toHaveBeenCalledWith("assistant:created", expect.any(Function));
+
+      await act(async () => {
+        handlers["assistant:created"]({ assistant: { data: null } });
+        handlers["assistant:created"](createdEvent("a-new", "Named thread"));
+        handlers["assistant:created"](createdEvent("a-other", "Second event"));
+      });
+
+      expect(result.current.assistant?.id).toBe("a-new");
+      expect(result.current.assistant?.title).toBe("Named thread");
+      expect(result.current.threads.map((t) => t.id)).toEqual(["a-new"]);
+      expect(replaceState).toHaveBeenCalledWith(null, "", "/assistants/a-new");
+      expect(result.current.sending).toBe(true);
+      expect(result.current.messages.map((m) => m.content)).toEqual(["first question"]);
+
+      await act(async () => {
+        resolveCreate(buildAssistantStub({ id: "a-new", title: "Named thread" }));
+        await sendPromise!;
+      });
+
+      expect(result.current.threads.filter((t) => t.id === "a-new")).toHaveLength(1);
+      expect(result.current.threads).toHaveLength(1);
+      expect(result.current.assistant?.id).toBe("a-new");
+      expect(socket.off).toHaveBeenCalledWith("assistant:created", expect.any(Function));
+      replaceState.mockRestore();
+    });
+
+    it("does not touch the URL from the event when manageUrl is false", async () => {
+      const replaceState = vi.spyOn(window.history, "replaceState").mockImplementation(() => {});
+      const { handlers } = fakeSocket();
+      let resolveCreate!: (value: unknown) => void;
+      AssistantService.create = vi.fn().mockImplementation(() => new Promise((resolve) => (resolveCreate = resolve)));
+      AssistantMessageService.findByAssistant = vi.fn().mockResolvedValue([]);
+
+      const { result } = renderHook(() => useAssistantContext(), {
+        wrapper: ({ children }) => <AssistantProvider manageUrl={false}>{children}</AssistantProvider>,
+      });
+      await waitFor(() => expect(result.current.threadsLoading).toBe(false));
+
+      let sendPromise: Promise<void>;
+      await act(async () => {
+        sendPromise = result.current.sendMessage("hello");
+        await Promise.resolve();
+      });
+      await act(async () => {
+        handlers["assistant:created"](createdEvent("a-sheet", "Sheet thread"));
+      });
+
+      expect(result.current.assistant?.id).toBe("a-sheet");
+      expect(result.current.threads.map((t) => t.id)).toEqual(["a-sheet"]);
+      expect(replaceState).not.toHaveBeenCalled();
+
+      await act(async () => {
+        resolveCreate(buildAssistantStub({ id: "a-sheet", title: "Sheet thread" }));
+        await sendPromise!;
+      });
+      expect(replaceState).not.toHaveBeenCalled();
+      replaceState.mockRestore();
+    });
+
+    it("does not subscribe to assistant:created when appending to an existing thread", async () => {
+      const { socket } = fakeSocket();
+      AssistantService.appendMessage = vi.fn().mockResolvedValue([]);
+      const { result } = renderHook(() => useAssistantContext(), {
+        wrapper: ({ children }) => (
+          <AssistantProvider dehydratedAssistant={buildAssistantDehydrated({ id: "a-ex" })}>
+            {children}
+          </AssistantProvider>
+        ),
+      });
+      await act(async () => {
+        await result.current.sendMessage("follow-up");
+      });
+      expect(socket.on).not.toHaveBeenCalledWith("assistant:created", expect.any(Function));
+    });
+  });
 });

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

@@ -1,21 +1,43 @@
 "use client";
 
+import type { ReactNode } from "react";
+import type { MentionRenderer } from "../../assistant-message/components/MessageItem";
 import type { AssistantMessageInterface } from "../../assistant-message/data/AssistantMessageInterface";
 import { AssistantContainer } from "../../assistant/components/containers/AssistantContainer";
+import type { AssistantInterface } from "../../assistant/data/AssistantInterface";
 import { useAssistantContext } from "../../assistant/contexts/AssistantContext";
 import { ApprovalActionCard } from "./ApprovalActionCard";
 
+interface Props {
+  renderMention?: MentionRenderer;
+  embedded?: boolean;
+  renderScopePicker?: () => ReactNode;
+  renderThreadBadge?: (thread: AssistantInterface) => ReactNode;
+  showOperatorToggle?: boolean;
+}
+
 /**
  * AssistantContainer with the operator approval card wired in. The container
  * renders `approval-request` messages through the `renderApprovalAction` slot,
  * which stays a slot so the plain chat container has no dependency on the
  * AssistantAction module. Must be rendered inside an `AssistantProvider`.
  */
-export function AssistantContainerWithApprovals() {
+export function AssistantContainerWithApprovals({
+  renderMention,
+  embedded,
+  renderScopePicker,
+  renderThreadBadge,
+  showOperatorToggle,
+}: Props = {}) {
   const ctx = useAssistantContext();
 
   return (
     <AssistantContainer
+      renderMention={renderMention}
+      embedded={embedded}
+      renderScopePicker={renderScopePicker}
+      renderThreadBadge={renderThreadBadge}
+      showOperatorToggle={showOperatorToggle}
       renderApprovalAction={(message: AssistantMessageInterface) =>
         message.actionId ? (
           <ApprovalActionCard

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { ModuleRegistry } from "../../../core/registry/ModuleRegistry";
+import { usePageUrlGenerator } from "../../../hooks";
+import { Link } from "../../../shadcnui";
+import type { MentionRenderer } from "./MessageItem";
+
+function EntityMentionLinkView({ type, id, alias }: { type: string; id: string; alias: string }) {
+  const generate = usePageUrlGenerator();
+
+  let module;
+  try {
+    module = ModuleRegistry.findByName(type);
+  } catch {
+    return <>{alias}</>;
+  }
+  if (!module?.pageUrl) return <>{alias}</>;
+
+  return <Link href={generate({ page: module, id })}>{alias}</Link>;
+}
+
+/**
+ * Default mention renderer for assistant answers: a `mention://<type>/<id>`
+ * link becomes a link to the entity's page when `<type>` is a registered
+ * module with a `pageUrl`, and plain text otherwise. Rendered as a component
+ * so the URL hook runs inside React's component tree.
+ */
+export const EntityMentionLink: MentionRenderer = (p) => <EntityMentionLinkView {...p} />;

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}
           />