@agent-native/core 0.178.1 → 0.178.2-nightly-20260910195009

package/corpus/templates/tasks/app/components/layout/Sidebar.tsx

@@ -1,36 +1,27 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
-import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
-import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
+import {
+  AppSidebar,
+  FeedbackButton,
+  type AppSidebarItemDefinition,
+} from "@agent-native/core/client/ui";
 import {
   IconCheckbox,
   IconForms,
   IconInbox,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarLeftExpand,
   IconSearch,
   IconSettings,
 } from "@tabler/icons-react";
-import { Link, useLocation } from "react-router";
+import { useLocation } from "react-router";
 
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { APP_TITLE } from "@/lib/app-config";
-import { cn } from "@/lib/utils";
-
-const NAV_ITEMS = [
-  { icon: IconInbox, labelKey: "sidebar.navInbox", href: "/inbox" },
-  { icon: IconCheckbox, labelKey: "sidebar.navTasks", href: "/tasks" },
-  { icon: IconForms, labelKey: "sidebar.navFields", href: "/fields" },
-];
-
-const BOTTOM_NAV_ITEMS = [
-  { icon: IconSettings, labelKey: "header.pageSettings", href: "/settings" },
-];
 
 interface SidebarProps {
   collapsed?: boolean;
@@ -45,228 +36,85 @@ export function Sidebar({
 }: SidebarProps) {
   const t = useT();
   const location = useLocation();
-  const ToggleIcon = collapsed
-    ? IconLayoutSidebarLeftExpand
-    : IconLayoutSidebarLeftCollapse;
-  const navClass = ({ isActive }: { isActive: boolean }) =>
-    cn(
-      "flex items-center text-sm transition-colors",
-      collapsed
-        ? "relative h-10 w-full justify-center rounded-none border-l-2 px-0"
-        : "h-9 rounded-md gap-3 px-3",
-      isActive
-        ? collapsed
-          ? "border-l-sidebar-accent-foreground/80 bg-sidebar-accent text-sidebar-accent-foreground"
-          : "bg-sidebar-accent text-sidebar-accent-foreground"
-        : collapsed
-          ? "border-l-transparent text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
-          : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
-    );
-  const collapseButton = collapsible ? (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={() => onCollapsedChange?.(!collapsed)}
-          className={cn(
-            "flex shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "size-8" : "size-7",
-          )}
-          aria-label={
-            collapsed
-              ? t("sidebar.expandSidebar")
-              : t("sidebar.collapseSidebar")
-          }
-        >
-          <ToggleIcon className="size-4" />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="right">
-        {collapsed ? t("sidebar.expandSidebar") : t("sidebar.collapseSidebar")}
-      </TooltipContent>
-    </Tooltip>
-  ) : null;
+
+  const items: AppSidebarItemDefinition[] = [
+    {
+      to: "/inbox",
+      label: t("sidebar.navInbox"),
+      icon: IconInbox,
+      active: location.pathname.startsWith("/inbox"),
+    },
+    {
+      to: "/tasks",
+      label: t("sidebar.navTasks"),
+      icon: IconCheckbox,
+      active: location.pathname.startsWith("/tasks"),
+    },
+    {
+      to: "/fields",
+      label: t("sidebar.navFields"),
+      icon: IconForms,
+      active: location.pathname.startsWith("/fields"),
+    },
+  ];
+
+  const secondaryItems: AppSidebarItemDefinition[] = [
+    {
+      to: "/settings",
+      label: t("header.pageSettings"),
+      icon: IconSettings,
+      active: location.pathname.startsWith("/settings"),
+    },
+  ];
+
+  const feedbackButton = (
+    <FeedbackButton variant={collapsed ? "icon" : "sidebar"} side="right" />
+  );
+
+  const orgSwitcher = (
+    <OrgSwitcher
+      compact={collapsed}
+      reserveSpace
+      // Tasks does not mount /agent, so the default link would 404.
+      agentPath={null}
+      className={
+        collapsed
+          ? "!size-9 !p-0 [&>svg]:!size-4 !bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary"
+          : "min-w-0 flex-1 !bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary"
+      }
+    />
+  );
+
   const searchButton = (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <Button
           type="button"
+          variant="ghost"
+          size="icon"
+          className="size-9 shrink-0 text-primary hover:bg-accent/60 hover:text-primary"
           onClick={openCommandMenu}
           aria-label={t("sidebar.search")}
-          className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <IconSearch className="size-4" />
-        </button>
+        </Button>
       </TooltipTrigger>
       <TooltipContent side="right">{t("sidebar.search")}</TooltipContent>
     </Tooltip>
   );
-  const feedbackButton = (
-    <FeedbackButton
-      variant={collapsed ? "icon" : "sidebar"}
-      className={collapsed ? "size-8" : "min-w-0"}
-      side="right"
-    />
-  );
 
   return (
-    <aside
-      data-collapsed={collapsed ? "true" : "false"}
-      className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-150",
-        collapsed ? "w-12" : "w-60",
-      )}
-    >
-      <div
-        className={cn(
-          "flex shrink-0 items-center border-b border-sidebar-border",
-          collapsed ? "h-12 justify-center px-0" : "h-14 px-3",
-        )}
-      >
-        <Link
-          to="/tasks"
-          onClick={(event) => {
-            if (
-              !collapsible ||
-              !onCollapsedChange ||
-              event.metaKey ||
-              event.ctrlKey ||
-              event.shiftKey ||
-              event.altKey ||
-              event.button !== 0
-            ) {
-              return;
-            }
-            event.preventDefault();
-            onCollapsedChange(!collapsed);
-          }}
-          className={cn(
-            "flex min-w-0 items-center rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            collapsed ? "size-7 justify-center" : "flex-1 gap-3",
-          )}
-          aria-label={
-            collapsible && onCollapsedChange
-              ? collapsed
-                ? t("sidebar.expandSidebar")
-                : t("sidebar.collapseSidebar")
-              : collapsed
-                ? APP_TITLE
-                : undefined
-          }
-        >
-          <AgentNativeIcon
-            aria-hidden="true"
-            className="h-3.5 w-6 shrink-0 text-sidebar-accent-foreground"
-          />
-          <div className={cn("min-w-0", collapsed && "sr-only")}>
-            <p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
-              {APP_TITLE}
-            </p>
-          </div>
-        </Link>
-      </div>
-
-      <nav
-        className={cn(
-          "flex-1 overflow-y-auto",
-          collapsed ? "px-0 py-2" : "px-2 py-3",
-        )}
-      >
-        <div className={cn("grid", collapsed ? "gap-0" : "gap-1")}>
-          {NAV_ITEMS.map((item) => {
-            const Icon = item.icon;
-            const isActive = location.pathname.startsWith(item.href);
-            const label = t(item.labelKey);
-            const link = (
-              <Link
-                to={item.href}
-                className={navClass({ isActive })}
-                aria-current={isActive ? "page" : undefined}
-                aria-label={collapsed ? label : undefined}
-              >
-                <Icon className="size-4 shrink-0" />
-                <span className={collapsed ? "sr-only" : "truncate"}>
-                  {label}
-                </span>
-              </Link>
-            );
-            return collapsed ? (
-              <Tooltip key={item.href}>
-                <TooltipTrigger asChild>{link}</TooltipTrigger>
-                <TooltipContent side="right">{label}</TooltipContent>
-              </Tooltip>
-            ) : (
-              <div key={item.href}>{link}</div>
-            );
-          })}
-        </div>
-      </nav>
-
-      <div
-        className={cn(
-          "mt-auto shrink-0",
-          collapsed && "border-t border-sidebar-border py-2",
-        )}
-      >
-        <nav
-          className={cn(
-            "grid gap-1",
-            collapsed
-              ? "px-1 py-1 empty:hidden"
-              : "border-t border-sidebar-border px-3 py-2 empty:hidden",
-          )}
-        >
-          {BOTTOM_NAV_ITEMS.map((item) => {
-            const Icon = item.icon;
-            const isActive = location.pathname.startsWith(item.href);
-            return (
-              <Link
-                key={item.href}
-                to={item.href}
-                aria-label={collapsed ? t(item.labelKey) : undefined}
-                className={cn(
-                  "flex items-center rounded-md text-sm",
-                  collapsed ? "h-9 justify-center px-0" : "gap-3 px-3 py-2",
-                  isActive
-                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                    : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
-                )}
-              >
-                <Icon className="size-4 shrink-0" />
-                <span className={collapsed ? "sr-only" : "truncate"}>
-                  {t(item.labelKey)}
-                </span>
-              </Link>
-            );
-          })}
-        </nav>
-
-        <div
-          className={cn(
-            collapsed
-              ? "px-1 py-1"
-              : "border-t border-sidebar-border px-3 py-2",
-          )}
-        >
-          <OrgSwitcher
-            reserveSpace
-            // Tasks does not mount /agent, so the default link would 404.
-            agentPath={null}
-            className={
-              collapsed
-                ? "h-8 justify-center px-0 [&>span]:sr-only [&>svg:last-child]:hidden"
-                : undefined
-            }
-          />
-        </div>
-
-        <SidebarFooterActions
-          collapsed={collapsed}
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
-      </div>
-    </aside>
+    <AppSidebar
+      collapsed={collapsed}
+      collapsible={collapsible}
+      onCollapsedChange={onCollapsedChange}
+      brandName={APP_TITLE}
+      brandHref="/tasks"
+      items={items}
+      secondaryItems={secondaryItems}
+      feedback={feedbackButton}
+      orgSwitcher={orgSwitcher}
+      footerExtras={searchButton}
+    />
   );
 }

