@agent-native/toolkit 0.212.1 → 0.214.0

package/src/app/settings/account/PreferencesSettings.spec.tsx

@@ -25,6 +25,9 @@ vi.mock("../VoiceTranscriptionSection.js", () => ({
     <div data-testid="voice" data-compact={String(!!compact)} />
   ),
 }));
+vi.mock("./ThemeFamilySettings.js", () => ({
+  ThemeFamilySettings: () => <div data-testid="theme-family-settings" />,
+}));
 
 import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
 
@@ -70,12 +73,14 @@ describe("PreferencesSettings", () => {
     const groups = [...container.querySelectorAll("section")];
     expect(groups.map((group) => group.id)).toEqual([
       "language-region",
+      "appearance",
       "voice-input",
     ]);
     expect(groups[0]!.querySelector("h2")?.textContent).toBe(
       "Language and region",
     );
-    expect(groups[1]!.querySelector("h2")?.textContent).toBe("Voice input");
+    expect(groups[1]!.querySelector("h2")?.textContent).toBe("Appearance");
+    expect(groups[2]!.querySelector("h2")?.textContent).toBe("Voice input");
 
     const language = container.querySelector("#interface-language");
     expect(language?.textContent).toContain("Interface language");
@@ -90,8 +95,14 @@ describe("PreferencesSettings", () => {
       "Used for timestamps and scheduled automations.",
     );
 
+    const themeFamily = container.querySelector("#theme-family");
+    expect(themeFamily?.textContent).toContain("Theme family");
+    expect(
+      themeFamily?.querySelector('[data-testid="theme-family-settings"]'),
+    ).not.toBeNull();
+
     expect(
-      groups[1]!
+      groups[2]!
         .querySelector('[data-testid="voice"]')
         ?.getAttribute("data-compact"),
     ).toBe("true");

package/src/app/settings/account/PreferencesSettings.tsx

@@ -4,6 +4,7 @@ import { LanguagePicker } from "../../shared/index.js";
 import { SchedulingTimezoneField } from "../SchedulingTimezoneField.js";
 import { SettingsGroup, SettingsRow } from "../SettingsRow.js";
 import { VoiceTranscriptionSection } from "../VoiceTranscriptionSection.js";
+import { ThemeFamilySettings } from "./ThemeFamilySettings.js";
 
 const key = (name: string) => `agentChat.settingsShell.account.${name}`;
 
@@ -37,6 +38,13 @@ export function PreferencesSettings() {
           control={<SchedulingTimezoneField compact />}
         />
       </SettingsGroup>
+      <SettingsGroup id="appearance" title={t(key("appearance"))}>
+        <SettingsRow
+          id="theme-family"
+          label={t(key("themeFamily"))}
+          control={<ThemeFamilySettings />}
+        />
+      </SettingsGroup>
       <SettingsGroup id="voice-input" title={t(key("voiceInput"))}>
         <VoiceTranscriptionSection compact />
       </SettingsGroup>

package/src/app/settings/account/ThemeFamilySettings.tsx

@@ -0,0 +1,61 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { useThemeFamily, type ThemeFamily } from "@agent-native/core/client/ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { useState } from "react";
+
+const key = (name: string) => `agentChat.settingsShell.account.${name}`;
+
+export function ThemeFamilySettings() {
+  const t = useT();
+  const { family, status, setFamily } = useThemeFamily();
+  const [saving, setSaving] = useState(false);
+  const [saveFailed, setSaveFailed] = useState(false);
+
+  async function changeFamily(value: string) {
+    if (value !== "agent-native" && value !== "original") return;
+    if (value === family) return;
+
+    setSaving(true);
+    setSaveFailed(false);
+    try {
+      await setFamily(value as ThemeFamily);
+    } catch {
+      setSaveFailed(true);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="w-full sm:w-56">
+      <Select
+        value={family}
+        onValueChange={(value) => void changeFamily(value)}
+        disabled={saving || status === "loading"}
+      >
+        <SelectTrigger aria-label={t(key("themeFamily"))}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="agent-native">
+            {t(key("themeFamilyAgentNative"))}
+          </SelectItem>
+          <SelectItem value="original">
+            {t(key("themeFamilyOriginal"))}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      {saveFailed || status === "error" ? (
+        <p className="mt-2 text-xs text-destructive" role="alert">
+          {t(key("themeFamilySaveError"))}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/app/settings/account/search-entries.ts

@@ -33,6 +33,12 @@ export const PREFERENCES_SEARCH_ENTRIES: readonly SettingsPageSearchEntry[] = [
     keywords: "language locale translation",
     anchor: "interface-language",
   },
+  {
+    id: "theme-family",
+    labelKey: key("themeFamily"),
+    keywords: "theme appearance style colors",
+    anchor: "theme-family",
+  },
   {
     id: "timezone",
     labelKey: key("timezone"),

package/src/app/shared/DefaultSpinner.spec.tsx

@@ -0,0 +1,14 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { DefaultSpinner } from "./DefaultSpinner.js";
+
+describe("DefaultSpinner theme styles", () => {
+  it("uses the selected dark theme instead of the operating system preference", () => {
+    const html = renderToStaticMarkup(<DefaultSpinner />);
+
+    expect(html).toContain("html.dark");
+    expect(html).toContain('html[data-theme="dark"]');
+    expect(html).not.toContain("prefers-color-scheme");
+  });
+});

package/src/app/shared/DefaultSpinner.tsx

@@ -117,11 +117,10 @@ export function DefaultSpinner({
           background: hsl(var(--background, 0 0% 100%));
           color: hsl(var(--foreground, 240 10% 3.9%));
         }
-        @media (prefers-color-scheme: dark) {
-          html {
-            background: hsl(var(--background, 240 10% 3.9%));
-            color: hsl(var(--foreground, 0 0% 98%));
-          }
+        html.dark,
+        html[data-theme="dark"]:not(.light) {
+          background: hsl(var(--background, 240 10% 3.9%));
+          color: hsl(var(--foreground, 0 0% 98%));
         }
       `}</style>
     </div>

package/src/app/shared/ErrorBoundary.spec.tsx

@@ -1,6 +1,18 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
-import { isExpectedRouteNotFound } from "./ErrorBoundary.js";
+import {
+  isExpectedRouteNotFound,
+  resolveErrorBoundaryThemeClass,
+} from "./ErrorBoundary.js";
+
+function themeRoot(className: string, dataTheme: string | null) {
+  return {
+    classList: {
+      contains: (name: string) => className.split(" ").includes(name),
+    },
+    getAttribute: () => dataTheme,
+  } as unknown as Pick<HTMLElement, "classList" | "getAttribute">;
+}
 
 describe("isExpectedRouteNotFound", () => {
   it("recognizes React Router 404 responses", () => {
@@ -26,3 +38,34 @@ describe("isExpectedRouteNotFound", () => {
     ).toBe(false);
   });
 });
+
+describe("resolveErrorBoundaryThemeClass", () => {
+  it("honors an explicit data theme before storage or the system preference", () => {
+    const readStoredTheme = vi.fn(() => "dark");
+    const readSystemTheme = vi.fn(() => true);
+
+    expect(
+      resolveErrorBoundaryThemeClass(
+        themeRoot("", "light"),
+        readStoredTheme,
+        readSystemTheme,
+      ),
+    ).toBe("light");
+    expect(readStoredTheme).not.toHaveBeenCalled();
+    expect(readSystemTheme).not.toHaveBeenCalled();
+  });
+
+  it("uses the system theme only when no explicit theme is selected", () => {
+    const readStoredTheme = vi.fn(() => null);
+    const readSystemTheme = vi.fn(() => true);
+
+    expect(
+      resolveErrorBoundaryThemeClass(
+        themeRoot("", null),
+        readStoredTheme,
+        readSystemTheme,
+      ),
+    ).toBe("dark");
+    expect(readSystemTheme).toHaveBeenCalledOnce();
+  });
+});

package/src/app/shared/ErrorBoundary.tsx

@@ -196,21 +196,46 @@ function useErrorCopy() {
 function useApplyThemeClass() {
   useEffect(() => {
     const root = document.documentElement;
-    if (root.classList.contains("dark") || root.classList.contains("light"))
-      return;
-    try {
-      const stored = localStorage.getItem("theme");
-      if (stored === "dark") {
-        root.classList.add("dark");
-      } else if (stored === "light") {
-        root.classList.add("light");
-      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        root.classList.add("dark");
-      }
-    } catch {}
+    let storageUnreadable = false;
+    const theme = resolveErrorBoundaryThemeClass(
+      root,
+      () => {
+        try {
+          return localStorage.getItem("theme");
+        } catch {
+          storageUnreadable = true;
+          return null;
+        }
+      },
+      () =>
+        window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false,
+    );
+    if (storageUnreadable) {
+      root.setAttribute("data-theme-status", "unreadable");
+    } else {
+      root.removeAttribute("data-theme-status");
+    }
+    if (theme) root.classList.add(theme);
   }, []);
 }
 
+export function resolveErrorBoundaryThemeClass(
+  root: Pick<HTMLElement, "classList" | "getAttribute">,
+  readStoredTheme: () => string | null,
+  readSystemTheme: () => boolean,
+): "dark" | "light" | undefined {
+  if (root.classList.contains("dark") || root.classList.contains("light")) {
+    return undefined;
+  }
+
+  const dataTheme = root.getAttribute("data-theme");
+  if (dataTheme === "dark" || dataTheme === "light") return dataTheme;
+
+  const storedTheme = readStoredTheme();
+  if (storedTheme === "dark" || storedTheme === "light") return storedTheme;
+  return readSystemTheme() ? "dark" : undefined;
+}
+
 function errorMessageOf(error: unknown): string {
   if (error instanceof Error) return error.message;
   return typeof error === "string" ? error : "";

package/src/app/shared/PoweredByBadge.spec.tsx

@@ -0,0 +1,16 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { PoweredByBadge } from "./PoweredByBadge.js";
+
+describe("PoweredByBadge theme styles", () => {
+  it("follows the selected theme classes and data attribute", () => {
+    const html = renderToStaticMarkup(<PoweredByBadge />);
+
+    expect(html).toContain("html.dark");
+    expect(html).toContain('html[data-theme="dark"]');
+    expect(html).toContain("html.light");
+    expect(html).toContain('html[data-theme="light"]');
+    expect(html).not.toContain("prefers-color-scheme");
+  });
+});

package/src/app/shared/PoweredByBadge.tsx

@@ -47,8 +47,6 @@ const containerStyle = (
   opacity: 0.82,
 });
 
-const darkQuery = "(prefers-color-scheme: dark)";
-
 export function PoweredByBadge({
   position = "bottom-right",
   variant = "badge",
@@ -91,54 +89,36 @@ export function PoweredByBadge({
         .an-powered-badge-plain:hover {
           opacity: 0.82 !important;
         }
-        .dark .an-powered-badge:not(.an-powered-badge-plain) {
+        :is(html.dark, html[data-theme="dark"]:not(.light)) .an-powered-badge:not(.an-powered-badge-plain) {
           background: rgba(255, 255, 255, 0.06) !important;
           border-color: rgba(255, 255, 255, 0.08) !important;
           color: rgba(215, 215, 215, 0.94) !important;
         }
-        .dark .an-powered-logo-light {
+        :is(html.dark, html[data-theme="dark"]:not(.light)) .an-powered-logo-light {
           display: none;
         }
-        .dark .an-powered-logo-dark {
+        :is(html.dark, html[data-theme="dark"]:not(.light)) .an-powered-logo-dark {
           display: block;
         }
-        @media ${darkQuery} {
-          .an-powered-badge:not(.an-powered-badge-plain) {
-            background: rgba(255, 255, 255, 0.06) !important;
-            border-color: rgba(255, 255, 255, 0.08) !important;
-            color: rgba(215, 215, 215, 0.94) !important;
-          }
-          .an-powered-logo-light {
-            display: none;
-          }
-          .an-powered-logo-dark {
-            display: block;
-          }
-        }
-        .light .an-powered-badge:not(.an-powered-badge-plain) {
+        :is(html.light, html[data-theme="light"]:not(.dark)) .an-powered-badge:not(.an-powered-badge-plain) {
           background: rgba(0, 0, 0, 0.05) !important;
           border-color: rgba(0, 0, 0, 0.06) !important;
           color: rgba(95, 95, 95, 0.95) !important;
         }
-        .light .an-powered-logo-light {
+        :is(html.light, html[data-theme="light"]:not(.dark)) .an-powered-logo-light {
           display: block;
         }
-        .light .an-powered-logo-dark {
+        :is(html.light, html[data-theme="light"]:not(.dark)) .an-powered-logo-dark {
           display: none;
         }
         .an-powered-badge:not(.an-powered-badge-plain):hover {
           opacity: 1 !important;
           color: rgba(70, 70, 70, 1) !important;
         }
-        @media ${darkQuery} {
-          .an-powered-badge:not(.an-powered-badge-plain):hover {
-            color: rgba(238, 238, 238, 1) !important;
-          }
-        }
-        .dark .an-powered-badge:not(.an-powered-badge-plain):hover {
+        :is(html.dark, html[data-theme="dark"]:not(.light)) .an-powered-badge:not(.an-powered-badge-plain):hover {
           color: rgba(238, 238, 238, 1) !important;
         }
-        .light .an-powered-badge:not(.an-powered-badge-plain):hover {
+        :is(html.light, html[data-theme="light"]:not(.dark)) .an-powered-badge:not(.an-powered-badge-plain):hover {
           color: rgba(70, 70, 70, 1) !important;
         }
       `}</style>
@@ -205,32 +185,10 @@ export function OpenSourceBadge({
             max-width: calc(100vw - 2rem);
           }
         }
-        .dark .an-open-source-badge {
-          color: #00B5FF !important;
-        }
-        @media ${darkQuery} {
-          .an-open-source-badge {
-            color: #00B5FF !important;
-          }
-        }
-        .light .an-open-source-badge {
-          color: #00B5FF !important;
-        }
         .an-open-source-badge:hover {
           opacity: 1 !important;
           color: #33C4FF !important;
         }
-        @media ${darkQuery} {
-          .an-open-source-badge:hover {
-            color: #33C4FF !important;
-          }
-        }
-        .dark .an-open-source-badge:hover {
-          color: #33C4FF !important;
-        }
-        .light .an-open-source-badge:hover {
-          color: #33C4FF !important;
-        }
       `}</style>
       <a
         href="https://github.com/BuilderIO/agent-native"

package/src/app/styles/agent-conversation.css

@@ -219,17 +219,6 @@
   background: var(--shiki-dark-bg);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) .agent-conversation-shiki pre {
-    background: var(--shiki-dark-bg, hsl(var(--muted) / 0.72));
-    color: var(--shiki-dark, hsl(var(--foreground)));
-  }
-  :root:not(.light) .agent-conversation-shiki pre span {
-    color: var(--shiki-dark);
-    background: var(--shiki-dark-bg);
-  }
-}
-
 .agent-conversation-tool {
   width: 100%;
   border: 1px solid hsl(var(--border) / 0.9);
@@ -727,18 +716,6 @@
   background: var(--shiki-dark-bg);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not(.light) .agent-markdown-shiki pre {
-    background: var(--shiki-dark-bg);
-    color: var(--shiki-dark);
-  }
-
-  :root:not(.light) .agent-markdown-shiki pre span {
-    color: var(--shiki-dark);
-    background: var(--shiki-dark-bg);
-  }
-}
-
 .agent-tool-code .agent-markdown-shiki {
   margin: 0;
   border-radius: 0;

package/src/app/styles/agent-native.css

@@ -27,7 +27,7 @@
 @import "./tokens/agent-kit.css";
 @import "../agentkit/react/styles.css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @plugin "@tailwindcss/typography";
 

package/src/app/styles/agent-native.spec.ts

@@ -3,6 +3,24 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 describe("agent-native shell surface tokens", () => {
+  it("uses the selected theme class for dark utilities and chat markdown", () => {
+    const toolkitCss = readFileSync(
+      new URL("./agent-native.css", import.meta.url),
+      { encoding: "utf8" },
+    );
+    const conversationCss = readFileSync(
+      new URL("./agent-conversation.css", import.meta.url),
+      { encoding: "utf8" },
+    );
+
+    expect(toolkitCss).toContain(
+      "@custom-variant dark (&:where(.dark, .dark *));",
+    );
+    expect(conversationCss).not.toContain("prefers-color-scheme: dark");
+    expect(conversationCss).toContain(".dark .agent-conversation-shiki pre");
+    expect(conversationCss).toContain(".dark .agent-markdown-shiki pre");
+  });
+
   it("keeps the composer surface opaque while preserving its muted blend", () => {
     const css = readFileSync(new URL("./agent-native.css", import.meta.url), {
       encoding: "utf8",

package/src/app/styles/theme-families.css

@@ -0,0 +1,66 @@
+/*
+ * The agent-native family uses the shared Tailwind/shadcn palette from the
+ * Design template. App styles remain the original family by default.
+ */
+:root[data-theme-family="agent-native"],
+:root[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 10%;
+  --primary: 0 0% 15%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 15%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 15%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 0 0% 40%;
+  --radius: 0.5rem;
+  --sidebar-background: 0 0% 97%;
+  --sidebar-foreground: 0 0% 45%;
+  --sidebar-primary: 0 0% 15%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 0 0% 95%;
+  --sidebar-accent-foreground: 0 0% 15%;
+  --sidebar-border: 0 0% 90%;
+  --sidebar-ring: 0 0% 40%;
+}
+
+.dark[data-theme-family="agent-native"],
+.dark[data-theme-family="agent-native"][data-appearance] {
+  --background: 0 0% 13%;
+  --foreground: 0 0% 90%;
+  --card: 0 0% 15%;
+  --card-foreground: 0 0% 90%;
+  --popover: 0 0% 15%;
+  --popover-foreground: 0 0% 90%;
+  --primary: 0 0% 75%;
+  --primary-foreground: 0 0% 10%;
+  --secondary: 0 0% 18%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 0 0% 16%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 18%;
+  --accent-foreground: 0 0% 96%;
+  --destructive: 0 91% 71%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 24%;
+  --input: 0 0% 24%;
+  --ring: 0 0% 60%;
+  --sidebar-background: 0 0% 10%;
+  --sidebar-foreground: 0 0% 60%;
+  --sidebar-primary: 0 0% 75%;
+  --sidebar-primary-foreground: 0 0% 10%;
+  --sidebar-accent: 0 0% 16%;
+  --sidebar-accent-foreground: 0 0% 90%;
+  --sidebar-border: 0 0% 20%;
+  --sidebar-ring: 0 0% 60%;
+}

package/src/app/styles/theme-families.spec.ts

@@ -0,0 +1,29 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync(
+  new URL("./theme-families.css", import.meta.url),
+  "utf8",
+);
+
+describe("theme families", () => {
+  it("provides a shared palette for the resolved light and dark modes", () => {
+    expect(css).toContain(':root[data-theme-family="agent-native"]');
+    expect(css).toContain('.dark[data-theme-family="agent-native"]');
+    expect(css).toContain("--background: 0 0% 100%");
+    expect(css).toContain("--background: 0 0% 13%");
+    expect(css).not.toContain("prefers-color-scheme");
+  });
+
+  it("keeps the selected family palette ahead of appearance presets", () => {
+    expect(css).toContain(
+      ':root[data-theme-family="agent-native"][data-appearance]',
+    );
+    expect(css).toContain(
+      '.dark[data-theme-family="agent-native"][data-appearance]',
+    );
+    expect(css).toContain("--background: 0 0% 100%");
+    expect(css).toContain("--background: 0 0% 13%");
+  });
+});

package/src/composer/ComposerContextBanner.spec.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ComposerContextBanner } from "./ComposerContextBanner.js";
+
+(
+  globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+
+describe("ComposerContextBanner", () => {
+  it("renders localized context actions and calls add and dismiss handlers", async () => {
+    const onAddContext = vi.fn();
+    const onDismiss = vi.fn();
+
+    await act(async () =>
+      root.render(
+        <ComposerContextBanner
+          ariaLabel="Context guidance"
+          addContextLabel="Add context"
+          dismissLabel="Dismiss context guidance"
+          onAddContext={onAddContext}
+          onDismiss={onDismiss}
+        >
+          Improve answers by adding data definitions.
+        </ComposerContextBanner>,
+      ),
+    );
+
+    const banner = container.querySelector<HTMLElement>(
+      '[data-agent-composer-slot="context-banner"]',
+    )!;
+    expect(banner.getAttribute("aria-label")).toBe("Context guidance");
+    expect(banner.classList).toContain("gap-1.5");
+    expect(banner.classList).toContain("px-2.5");
+    expect(banner.classList).toContain("py-2");
+    expect(banner.classList).toContain("rounded-lg");
+    expect(banner.textContent).toContain(
+      "Improve answers by adding data definitions.",
+    );
+
+    await act(async () =>
+      Array.from(container.querySelectorAll("button"))
+        .find((button) => button.textContent?.includes("Add context"))!
+        .click(),
+    );
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Dismiss context guidance"]',
+        )!
+        .click(),
+    );
+
+    expect(onAddContext).toHaveBeenCalledOnce();
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+});