Fix client script warning from theme provider

Author: Rieranthony

apps/api/src/rest/routers/website.test.ts

@@ -105,7 +105,7 @@ describe("website route GET /", () => {
 		listWebsiteAccessUsersMock.mockResolvedValue([]);
 	});
 
-	it("uses website-access users, normalizes blank names, and omits public email", async () => {
+	it("uses website-access users, normalizes blank names, and includes email for avatar fallbacks", async () => {
 		const { db, findManyMock, website } = createWebsiteContext();
 		findManyMock.mockResolvedValue([{ id: "ai-1", name: "Support AI" }]);
 		listWebsiteAccessUsersMock.mockResolvedValue([
@@ -151,17 +151,18 @@ describe("website route GET /", () => {
 			{
 				id: "user-1",
 				name: null,
+				email: "hidden@example.com",
 				image: null,
 				lastSeenAt: null,
 			},
 			{
 				id: "user-2",
 				name: "Alice",
+				email: "alice@example.com",
 				image: null,
 				lastSeenAt: "2026-03-03T04:05:06.000Z",
 			},
 		]);
-		expect(payload.availableHumanAgents[0]).not.toHaveProperty("email");
 		expect(payload.lastOnlineAt).toBe("2026-03-03T04:05:06.000Z");
 	});
 

apps/api/src/rest/routers/website.ts

@@ -102,6 +102,7 @@ websiteRouter.openapi(
 			.map((humanAgent) => ({
 				id: humanAgent.userId,
 				name: normalizeHumanAgentName(humanAgent.name),
+				email: humanAgent.email ?? null,
 				image: humanAgent.image,
 				lastSeenAt: humanAgent.lastSeenAt?.toISOString() ?? null,
 			}));

apps/web/content/docs/advanced/primitives.mdx

@@ -55,7 +55,7 @@ function CustomWidget() {
       <Primitives.Window>
         {({ close }) =>
           isOpen ? (
-            <div className="fixed bottom-20 right-4 w-96 rounded-lg bg-white shadow-xl">
+            <div className="fixed bottom-20 right-4 w-96 border bg-white shadow-xl">
               <button onClick={close} type="button">
                 Close
               </button>

apps/web/content/docs/support-component/customization.mdx

@@ -36,7 +36,7 @@ import { Support } from "@cossistant/react";
   }}
   slotProps={{
     content: {
-      className: "rounded-[28px]",
+      className: "border border-neutral-200 shadow-2xl",
     },
   }}
 />;
@@ -68,24 +68,38 @@ Use `slots.trigger` when the launcher is the only thing that should change.
 import { Support, type SupportTriggerSlotProps } from "@cossistant/react";
 import * as React from "react";
 
-const CustomBubble = React.forwardRef<HTMLButtonElement, SupportTriggerSlotProps>(
-  function CustomBubble({ className, isOpen, toggle, unreadCount, ...props }, ref) {
+function mergeClassNames(...classes: Array<string | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const ClassicBubble = React.forwardRef<HTMLButtonElement, SupportTriggerSlotProps>(
+  function ClassicBubbleTrigger(
+    { className, isOpen, isTyping: _isTyping, toggle, unreadCount, ...props },
+    ref
+  ) {
     return (
       <button
         {...props}
-        className={className}
+        className={mergeClassNames(
+          "relative flex size-14 items-center justify-center border border-black bg-black font-medium text-white text-sm shadow-xl transition-transform hover:scale-[1.02]",
+          className
+        )}
         onClick={toggle}
         ref={ref}
         type="button"
       >
         {isOpen ? "Close" : "Chat"}
-        {unreadCount > 0 ? ` (${unreadCount})` : null}
+        {unreadCount > 0 ? (
+          <span className="-right-1 -top-1 absolute flex size-5 items-center justify-center border border-white bg-orange-500 text-[11px]">
+            {unreadCount}
+          </span>
+        ) : null}
       </button>
     );
   }
 );
 
-<Support slots={{ trigger: CustomBubble }} />;
+<Support slots={{ trigger: ClassicBubble }} />;
 ```
 
 <ComponentPreview name="support-classic-bubble" />
@@ -98,17 +112,35 @@ The same slot can feel more like an in-product button instead of a floating chat
 import { Support, type SupportTriggerSlotProps } from "@cossistant/react";
 import * as React from "react";
 
+function mergeClassNames(...classes: Array<string | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
+
 const PillBubble = React.forwardRef<HTMLButtonElement, SupportTriggerSlotProps>(
-  function PillBubble({ className, isTyping, toggle, ...props }, ref) {
+  function PillBubble(
+    {
+      className,
+      isOpen: _isOpen,
+      isTyping,
+      unreadCount: _unreadCount,
+      toggle,
+      ...props
+    },
+    ref
+  ) {
     return (
       <button
         {...props}
-        className={className}
+        className={mergeClassNames(
+          "flex h-12 items-center gap-2 border border-black bg-white px-4 font-medium text-black text-sm shadow-xl transition-transform hover:scale-[1.01]",
+          className
+        )}
         onClick={toggle}
         ref={ref}
         type="button"
       >
-        {isTyping ? "Support is typing..." : "Open support"}
+        <span className="size-2 bg-orange-500" />
+        <span>{isTyping ? "Support is typing..." : "Open support"}</span>
       </button>
     );
   }
@@ -154,7 +186,7 @@ function CustomHomePage({
 <Support
   slotProps={{
     content: {
-      className: "rounded-3xl border shadow-2xl",
+      className: "border shadow-2xl",
     },
   }}
   slots={{ homePage: CustomHomePage }}

apps/web/content/docs/support-component/hooks.mdx

@@ -52,11 +52,11 @@ export function CustomSupportButton() {
   return (
     <button
       onClick={toggle}
-      className="relative rounded-lg bg-primary px-4 py-2 text-white"
+      className="relative border border-primary bg-primary px-4 py-2 text-white"
     >
       Support
       {unreadCount > 0 && (
-        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs">
+        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center bg-red-500 text-xs">
           {unreadCount}
         </span>
       )}

apps/web/content/docs/support-component/routing.mdx

@@ -42,7 +42,7 @@ function CustomHomePage() {
       </p>
 
       <button
-        className="rounded-xl border px-4 py-3 text-left"
+        className="border px-4 py-3 text-left"
         onClick={() =>
           navigate({
             page: "CONVERSATION",
@@ -81,7 +81,7 @@ import { Support } from "@cossistant/react";
 
 export default function SupportPanel() {
   return (
-    <div className="h-[560px] overflow-hidden rounded-[24px] border">
+    <div className="h-[560px] overflow-hidden border">
       <Support mode="responsive" />
     </div>
   );
@@ -108,7 +108,7 @@ export default function App() {
         <button type="button">Compose support</button>
       </Support.Trigger>
 
-      <Support.Content className="rounded-3xl border shadow-2xl">
+      <Support.Content className="border shadow-2xl">
         <Support.Router>
           <Support.Page component={LaunchChecklistPage} name="HOME" />
         </Support.Router>

apps/web/content/docs/support-component/theme.mdx

@@ -14,6 +14,17 @@ search:
     - --co-theme-radius
 ---
 
+export function ColorSwatch({ value, label = value }) {
+  return (
+    <span
+      aria-label={label}
+      className="inline-block size-4 border border-dashed border-border align-middle"
+      style={{ background: value }}
+      title={label}
+    />
+  );
+}
+
 You can make the widget feel like part of your product without replacing any components.
 
 ## Use this when
@@ -33,7 +44,7 @@ Set the widget tokens once and keep the default UI.
   --co-theme-background: #ffffff;
   --co-theme-foreground: #111827;
   --co-theme-border: #e5e7eb;
-  --co-theme-radius: 18px;
+  --co-theme-radius: 0px;
 }
 ```
 
@@ -79,23 +90,46 @@ This keeps the widget aligned with the rest of your app instead of inventing a s
 
 ## Core token reference
 
-| Variable                        | Default (Light)    | Default (Dark)     |
-| ------------------------------- | ------------------ | ------------------ |
-| `--co-theme-background`         | `oklch(99% 0 0)`   | `oklch(15.5% 0 0)` |
-| `--co-theme-foreground`         | `oklch(14.5% 0 0)` | `oklch(98.5% 0 0)` |
-| `--co-theme-primary`            | `oklch(20.5% 0 0)` | `oklch(98.5% 0 0)` |
-| `--co-theme-primary-foreground` | `oklch(98.5% 0 0)` | `oklch(20.5% 0 0)` |
-| `--co-theme-border`             | `oklch(92.2% 0 0)` | `oklch(26.9% 0 0)` |
-| `--co-theme-muted`              | Color-mixed        | Color-mixed        |
-| `--co-theme-muted-foreground`   | Color-mixed        | Color-mixed        |
-| `--co-theme-radius`             | `0.375rem`         | `0.375rem`         |
+| Variable                        | Light preview                                             | Default (Light)    | Dark preview                                              | Default (Dark)     |
+| ------------------------------- | --------------------------------------------------------- | ------------------ | --------------------------------------------------------- | ------------------ |
+| `--co-theme-background`         | <ColorSwatch value="oklch(99% 0 0)" />                   | `oklch(99% 0 0)`   | <ColorSwatch value="oklch(15.5% 0 0)" />                 | `oklch(15.5% 0 0)` |
+| `--co-theme-foreground`         | <ColorSwatch value="oklch(20.5% 0 0)" />                 | `oklch(20.5% 0 0)` | <ColorSwatch value="oklch(95% 0 0)" />                   | `oklch(95% 0 0)`   |
+| `--co-theme-primary`            | <ColorSwatch value="oklch(14.5% 0 0)" />                 | `oklch(14.5% 0 0)` | <ColorSwatch value="oklch(98.5% 0 0)" />                 | `oklch(98.5% 0 0)` |
+| `--co-theme-primary-foreground` | <ColorSwatch value="oklch(98.5% 0 0)" />                 | `oklch(98.5% 0 0)` | <ColorSwatch value="oklch(14.5% 0 0)" />                 | `oklch(14.5% 0 0)` |
+| `--co-theme-border`             | <ColorSwatch value="oklch(92.2% 0 0)" />                 | `oklch(92.2% 0 0)` | <ColorSwatch value="oklch(26.9% 0 0)" />                 | `oklch(26.9% 0 0)` |
+| `--co-theme-muted`              | <ColorSwatch value="color-mix(in oklch, oklch(99% 0 0) 85%, oklch(20.5% 0 0))" /> | Color-mixed        | <ColorSwatch value="color-mix(in oklch, oklch(15.5% 0 0) 55%, oklch(95% 0 0))" /> | Color-mixed        |
+| `--co-theme-muted-foreground`   | <ColorSwatch value="color-mix(in oklch, oklch(20.5% 0 0) 70%, white)" /> | Color-mixed        | <ColorSwatch value="color-mix(in oklch, oklch(95% 0 0) 65%, white)" /> | Color-mixed        |
+| `--co-theme-radius`             | -                                                         | `0.375rem`         | -                                                         | `0.375rem`         |
 
 ## Extra tokens
 
 Use these when the core tokens are not enough:
 
-- Status colors: `--co-theme-destructive`, `--co-theme-success`, `--co-theme-warning`, `--co-theme-neutral`
-- Avatar accents: `--co-theme-pink`, `--co-theme-yellow`, `--co-theme-blue`, `--co-theme-orange`
-- Background shades: `--co-theme-background-50`, `--co-theme-background-100`, `--co-theme-background-200`, `--co-theme-background-300`
+### Status colors
+
+| Variable                 | Light preview                              | Default (Light)          | Dark preview                               | Default (Dark)            |
+| ------------------------ | ------------------------------------------ | ------------------------ | ------------------------------------------ | ------------------------- |
+| `--co-theme-destructive` | <ColorSwatch value="oklch(57.7% 0.245 27.325)" /> | `oklch(57.7% 0.245 27.325)` | <ColorSwatch value="oklch(39.6% 0.141 25.723)" /> | `oklch(39.6% 0.141 25.723)` |
+| `--co-theme-success`     | <ColorSwatch value="oklch(71.7% 0.18 142)" /> | `oklch(71.7% 0.18 142)` | <ColorSwatch value="oklch(60% 0.15 142)" /> | `oklch(60% 0.15 142)`     |
+| `--co-theme-warning`     | <ColorSwatch value="oklch(86.4% 0.144 99)" /> | `oklch(86.4% 0.144 99)` | <ColorSwatch value="oklch(90.3% 0.111 99)" /> | `oklch(90.3% 0.111 99)`   |
+| `--co-theme-neutral`     | <ColorSwatch value="oklch(60.8% 0 0)" />  | `oklch(60.8% 0 0)`      | <ColorSwatch value="oklch(50% 0 0)" />     | `oklch(50% 0 0)`          |
+
+### Avatar accents
+
+| Variable            | Light preview                             | Default (Light)        | Dark preview                              | Default (Dark)         |
+| ------------------- | ----------------------------------------- | ---------------------- | ----------------------------------------- | ---------------------- |
+| `--co-theme-pink`   | <ColorSwatch value="oklch(76.3% 0.152 354)" /> | `oklch(76.3% 0.152 354)` | <ColorSwatch value="oklch(84.2% 0.109 354)" /> | `oklch(84.2% 0.109 354)` |
+| `--co-theme-yellow` | <ColorSwatch value="oklch(86.4% 0.144 99)" /> | `oklch(86.4% 0.144 99)` | <ColorSwatch value="oklch(90.3% 0.111 99)" /> | `oklch(90.3% 0.111 99)` |
+| `--co-theme-blue`   | <ColorSwatch value="oklch(72.5% 0.132 241)" /> | `oklch(72.5% 0.132 241)` | <ColorSwatch value="oklch(79.8% 0.089 241)" /> | `oklch(79.8% 0.089 241)` |
+| `--co-theme-orange` | <ColorSwatch value="oklch(74.5% 0.166 50)" /> | `oklch(74.5% 0.166 50)` | <ColorSwatch value="oklch(68.2% 0.194 50)" /> | `oklch(68.2% 0.194 50)` |
+
+### Background shades
+
+| Variable                    | Light preview | Default (Light) | Dark preview | Default (Dark) |
+| --------------------------- | ------------- | --------------- | ------------ | -------------- |
+| `--co-theme-background-50`  | <ColorSwatch value="color-mix(in oklch, oklch(99% 0 0) 98%, oklch(20.5% 0 0))" /> | Color-mixed | <ColorSwatch value="color-mix(in oklch, oklch(15.5% 0 0) 98%, oklch(95% 0 0))" /> | Color-mixed |
+| `--co-theme-background-100` | <ColorSwatch value="color-mix(in oklch, oklch(99% 0 0) 97%, oklch(20.5% 0 0))" /> | Color-mixed | <ColorSwatch value="color-mix(in oklch, oklch(15.5% 0 0) 96%, oklch(95% 0 0))" /> | Color-mixed |
+| `--co-theme-background-200` | <ColorSwatch value="color-mix(in oklch, oklch(99% 0 0) 96%, oklch(20.5% 0 0))" /> | Color-mixed | <ColorSwatch value="color-mix(in oklch, oklch(15.5% 0 0) 94%, oklch(95% 0 0))" /> | Color-mixed |
+| `--co-theme-background-300` | <ColorSwatch value="color-mix(in oklch, oklch(99% 0 0) 95%, oklch(20.5% 0 0))" /> | Color-mixed | <ColorSwatch value="color-mix(in oklch, oklch(15.5% 0 0) 92%, oklch(95% 0 0))" /> | Color-mixed |
 
 The background shades are derived from your base colors with `color-mix()` unless you override them directly.

apps/web/src/app/(dashboard)/[websiteSlug]/settings/team/team-settings-client.tsx

@@ -408,6 +408,7 @@ export function TeamSettingsClient({
 					<div className="divide-y divide-primary/10">
 						{settings.members.map((member) => {
 							const memberDisplay = resolveDashboardHumanAgentDisplay({
+								email: member.email ?? null,
 								id: member.userId,
 								name: member.name,
 							});

apps/web/src/app/(lander-docs)/components/benefits/human-ai.tsx

@@ -218,6 +218,7 @@ const availableHumanAgents: AvailableHumanAgent[] = [
 	{
 		id: "anthony",
 		name: "Anthony",
+		email: "anthony@example.com",
 		image: anthonyAvatar,
 		lastSeenAt: new Date().toISOString(),
 	},

apps/web/src/app/(lander-docs)/components/docs/component-preview-tabs.test.tsx

@@ -4,7 +4,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { DocsComponentPreviewTabs } from "./component-preview-tabs";
 
 describe("DocsComponentPreviewTabs", () => {
-	it("renders a square docs frame without a divider under the tabs", () => {
+	it("renders tabs above a square docs frame without a tab divider", () => {
 		const html = renderToStaticMarkup(
 			<DocsComponentPreviewTabs
 				component={<div>Preview</div>}
@@ -13,12 +13,16 @@ describe("DocsComponentPreviewTabs", () => {
 		);
 
 		expect(html).toContain("mt-6 w-full min-w-0");
+		expect(html).toContain('data-slot="docs-component-preview-tabs"');
 		expect(html).toContain('data-slot="docs-component-preview-frame"');
 		expect(html).toContain(
 			"overflow-auto overscroll-contain bg-background px-4 py-6 md:max-h-[640px] dark:bg-background-100"
 		);
-		expect(html).toContain("px-4 pt-4 pb-3");
-		expect(html).not.toContain("rounded-[24px]");
+		expect(
+			html.indexOf('data-slot="docs-component-preview-tabs"')
+		).toBeLessThan(html.indexOf('data-slot="docs-component-preview-frame"'));
+		expect(html).not.toContain("px-4 pt-4 pb-3");
+		expect(html).not.toContain("rounded");
 		expect(html).not.toContain("border-b border-dashed");
 	});
 });