package/dist/automation/index.d.ts

@@ -186,8 +186,8 @@ export declare function createAutomationCallbackHandler(runtime: AutomationRunti
     duplicate?: undefined;
     eventId?: undefined;
 } | {
-    error?: undefined;
     accepted: boolean;
     duplicate: boolean;
     eventId: string;
+    error?: undefined;
 }>;

package/dist/client/EnvironmentBadge.d.ts

@@ -5,13 +5,16 @@ export declare function isAgentNativeDesktopUserAgent(userAgent: string | undefi
 export declare function resolveEnvironmentChannel(config: AgentNativeConfig, hostname: string | undefined): Extract<AgentNativeDeploymentEnvironment, "local" | "beta" | "production"> | null;
 export declare function isBetaOptOutActive(value: string | number | null | undefined, now?: number): boolean;
 export type EnvironmentBadgePlacement = "fixed" | "inline";
+export interface EnvironmentBadgeProps {
+    placement?: EnvironmentBadgePlacement;
+    showProduction?: boolean;
+    badgeText?: string;
+    className?: string;
+}
 /**
  * Environment indicator and first-party hosted lane switcher. Beta is
  * intentionally visible before authentication so a visitor can always leave
  * beta from the sign-in page. Production remains an internal auto-redirect
  * lane for authenticated staff.
  */
-export declare function EnvironmentBadge({ placement, showProduction, }?: {
-    placement?: EnvironmentBadgePlacement;
-    showProduction?: boolean;
-}): import("react").JSX.Element | null;
+export declare function EnvironmentBadge({ placement, showProduction, badgeText, className, }?: EnvironmentBadgeProps): import("react").JSX.Element | null;

package/dist/client/EnvironmentBadge.js

@@ -117,8 +117,10 @@ const environmentBadgePlacementClasses = {
 function EnvironmentLink({ label, href }) {
     return (_jsx(Button, { asChild: true, className: "w-full justify-center", size: "sm", variant: "outline", children: _jsx("a", { href: href, children: label }) }));
 }
-function EnvironmentBadgeContent({ environment, placement, targets, }) {
+function EnvironmentBadgeContent({ environment, placement, targets, badgeText, className, }) {
     const [isHidden, setIsHidden] = useState(false);
+    const { session } = useSession();
+    const isBuilder = isBuilderIoEmployee(session?.email);
     if (typeof window === "undefined")
         return null;
     if (isHidden)
@@ -128,18 +130,24 @@ function EnvironmentBadgeContent({ environment, placement, targets, }) {
     const productionHref = buildEnvironmentOptOutUrl(currentHref, targets.productionHost);
     if (environment === "beta" ? !productionHref : !betaHref)
         return null;
-    const label = environment === "beta" ? "beta" : "prod";
+    const label = badgeText ?? "alpha";
     const title = environment === "beta"
-        ? "You're on Agent-Native Beta"
+        ? `You're on Agent-Native ${label.charAt(0).toUpperCase() + label.slice(1)}`
         : "You're on Agent-Native Production";
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { "aria-label": `Open ${title.toLowerCase()} switcher`, className: cn(environmentBadgePlacementClasses[placement], environment === "beta"
-                        ? "border-primary/80"
-                        : "border-border/80 bg-background/95 text-foreground"), size: "sm", variant: environment === "beta" ? "default" : "outline", children: label }) }), _jsxs(PopoverContent, { align: "start", className: "w-[280px] p-5", side: placement === "inline" ? "bottom" : "top", sideOffset: 8, children: [_jsx("div", { className: "mb-1 text-sm font-semibold leading-5", children: title }), _jsx("div", { className: "mb-4 text-sm text-muted-foreground", children: "Choose where you want to continue." }), _jsxs("div", { className: "grid gap-2", children: [environment === "beta" ? (_jsx(EnvironmentLink, { href: productionHref, label: "Switch to production" })) : (_jsx(EnvironmentLink, { href: betaHref, label: "Go to beta" })), _jsx(Button, { className: "mt-2 -mb-2 w-full justify-center text-muted-foreground", onClick: () => setIsHidden(true), size: "sm", type: "button", variant: "ghost", children: "Hide badge" })] })] })] }));
+    const badgeClasses = cn(environmentBadgePlacementClasses[placement], environment === "beta"
+        ? "border-primary/80"
+        : "border-border/80 bg-background/95 text-foreground", className);
+    if (!isBuilder) {
+        return (_jsx("div", { "aria-label": title, className: cn(badgeClasses, "inline-flex items-center justify-center select-none", environment === "beta"
+                ? "border-primary/80 bg-primary text-primary-foreground"
+                : "border-border/80 bg-background/95 text-foreground"), role: "status", children: label }));
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { "aria-label": `Open ${title.toLowerCase()} switcher`, className: badgeClasses, size: "sm", variant: environment === "beta" ? "default" : "outline", children: label }) }), _jsxs(PopoverContent, { align: "start", className: "w-[280px] p-5", side: placement === "inline" ? "bottom" : "top", sideOffset: 8, children: [_jsx("div", { className: "mb-1 text-sm font-semibold leading-5", children: title }), _jsx("div", { className: "mb-4 text-sm text-muted-foreground", children: "Choose where you want to continue." }), _jsxs("div", { className: "grid gap-2", children: [environment === "beta" ? (_jsx(EnvironmentLink, { href: productionHref, label: "Switch to production" })) : (_jsx(EnvironmentLink, { href: betaHref, label: "Go to beta" })), _jsx(Button, { className: "mt-2 -mb-2 w-full justify-center text-muted-foreground", onClick: () => setIsHidden(true), size: "sm", type: "button", variant: "ghost", children: "Hide badge" })] })] })] }));
 }
