@agent-native/core 0.117.1 → 0.118.0

package/corpus/templates/tasks/.agents/skills/frontend-design/SKILL.md

@@ -57,10 +57,26 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 ## Agent-Native UI Rules
 
-- Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.
-- **Use shadcn/ui primitives for standard UI**: `DropdownMenu`, `Popover`, `Dialog`, `AlertDialog`, `Sheet`, `Tabs`, `Tooltip`, `Select`, `Command`, `Sidebar`, `Table`, `Card`, `Badge`, `Skeleton`, and related primitives.
+- Agent-native apps use React and Vite. The default adapter uses Tailwind CSS,
+  shadcn/ui, and `@tabler/icons-react`, but an app may register a different
+  company design system in `app/design-system.ts`.
+- **Use the app's design-system seam for standard UI.** Inspect
+  `app/design-system.ts`, `ToolkitProvider`, and the local UI adapter directory
+  before choosing a primitive. Use shadcn primitives when they are the active
+  adapter; use the registered company components when they are not.
 - **When touching shadcn/ui components, also read `shadcn-ui` if it exists.** That skill covers `components.json`, CLI docs, component composition, theming, and registry workflows.
 - Check `app/components/ui/` before importing a shadcn component. If a primitive is missing, add it from the app root with `pnpm dlx shadcn@latest add <component>`, then review the generated file.
+- Pages, routes, and domain components must import controls through the app's
+  local adapter path, usually `@/components/ui/*`. Never import
+  `@agent-native/toolkit/ui/*` directly in app product code.
+- Toolkit/Core feature presentation flows through the semantic components from
+  `@agent-native/toolkit/design-system`. Their props express intent, emphasis,
+  size, controlled values, and behavior; they do not require Tailwind, CVA, or
+  `className`.
+- For deeper feature customization, consume the feature-level headless
+  controller through its product render slot. The same controller must power
+  the default and custom views. Eject the smallest supported unit only after
+  tokens, semantic components, controllers, and slots are insufficient.
 - Do not build custom dropdowns, menus, popovers, modals, or confirmations with manual absolute positioning and click-outside effects.
 - Never use browser dialogs (`window.alert`, `window.confirm`, `window.prompt`). Use `AlertDialog`, `Dialog`, or app-specific confirmation UI.
 - Use Tabler icons for all first-party UI icons. Do not add Lucide, Heroicons, inline SVG icon sets, or emoji icons.
@@ -103,10 +119,14 @@ For substantial frontend work:
 2. Start the dev server when the app needs one.
 3. Verify with browser screenshots at desktop and mobile widths.
 4. Check interactive states: hover, focus, loading, empty, error, and destructive confirmations.
+5. When registering or changing a company adapter, run
+   `@agent-native/toolkit/conformance`, including mixed-overlay focus,
+   `portalContainer`, and z-index stacking checks.
 
 ## Related Skills
 
 - **shadcn-ui** — shadcn CLI, component docs, composition rules, theming, and registries
+- **customizing-agent-native** — Design-system registration, feature controllers, product slots, conformance, and ejection
 - **self-modifying-code** — The agent can edit source code to apply design changes
 - **storing-data** — All data lives in SQL; use actions for data access
 - **actions** — `useActionQuery`/`useActionMutation` hooks for frontend data fetching

package/corpus/templates/tasks/.agents/skills/shadcn-ui/SKILL.md

@@ -17,10 +17,33 @@ This skill keeps shadcn/ui work project-aware. Components are source files in th
 ## First Steps
 
 1. Work from the app root that owns `components.json`.
