@agent-native/toolkit 0.213.1 → 0.216.0

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,100 @@
+// @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.",
+    );
+
+    const addContextButton = Array.from(
+      container.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Add context"))!;
+    expect(addContextButton.classList).toContain("px-1.5");
+
+    await act(async () => addContextButton.click());
+    await act(async () =>
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Dismiss context guidance"]',
+        )!
+        .click(),
+    );
+
+    expect(onAddContext).toHaveBeenCalledOnce();
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it("renders a host-provided decorative add-context icon", async () => {
+    await act(async () =>
+      root.render(
+        <ComposerContextBanner
+          ariaLabel="Context guidance"
+          addContextLabel="Add context"
+          addContextIcon={<svg data-testid="custom-action-icon" />}
+          onAddContext={vi.fn()}
+        >
+          Improve answers by adding data definitions.
+        </ComposerContextBanner>,
+      ),
+    );
+
+    const button = container.querySelector<HTMLButtonElement>("button")!;
+    const actionIcon = container.querySelector<SVGSVGElement>(
+      '[data-testid="custom-action-icon"]',
+    )!;
+
+    expect(button.textContent).toBe("Add context");
+    expect(button.classList).toContain("px-1.5");
+    expect(Array.from(button.querySelectorAll("svg"))).toEqual([actionIcon]);
+    expect(actionIcon.parentElement?.getAttribute("aria-hidden")).toBe("true");
+  });
+});

package/src/composer/ComposerContextBanner.tsx

