@agent-native/core 0.79.17 → 0.79.19

package/corpus/core/src/client/i18n.tsx

@@ -1,4 +1,4 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconCheck, IconChevronDown, IconLanguage } from "@tabler/icons-react";
 import i18next, { type i18n as I18nInstance } from "i18next";
 import React, {
@@ -34,6 +34,7 @@ import {
 } from "../localization/shared.js";
 import { setClientAppState } from "./application-state.js";
 import { callAction } from "./use-action.js";
+import { cn } from "./utils.js";
 
 export {
   DEFAULT_LOCALE,
@@ -676,6 +677,7 @@ export function LanguagePicker({
   variant?: "select" | "icon";
 }) {
   const { locale, preference, setPreference } = useLocale();
+  const [open, setOpen] = useState(false);
   const copy =
     LANGUAGE_PICKER_COPY[locale] ?? LANGUAGE_PICKER_COPY[DEFAULT_LOCALE];
   const resolvedLabel = label ?? copy.label;
@@ -691,84 +693,94 @@ export function LanguagePicker({
       : []),
     ...SUPPORTED_LOCALES.map((code) => ({
       value: code,
-      label:
-        LOCALE_METADATA[code].nativeName === LOCALE_METADATA[code].englishName
-          ? LOCALE_METADATA[code].nativeName
-          : `${LOCALE_METADATA[code].nativeName} (${LOCALE_METADATA[code].englishName})`,
+      label: `${LOCALE_METADATA[code].nativeName} (${code})`,
       description: code,
     })),
   ];
   const selected = options.find((option) => option.value === preference);
+  const selectedLabel = selected?.label ?? preference;
+  const triggerLabel = `${resolvedLabel}: ${selectedLabel}`;
+
+  function handleOptionClick(value: LocalePreference) {
+    setOpen(false);
+    void setPreference(normalizeLocalizationPreference(value).locale);
+  }
 
   return (
     <div className={className}>
-      <SelectPrimitive.Root
-        value={preference}
-        onValueChange={(value) =>
-          void setPreference(normalizeLocalizationPreference(value).locale)
-        }
-      >
-        <SelectPrimitive.Trigger
-          className={
-            variant === "icon"
-              ? "flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
-              : "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
-          }
-          aria-label={resolvedLabel}
-          title={selected?.label ?? resolvedLabel}
-        >
-          <span className="flex min-w-0 items-center gap-2">
-            <IconLanguage className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+        <PopoverPrimitive.Trigger asChild>
+          <button
+            type="button"
+            aria-label={triggerLabel}
+            title={triggerLabel}
+            data-language-picker-trigger
+            className={cn(
+              "shrink-0 rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:border-foreground/30 hover:bg-accent/40 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=open]:border-foreground/30 data-[state=open]:bg-accent/40",
+              variant === "icon"
+                ? "flex h-8 w-8 items-center justify-center"
+                : "flex h-9 w-full items-center justify-between gap-2 px-3 text-start text-sm",
+            )}
+          >
+            <span className="flex min-w-0 items-center gap-2">
+              <IconLanguage className="h-4 w-4 shrink-0 text-muted-foreground" />
+              {variant === "select" ? (
+                <span className="truncate">{selectedLabel}</span>
+              ) : (
+                <span className="sr-only">{triggerLabel}</span>
+              )}
+            </span>
             {variant === "select" ? (
-              <SelectPrimitive.Value>
-                <span className="truncate">
-                  {selected?.label ?? preference}
-                </span>
-              </SelectPrimitive.Value>
+              <IconChevronDown
+                className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+                aria-hidden="true"
+              />
             ) : null}
-          </span>
-          {variant === "select" ? (
-            <SelectPrimitive.Icon asChild>
-              <IconChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-            </SelectPrimitive.Icon>
-          ) : null}
-        </SelectPrimitive.Trigger>
-        <SelectPrimitive.Portal>
-          <SelectPrimitive.Content
-            position="popper"
+          </button>
+        </PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            align={variant === "icon" ? "end" : "start"}
             sideOffset={6}
-            className={
+            role="menu"
+            className={cn(
+              "z-[9999] max-h-[min(20rem,var(--radix-popover-content-available-height))] overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none will-change-[transform,opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:duration-100 data-[state=open]:duration-150 data-[state=closed]:ease-in data-[state=open]:ease-out data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
               variant === "icon"
-                ? "z-[9999] min-w-56 overflow-hidden rounded-lg border border-border bg-popover shadow-lg"
-                : "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg"
-            }
+                ? "min-w-56"
+                : "w-[min(20rem,calc(100vw-2rem))] min-w-[var(--radix-popover-trigger-width)]",
+            )}
           >
-            <SelectPrimitive.Viewport className="p-1">
-              {options.map((option) => (
-                <SelectPrimitive.Item
+            {options.map((option) => {
+              const optionSelected = option.value === preference;
+              return (
+                <button
                   key={option.value}
-                  value={option.value}
-                  className="relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40"
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={optionSelected}
+                  title={option.description}
+                  onClick={() => handleOptionClick(option.value)}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm outline-none transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:bg-accent/60 focus-visible:text-foreground",
+                    optionSelected
+                      ? "bg-accent/40 text-foreground"
+                      : "text-muted-foreground",
+                  )}
                 >
-                  <span className="absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground">
-                    <SelectPrimitive.ItemIndicator>
-                      <IconCheck className="h-3.5 w-3.5" />
-                    </SelectPrimitive.ItemIndicator>
-                  </span>
-                  <div className="flex min-w-0 flex-col">
-                    <SelectPrimitive.ItemText>
-                      <span className="text-foreground">{option.label}</span>
-                    </SelectPrimitive.ItemText>
-                    <span className="mt-0.5 text-[11px] leading-relaxed text-muted-foreground">
-                      {option.description}
-                    </span>
-                  </div>
-                </SelectPrimitive.Item>
-              ))}
-            </SelectPrimitive.Viewport>
-          </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
-      </SelectPrimitive.Root>
+                  <IconCheck
+                    className={cn(
+                      "h-3.5 w-3.5 shrink-0",
+                      optionSelected ? "opacity-100" : "opacity-0",
+                    )}
+                    aria-hidden="true"
+                  />
+                  <span className="truncate">{option.label}</span>
+                </button>
+              );
+            })}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
     </div>
   );
 }