-2. Run `pnpm dlx shadcn@latest info --json` when you need current project context: framework, Tailwind version, aliases, icon library, installed components, and resolved paths.
-3. Use the actual aliases from `components.json` or `shadcn info`; do not assume `@/components/ui` if the project says otherwise.
-4. Check `app/components/ui/` or the resolved `ui` path before importing a component.
-5. For unfamiliar components, run `pnpm dlx shadcn@latest docs <component>` and read the returned docs or examples before coding.
+2. In an Agent Native app, inspect `app/design-system.ts` and
+   `ToolkitProvider` before choosing a primitive. A registered company design
+   system takes precedence over the default shadcn adapter.
+3. Run `pnpm dlx shadcn@latest info --json` when you need current project context: framework, Tailwind version, aliases, icon library, installed components, and resolved paths.
+4. Use the actual aliases from `components.json` or `shadcn info`; do not assume `@/components/ui` if the project says otherwise.
+5. Check `app/components/ui/` or the resolved `ui` path before importing a component.
+6. For unfamiliar components, run `pnpm dlx shadcn@latest docs <component>` and read the returned docs or examples before coding.
+
+## Agent Native Adapter Rule
+
+Pages, routes, and domain components import controls through the app's local UI
+adapter layer. Never import `@agent-native/toolkit/ui/*` directly in app product
+code. Direct imports bypass `app/design-system.ts` and make Toolkit/Core
+surfaces use different controls from the app.
+
+When shadcn is the app's adapter, add or update the local primitive and keep
+product code on that local import. When a company design system is registered,
+adapt its components to the semantic contracts from
+`@agent-native/toolkit/design-system`; do not recreate a parallel shadcn
+surface. The semantic API is styling-runtime agnostic, so do not require
+Tailwind, CVA, or `className` in customer adapters.
+
+For shared Toolkit features, customize presentation through semantic
+components, a feature-level controller, and product-level render slots. Keep
+the same controller for default and custom views. Use the conformance kit for
+behavior components whose focus, portal, keyboard, dismissal, or stacking
+behavior comes from the company design system.
 
 ## Adding Or Updating Components
 
@@ -91,5 +114,6 @@ Do not wrap triggers in extra divs just to place a Button or Link inside them.
 ## Related Skills
 
 - **frontend-design** — Product UX, visual direction, responsive polish, and verification
+- **customizing-agent-native** — Registered design systems, controllers, slots, conformance, and ejection
 - **actions** — Data fetching and mutation patterns for agent-native apps
 - **security** — User data, forms, external input, and action safety

package/corpus/templates/tasks/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,17 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
+}

package/corpus/templates/tasks/app/design-system.ts

@@ -0,0 +1,3 @@
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+
+export const designSystem = defineDesignSystem({});

package/corpus/templates/tasks/app/global.css

@@ -53,7 +53,7 @@
   --muted-foreground: 220 4% 60%;
   --accent: 220 4% 13%;
   --accent-foreground: 0 0% 90%;
-  --destructive: 0 63% 51%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 220 4% 14%;
   --input: 220 4% 14%;

package/corpus/templates/tasks/app/root.tsx

@@ -20,6 +20,7 @@ import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
 import { Toaster } from "@/components/ui/sonner";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { i18nCatalog } from "@/i18n";
 import { APP_TITLE } from "@/lib/app-config";
@@ -155,8 +156,10 @@ export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   return (
     <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-      <DbSyncSetup />
-      <AppContent />
+      <AppToolkitProvider>
+        <DbSyncSetup />
+        <AppContent />
+      </AppToolkitProvider>
     </AppProviders>
   );
 }

package/corpus/toolkit/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @agent-native/toolkit
 
+## 0.10.0
+
+### Minor Changes
+
+- f0da2e0: Add the styling-runtime-agnostic custom design system contract, safe component adapters, semantic theme tokens, and build-time theme CSS generation. New scaffolded apps now include the explicit design-system module, ToolkitProvider seam, and toolkit dependency so custom adapters can be registered from the first render.
+
+### Patch Changes
+
+- f0da2e0: Harden custom design system color gamut handling, semantic default-adapter behavior, sharing controller reuse, and build-time theme cascade ordering. Add complete MUI and Ant Design Chat examples that exercise the public conformance contract, and route normalized settings, sharing, sidebar, and agent-panel chrome through the registered semantic adapters.
+- f0da2e0: Preserve normalized core control icon sizing and semantic button styling while keeping settings defaults and sharing overlays consistent.
+- f0da2e0: Serialize realtime voice responses and recover from overlapping response requests without ending the voice session.
+- f0da2e0: Make the Dispatch chat composer recover from unavailable AI status checks and keep its Add menu clickable.
+- f0da2e0: Route the Builder connection card and chat history rail through semantic design-system components while preserving their default presentation and shared controller paths.
+
 ## 0.9.1
 
 ### Patch Changes