@@ -0,0 +1,77 @@
+import { IconPlus, IconSparkles, IconX } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import { Button } from "../ui/button.js";
+import { cn } from "../utils.js";
+
+interface ComposerContextBannerBaseProps {
+  /** Localized name for the banner's content. */
+  ariaLabel: string;
+  children: ReactNode;
+  /** Localized label for the action that opens or adds context. */
+  addContextLabel: string;
+  onAddContext: () => void;
+  /** Optional decorative icon displayed after the add-context label. */
+  addContextIcon?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export type ComposerContextBannerProps = ComposerContextBannerBaseProps &
+  (
+    | { dismissLabel?: never; onDismiss?: never }
+    | { dismissLabel: string; onDismiss: () => void }
+  );
+
+/** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
+export function ComposerContextBanner({
+  ariaLabel,
+  children,
+  addContextLabel,
+  onAddContext,
+  addContextIcon,
+  dismissLabel,
+  onDismiss,
+  icon,
+  className,
+}: ComposerContextBannerProps) {
+  return (
+    <aside
+      aria-label={ariaLabel}
+      data-agent-composer-slot="context-banner"
+      className={cn(
+        "agent-composer-context-banner mx-auto mb-2 flex w-full max-w-3xl items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      <span className="shrink-0 text-primary">
+        {icon ?? <IconSparkles aria-hidden="true" className="size-4" />}
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+      <Button
+        className="shrink-0 px-1.5"
+        onClick={onAddContext}
+        size="xs"
+        type="button"
+        variant="outline"
+      >
+        {addContextLabel}
+        <span aria-hidden="true">
+          {addContextIcon ?? <IconPlus aria-hidden="true" />}
+        </span>
+      </Button>
+      {onDismiss ? (
+        <Button
+          aria-label={dismissLabel}
+          className="shrink-0"
+          onClick={onDismiss}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          <IconX aria-hidden="true" />
+        </Button>
+      ) : null}
+    </aside>
+  );
+}

package/src/composer/ComposerModePicker.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ComposerModePicker } from "./ComposerModePicker.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();
+  document.body.querySelectorAll('[role="menu"]').forEach((element) => {
+    if (!container.contains(element)) element.remove();
+  });
+});
+
+function ModePickerHarness({
+  onChange,
+}: {
+  onChange: (value: string) => void;
+}) {
+  const [value, setValue] = useState("ask");
+  return (
+    <ComposerModePicker
+      ariaLabel="Ask mode"
+      options={[
+        { value: "ask", label: "Ask", description: "Answer with context." },
+        { value: "default", label: "Default" },
+      ]}
+      value={value}
+      onValueChange={(next) => {
+        onChange(next);
+        setValue(next);
+      }}
+    />
+  );
+}
+
+describe("ComposerModePicker", () => {
+  it("shows the selected host option and updates it through the shared menu", async () => {
+    const onChange = vi.fn();
+    await act(async () =>
+      root.render(<ModePickerHarness onChange={onChange} />),
+    );
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-agent-composer-slot="mode-picker"]',
+    )!;
+    expect(trigger.getAttribute("aria-label")).toBe("Ask mode: Ask");
+
+    await act(async () => {
+      trigger.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+      trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    const defaultOption = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+    ).find((option) => option.textContent?.trim() === "Default");
+    expect(defaultOption).toBeDefined();
+    await act(async () => defaultOption!.click());
+
+    expect(onChange).toHaveBeenCalledWith("default");
+    expect(trigger.textContent).toContain("Default");
+    expect(trigger.getAttribute("aria-label")).toBe("Ask mode: Default");
+  });
+
+  it("keeps an unavailable selected value visible instead of choosing another mode", async () => {
+    await act(async () =>
+      root.render(
+        <ComposerModePicker
+          ariaLabel="Ask mode"
+          options={[{ value: "ask", label: "Ask" }]}
+          value="custom"
+          onValueChange={() => {}}
+        />,
+      ),
+    );
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-agent-composer-slot="mode-picker"]',
+    );
+    expect(trigger?.textContent).toContain("custom");
+    expect(trigger?.getAttribute("aria-label")).toBe("Ask mode: custom");
+  });
+});

package/src/composer/ComposerModePicker.tsx

@@ -0,0 +1,98 @@
+import { IconChevronDown } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.js";
+import { cn } from "../utils.js";
+
+export interface ComposerModeOption {
+  /** Stable host-defined mode identifier. */
+  value: string;
+  /** Localized visible label supplied by the host. */
+  label: string;
+  /** Optional localized explanation shown in the menu. */
+  description?: string;
+  /** Optional host-provided icon. */
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface ComposerModePickerProps {
+  /** Localized accessible name for this choice, such as "Ask mode". */
+  ariaLabel: string;
+  value: string;
+  options: readonly ComposerModeOption[];
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export function ComposerModePicker({
+  ariaLabel,
+  value,
+  options,
+  onValueChange,
+  className,
+}: ComposerModePickerProps) {
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedLabel = selectedOption?.label ?? value;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${ariaLabel}: ${selectedLabel}`}
+          data-agent-composer-slot="mode-picker"
+          className={cn(
+            "agent-composer-mode-picker inline-flex h-7 max-w-48 shrink-0 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          {selectedOption?.icon}
+          <span className="min-w-0 truncate">{selectedLabel}</span>
+          <IconChevronDown
+            aria-hidden="true"
+            className="size-3 shrink-0 opacity-60"
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="top"
+        align="start"
+        collisionPadding={8}
+        className="agent-composer-mode-picker-menu min-w-48"
+      >
+        <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>
+          {options.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              indicator="check"
+              disabled={option.disabled}
+              className="agent-composer-mode-picker-option pe-3"
+            >
+              {option.icon}
+              <span className="min-w-0 flex-1">
+                <span className="block truncate">{option.label}</span>
+                {option.description ? (
+                  <span className="mt-0.5 block whitespace-normal text-xs text-muted-foreground">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/composer/index.ts

@@ -1,4 +1,13 @@
 export { FileReference } from "./extensions/FileReference.js";
+export {
+  ComposerContextBanner,
+  type ComposerContextBannerProps,
+} from "./ComposerContextBanner.js";
+export {
+  ComposerModePicker,
+  type ComposerModeOption,
+  type ComposerModePickerProps,
+} from "./ComposerModePicker.js";
 export {
   useComposerDefaultActions,
   mergeComposerMenuItems,

package/src/styles.css

@@ -18,6 +18,7 @@
  */
 @import "./theme/resource-icons.css";
 @import "./app-shell/prompt-home.css";
+@import "./app/styles/theme-families.css";
 @import "./app/styles/agent-native.css";
 
 @source "./**/*.{js,ts,tsx}";