-function LocalEnvironmentBadge({ placement, }) {
-    return (_jsx("div", { "aria-label": "Local development environment", className: cn(environmentBadgePlacementClasses[placement], "inline-flex items-center justify-center border border-border/80 bg-background/95 text-foreground"), role: "status", children: "dev" }));
+function LocalEnvironmentBadge({ placement, badgeText = "alpha", className, }) {
+    return (_jsx("div", { "aria-label": "Local development environment", className: cn(environmentBadgePlacementClasses[placement], "inline-flex items-center justify-center border border-border/80 bg-background/95 text-foreground select-none", className), role: "status", children: badgeText }));
 }
-function ProductionEnvironmentBadge({ placement, targets, }) {
+function ProductionEnvironmentBadge({ placement, targets, badgeText, className, }) {
     const { session, status } = useSession();
     const isEligible = typeof window !== "undefined" &&
         window.parent === window &&
@@ -174,9 +182,7 @@ function ProductionEnvironmentBadge({ placement, targets, }) {
         });
         window.location.replace(betaHref);
     }, [isEligible, session?.email, status, targets.betaHost]);
-    if (!isEligible)
-        return null;
-    return (_jsx(EnvironmentBadgeContent, { environment: "production", placement: placement, targets: targets }));
+    return (_jsx(EnvironmentBadgeContent, { environment: "production", placement: placement, targets: targets, badgeText: badgeText, className: className }));
 }
 /**
  * Environment indicator and first-party hosted lane switcher. Beta is
@@ -184,12 +190,13 @@ function ProductionEnvironmentBadge({ placement, targets, }) {
  * beta from the sign-in page. Production remains an internal auto-redirect
  * lane for authenticated staff.
  */