package/corpus/toolkit/agent-native.eject.json

@@ -62,6 +62,7 @@
         "class-variance-authority",
         "clsx",
         "cmdk",
+        "culori",
         "date-fns",
         "embla-carousel-react",
         "highlight.js",
@@ -130,8 +131,20 @@
         }
       ],
       "dependencies": [
+        "@radix-ui/react-avatar",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-select",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-switch",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-tooltip",
         "@tabler/icons-react",
+        "class-variance-authority",
         "clsx",
+        "culori",
         "react",
         "recharts",
         "tailwind-merge"
@@ -169,6 +182,23 @@
       ],
       "verification": ["pnpm typecheck"]
     },
+    {
+      "id": "toolkit/conformance",
+      "label": "Design system conformance kit",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["conformance"],
+      "entrypoints": ["./conformance", "./conformance/*"],
+      "strategy": "source-copy",
+      "sourceEntries": [
+        "src/conformance/index.ts",
+        "src/conformance/runner.tsx",
+        "src/conformance/types.ts",
+        "src/conformance/version.ts"
+      ],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": ["react", "react-dom"],
+      "verification": ["pnpm typecheck"]
+    },
     {
       "id": "toolkit/context-ui",
       "label": "Context inspection UI",
@@ -207,6 +237,44 @@
       ],
       "verification": ["pnpm typecheck"]
     },
+    {
+      "id": "toolkit/design-system",
+      "label": "Design system bridge",
+      "catalog": "toolkit-ui",
+      "catalogItems": ["design-system"],
+      "entrypoints": ["./design-system", "./design-system/*"],
+      "strategy": "source-copy",
+      "sourceEntries": [
+        "src/design-system/components.tsx",
+        "src/design-system/context.tsx",
+        "src/design-system/default-adapter.tsx",
+        "src/design-system/definition.ts",
+        "src/design-system/error-boundary.tsx",
+        "src/design-system/index.ts",
+        "src/design-system/theme.ts",
+        "src/design-system/types.ts"
+      ],
+      "targetRoot": "app/components/agent-native/toolkit",
+      "dependencies": [
+        "@radix-ui/react-avatar",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-select",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-switch",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-tooltip",
+        "@tabler/icons-react",
+        "class-variance-authority",
+        "clsx",
+        "culori",
+        "react",
+        "tailwind-merge"
+      ],
+      "verification": ["pnpm typecheck"]
+    },
     {
       "id": "toolkit/dashboard",
       "label": "Dashboard kit",
@@ -222,6 +290,7 @@
         "@tabler/icons-react",
         "class-variance-authority",
         "clsx",
+        "culori",
         "react",
         "recharts",
         "tailwind-merge"
@@ -329,6 +398,7 @@
         "@radix-ui/react-slot",
         "class-variance-authority",
         "clsx",
+        "culori",
         "react",
         "tailwind-merge"
       ],
@@ -387,6 +457,7 @@
         "class-variance-authority",
         "clsx",
         "cmdk",
+        "culori",
         "date-fns",
         "embla-carousel-react",
         "input-otp",

package/corpus/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -103,6 +103,20 @@
       "import": "./dist/composer/*.js",
       "default": "./dist/composer/*.js"
     },