package/corpus/core/src/client/index.ts

@@ -610,7 +610,13 @@ export {
   type DataWidgetResultMetadata,
 } from "./chat/widgets/data-widget-types.js";
 export { AgentNativeIcon } from "./components/icons/AgentNativeIcon.js";
-export { SettingsPanel, type SettingsPanelProps } from "./settings/index.js";
+export {
+  SettingsPanel,
+  SettingsTabsPage,
+  type SettingsPanelProps,
+  type SettingsTabItem,
+  type SettingsTabsPageProps,
+} from "./settings/index.js";
 export { useBuilderStatus } from "./settings/useBuilderStatus.js";
 export {
   openBuilderConnectPopup,

package/corpus/core/src/client/org/OrgSwitcher.tsx

@@ -64,9 +64,9 @@ export interface OrgSwitcherProps {
   reserveSpace?: boolean;
   /**
    * Path to navigate to when the user clicks "Organization settings".
-   * Defaults to `/team`, the standard organization-management route. Templates
-   * with an established org surface can pass their own path; pass `null` to
-   * only open the in-sidebar settings panel.
+   * Defaults to the standard Team tab inside Settings. Templates with an
+   * established org surface can pass their own path; pass `null` to only open
+   * the in-sidebar settings panel.
    */
   settingsPath?: string | null;
 }
@@ -97,7 +97,7 @@ const SECTION_LABEL_CLASS =
 const APP_SUBMENU_CONTENT_CLASS =
   "z-50 w-72 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 
-const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/team";
+const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#team";
 
 const APP_ICON_MAP: Record<string, typeof IconApps> = {
   Mail: IconMail,
@@ -131,7 +131,7 @@ function appMenuIcon(app: OrgSwitcherAppLink): typeof IconApps {
 }
 
 function organizationSettingsPath(path: string): string {
-  return `${path.replace(/#.*$/, "")}#workspace-settings`;
+  return path.includes("#") ? path : `${path}#team`;
 }
 
 function AppMenuLink({

package/corpus/core/src/client/org/TeamPage.tsx

@@ -58,6 +58,11 @@ export interface TeamPageProps {
    * Title shown at the top of the page. Defaults to "Team".
    */
   title?: string;
+  /**
+   * Hide the page title when this is rendered inside another titled surface,
+   * such as the Settings > Team tab.
+   */
+  showTitle?: boolean;
   /**
    * Description shown on the "Create an Organization" card. Defaults to
    * "Set up a team to collaborate with your colleagues."
@@ -1260,6 +1265,7 @@ function A2ASecretSection({ secret }: { secret: string | null | undefined }) {
 export function TeamPage({
   layout,
   title,
+  showTitle = true,
   createOrgDescription,
   className,
 }: TeamPageProps) {
@@ -1268,9 +1274,11 @@ export function TeamPage({
 
   const content = (
     <div className={`space-y-6 max-w-2xl ${className ?? ""}`}>
-      <h2 className="text-2xl font-bold tracking-tight">
-        {title ?? t("org.team")}
-      </h2>
+      {showTitle ? (
+        <h2 className="text-2xl font-bold tracking-tight">
+          {title ?? t("org.team")}
+        </h2>
+      ) : null}
 
       {isLoading && (
         <section className="rounded-lg border border-border bg-card p-6">

package/corpus/core/src/client/settings/SettingsTabsPage.tsx

@@ -0,0 +1,216 @@
+import { IconHistory, IconSettings, IconUsers } from "@tabler/icons-react";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type ComponentType,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../utils.js";
+
+type SettingsTabIcon = ComponentType<{ className?: string }>;
+
+export interface SettingsTabItem {
+  id: string;
+  label: string;
+  icon?: SettingsTabIcon;
+  content: ReactNode;
+}
+
+export interface SettingsTabsPageProps {
+  general: ReactNode;
+  team?: ReactNode;
+  whatsNew?: ReactNode;
+  extraTabs?: SettingsTabItem[];
+  generalLabel?: string;
+  teamLabel?: string;
+  whatsNewLabel?: string;
+  ariaLabel?: string;
+  defaultTab?: string;
+  className?: string;
+  navClassName?: string;
+  contentClassName?: string;
+}
+
+function normalizeTabId(value?: string | null): string | null {
+  const normalized = value
+    ?.replace(/^#/, "")
+    .trim()
+    .toLowerCase()
+    .replace(/['"]/g, "")
+    .replace(/[\s_]+/g, "-");
+  if (!normalized) return null;
+  if (
+    normalized === "whats-new" ||
+    normalized === "what-s-new" ||
+    normalized === "changelog" ||
+    normalized === "updates"
+  ) {
+    return "whats-new";
+  }
+  if (
+    normalized === "workspace" ||
+    normalized === "workspace-settings" ||
+    normalized === "organization" ||
+    normalized === "org"
+  ) {
+    return "team";
+  }
+  return normalized;
+}
+
+function activeTabFromHash(
+  tabs: SettingsTabItem[],
+  defaultTab: string,
+): string {
+  if (typeof window === "undefined") return defaultTab;
+  const fromHash = normalizeTabId(window.location.hash);
+  if (fromHash && tabs.some((tab) => tab.id === fromHash)) return fromHash;
+  return defaultTab;
+}
+
+function updateHashForTab(tabId: string) {
+  if (typeof window === "undefined") return;
+  const { pathname, search } = window.location;
+  const hash = tabId === "general" ? "" : `#${encodeURIComponent(tabId)}`;
+  window.history.pushState(null, "", `${pathname}${search}${hash}`);
+}
+
+export function SettingsTabsPage({
+  general,
+  team,
+  whatsNew,
+  extraTabs = [],
+  generalLabel = "General",
+  teamLabel = "Team",
+  whatsNewLabel = "What's new",
+  ariaLabel = "Settings sections",
+  defaultTab = "general",
+  className,
+  navClassName,
+  contentClassName,
+}: SettingsTabsPageProps) {
+  const tabs = useMemo<SettingsTabItem[]>(() => {
+    const next: SettingsTabItem[] = [
+      {
+        id: "general",
+        label: generalLabel,
+        icon: IconSettings,
+        content: general,
+      },
+    ];
+    if (team) {
+      next.push({
+        id: "team",
+        label: teamLabel,
+        icon: IconUsers,
+        content: team,
+      });
+    }
+    if (whatsNew) {
+      next.push({
+        id: "whats-new",
+        label: whatsNewLabel,
+        icon: IconHistory,
+        content: whatsNew,
+      });
+    }
+    next.push(...extraTabs);
+    return next;
+  }, [
+    extraTabs,
+    general,
+    generalLabel,
+    team,
+    teamLabel,
+    whatsNew,
+    whatsNewLabel,
+  ]);
+
+  const fallbackTab = tabs.some((tab) => tab.id === defaultTab)
+    ? defaultTab
+    : (tabs[0]?.id ?? "general");
+  const [activeTab, setActiveTab] = useState(() =>
+    activeTabFromHash(tabs, fallbackTab),
+  );
+
+  useEffect(() => {
+    if (tabs.some((tab) => tab.id === activeTab)) return;
+    setActiveTab(fallbackTab);
+  }, [activeTab, fallbackTab, tabs]);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      setActiveTab(activeTabFromHash(tabs, fallbackTab));
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [fallbackTab, tabs]);
+
+  const selectedTab = tabs.find((tab) => tab.id === activeTab) ?? tabs[0];
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-full w-full flex-col overflow-hidden bg-background sm:flex-row",
+        className,
+      )}
+    >
+      <nav
+        aria-label={ariaLabel}
+        role="tablist"
+        className={cn(
+          "flex shrink-0 gap-1 overflow-x-auto border-b border-border/50 bg-muted/30 p-2 sm:w-48 sm:flex-col sm:overflow-x-visible sm:border-b-0 sm:border-e",
+          navClassName,
+        )}
+      >
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const selected = tab.id === selectedTab?.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={selected}
+              aria-controls={`settings-tabpanel-${tab.id}`}
+              id={`settings-tab-${tab.id}`}
+              onClick={() => {
+                setActiveTab(tab.id);
+                updateHashForTab(tab.id);
+              }}
+              className={cn(
+                "flex min-h-9 shrink-0 items-center gap-2 rounded-md px-3 py-2 text-start text-sm font-medium transition-colors sm:w-full",
+                selected
+                  ? "bg-background text-foreground shadow-sm ring-1 ring-border/60"
+                  : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+              )}
+            >
+              {Icon ? (
+                <Icon
+                  className={cn(
+                    "size-4 shrink-0",
+                    selected ? "text-foreground" : "text-muted-foreground",
+                  )}
+                />
+              ) : null}
+              <span className="truncate">{tab.label}</span>
+            </button>
+          );
+        })}
+      </nav>
+      <div
+        id={`settings-tabpanel-${selectedTab?.id ?? "general"}`}
+        role="tabpanel"
+        aria-labelledby={`settings-tab-${selectedTab?.id ?? "general"}`}
+        className={cn(
+          "min-w-0 flex-1 overflow-y-auto p-4 sm:p-6",
+          contentClassName,
+        )}
+      >
+        {selectedTab?.content}
+      </div>
+    </div>
+  );
+}

package/corpus/core/src/client/settings/index.ts

@@ -1,3 +1,8 @@
 export { SettingsPanel, type SettingsPanelProps } from "./SettingsPanel.js";
+export {
+  SettingsTabsPage,
+  type SettingsTabItem,
+  type SettingsTabsPageProps,
+} from "./SettingsTabsPage.js";
 export { useBuilderStatus } from "./useBuilderStatus.js";
 export { SecretsSection, type SecretsSectionProps } from "./SecretsSection.js";

package/corpus/core/src/file-upload/index.ts

@@ -8,6 +8,7 @@ export {
   unregisterFileUploadProvider,
   listFileUploadProviders,
   getActiveFileUploadProvider,
+  getActiveFileUploadProviderForRequest,
   uploadFile,
 } from "./registry.js";
 export { builderFileUploadProvider } from "./builder.js";

package/corpus/core/src/file-upload/registry.ts

@@ -54,6 +54,24 @@ export function getActiveFileUploadProvider(): FileUploadProvider | null {
   return null;
 }
 
+export async function getActiveFileUploadProviderForRequest(): Promise<FileUploadProvider | null> {
+  for (const provider of providers.values()) {
+    if (provider.isConfigured()) return provider;
+    if (provider.isConfiguredForRequest) {
+      try {
+        if (await provider.isConfiguredForRequest()) return provider;
+      } catch {
+        // Treat failed scoped credential lookups as unavailable. The upload
+        // call will surface real provider errors after a provider is selected.
+      }
+    }
+  }
+  if (builderFileUploadProvider.isConfigured()) {
+    return builderFileUploadProvider;
+  }
+  return null;
+}
+
 /**
  * Upload a file via the active provider, or `null` if no provider is
  * configured. Callers use `null` as the signal to fall back to SQL
@@ -63,12 +81,10 @@ export function getActiveFileUploadProvider(): FileUploadProvider | null {
 export async function uploadFile(
   input: FileUploadInput,
 ): Promise<FileUploadResult | null> {
-  const provider = getActiveFileUploadProvider();
-  // Only trust user-registered providers (S3, etc.) from the sync check.
-  // The builder builtin's isConfigured() only checks process.env, which causes
-  // hard failures for authenticated non-local users on multi-tenant deployments
-  // where BUILDER_PRIVATE_KEY is set at the deploy level but the user has no
-  // personal credentials. Always resolve builder credentials asynchronously.
+  const provider = await getActiveFileUploadProviderForRequest();
+  // User-registered providers (S3, etc.) may be configured by sync runtime
+  // state or request-scoped DB secrets. Builder still gets an explicit async
+  // credential check below because its sync isConfigured() only checks env.
   if (provider && provider !== builderFileUploadProvider) {
     return provider.upload(input);
   }

package/corpus/core/src/file-upload/types.ts

@@ -32,8 +32,13 @@ export interface FileUploadProvider {
   id: string;
   /** Human-readable name. */
   name: string;
-  /** Returns true if this provider is currently configured (env vars etc.). */
+  /** Returns true if this provider is configured from synchronous runtime state. */
   isConfigured: () => boolean;
+  /**
+   * Returns true if this provider is configured for the active request.
+   * Use for DB-backed user/org/workspace secrets that require request context.
+   */
+  isConfiguredForRequest?: () => Promise<boolean>;
   /** Upload a file and return a URL. Throw on failure. */
   upload: (input: FileUploadInput) => Promise<FileUploadResult>;
 }