@agent-native/toolkit 0.211.0 → 0.212.0-nightly-20261021010049

package/src/composer/TiptapComposer.spec.ts

@@ -44,6 +44,7 @@ import {
   hasConfiguredCloudProvider,
   MODEL_SELECTOR_POPOVER_STYLE,
   mentionItemMatchesQuery,
+  modelProviderGroupLabel,
   resolveContextChipBackspaceAction,
   resolveComposerPrimaryAction,
   shouldRenderModelSelector,
@@ -5043,6 +5044,24 @@ describe("composerModelCostTier", () => {
   });
 });
 
+describe("modelProviderGroupLabel", () => {
+  it("drops the Builder.io suffix when the family name is unique", () => {
+    const builder = { engine: "builder", label: "OpenAI · Builder.io" };
+    const claude = { engine: "builder", label: "Claude · Builder.io" };
+    expect(modelProviderGroupLabel(builder, [builder, claude])).toBe("OpenAI");
+  });
+
+  it("keeps the suffix when a direct-key group shares the family name", () => {
+    const builder = { engine: "builder", label: "OpenAI · Builder.io" };
+    const direct = { engine: "ai-sdk:openai", label: "OpenAI" };
+    const groups = [builder, direct];
+    expect(modelProviderGroupLabel(builder, groups)).toBe(
+      "OpenAI · Builder.io",
+    );
+    expect(modelProviderGroupLabel(direct, groups)).toBe("OpenAI");
+  });
+});
+
 describe("voice composer insertion", () => {
   it("adds sentence punctuation and a trailing separator to dictated text", () => {
     expect(formatVoiceTranscriptForComposer("  First sentence  ")).toBe(

package/src/composer/TiptapComposer.tsx

@@ -1599,6 +1599,25 @@ export function isOpenAiModelProviderGroup(group: {
   );
 }
 
+const BUILDER_GROUP_SUFFIX = / · Builder\.io$/i;
+
+// The suffix is the only thing separating Builder.io credits from a group
+// billed to the user's own key for the same family, so keep it on collision.
+export function modelProviderGroupLabel(
+  group: { engine: string; label: string },
+  groups: ReadonlyArray<{ engine: string; label: string }>,
+): string {
+  const short = group.label.replace(BUILDER_GROUP_SUFFIX, "");
+  if (short === group.label) return group.label;
+  const collides = groups.some(
+    (other) =>
+      other !== group &&
+      other.label.replace(BUILDER_GROUP_SUFFIX, "").toLowerCase() ===
+        short.toLowerCase(),
+  );
+  return collides ? group.label : short;
+}
+
 const HARNESS_AGENTS_DOCS_URL =
   "https://www.agent-native.com/docs/harness-agents";
 
@@ -2133,10 +2152,9 @@ function ModelSelector({
               friendlyModelName(candidate, t)) === selectedModelFriendlyName,
         ),
     );
-  const selectedModelProviderLabel = selectedModelProviderGroup?.label.replace(
-    / · Builder\.io$/i,
-    "",
-  );
+  const selectedModelProviderLabel =
+    selectedModelProviderGroup &&
+    modelProviderGroupLabel(selectedModelProviderGroup, modelProviderGroups);
   const selectedModelDisplayLabel = selectedModelHasDuplicateName
     ? `${selectedModelFriendlyName} · ${selectedModelProviderLabel}`
     : selectedModelFriendlyName;
@@ -2682,7 +2700,10 @@ function ModelSelector({
                             {showProviderLabels && (
                               <div className="group flex items-center px-2 py-1">
                                 <span className="shrink-0 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-                                  {group.label.replace(/ · Builder\.io$/i, "")}
+                                  {modelProviderGroupLabel(
+                                    group,
+                                    visibleProviderGroups,
+                                  )}
                                 </span>
                                 {!group.configured && statusLabel && (
                                   <button

package/src/sharing/OwnershipFilter.spec.tsx

@@ -0,0 +1,108 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  filterByOwnership,
+  OwnershipFilter,
+  type OwnershipFilterValue,
+} from "./OwnershipFilter.js";
+
+const labels = { all: "Todos", mine: "Míos", shared: "Compartidos" };
+
+describe("filterByOwnership", () => {
+  const rows = [
+    { id: "a", mine: true },
+    { id: "b", mine: false },
+    { id: "c", mine: true },
+  ];
+  const isMine = (row: { mine: boolean }) => row.mine;
+
+  it("keeps everything for all, without aliasing the input", () => {
+    const result = filterByOwnership(rows, "all", isMine);
+    expect(result).toEqual(rows);
+    expect(result).not.toBe(rows);
+  });
+
+  it("splits owned and not-owned rows between mine and shared", () => {
+    expect(filterByOwnership(rows, "mine", isMine).map((r) => r.id)).toEqual([
+      "a",
+      "c",
+    ]);
+    expect(filterByOwnership(rows, "shared", isMine).map((r) => r.id)).toEqual([
+      "b",
+    ]);
+  });
+});
+
+describe("OwnershipFilter", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  function renderFilter(
+    value: OwnershipFilterValue,
+    onChange: (value: OwnershipFilterValue) => void = () => {},
+  ) {
+    act(() =>
+      root.render(
+        <OwnershipFilter value={value} onChange={onChange} labels={labels} />,
+      ),
+    );
+    return container.querySelector<HTMLButtonElement>("button")!;
+  }
+
+  it("names the trigger after the selected option and reserves room for the widest", () => {
+    const trigger = renderFilter("mine");
+    expect(trigger.getAttribute("aria-label")).toBe("Míos");
+    const hidden = Array.from(
+      trigger.querySelectorAll('[aria-hidden="true"].invisible'),
+    ).map((node) => node.textContent);
+    expect(hidden).toEqual(["Todos", "Míos", "Compartidos"]);
+  });
+
+  it("reports the chosen option from the menu and ignores unknown values", async () => {
+    const onChange = vi.fn();
+    const trigger = renderFilter("all", onChange);
+    await act(async () => {
+      trigger.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          pointerType: "mouse",
+        }),
+      );
+      await Promise.resolve();
+    });
+
+    const items = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+    );
+    expect(items.map((item) => item.textContent)).toEqual([
+      "Todos",
+      "Míos",
+      "Compartidos",
+    ]);
+    expect(items[0]?.getAttribute("aria-checked")).toBe("true");
+
+    await act(async () => {
+      items[2]?.click();
+      await Promise.resolve();
+    });
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("shared");
+  });
+});

package/src/sharing/OwnershipFilter.tsx

@@ -0,0 +1,103 @@
+import { IconChevronDown } from "@tabler/icons-react";
+
+import { Button } from "../ui/button.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.js";
+import { cn } from "../utils.js";
+
+export const OWNERSHIP_FILTER_VALUES = ["all", "mine", "shared"] as const;
+
+export type OwnershipFilterValue = (typeof OWNERSHIP_FILTER_VALUES)[number];
+
+/** Translated by the app; the toolkit ships no copy for the three options. */
+export type OwnershipFilterLabels = Record<OwnershipFilterValue, string>;
+
+export interface OwnershipFilterProps {
+  value: OwnershipFilterValue;
+  onChange: (value: OwnershipFilterValue) => void;
+  labels: OwnershipFilterLabels;
+  className?: string;
+}
+
+function isOwnershipFilterValue(value: string): value is OwnershipFilterValue {
+  return (OWNERSHIP_FILTER_VALUES as readonly string[]).includes(value);
+}
+
+/**
+ * Pure and app-controlled: it renders the choice and reports it. Whether the
+ * app narrows rows client-side or refetches with the value is the app's call.
+ */
+export function OwnershipFilter({
+  value,
+  onChange,
+  labels,
+  className,
+}: OwnershipFilterProps) {
+  const label = labels[value];
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          aria-label={label}
+          className={cn("h-9 shrink-0 gap-2", className)}
+        >
+          {/* Every option is rendered invisibly so the trigger keeps one width. */}
+          <span className="grid">
+            {OWNERSHIP_FILTER_VALUES.map((option) => (
+              <span
+                key={option}
+                aria-hidden="true"
+                className="invisible col-start-1 row-start-1 whitespace-nowrap"
+              >
+                {labels[option]}
+              </span>
+            ))}
+            <span className="col-start-1 row-start-1 whitespace-nowrap">
+              {label}
+            </span>
+          </span>
+          <IconChevronDown className="size-4" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(next) => {
+            if (isOwnershipFilterValue(next)) onChange(next);
+          }}
+        >
+          {OWNERSHIP_FILTER_VALUES.map((option) => (
+            <DropdownMenuRadioItem
+              key={option}
+              value={option}
+              indicator="check"
+            >
+              {labels[option]}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * Client-side narrowing for apps that already hold every row. Apps that page
+ * from the server should send the filter value instead and skip this.
+ */
+export function filterByOwnership<T>(
+  items: readonly T[],
+  value: OwnershipFilterValue,
+  isMine: (item: T) => boolean,
+): T[] {
+  if (value === "all") return [...items];
+  return items.filter((item) => isMine(item) === (value === "mine"));
+}

package/src/sharing/VisibilityBadge.spec.ts

@@ -17,72 +17,90 @@ interface SpanElement extends ReactElement {
   props: {
     className?: string;
     style: SpanStyle;
-    children: [ReactElement<{ size: number }>, string];
+    "data-visibility": string;
+    children: [ReactElement<{ size: number; "aria-hidden"?: string }>, string];
   };
 }
 
+const labels = { private: "Privé", org: "Équipe", public: "Public·fr" };
+
 function renderBadge(...args: Parameters<typeof VisibilityBadge>): SpanElement {
   return VisibilityBadge(...args) as unknown as SpanElement;
 }
 
 describe("VisibilityBadge", () => {
-  it("renders the public icon and label", () => {
-    const el = renderBadge({ visibility: "public" });
-    expect(el.type).toBe("span");
-    const [icon, label] = el.props.children;
-    expect(icon.type).toBe(IconWorld);
-    expect(label).toBe("Public");
+  it("renders the icon and the supplied label for each visibility", () => {
+    const cases = [
+      ["public", IconWorld, "Public·fr"],
+      ["org", IconUsersGroup, "Équipe"],
+      ["private", IconLock, "Privé"],
+    ] as const;
+    for (const [visibility, expectedIcon, expectedLabel] of cases) {
+      const el = renderBadge({ visibility, labels });
+      const [icon, label] = el.props.children;
+      expect(el.type).toBe("span");
+      expect(icon.type).toBe(expectedIcon);
+      expect(label).toBe(expectedLabel);
+      expect(el.props["data-visibility"]).toBe(visibility);
+    }
   });
 
-  it("renders the org icon and label", () => {
-    const el = renderBadge({ visibility: "org" });
-    const [icon, label] = el.props.children;
-    expect(icon.type).toBe(IconUsersGroup);
-    expect(label).toBe("Org");
+  it("keeps the legacy English text for consumers that pass no labels", () => {
+    const text = (visibility: "private" | "org" | "public") =>
+      renderBadge({ visibility }).props.children[1];
+    expect(text("public")).toBe("Public");
+    expect(text("org")).toBe("Org");
+    expect(text("private")).toBe("Private");
   });
 
-  it("renders the private icon and label", () => {
-    const el = renderBadge({ visibility: "private" });
-    const [icon, label] = el.props.children;
-    expect(icon.type).toBe(IconLock);
-    expect(label).toBe("Private");
+  it("lets labels override one visibility while the others keep the default", () => {
+    expect(
+      renderBadge({ visibility: "org", labels: { org: "Team" } }).props
+        .children[1],
+    ).toBe("Team");
+    expect(
+      renderBadge({ visibility: "public", labels: { org: "Team" } }).props
+        .children[1],
+    ).toBe("Public");
   });
 
-  it("falls back to private when visibility is null", () => {
-    const el = renderBadge({ visibility: null });
-    const [icon, label] = el.props.children;
-    expect(icon.type).toBe(IconLock);
-    expect(label).toBe("Private");
+  it("hides the icon from assistive tech because the text names it", () => {
+    const [icon] = renderBadge({ visibility: "org" }).props.children;
+    expect(icon.props["aria-hidden"]).toBe("true");
   });
 
-  it("falls back to private when visibility is undefined", () => {
-    const el = renderBadge({ visibility: undefined });
-    const [icon, label] = el.props.children;
-    expect(icon.type).toBe(IconLock);
-    expect(label).toBe("Private");
+  it("falls back to private when visibility is null or undefined", () => {
+    for (const visibility of [null, undefined]) {
+      const el = renderBadge({ visibility, labels });
+      const [icon, label] = el.props.children;
+      expect(icon.type).toBe(IconLock);
+      expect(label).toBe("Privé");
+    }
   });
 
   it("applies a custom size to both the span font size and the icon size", () => {
-    const el = renderBadge({ visibility: "public", size: 20 });
+    const el = renderBadge({ visibility: "public", size: 20, labels });
     expect(el.props.style.fontSize).toBe(20);
-    const [icon] = el.props.children;
-    expect(icon.props.size).toBe(22);
+    expect(el.props.children[0].props.size).toBe(22);
   });
 
   it("defaults size to 12 for the span and 14 for the icon when omitted", () => {
-    const el = renderBadge({ visibility: "public" });
+    const el = renderBadge({ visibility: "public", labels });
     expect(el.props.style.fontSize).toBe(12);
-    const [icon] = el.props.children;
-    expect(icon.props.size).toBe(14);
+    expect(el.props.children[0].props.size).toBe(14);
   });
 
   it("passes className through to the span", () => {
-    const el = renderBadge({ visibility: "public", className: "my-badge" });
+    const el = renderBadge({
+      visibility: "public",
+      labels,
+      className: "my-badge",
+    });
     expect(el.props.className).toBe("my-badge");
   });
 
   it("always uses the muted-foreground color token", () => {
-    const el = renderBadge({ visibility: "org" });
+    const el = renderBadge({ visibility: "org", labels });
     expect(el.props.style.color).toBe("hsl(var(--muted-foreground))");
   });
 });

package/src/sharing/VisibilityBadge.tsx

@@ -1,23 +1,43 @@
 import { IconLock, IconUsersGroup, IconWorld } from "@tabler/icons-react";
 
+export type VisibilityBadgeValue = "private" | "org" | "public";
+
+/** Translated by the app; the pure badge ships no copy of its own. */
+export type VisibilityBadgeLabels = Record<VisibilityBadgeValue, string>;
+
+/**
+ * Legacy English copy for standalone consumers that pass no labels. Apps with
+ * a Core catalog should use the localized badge in `toolkit/app/sharing`.
+ */
+export const DEFAULT_ENGLISH_VISIBILITY_BADGE_LABELS: VisibilityBadgeLabels = {
+  private: "Private",
+  org: "Org",
+  public: "Public",
+};
+
 export interface VisibilityBadgeProps {
-  visibility: "private" | "org" | "public" | null | undefined;
+  visibility: VisibilityBadgeValue | null | undefined;
+  /** Translated copy; omitted labels fall back to the English defaults. */
+  labels?: Partial<VisibilityBadgeLabels>;
   size?: number;
   className?: string;
 }
 
 export function VisibilityBadge({
   visibility,
+  labels: labelOverrides,
   size = 12,
   className,
 }: VisibilityBadgeProps) {
   const v = visibility ?? "private";
+  const label =
+    labelOverrides?.[v] ?? DEFAULT_ENGLISH_VISIBILITY_BADGE_LABELS[v];
   const Icon =
     v === "public" ? IconWorld : v === "org" ? IconUsersGroup : IconLock;
-  const label = v === "public" ? "Public" : v === "org" ? "Org" : "Private";
   return (
     <span
       className={className}
+      data-visibility={v}
       style={{
         display: "inline-flex",
         alignItems: "center",
@@ -26,7 +46,7 @@ export function VisibilityBadge({
         color: "hsl(var(--muted-foreground))",
       }}
     >
-      <Icon size={size + 2} />
+      <Icon size={size + 2} aria-hidden="true" />
       {label}
     </span>
   );

package/src/sharing/index.ts

@@ -19,6 +19,14 @@ export {
   ShareTabs,
   type ShareTabsProps,
 } from "./ShareControls.js";
+export {
+  filterByOwnership,
+  OWNERSHIP_FILTER_VALUES,
+  OwnershipFilter,
+  type OwnershipFilterLabels,
+  type OwnershipFilterProps,
+  type OwnershipFilterValue,
+} from "./OwnershipFilter.js";
 export {
   ShareAgentsSection,
   type ShareAgentsSectionProps,
@@ -32,6 +40,9 @@ export {
   type ShareTriggerProps,
 } from "./SharePrimitives.js";
 export {
+  DEFAULT_ENGLISH_VISIBILITY_BADGE_LABELS,
   VisibilityBadge,
+  type VisibilityBadgeLabels,
   type VisibilityBadgeProps,
+  type VisibilityBadgeValue,
 } from "./VisibilityBadge.js";

package/src/ui/alert-dialog.tsx

@@ -30,13 +30,18 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    /** Raise the overlay with the content when opening above other layers. */
+    overlayStyle?: React.CSSProperties;
     overlayProps?: React.ComponentPropsWithoutRef<
       typeof AlertDialogPrimitive.Overlay
     > & { [dataAttribute: `data-${string}`]: string | undefined };
   }
->(({ className, style, overlayProps, ...props }, ref) => (
+>(({ className, style, overlayStyle, overlayProps, ...props }, ref) => (
   <AlertDialogPortal>
-    <AlertDialogOverlay {...overlayProps} />
+    <AlertDialogOverlay
+      {...overlayProps}
+      style={{ ...overlayProps?.style, ...overlayStyle }}
+    />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(

package/src/ui/tooltip.tsx

@@ -7,7 +7,28 @@ const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+/**
+ * Opens on keyboard focus, but not when a closing menu, popover or dialog
+ * hands focus back to the trigger after a click: Radix opens on any focus,
+ * so the tooltip would pop up after every such close.
+ */
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ onFocus, ...props }, ref) => (
+  <TooltipPrimitive.Trigger
+    ref={ref}
+    onFocus={(event) => {
+      onFocus?.(event);
+      // Radix skips its own open-on-focus for a default-prevented event.
+      if (!event.currentTarget.matches(":focus-visible")) {
+        event.preventDefault();
+      }
+    }}
+    {...props}
+  />
+));
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 
 function normalizeTooltipText(text: string): string {
   const decoded = text.replace(/\\u([0-9a-fA-F]{4})/g, (_match, hex) =>