+    "./conformance": {
+      "types": "./dist/conformance/index.d.ts",
+      "browser": "./dist/conformance/index.js",
+      "development": "./dist/conformance/index.js",
+      "import": "./dist/conformance/index.js",
+      "default": "./dist/conformance/index.js"
+    },
+    "./conformance/*": {
+      "types": "./dist/conformance/*.d.ts",
+      "browser": "./dist/conformance/*.js",
+      "development": "./dist/conformance/*.js",
+      "import": "./dist/conformance/*.js",
+      "default": "./dist/conformance/*.js"
+    },
     "./context-ui": {
       "types": "./dist/context-ui/index.d.ts",
       "browser": "./dist/context-ui/index.js",
@@ -117,6 +131,20 @@
       "import": "./dist/design-tweaks/index.js",
       "default": "./dist/design-tweaks/index.js"
     },
+    "./design-system": {
+      "types": "./dist/design-system/index.d.ts",
+      "browser": "./dist/design-system/index.js",
+      "development": "./dist/design-system/index.js",
+      "import": "./dist/design-system/index.js",
+      "default": "./dist/design-system/index.js"
+    },
+    "./design-system/*": {
+      "types": "./dist/design-system/*.d.ts",
+      "browser": "./dist/design-system/*.js",
+      "development": "./dist/design-system/*.js",
+      "import": "./dist/design-system/*.js",
+      "default": "./dist/design-system/*.js"
+    },
     "./editor": {
       "types": "./dist/editor/index.d.ts",
       "browser": "./dist/editor/index.js",
@@ -267,6 +295,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "catalog:",
     "cmdk": "^1.1.1",
+    "culori": "^4.0.2",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "highlight.js": "catalog:",
@@ -285,6 +314,7 @@
     "yjs": "catalog:"
   },
   "devDependencies": {
+    "@types/culori": "^4.0.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "typescript-7": "catalog:",

package/corpus/toolkit/src/chat-history/ChatHistoryRail.tsx

@@ -1,11 +1,17 @@
 import { IconDots, IconPlus } from "@tabler/icons-react";
-import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 
+import { ActionButton, IconButton } from "../design-system/components.js";
+import { DesignSystemErrorBoundary } from "../design-system/error-boundary.js";
 import {
   ChatHistoryList,
   type ChatHistoryItem,
   type ChatHistoryListProps,
 } from "./ChatHistoryList.js";
+import {
+  type ChatHistoryRailController,
+  useChatHistoryRailController,
+} from "./useChatHistoryRailController.js";
 
 export interface ChatHistoryRailLabels {
   newChat: string;
@@ -22,63 +28,71 @@ export interface ChatHistoryRailProps extends Omit<
   railLabels: ChatHistoryRailLabels;
   previewCount?: number;
   expandedCount?: number;
+  /**
+   * Product-level presentation slot for design systems that want to replace
+   * the rail wholesale. State and actions still come from the same controller
+   * as the default view.
+   */
+  renderRail?: (context: ChatHistoryRailRenderContext) => ReactNode;
 }
 
-/**
- * Compact recent-chat rail for app sidebars. Hosts own thread persistence,
- * sorting, routing, and mutations; the rail only owns progressive disclosure.
- */
-export function ChatHistoryRail({
-  items,
-  onNewChat,
-  railLabels,
-  previewCount = 5,
-  expandedCount = 15,
-  className,
-  emptyLabel,
-  ...listProps
-}: ChatHistoryRailProps) {
-  const [expanded, setExpanded] = useState(false);
-  const collapsedLimit = Math.max(1, previewCount);
-  const expandedLimit = Math.max(collapsedLimit, expandedCount);
-  const canExpand = items.length > collapsedLimit;
-  const visibleItems = useMemo(
-    () => items.slice(0, expanded ? expandedLimit : collapsedLimit),
-    [collapsedLimit, expanded, expandedLimit, items],
-  );
+export interface ChatHistoryRailRenderContext {
+  controller: ChatHistoryRailController<ChatHistoryItem>;
+  listProps: Omit<
+    ChatHistoryListProps,
+    "footer" | "items" | "sections" | "variant"
+  >;
+}
 
-  useEffect(() => {
-    if (!canExpand) setExpanded(false);
-  }, [canExpand]);
+export type DefaultChatHistoryRailViewProps = ChatHistoryRailRenderContext;
+
+export function DefaultChatHistoryRailView({
+  controller,
+  listProps,
+}: ChatHistoryRailRenderContext) {
+  const {
+    canExpand,
+    disclosureLabel,
+    expanded,
+    newChatLabel,
+    onNewChat,
+    toggleExpanded,
+    visibleItems,
+  } = controller;
+  const { className, emptyLabel, ...rest } = listProps;
 
   const footer = (
     <div className="an-chat-history-rail__footer">
-      <button
+      <ActionButton
         type="button"
         className="an-chat-history-rail__new-chat"
-        onClick={onNewChat}
+        emphasis="ghost"
+        size="compact"
+        leadingIcon={
+          <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
+        }
+        onPress={onNewChat}
       >
-        <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
-        <span>{railLabels.newChat}</span>
-      </button>
+        <span>{newChatLabel}</span>
+      </ActionButton>
       {canExpand && (
-        <button
+        <IconButton
           type="button"
           className="an-chat-history-rail__disclosure"
-          onClick={() => setExpanded((current) => !current)}
+          size="compact"
+          icon={<IconDots size={14} strokeWidth={1.8} aria-hidden="true" />}
+          onPress={toggleExpanded}
           aria-expanded={expanded}
-          aria-label={expanded ? railLabels.showLess : railLabels.showMore}
-          title={expanded ? railLabels.showLess : railLabels.showMore}
-        >
-          <IconDots size={14} strokeWidth={1.8} aria-hidden="true" />
-        </button>
+          label={disclosureLabel}
+          title={disclosureLabel}
+        />
       )}
     </div>
   );
 
   return (
     <ChatHistoryList
-      {...listProps}
+      {...rest}
       items={visibleItems}
       footer={footer}
       emptyLabel={emptyLabel ?? null}
@@ -87,3 +101,50 @@ export function ChatHistoryRail({
     />
   );
 }
+
+/**
+ * Compact recent-chat rail for app sidebars. Hosts own thread persistence,
+ * sorting, routing, and mutations; the rail only owns progressive disclosure.
+ */
+export function ChatHistoryRail({
+  items,
+  onNewChat,
+  railLabels,
+  previewCount = 5,
+  expandedCount = 15,
+  renderRail,
+  className,
+  emptyLabel,
+  ...listProps
+}: ChatHistoryRailProps) {
+  const controller = useChatHistoryRailController({
+    items,
+    onNewChat,
+    labels: railLabels,
+    previewCount,
+    expandedCount,
+  });
+  const context: ChatHistoryRailRenderContext = {
+    controller,
+    listProps: { ...listProps, className, emptyLabel },
+  };
+  const fallback = <DefaultChatHistoryRailView {...context} />;
+
+  return renderRail ? (
+    <DesignSystemErrorBoundary component="ChatHistoryRail" fallback={fallback}>
+      <ChatHistoryRailCustomView renderRail={renderRail} context={context} />
+    </DesignSystemErrorBoundary>
+  ) : (
+    fallback
+  );
+}
+
+function ChatHistoryRailCustomView({
+  renderRail,
+  context,
+}: {
+  renderRail: NonNullable<ChatHistoryRailProps["renderRail"]>;
+  context: ChatHistoryRailRenderContext;
+}) {
+  return renderRail(context);
+}

package/corpus/toolkit/src/chat-history/index.ts

@@ -7,6 +7,15 @@ export {
 } from "./ChatHistoryList.js";
 export {
   ChatHistoryRail,
+  DefaultChatHistoryRailView,
+  type DefaultChatHistoryRailViewProps,
   type ChatHistoryRailLabels,
   type ChatHistoryRailProps,
+  type ChatHistoryRailRenderContext,
 } from "./ChatHistoryRail.js";
+export {
+  type ChatHistoryRailController,
+  type ChatHistoryRailControllerLabels,
+  type UseChatHistoryRailControllerOptions,
+  useChatHistoryRailController,
+} from "./useChatHistoryRailController.js";

package/corpus/toolkit/src/chat-history/useChatHistoryRailController.ts

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+export interface ChatHistoryRailControllerLabels {
+  newChat: string;
+  showMore: string;
+  showLess: string;
+}
+
+export interface UseChatHistoryRailControllerOptions<Item> {
+  items: readonly Item[];
+  onNewChat: () => void;
+  labels: ChatHistoryRailControllerLabels;
+  previewCount?: number;
+  expandedCount?: number;
+}
+
+export interface ChatHistoryRailController<Item> {
+  expanded: boolean;
+  collapsedLimit: number;
+  expandedLimit: number;
+  visibleItems: Item[];
+  canExpand: boolean;
+  newChatLabel: string;
+  disclosureLabel: string;
+  onNewChat: () => void;
+  toggleExpanded: () => void;
+  resetExpanded: () => void;
+}
+
+function normalizeLimit(value: number | undefined, fallback: number): number {
+  if (value === undefined || !Number.isFinite(value)) return fallback;
+  return Math.max(1, Math.floor(value));
+}
+
+export function useChatHistoryRailController<Item>({
+  items,
+  onNewChat,
+  labels,
+  previewCount,
+  expandedCount,
+}: UseChatHistoryRailControllerOptions<Item>): ChatHistoryRailController<Item> {
+  const [expandedState, setExpandedState] = useState(false);
+  const collapsedLimit = normalizeLimit(previewCount, 5);
+  const expandedLimit = Math.max(
+    collapsedLimit,
+    normalizeLimit(expandedCount, 15),
+  );
+  const canExpand = items.length > collapsedLimit;
+  const expanded = canExpand && expandedState;
+  const visibleItems = useMemo(
+    () => items.slice(0, expanded ? expandedLimit : collapsedLimit),
+    [collapsedLimit, expanded, expandedLimit, items],
+  );
+
+  useEffect(() => {
+    if (!canExpand) setExpandedState(false);
+  }, [canExpand]);
+
+  const toggleExpanded = useCallback(() => {
+    if (canExpand) setExpandedState((current) => !current);
+  }, [canExpand]);
+  const resetExpanded = useCallback(() => setExpandedState(false), []);
+
+  return {
+    expanded,
+    collapsedLimit,
+    expandedLimit,
+    visibleItems,
+    canExpand,
+    newChatLabel: labels.newChat,
+    disclosureLabel: expanded ? labels.showLess : labels.showMore,
+    onNewChat,
+    toggleExpanded,
+    resetExpanded,
+  };
+}

package/corpus/toolkit/src/chat-history.css

@@ -113,12 +113,14 @@
   justify-content: center;
   flex: 0 0 auto;
   width: 30px;
+  height: auto;
   min-height: 30px;
 }
 
 .an-chat-history-rail__new-chat {
   flex: 1 1 auto;
   gap: 8px;
+  height: auto;
   min-width: 0;
   min-height: 30px;
   padding: 6px 10px;

package/corpus/toolkit/src/composer/ComposerPlusMenu.tsx

@@ -490,14 +490,17 @@ function ComposerPlusMenuFull({
       <Popover open={open} onOpenChange={setOpen}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                className="shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed"
-              >
-                <IconPlus className="h-4 w-4" />
-              </button>
-            </PopoverTrigger>
+            <span className="inline-flex shrink-0">
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="Add..."
+                  className="shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  <IconPlus className="h-4 w-4" />
+                </button>
+              </PopoverTrigger>
+            </span>
           </TooltipTrigger>
           <TooltipContent>Add...</TooltipContent>
         </Tooltip>