-export function EnvironmentBadge({ placement = "fixed", showProduction = true, } = {}) {
+export function EnvironmentBadge({ placement = "fixed", showProduction = true, badgeText, className, } = {}) {
     const [hydrated, setHydrated] = useState(false);
     const config = useMemo(injectedAgentNativeConfig, []);
     const hostname = typeof window === "undefined" ? undefined : window.location.hostname;
     const environment = resolveEnvironmentChannel(config, hostname);
     const targets = resolveEnvironmentTargets(hostname);
+    const resolvedBadgeText = badgeText ?? config.deployment?.badgeText ?? config.badgeText ?? "alpha";
     useEffect(() => {
         setHydrated(true);
     }, []);
@@ -200,14 +207,15 @@ export function EnvironmentBadge({ placement = "fixed", showProduction = true, }
         return null;
     }
     if (environment === "local") {
-        return _jsx(LocalEnvironmentBadge, { placement: placement });
+        return (_jsx(LocalEnvironmentBadge, { placement: placement, badgeText: resolvedBadgeText, className: className }));
+    }
+    if (!targets) {
+        return (_jsx("div", { "aria-label": "Development environment", className: cn(environmentBadgePlacementClasses[placement], "inline-flex items-center justify-center border border-border/80 bg-background/95 text-foreground select-none", className), role: "status", children: resolvedBadgeText }));
     }
-    if (!targets)
-        return null;
     if (environment === "beta") {
-        return (_jsx(EnvironmentBadgeContent, { environment: "beta", placement: placement, targets: targets }));
+        return (_jsx(EnvironmentBadgeContent, { environment: "beta", placement: placement, targets: targets, badgeText: resolvedBadgeText, className: className }));
     }
     if (!showProduction)
         return null;
-    return _jsx(ProductionEnvironmentBadge, { placement: placement, targets: targets });
+    return (_jsx(ProductionEnvironmentBadge, { placement: placement, targets: targets, badgeText: resolvedBadgeText, className: className }));
 }

package/dist/client/FeedbackButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { IconMessage2, IconCheck } from "@tabler/icons-react";
+import { IconCheck, IconMessageCircle } from "@tabler/icons-react";
 import { useState, useEffect, useRef, useCallback, } from "react";
 import { DEFAULT_LOCALE } from "../localization/shared.js";
 import { getFeedbackClientContext } from "./feedback-context.js";
@@ -15,7 +15,7 @@ function isSyntheticAgentNativeAnonymousEmail(value) {
 }
 const FEEDBACK_COPY = {
     "en-US": {
-        label: "Feedback",
+        label: "Send feedback",
         placeholder: "What's working, what's broken, or what would you change?",
         submit: "Send feedback",
         submitting: "Sending...",
@@ -261,9 +261,19 @@ function clientHostname() {
     return location?.hostname;
 }
 function isFirstPartyHostname(hostname) {
-    const normalized = hostname?.trim().toLowerCase();
+    const normalized = hostname?.trim().toLowerCase().split(":")[0];
     return (normalized === FIRST_PARTY_HOSTNAME ||
-        normalized?.endsWith(`.${FIRST_PARTY_HOSTNAME}`) === true);
+        normalized?.endsWith(`.${FIRST_PARTY_HOSTNAME}`) === true ||
+        normalized?.endsWith(".netlify.app") === true ||
+        normalized?.endsWith(".builder.io") === true);
+}
+function isLocalDevHostname(hostname) {
+    const normalized = hostname?.trim().toLowerCase().split(":")[0];
+    return (normalized === "localhost" ||
+        normalized === "127.0.0.1" ||
+        normalized === "[::1]" ||
+        normalized === "0.0.0.0" ||
+        normalized?.endsWith(".local") === true);
 }
 function isLegacyFeedbackPageUrl(value, hostname) {
     const hasScheme = /^[a-z][a-z\d+.-]*:/i.test(value);
@@ -284,7 +294,11 @@ export function resolveFeedbackUrl(url, hostname = clientHostname()) {
     }
     if (url !== undefined)
         return null;
-    return isFirstPartyHostname(hostname) ? FIRST_PARTY_FEEDBACK_URL : null;
+    // Local template/dev hosts are first-party too — otherwise the sidebar
+    // feedback row vanishes on 127.0.0.1 even though every app wires it.
+    return isFirstPartyHostname(hostname) || isLocalDevHostname(hostname)
+        ? FIRST_PARTY_FEEDBACK_URL
+        : null;
 }
 export function FeedbackButton(props) {
     const [mounted, setMounted] = useState(false);
@@ -392,13 +406,14 @@ function FeedbackPopoverButton({ variant = "sidebar", label, url, className, sid
         trigger = (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: customTrigger }));
     }
     else if (variant === "icon") {
-        trigger = (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: _jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": resolvedLabel, className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", className), children: _jsx(IconMessage2, { size: 14 }) }) }) }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { sideOffset: 6, className: "z-[100040] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95 origin-[var(--radix-tooltip-content-transform-origin)]", children: resolvedLabel }) })] }) }));
+        trigger = (_jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: _jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": resolvedLabel, className: cn("flex size-9 items-center justify-center rounded-md bg-transparent text-primary hover:bg-accent/60 hover:text-primary", className), children: _jsx(IconMessageCircle, { className: "size-4 shrink-0 text-primary" }) }) }) }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { sideOffset: 6, className: "z-[100040] overflow-hidden rounded-md border border-border bg-popover px-2 py-1 text-[11px] text-foreground shadow-md animate-in fade-in-0 zoom-in-95 origin-[var(--radix-tooltip-content-transform-origin)]", children: resolvedLabel }) })] }) }));
     }
     else if (variant === "outlined") {
-        trigger = (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": resolvedLabel, className: cn("flex h-8 items-center gap-2 rounded-md border border-border bg-transparent px-3 text-sm text-muted-foreground transition hover:border-foreground/40 hover:text-foreground", className), children: [_jsx(IconMessage2, { size: 14, stroke: 1.5 }), _jsx("span", { children: resolvedLabel })] }) }));
+        trigger = (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": resolvedLabel, className: cn("flex h-8 items-center gap-2 rounded-md border border-border bg-transparent px-3 text-sm text-muted-foreground transition hover:border-foreground/40 hover:text-foreground", className), children: [_jsx(IconMessageCircle, { size: 14, stroke: 1.5 }), _jsx("span", { children: resolvedLabel })] }) }));
     }
     else {
-        trigger = (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground", className), children: [_jsx(IconMessage2, { className: "h-4 w-4" }), _jsx("span", { children: resolvedLabel })] }) }));
+        // Sidebar variant matches Clips footer feedback row spacing/density.
+        trigger = (_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex h-auto w-full items-center justify-start gap-2 rounded bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary", className), children: [_jsx(IconMessageCircle, { className: "size-4 shrink-0 text-primary" }), _jsx("span", { children: resolvedLabel })] }) }));
     }
     const resolvedSide = side ?? (variant === "sidebar" ? "top" : "bottom");
     const resolvedPlaceholder = placeholder ?? copy.placeholder;

package/dist/client/app-providers.js

@@ -169,7 +169,7 @@ function ProvidersInner({ queryClient, defaultTheme = "system", themeAttribute =
     const localizedChildren = i18n === false ? (children) : (_jsx(AgentNativeI18nProvider, { ...(i18n ?? {}), children: children }));
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(ThemeProvider, { attribute: themeAttribute, defaultTheme: defaultTheme, enableSystem: true, disableTransitionOnChange: disableThemeTransitions, children: [_jsx(EmbeddedThemeSync, {}), _jsxs(TooltipProvider, { delayDuration: tooltipDelayDuration, children: [!disableWebMcp && _jsx(AgentNativeWebMcpActionRegistration, {}), localizedChildren, _jsx(DocumentTitleGuard, { fallbackTitle: documentTitleFallback }), _jsx(RuntimeConfigNotice, {}), _jsx(RoutedAppEnhancements, {}), showEnvironmentBadge ? (_jsx(EnvironmentBadge, { showProduction: showProductionEnvironmentBadge })) : null, toaster] })] }) }));
 }
-export function AppProviders({ queryClient, isPublicPath = false, clientOnlyFallback, sessionBypass = false, disableWebMcp = false, showEnvironmentBadge = true, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, documentTitleFallback, children, }) {
+export function AppProviders({ queryClient, isPublicPath = false, clientOnlyFallback, sessionBypass = false, disableWebMcp = false, showEnvironmentBadge = false, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, documentTitleFallback, children, }) {
     const fallback = clientOnlyFallback ?? _jsx(DefaultSpinner, {});
     if (isPublicPath) {
         return (_jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, disableWebMcp: disableWebMcp, i18n: i18n, documentTitleFallback: documentTitleFallback, showProductionEnvironmentBadge: false, showEnvironmentBadge: showEnvironmentBadge, children: children }));

package/dist/client/auth/AuthPage.js

@@ -474,9 +474,6 @@ export function AuthPage(props) {
     }, []);
     const [googleBusy, setGoogleBusy] = React.useState(false);
     const [magicLinkBusy, setMagicLinkBusy] = React.useState(false);
-    const [environmentVisible, setEnvironmentVisible] = React.useState(false);
-    const [environmentOpen, setEnvironmentOpen] = React.useState(false);
-    const [environmentProductionUrl, setEnvironmentProductionUrl] = React.useState("");
     const [copiedLocalMode, setCopiedLocalMode] = React.useState(false);
     const signupViewTrackedRef = React.useRef(false);
     const pendingSignupPassword = React.useRef("");
@@ -888,30 +885,6 @@ export function AuthPage(props) {
             // coercion-ok: beta controls are optional.
         }
     }, [localDevAllowed, props]);
