@btst/stack 3.1.2 → 4.1.0

package/dist/shared/{stack.BggTHKlo.d.mts → stack.Dvy7FmaA.d.mts}

@@ -2,7 +2,7 @@ import * as _btst_stack_plugins_client from '@btst/stack/plugins/client';
 import { createApiClient } from '@btst/stack/plugins/client';
 import * as zod from 'zod';
 import { z } from 'zod';
-import { c as createPostSchema, u as updatePostSchema } from './stack.CKc_Bais.mjs';
+import { c as createPostSchema, u as updatePostSchema } from './stack.Csi-4Mgz.mjs';
 import { P as Post, T as Tag, S as SerializedPost, a as SerializedTag } from './stack.Dsatjh0B.mjs';
 import * as _btst_stack_plugins_api from '@btst/stack/plugins/api';
 import { DeepReadonly, OperationContext, OperationErrorContext } from '@btst/stack/plugins/api';
@@ -89,12 +89,6 @@ declare const NextPreviousPostsQuerySchema: z.ZodObject<{
     date: z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>;
 }, z.core.$strip>;
 declare const CreatePostOperationInputSchema: z.ZodObject<{
-    slug: z.ZodOptional<z.ZodString>;
-    title: z.ZodString;
-    content: z.ZodString;
-    excerpt: z.ZodString;
-    image: z.ZodOptional<z.ZodString>;
-    published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
     tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
         name: z.ZodString;
     }, z.core.$strip>, z.ZodObject<{
@@ -102,6 +96,12 @@ declare const CreatePostOperationInputSchema: z.ZodObject<{
         name: z.ZodString;
         slug: z.ZodString;
     }, z.core.$strip>]>>>>;
+    slug: z.ZodOptional<z.ZodString>;
+    title: z.ZodString;
+    content: z.ZodString;
+    excerpt: z.ZodString;
+    image: z.ZodOptional<z.ZodString>;
+    published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
     publishedAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
     createdAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
     updatedAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
@@ -109,12 +109,6 @@ declare const CreatePostOperationInputSchema: z.ZodObject<{
 declare const UpdatePostOperationInputSchema: z.ZodObject<{
     id: z.ZodString;
     data: z.ZodObject<{
-        slug: z.ZodString;
-        title: z.ZodString;
-        content: z.ZodString;
-        excerpt: z.ZodString;
-        image: z.ZodOptional<z.ZodString>;
-        published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
         tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
             name: z.ZodString;
         }, z.core.$strip>, z.ZodObject<{
@@ -122,6 +116,12 @@ declare const UpdatePostOperationInputSchema: z.ZodObject<{
             name: z.ZodString;
             slug: z.ZodString;
         }, z.core.$strip>]>>>>;
+        slug: z.ZodString;
+        title: z.ZodString;
+        content: z.ZodString;
+        excerpt: z.ZodString;
+        image: z.ZodOptional<z.ZodString>;
+        published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
         publishedAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
         createdAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
         updatedAt: z.ZodOptional<z.ZodPipe<z.ZodCoercedDate<unknown>, z.ZodTransform<string, Date>>>;
@@ -386,9 +386,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
             title: string;
             content: string;
             excerpt: string;
-            slug?: string | undefined;
-            image?: string | undefined;
-            published?: boolean | undefined;
             tags?: ({
                 name: string;
             } | {
@@ -396,6 +393,9 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
                 name: string;
                 slug: string;
             })[] | undefined;
+            slug?: string | undefined;
+            image?: string | undefined;
+            published?: boolean | undefined;
             publishedAt?: unknown;
             createdAt?: unknown;
             updatedAt?: unknown;
@@ -403,9 +403,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
             title: string;
             content: string;
             excerpt: string;
-            slug?: string | undefined;
-            image?: string | undefined;
-            published?: boolean | undefined;
             tags?: ({
                 name: string;
             } | {
@@ -413,6 +410,9 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
                 name: string;
                 slug: string;
             })[] | undefined;
+            slug?: string | undefined;
+            image?: string | undefined;
+            published?: boolean | undefined;
             publishedAt?: unknown;
             createdAt?: unknown;
             updatedAt?: unknown;
@@ -448,8 +448,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
             title: string;
             content: string;
             excerpt: string;
-            image?: string | undefined;
-            published?: boolean | undefined;
             tags?: ({
                 name: string;
             } | {
@@ -457,6 +455,8 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
                 name: string;
                 slug: string;
             })[] | undefined;
+            image?: string | undefined;
+            published?: boolean | undefined;
             publishedAt?: unknown;
             createdAt?: unknown;
             updatedAt?: unknown;
@@ -465,8 +465,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
             title: string;
             content: string;
             excerpt: string;
-            image?: string | undefined;
-            published?: boolean | undefined;
             tags?: ({
                 name: string;
             } | {
@@ -474,6 +472,8 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
                 name: string;
                 slug: string;
             })[] | undefined;
+            image?: string | undefined;
+            published?: boolean | undefined;
             publishedAt?: unknown;
             createdAt?: unknown;
             updatedAt?: unknown;
@@ -627,12 +627,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
         total: number;
     }, false>;
     readonly createPost: _btst_stack_plugins_api.Operation<zod.ZodObject<{
-        slug: zod.ZodOptional<zod.ZodString>;
-        title: zod.ZodString;
-        content: zod.ZodString;
-        excerpt: zod.ZodString;
-        image: zod.ZodOptional<zod.ZodString>;
-        published: zod.ZodDefault<zod.ZodOptional<zod.ZodBoolean>>;
         tags: zod.ZodDefault<zod.ZodOptional<zod.ZodArray<zod.ZodUnion<readonly [zod.ZodObject<{
             name: zod.ZodString;
         }, zod_v4_core.$strip>, zod.ZodObject<{
@@ -640,6 +634,12 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
             name: zod.ZodString;
             slug: zod.ZodString;
         }, zod_v4_core.$strip>]>>>>;
+        slug: zod.ZodOptional<zod.ZodString>;
+        title: zod.ZodString;
+        content: zod.ZodString;
+        excerpt: zod.ZodString;
+        image: zod.ZodOptional<zod.ZodString>;
+        published: zod.ZodDefault<zod.ZodOptional<zod.ZodBoolean>>;
         publishedAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;
         createdAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;
         updatedAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;
@@ -673,12 +673,6 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
     readonly updatePost: _btst_stack_plugins_api.Operation<zod.ZodObject<{
         id: zod.ZodString;
         data: zod.ZodObject<{
-            slug: zod.ZodString;
-            title: zod.ZodString;
-            content: zod.ZodString;
-            excerpt: zod.ZodString;
-            image: zod.ZodOptional<zod.ZodString>;
-            published: zod.ZodDefault<zod.ZodOptional<zod.ZodBoolean>>;
             tags: zod.ZodDefault<zod.ZodOptional<zod.ZodArray<zod.ZodUnion<readonly [zod.ZodObject<{
                 name: zod.ZodString;
             }, zod_v4_core.$strip>, zod.ZodObject<{
@@ -686,6 +680,12 @@ declare const blogBackendPlugin: (options?: BlogBackendOptions) => _btst_stack_p
                 name: zod.ZodString;
                 slug: zod.ZodString;
             }, zod_v4_core.$strip>]>>>>;
+            slug: zod.ZodString;
+            title: zod.ZodString;
+            content: zod.ZodString;
+            excerpt: zod.ZodString;
+            image: zod.ZodOptional<zod.ZodString>;
+            published: zod.ZodDefault<zod.ZodOptional<zod.ZodBoolean>>;
             publishedAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;
             createdAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;
             updatedAt: zod.ZodOptional<zod.ZodPipe<zod.ZodCoercedDate<unknown>, zod.ZodTransform<string, Date>>>;

package/dist/shared/{stack.5_zzCejP.d.cts → stack.rVF0f509.d.cts}

@@ -204,6 +204,26 @@ interface AiChatPluginOverrides {
      * ```
      */
     toolRenderers?: Record<string, ToolCallRenderer>;
+    /**
+     * Optional class names merged onto specific UI elements.
+     * Use these for targeted styling without replacing whole components.
+     */
+    classNames?: {
+        /** Root of `ChatLayout` (full-page or widget mode) */
+        container?: string;
+        /** Conversation sidebar root */
+        sidebar?: string;
+        /** Wrapper around the list of messages */
+        messageList?: string;
+        /** Each message row (user and assistant) */
+        message?: string;
+        /** The bubble of a user message */
+        userMessage?: string;
+        /** The bubble of an assistant message */
+        assistantMessage?: string;
+        /** The composer form at the bottom of the chat */
+        input?: string;
+    };
     /**
      * Called when a route is rendered
      * @param routeName - Name of the route (e.g., 'chat', 'chatConversation')

package/dist/shared/{stack.5_zzCejP.d.mts → stack.rVF0f509.d.mts}

@@ -204,6 +204,26 @@ interface AiChatPluginOverrides {
      * ```
      */
     toolRenderers?: Record<string, ToolCallRenderer>;
+    /**
+     * Optional class names merged onto specific UI elements.
+     * Use these for targeted styling without replacing whole components.
+     */
+    classNames?: {
+        /** Root of `ChatLayout` (full-page or widget mode) */
+        container?: string;
+        /** Conversation sidebar root */
+        sidebar?: string;
+        /** Wrapper around the list of messages */
+        messageList?: string;
+        /** Each message row (user and assistant) */
+        message?: string;
+        /** The bubble of a user message */
+        userMessage?: string;
+        /** The bubble of an assistant message */
+        assistantMessage?: string;
+        /** The composer form at the bottom of the chat */
+        input?: string;
+    };
     /**
      * Called when a route is rendered
      * @param routeName - Name of the route (e.g., 'chat', 'chatConversation')

package/dist/shared/{stack.5_zzCejP.d.ts → stack.rVF0f509.d.ts}

@@ -204,6 +204,26 @@ interface AiChatPluginOverrides {
      * ```
      */
     toolRenderers?: Record<string, ToolCallRenderer>;
+    /**
+     * Optional class names merged onto specific UI elements.
+     * Use these for targeted styling without replacing whole components.
+     */
+    classNames?: {
+        /** Root of `ChatLayout` (full-page or widget mode) */
+        container?: string;
+        /** Conversation sidebar root */
+        sidebar?: string;
+        /** Wrapper around the list of messages */
+        messageList?: string;
+        /** Each message row (user and assistant) */
+        message?: string;
+        /** The bubble of a user message */
+        userMessage?: string;
+        /** The bubble of an assistant message */
+        assistantMessage?: string;
+        /** The composer form at the bottom of the chat */
+        input?: string;
+    };
     /**
      * Called when a route is rendered
      * @param routeName - Name of the route (e.g., 'chat', 'chatConversation')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "3.1.2",
+  "version": "4.1.0",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",
@@ -1067,7 +1067,7 @@
     }
   },
   "dependencies": {
-    "@btst/db": "2.2.3",
+    "@btst/db": "3.0.0",
     "@milkdown/crepe": "^7.17.1",
     "@milkdown/kit": "^7.17.1",
     "remend": "^1.0.1",
@@ -1088,7 +1088,7 @@
     "@tanstack/react-router": ">=1.0.0",
     "@vercel/blob": ">=0.14.0",
     "ai": ">=5.0.0",
-    "better-call": "1.3.6",
+    "better-call": "1.4.0",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.1.0",
     "cmdk": ">=1.1.0",
@@ -1097,8 +1097,8 @@
     "katex": ">=0.16.0",
     "lucide-react": ">=0.469.0",
     "next": ">=15.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "react": ">=19.2.6",
+    "react-dom": ">=19.2.6",
     "react-error-boundary": ">=4.0.0",
     "react-hook-form": ">=7.55.0",
     "react-markdown": ">=9.1.0",
@@ -1110,7 +1110,7 @@
     "remark-math": ">=6.0.0",
     "sonner": ">=2.0.0",
     "tailwind-merge": ">=2.6.0",
-    "tailwindcss": ">=3.0.0",
+    "tailwindcss": ">=4.3.2",
     "zod": ">=4.2.0"
   },
   "peerDependenciesMeta": {
@@ -1137,7 +1137,10 @@
     "@ai-sdk/react": "^2.0.94",
     "@aws-sdk/client-s3": "^3.1011.0",
     "@aws-sdk/s3-request-presigner": "^3.1011.0",
-    "@btst/adapter-memory": "2.2.3",
+    "@better-auth/core": "1.7.6",
+    "@better-auth/utils": "0.4.2",
+    "@better-fetch/fetch": "1.3.2",
+    "@btst/adapter-memory": "3.0.0",
     "@btst/yar": "1.3.2",
     "@tanstack/react-router": "1.168.10",
     "@types/react": "^19.0.0",
@@ -1146,6 +1149,7 @@
     "@vercel/blob": "^0.27.3",
     "@workspace/ui": "workspace:*",
     "ai": "^5.0.94",
+    "better-auth": "1.7.6",
     "better-call": "catalog:",
     "jsdom": "^28.1.0",
     "knip": "^5.61.2",

package/src/__tests__/package-metadata.test.ts

@@ -11,7 +11,7 @@ import { z } from "zod";
 const execFileAsync = promisify(execFile);
 
 describe("published dependency alignment", () => {
-	it("uses the Better DB release that shares the Better Auth 1.6.16 cohort", async () => {
+	it("uses the Better DB release that shares the Better Auth 1.7.6 cohort", async () => {
 		const manifest = JSON.parse(
 			await readFile(resolve("package.json"), "utf8"),
 		) as {
@@ -20,11 +20,11 @@ describe("published dependency alignment", () => {
 			peerDependencies?: Record<string, string>;
 		};
 
-		expect(manifest.dependencies?.["@btst/db"]).toBe("2.2.3");
-		expect(manifest.devDependencies?.["@btst/adapter-memory"]).toBe("2.2.3");
+		expect(manifest.dependencies?.["@btst/db"]).toBe("3.0.0");
+		expect(manifest.devDependencies?.["@btst/adapter-memory"]).toBe("3.0.0");
 		expect(manifest.devDependencies?.["@btst/yar"]).toBe("1.3.2");
 		expect(manifest.peerDependencies?.["@btst/yar"]).toBe(">=1.3.2");
-		expect(manifest.peerDependencies?.["better-call"]).toBe("1.3.6");
+		expect(manifest.peerDependencies?.["better-call"]).toBe("1.4.0");
 	});
 });
 

package/src/plugins/ai-chat/__tests__/classnames-overrides.test.tsx

@@ -0,0 +1,248 @@
+// @vitest-environment jsdom
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+// Core primitives MUST be imported from the package entry (not relative src
+// paths) so they share module identity — and React context — with the plugin
+// components, which resolve `@btst/stack/*` via package self-reference.
+import { StackProvider } from "@btst/stack/context";
+import type { UIMessage } from "ai";
+import { ChatInput } from "../client/components/chat-input";
+import { ChatLayout } from "../client/components/chat-layout";
+import { ChatMessage } from "../client/components/chat-message";
+import { aiChatClientPlugin } from "../client/plugin";
+import type { SerializedConversation } from "../types";
+import { createTestClientStack } from "../../../__tests__/client-stack-test-utils";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+(globalThis as any).ResizeObserver ??= class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+Element.prototype.scrollIntoView ??= () => {};
+
+const mocks = vi.hoisted(() => ({
+	useChat: vi.fn(),
+	useConversation: vi.fn(),
+	useConversations: vi.fn(),
+	useRenameConversationForm: vi.fn(),
+	useDeleteConversation: vi.fn(),
+	useAiChatIdentityPartition: vi.fn(),
+}));
+
+vi.mock("@ai-sdk/react", () => ({ useChat: mocks.useChat }));
+vi.mock("../client/hooks/chat-hooks", () => ({
+	useAiChatIdentityPartition: mocks.useAiChatIdentityPartition,
+	useConversation: mocks.useConversation,
+	useConversations: mocks.useConversations,
+	useRenameConversationForm: mocks.useRenameConversationForm,
+	useDeleteConversation: mocks.useDeleteConversation,
+}));
+vi.mock("../client/context/page-ai-context", () => ({
+	usePageAIContext: () => undefined,
+}));
+// Markdown rendering is unrelated to class wiring and drags in highlight/katex.
+vi.mock("@workspace/ui/components/markdown-content", () => ({
+	MarkdownContent: ({ content }: { content: string }) => <div>{content}</div>,
+}));
+
+const CLASS_NAMES = {
+	container: "bg-red-100",
+	sidebar: "bg-blue-100",
+	messageList: "bg-yellow-50",
+	message: "text-purple-700",
+	userMessage: "border-4 border-orange-500",
+	assistantMessage: "border-4 border-green-500",
+	input: "bg-pink-100",
+} as const;
+
+const conversation: SerializedConversation = {
+	id: "conv-1",
+	userId: "owner-1",
+	title: "First conversation",
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-02").toISOString(),
+};
+
+const userMessage: UIMessage = {
+	id: "user-1",
+	role: "user",
+	parts: [{ type: "text", text: "Hi there" }],
+};
+const assistantMessage: UIMessage = {
+	id: "assistant-1",
+	role: "assistant",
+	parts: [{ type: "text", text: "Hello back" }],
+};
+
+let container: HTMLDivElement;
+let root: Root;
+let queryClient: QueryClient;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+	queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	mocks.useAiChatIdentityPartition.mockReturnValue("anonymous");
+	mocks.useChat.mockReturnValue({
+		messages: [userMessage, assistantMessage],
+		sendMessage: vi.fn(),
+		status: "ready",
+		error: null,
+		setMessages: vi.fn(),
+		regenerate: vi.fn(),
+		addToolOutput: vi.fn(),
+		stop: vi.fn(),
+	});
+	mocks.useConversation.mockReturnValue({
+		conversation: null,
+		isLoading: false,
+		error: null,
+		refetch: vi.fn(),
+	});
+	mocks.useConversations.mockReturnValue({
+		conversations: [conversation],
+		isLoading: false,
+		error: null,
+		refetch: vi.fn(),
+	});
+	mocks.useRenameConversationForm.mockReturnValue({
+		submit: vi.fn(),
+		isSubmitting: false,
+		error: null,
+		fieldErrors: {},
+		clearErrors: vi.fn(),
+	});
+	mocks.useDeleteConversation.mockReturnValue({
+		mutateAsync: vi.fn(),
+		isPending: false,
+	});
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+	vi.clearAllMocks();
+});
+
+async function render(ui: React.ReactElement) {
+	await act(async () => {
+		root.render(
+			<QueryClientProvider client={queryClient}>
+				<StackProvider
+					stack={createTestClientStack(
+						{ aiChat: aiChatClientPlugin() },
+						queryClient,
+					)}
+					overrides={{ aiChat: { classNames: CLASS_NAMES } }}
+				>
+					{ui}
+				</StackProvider>
+			</QueryClientProvider>,
+		);
+	});
+}
+
+function query(selector: string): HTMLElement {
+	const el = container.querySelector<HTMLElement>(selector);
+	expect(el, `expected to find ${selector}`).toBeTruthy();
+	return el!;
+}
+
+describe("ai-chat classNames overrides (issue #36)", () => {
+	it("applies message, userMessage and assistantMessage to a user message", async () => {
+		await render(<ChatMessage message={userMessage} />);
+
+		const row = query('[data-testid="chat-message"][data-role="user"]');
+		expect(row.className).toContain(CLASS_NAMES.message);
+		expect(row.className).toContain("justify-end");
+
+		const bubble = query('[data-testid="chat-message-bubble"]');
+		expect(bubble.className).toContain("border-orange-500");
+		expect(bubble.className).not.toContain("border-green-500");
+		// The role-specific base styling is preserved.
+		expect(bubble.className).toContain("bg-primary");
+	});
+
+	it("applies assistantMessage (not userMessage) to an assistant message", async () => {
+		await render(<ChatMessage message={assistantMessage} />);
+
+		const row = query('[data-testid="chat-message"][data-role="assistant"]');
+		expect(row.className).toContain(CLASS_NAMES.message);
+		expect(row.className).toContain("justify-start");
+
+		const bubble = query('[data-testid="chat-message-bubble"]');
+		expect(bubble.className).toContain("border-green-500");
+		expect(bubble.className).not.toContain("border-orange-500");
+		expect(bubble.className).toContain("bg-muted");
+	});
+
+	it("applies classNames.input to the composer form", async () => {
+		await render(
+			<ChatInput
+				handleInputChange={() => {}}
+				handleSubmit={() => {}}
+				isLoading={false}
+			/>,
+		);
+
+		const form = query('[data-testid="chat-input-form"]');
+		expect(form.tagName).toBe("FORM");
+		expect(form.className).toContain(CLASS_NAMES.input);
+		expect(form.className).toContain("space-y-2");
+	});
+
+	it("applies container, sidebar and messageList in the full layout", async () => {
+		await render(<ChatLayout conversationId={conversation.id} />);
+
+		const layout = query('[data-testid="chat-layout"]');
+		expect(layout.className).toContain(CLASS_NAMES.container);
+		expect(layout.className).toContain("overflow-hidden");
+
+		const sidebar = query('[data-testid="chat-sidebar"]');
+		expect(sidebar.className).toContain(CLASS_NAMES.sidebar);
+		expect(sidebar.className).toContain("border-r");
+
+		const list = query('[data-testid="chat-message-list"]');
+		expect(list.className).toContain(CLASS_NAMES.messageList);
+		expect(list.className).toContain("flex-col");
+	});
+
+	it("applies classNames.container to the widget root", async () => {
+		await render(<ChatLayout layout="widget" />);
+
+		const trigger = query('[data-testid="widget-trigger"]');
+		const widgetRoot = trigger.parentElement!;
+		expect(widgetRoot.className).toContain(CLASS_NAMES.container);
+		expect(widgetRoot.className).toContain("items-end");
+	});
+
+	it("leaves base classes untouched when no classNames override is supplied", async () => {
+		await act(async () => {
+			root.render(
+				<QueryClientProvider client={queryClient}>
+					<StackProvider
+						stack={createTestClientStack(
+							{ aiChat: aiChatClientPlugin() },
+							queryClient,
+						)}
+					>
+						<ChatMessage message={userMessage} />
+					</StackProvider>
+				</QueryClientProvider>,
+			);
+		});
+
+		const bubble = query('[data-testid="chat-message-bubble"]');
+		expect(bubble.className).toContain("bg-primary");
+		expect(bubble.className).not.toContain("border-orange-500");
+	});
+});