-    React.useEffect(() => {
-        if (window.parent !== window)
-            return;
-        const hostname = window.location.hostname.toLowerCase().replace(/\.$/, "");
-        const productionHost = hostname.startsWith("beta.")
-            ? hostname.slice("beta.".length)
-            : "";
-        if (!productionHost ||
-            props.environmentBetaHosts[productionHost] !== hostname) {
-            return;
-        }
-        try {
-            const productionUrl = new URL(window.location.href);
-            productionUrl.protocol = "https:";
-            productionUrl.hostname = productionHost;
-            productionUrl.port = "";
-            productionUrl.searchParams.set(props.betaOptOutQueryParam, String(Date.now() + props.betaOptOutDurationMs));
-            setEnvironmentProductionUrl(productionUrl.toString());
-            setEnvironmentVisible(true);
-        }
-        catch {
-            // coercion-ok: malformed host metadata cannot produce a useful switcher.
-        }
-    }, [props]);
     const stopOAuthPolling = React.useCallback(() => {
         if (oauthPollTimer.current !== null) {
             window.clearInterval(oauthPollTimer.current);
@@ -1971,16 +1944,6 @@ export function AuthPage(props) {
             localeOptions.map((option) => (React.createElement("button", { type: "button", className: "locale-menu-item", role: "menuitemradio", "aria-checked": localePreference === option.value, "data-locale-value": option.value, key: option.value, onClick: () => selectLocale(option.value) },
                 React.createElement("span", { className: "locale-menu-check", "aria-hidden": "true" }, "\u2713"),
                 React.createElement("span", null, option.label)))))));
-    const environmentBadge = (React.createElement("div", { className: "environment-switcher", id: "environment-switcher", hidden: !environmentVisible },
-        React.createElement("button", { type: "button", className: "environment-badge", id: "environment-badge", "aria-expanded": environmentOpen, "aria-controls": "environment-popover", onClick: () => setEnvironmentOpen((open) => !open) }, "beta"),
-        React.createElement("div", { className: "environment-popover", id: "environment-popover", role: "dialog", "aria-labelledby": "environment-popover-title", hidden: !environmentOpen },
-            React.createElement("div", { className: "environment-popover-title", id: "environment-popover-title" }, "You're on Agent-Native Beta"),
-            React.createElement("div", { className: "environment-popover-copy" }, "Choose where you want to continue."),
-            React.createElement("a", { className: "environment-production-link", id: "environment-production-link", href: environmentProductionUrl }, "Switch to production"),
-            React.createElement("button", { type: "button", className: "environment-hide-badge", id: "environment-hide-badge", onClick: () => {
-                    setEnvironmentOpen(false);
-                    setEnvironmentVisible(false);
-                } }, "Hide badge"))));
     const marketingSurface = marketingCopy ? (React.createElement(MarketingHome, { appName: marketingCopy.appName, variant: "auth", background: marketingCopy.screenshotSrc ? null : (React.createElement(OceanBackground, { className: "auth-marketing-background" })), topRight: marketingCopy.learnMoreUrl ? (React.createElement("a", { className: "auth-marketing-learn-more", "data-auth-marketing-learn-more": "true", href: marketingCopy.learnMoreUrl, target: "_blank", rel: "noreferrer" },
             React.createElement("span", null, t("newToApp").replace("{appName}", marketingCopy.appName.replace(/^Agent-Native\s+/i, ""))),
             React.createElement("span", { "aria-hidden": "true" }, " - "),
@@ -2006,6 +1969,5 @@ export function AuthPage(props) {
                 React.createElement("span", { "data-i18n": "openSource" }, t("openSource")))))))) : (React.createElement("div", { className: "auth-centered" }, authCard));
     return (React.createElement(React.Fragment, null,
         localePicker,
-        environmentBadge,
         initialPrompt ? (React.createElement("div", { className: "auth-centered" }, authCard)) : (marketingSurface)));
 }

package/dist/client/components/icons/AgentNativeIcon.js

@@ -6,5 +6,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * surrounding text color.
  */
 export function AgentNativeIcon({ size = 24, className, ...rest }) {
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 114 66", fill: "none", className: className, ...rest, children: [_jsx("path", { d: "M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z", fill: "currentColor" }), _jsx("path", { d: "M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z", fill: "currentColor" })] }));
+    return (_jsxs("svg", { "data-agent-native-icon": true, xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 114 66", fill: "none", className: className, ...rest, children: [_jsx("path", { d: "M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z", fill: "currentColor" }), _jsx("path", { d: "M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z", fill: "currentColor" })] }));
 }

package/dist/client/index.d.ts

@@ -13,6 +13,7 @@ export * from "./ui/index.js";
 export { cn } from "@agent-native/toolkit/utils";
 export { AgentNativeI18nProvider, LanguagePicker, getLocaleInitScript, isLocaleCode, isValidLocaleCode, localeDirection, localeMetadataFor, normalizeLocaleCode, normalizeLocalePreference, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, useFormatters, useLocale, useT, DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, type AgentNativeI18nCatalog, type AgentNativeI18nProviderProps, type BuiltinLocaleCode, type LocaleCode, type LocaleHydrationPayload, type LocaleMessages, type LocaleMetadata, type LocalePreference, type LocalizationPreference, } from "./i18n.js";
 export { AgentNativeIcon } from "./components/icons/AgentNativeIcon.js";
+export { AppSidebar, AppSidebarHeader, AppSidebarNavItem, AppSidebarNavGroup, AppSidebarSection, AppSidebarFeedbackButton, AppSidebarFooter, useAppSidebar, type AppSidebarProps, type AppSidebarHeaderProps, type AppSidebarNavItemProps, type AppSidebarNavGroupProps, type AppSidebarSectionProps, type AppSidebarFeedbackButtonProps, type AppSidebarFooterProps, type AppSidebarItemDefinition, type AppSidebarContextValue, } from "./ui/AppSidebar.js";
 export { FeatureFlagsEditor, evaluatedFeatureFlagValues, featureFlagValue, useFeatureFlag, useFeatureFlags, type FeatureFlagActor, type FeatureFlagMetadata, type FeatureFlagRules, type SetFeatureFlagInput, } from "./feature-flags/index.js";
 export { ExperimentsSettings, useExperiment, useExperimentState, useExperiments, type ExperimentValues, type ExperimentsSettingsProps, } from "./experiments/index.js";
 export { withBuilderUtmTrackingParams } from "../shared/builder-link-tracking.js";