@agent-native/core 0.107.2 → 0.109.0

package/corpus/templates/analytics/app/components/dashboard/SqlChart.tsx

@@ -19,14 +19,12 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
   type CSSProperties,
   type ReactNode,
 } from "react";
-import { createPortal } from "react-dom";
 import { Link } from "react-router";
 import {
   Area,
@@ -61,6 +59,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useChartTooltipFlip } from "@/hooks/use-chart-tooltip-flip";
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 import { createDemoChartTrendRows } from "@/lib/demo-chart-trend";
@@ -90,11 +89,6 @@ const CHART_TOOLTIP_WRAPPER_STYLE: CSSProperties = {
   pointerEvents: "none",
 };
 
-const PORTAL_GUTTER_PADDING = 12;
-const PORTAL_CURSOR_OFFSET = 24;
-const useBrowserLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect;
-
 const CHART_TOOLTIP_PROPS = {
   allowEscapeViewBox: { x: true, y: true },
   wrapperStyle: CHART_TOOLTIP_WRAPPER_STYLE,
@@ -598,7 +592,7 @@ export function SeriesLegend({
   if (!shouldShowLegend(panel, keys.length)) return null;
 
   return (
-    <div className="mt-2 min-h-16 max-h-16 overflow-y-auto overflow-x-hidden pr-1 text-[11px] leading-4 text-muted-foreground">
+    <div className="mt-1 max-h-16 overflow-y-auto overflow-x-hidden pr-1 text-[11px] leading-4 text-muted-foreground">
       <div className="flex flex-wrap gap-x-3 gap-y-1">
         {keys.map((key, i) => {
           const hidden = hiddenKeys?.has(key) ?? false;
@@ -612,7 +606,7 @@ export function SeriesLegend({
             >
               <PopoverAnchor asChild>
                 <div
-                  className="inline-flex min-h-10 max-w-[14rem] items-center"
+                  className="inline-flex min-h-6 max-w-[14rem] items-center"
                   onPointerDown={(event) => {
                     if (!hasLegendActions || event.pointerType === "mouse") {
                       return;
@@ -648,7 +642,7 @@ export function SeriesLegend({
                     }
                     aria-haspopup={hasLegendActions ? "menu" : undefined}
                     data-chart-legend-item={key}
-                    className={`inline-flex min-h-10 max-w-[14rem] min-w-0 items-center gap-1.5 rounded-md px-1.5 text-left transition-[opacity,color] touch-manipulation hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                    className={`inline-flex min-h-6 max-w-[14rem] min-w-0 items-center gap-1.5 rounded-md px-1.5 text-left transition-[opacity,color] touch-manipulation hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
                       hidden ? "opacity-35" : "opacity-100"
                     } ${onToggleKey ? "cursor-pointer" : "cursor-default"}`}
                     title={label}
@@ -680,18 +674,18 @@ export function SeriesLegend({
                   align="center"
                   sideOffset={8}
                   collisionPadding={12}
-                  className="w-56 max-w-[calc(100vw-1.5rem)] rounded-lg p-1.5 shadow-lg"
+                  className="w-auto max-w-[calc(100vw-1.5rem)] rounded-lg p-1 shadow-lg"
                   onPointerEnter={clearCloseTimeout}
                   onPointerLeave={scheduleCloseLegendActions}
                   onFocusCapture={clearCloseTimeout}
                 >
-                  <div className="flex w-full items-center gap-1">
+                  <div className="flex items-center gap-0.5">
                     {onFilterKey && (
                       <button
                         type="button"
                         data-chart-legend-action="filter"
                         aria-label={`${t("sqlDashboard.filterSeries")} ${label}`}
-                        className="min-h-11 min-w-0 flex-1 rounded-md px-3 py-2 text-xs font-medium whitespace-nowrap text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"
+                        className="min-h-8 rounded-md px-2.5 py-1 text-xs font-medium whitespace-nowrap text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground"
                         onClick={() => {
                           onFilterKey(key);
                           setOpenKey(null);
@@ -706,7 +700,7 @@ export function SeriesLegend({
                         data-chart-legend-action="hide"
                         aria-label={`${t("sqlDashboard.hide")} ${label}`}
                         disabled={hidden}
-                        className="min-h-11 min-w-0 flex-1 rounded-md px-3 py-2 text-xs font-medium whitespace-nowrap text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
+                        className="min-h-8 rounded-md px-2.5 py-1 text-xs font-medium whitespace-nowrap text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
                         onClick={() => {
                           onToggleKey(key);
                           setOpenKey(null);
@@ -886,9 +880,9 @@ function SqlChartLoadingSkeleton({ panel }: { panel: SqlPanel }) {
       <Skeleton
         className={`w-full ${fill ? "h-full min-h-[250px] flex-1" : "h-[250px]"}`}
       />
-      <div className="mt-2 grid min-h-16 grid-cols-2 gap-x-3 gap-y-1 overflow-hidden pr-1 sm:grid-cols-3">
-        {Array.from({ length: 6 }).map((_, index) => (
-          <div key={index} className="flex items-center gap-1.5">
+      <div className="mt-1 flex min-h-6 flex-wrap gap-x-3 gap-y-1 overflow-hidden pr-1">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div key={index} className="flex min-h-6 items-center gap-1.5">
             <Skeleton className="h-2.5 w-3 shrink-0 rounded-sm" />
             <Skeleton className="h-3 w-20 min-w-0" />
           </div>
@@ -898,7 +892,7 @@ function SqlChartLoadingSkeleton({ panel }: { panel: SqlPanel }) {
   );
 }
 
-function ChartTooltip({
+export function ChartTooltip({
   active,
   payload,
   label,
@@ -918,12 +912,7 @@ function ChartTooltip({
   seriesNameFormatter?: (value: string) => string;
   valueFormatter?: (value: number) => string;
 }) {
-  const anchorRef = useRef<HTMLDivElement | null>(null);
-  const portalRef = useRef<HTMLDivElement | null>(null);
-  const [portalPosition, setPortalPosition] = useState<{
-    left: number;
-    top: number;
-  } | null>(null);
+  const tooltipRef = useChartTooltipFlip<HTMLDivElement>(active);
   const items = useMemo(
     () =>
       sortTooltipPayloadItems(
@@ -932,11 +921,6 @@ function ChartTooltip({
       ),
     [payload],
   );
-  const portalVisible = portalPosition !== null;
-  const clearPortalPosition = useCallback(
-    () => setPortalPosition((prev) => (prev === null ? prev : null)),
-    [],
-  );
 
   const labelText =
     label == null
@@ -945,96 +929,14 @@ function ChartTooltip({
         ? labelFormatter(String(label))
         : String(label);
 
-  useBrowserLayoutEffect(() => {
-    if (!active || items.length === 0 || typeof window === "undefined") {
-      clearPortalPosition();
-      return;
-    }
-
-    const anchor = anchorRef.current;
-    const wrapper = anchor?.parentElement;
-    if (!anchor || !wrapper) return;
-
-    let frame = 0;
-    const apply = () => {
-      frame = 0;
-      if (!(wrapper as HTMLElement).style.transform) return;
-
-      const anchorRect = anchor.getBoundingClientRect();
-      const portalRect = portalRef.current?.getBoundingClientRect();
-      const width = portalRect?.width || anchorRect.width;
-      const height = portalRect?.height || anchorRect.height;
-      if (width === 0 || height === 0) return;
-
-      const sidebar = document.querySelector(".agent-sidebar-panel");
-      const sidebarRect = sidebar?.getBoundingClientRect();
-      const rightLimit =
-        sidebarRect && sidebarRect.width > 0 && sidebarRect.left > 0
-          ? sidebarRect.left - PORTAL_GUTTER_PADDING
-          : window.innerWidth - PORTAL_GUTTER_PADDING;
-      const bottomLimit = window.innerHeight - PORTAL_GUTTER_PADDING;
-
-      let left = anchorRect.left;
-      let top = anchorRect.top;
-
-      if (left + width > rightLimit) {
-        left = anchorRect.left - width - PORTAL_CURSOR_OFFSET;
-      }
-      left = Math.max(
-        PORTAL_GUTTER_PADDING,
-        Math.min(left, rightLimit - width),
-      );
-
-      if (top + height > bottomLimit) {
-        top = bottomLimit - height;
-      }
-      top = Math.max(PORTAL_GUTTER_PADDING, top);
-
-      setPortalPosition((prev) =>
-        prev &&
-        Math.abs(prev.left - left) < 0.5 &&
-        Math.abs(prev.top - top) < 0.5
-          ? prev
-          : { left, top },
-      );
-    };
-
-    const schedule = () => {
-      if (frame) return;
-      frame = window.requestAnimationFrame(apply);
-    };
-
-    schedule();
-
-    const mutationObserver = new MutationObserver(schedule);
-    mutationObserver.observe(wrapper, {
-      attributes: true,
-      attributeFilter: ["style", "class"],
-    });
-
-    const resizeObserver =
-      typeof ResizeObserver === "undefined"
-        ? null
-        : new ResizeObserver(schedule);
-    resizeObserver?.observe(anchor);
-    if (portalRef.current) resizeObserver?.observe(portalRef.current);
-
-    window.addEventListener("resize", schedule);
-    window.addEventListener("scroll", schedule, true);
-
-    return () => {
-      if (frame) window.cancelAnimationFrame(frame);
-      mutationObserver.disconnect();
-      resizeObserver?.disconnect();
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("scroll", schedule, true);
-    };
-  }, [active, clearPortalPosition, items.length, portalVisible]);
-
   if (!active || items.length === 0) return null;
 
   const tooltip = (
-    <div className="min-w-40 max-w-[280px] rounded-md border border-border bg-card px-3 py-2 text-xs text-foreground shadow-lg">
+    <div
+      ref={tooltipRef}
+      role="tooltip"
+      className="min-w-40 max-w-[280px] rounded-md border border-border bg-card px-3 py-2 text-xs text-foreground shadow-lg"
+    >
       {labelText && (
         <div className="mb-1.5 truncate font-medium text-foreground">
           {labelText}
@@ -1068,31 +970,7 @@ function ChartTooltip({
     </div>
   );
 
-  return (
-    <>
-      <div ref={anchorRef} aria-hidden="true" className="invisible">
-        {tooltip}
-      </div>
-      {portalPosition && typeof document !== "undefined"
-        ? createPortal(
-            <div
-              ref={portalRef}
-              role="tooltip"
-              style={{
-                position: "fixed",
-                left: portalPosition.left,
-                top: portalPosition.top,
-                zIndex: 1000,
-                pointerEvents: "none",
-              }}
-            >
-              {tooltip}
-            </div>,
-            document.body,
-          )
-        : null}
-    </>
-  );
+  return tooltip;
 }
 
 function detectKeys(
@@ -1434,16 +1312,33 @@ function DashboardExtensionPanel({
   // dashboard report screenshots don't capture a blank extension panel.
   const [ready, setReady] = useState(false);
   const [unavailable, setUnavailable] = useState(false);
+  const loadingSkeleton = !ready ? (
+    <Skeleton
+      data-dashboard-extension-loading="true"
+      className="absolute inset-0 z-10 h-full min-h-[180px] w-full rounded-md"
+      aria-hidden="true"
+    />
+  ) : null;
 
   if (slotId) {
     return (
-      <ExtensionSlot
-        id={slotId}
-        context={context}
-        showEmptyAffordance
-        className="min-h-[120px] w-full"
-        toolClassName="w-full"
-      />
+      <div
+        className="relative min-h-[180px] w-full"
+        aria-busy={!ready}
+        data-dashboard-report-loading={ready ? undefined : "true"}
+      >
+        {loadingSkeleton}
+        <div className={ready ? "opacity-100" : "opacity-0"}>
+          <ExtensionSlot
+            id={slotId}
+            context={context}
+            showEmptyAffordance
+            onReady={() => setReady(true)}
+            className="min-h-[120px] w-full"
+            toolClassName="w-full"
+          />
+        </div>
+      </div>
     );
   }
 
@@ -1462,15 +1357,16 @@ function DashboardExtensionPanel({
 
   return (
     <div
-      className="w-full"
+      className="relative min-h-[180px] w-full"
+      aria-busy={!ready}
       data-dashboard-report-loading={ready ? undefined : "true"}
     >
+      {loadingSkeleton}
       <EmbeddedExtension
         extensionId={extensionId!}
         slotId={`dashboard-panel-${panelId}`}
-        className="w-full"
-        // Intentional for v1: extension panels are standalone widgets and do not
-        // receive the dashboard's filters/variables/date range as `context`.
+        context={context}
+        className={ready ? "w-full opacity-100" : "w-full opacity-0"}
         initialHeight={180}
         onReady={() => setReady(true)}
         onUnavailable={() => {

package/corpus/templates/analytics/app/components/layout/CommandPalette.tsx

@@ -95,16 +95,20 @@ const defaultTools = [
       "agent monitoring",
       "observability",
       "evals",
-      "experiments",
       "feedback",
       "database",
       "db admin",
       "dashboard usage",
       "dashboard audit",
-      "ab testing",
       "llm",
     ],
   },
+  {
+    id: "feature-flags",
+    nameKey: "agents.featureFlags",
+    href: "/agents?view=flags",
+    keywords: ["flags", "rollout", "release", "targeting"],
+  },
   {
     id: "explorer",
     nameKey: "commandPalette.toolExplorer",
@@ -565,7 +569,11 @@ export function CommandPalette() {
 
             <CommandGroup key="tools" heading={t("commandPalette.groupTools")}>
               {defaultTools
-                .filter((tool) => tool.id !== "agents" || canManageOrg)
+                .filter((tool) =>
+                  ["agents", "feature-flags"].includes(tool.id)
+                    ? canManageOrg
+                    : true,
+                )
                 .map((tool) => (
                   <CommandItem
                     key={`tool-${tool.id}`}

package/corpus/templates/analytics/app/components/ui/chart.tsx

@@ -136,7 +136,7 @@ const ChartTooltipContent = React.forwardRef<
     ref,
   ) => {
     const { config } = useChart();
-    const flipRef = useChartTooltipFlip<HTMLDivElement>();
+    const flipRef = useChartTooltipFlip<HTMLDivElement>(active);
     const setRefs = React.useCallback(
       (node: HTMLDivElement | null) => {
         flipRef.current = node;

package/corpus/templates/analytics/app/hooks/use-chart-tooltip-flip.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-const RIGHT_GUTTER_PADDING = 12;
+const VIEWPORT_GUTTER_PADDING = 12;
 const FLIP_CURSOR_OFFSET = 24;
 
 /**
@@ -10,10 +10,11 @@ const FLIP_CURSOR_OFFSET = 24;
  * `transform` (cursor moves) and translate the content left when its right
  * edge would land inside `.agent-sidebar-panel`.
  */
-export function useChartTooltipFlip<T extends HTMLElement>() {
+export function useChartTooltipFlip<T extends HTMLElement>(active = true) {
   const ref = useRef<T | null>(null);
 
   useEffect(() => {
+    if (!active) return;
     const el = ref.current;
     if (!el) return;
     const wrapper = el.parentElement;
@@ -32,11 +33,25 @@ export function useChartTooltipFlip<T extends HTMLElement>() {
         sidebarRect && sidebarRect.width > 0 && sidebarRect.left > 0
           ? sidebarRect.left
           : window.innerWidth;
-      const limit = gutterLeft - RIGHT_GUTTER_PADDING;
+      const rightLimit = gutterLeft - VIEWPORT_GUTTER_PADDING;
+      const bottomLimit = window.innerHeight - VIEWPORT_GUTTER_PADDING;
+      let translateX = 0;
+      let translateY = 0;
 
-      if (rect.right > limit) {
-        node.style.transform = `translateX(-${rect.width + FLIP_CURSOR_OFFSET}px)`;
+      if (rect.right > rightLimit) {
+        translateX = -(rect.width + FLIP_CURSOR_OFFSET);
       }
+      if (rect.bottom > bottomLimit) {
+        translateY = bottomLimit - rect.bottom;
+      } else if (rect.top < VIEWPORT_GUTTER_PADDING) {
+        translateY = VIEWPORT_GUTTER_PADDING - rect.top;
+      }
+
+      const transforms = [
+        translateX ? `translateX(${translateX}px)` : "",
+        translateY ? `translateY(${translateY}px)` : "",
+      ].filter(Boolean);
+      node.style.transform = transforms.join(" ");
     };
 
     apply();
@@ -46,7 +61,7 @@ export function useChartTooltipFlip<T extends HTMLElement>() {
       attributeFilter: ["style"],
     });
     return () => observer.disconnect();
-  }, []);
+  }, [active]);
 
   return ref;
 }

package/corpus/templates/analytics/app/hooks/use-navigation-state.ts

@@ -129,7 +129,9 @@ export function useNavigationState() {
       if (cmd.view === "sessions") return "/sessions";
       if (
         cmd.view === "agents" &&
-        (cmd.agentsView === "database" || cmd.agentsView === "dashboards")
+        (cmd.agentsView === "database" ||
+          cmd.agentsView === "dashboards" ||
+          cmd.agentsView === "flags")
       ) {
         const params = new URLSearchParams({ view: cmd.agentsView });
         if (cmd.agentsView === "database" && cmd.dbAdminConnectionId) {

package/corpus/templates/analytics/app/i18n/zh-TW.ts

@@ -484,12 +484,25 @@ const messages = {
     chartTypePie: "餡餅",
     chartTypeMetric: "公制",
     chartTypeTable: "桌子",
+    chartTypeExtension: "擴充功能",
     failedToSavePanel: "儲存面板失敗",
     failedToFormatSql: "格式化 SQL 失敗",
     title: "標題",
     titlePlaceholder: "例如每週註冊人數",
     chartType: "圖表型別",
     source: "來源",
+    extensionDisplay: "擴充功能顯示方式",
+    sharedExtension: "共用擴充功能",
+    perViewerSlot: "每位檢視者的插槽",
+    extension: "擴充功能",
+    loadingExtensions: "正在載入擴充功能...",
+    selectExtension: "選取擴充功能",
+    noExtensions: "沒有可見的擴充功能。請先建立或共用一個。",
+    sharedExtensionHelp:
+      "選取的擴充功能會與此儀表板共用，並顯示在排程報告中。檢視者仍需具備該擴充功能的存取權。",
+    slotIdOptional: "插槽 ID（選填）",
+    perViewerSlotHelp:
+      "每位檢視者各自安裝擴充功能。排程報告可能會顯示空插槽。留空即可產生穩定的 ID。",
     sectionColumns: "剖面列",
     format: "格式",
     filterInterpolation: "使用 {{example}} 插值濾波器值。",
@@ -698,6 +711,23 @@ const messages = {
     deleteConnectionTitle: "刪除資料庫連線？",
     deleteConnectionDescription:
       "這會從 Analytics 移除 {{name}} 並刪除儲存的連線密鑰。目標應用程式資料庫不會被修改。",
+    featureFlags: "功能旗標",
+    featureFlagsDescription: "檢視已註冊應用程式旗標，並進行可回復的發布調整。",
+    reloadFlags: "重新載入功能旗標",
+    loading: "載入中",
+    flagsUnavailable: "功能旗標無法使用",
+    flagsUnreachable: "無法連線到工作區目錄。連線可用後請重試。",
+    flagsEmpty: "沒有應用程式回報功能旗標",
+    flagsEmptyDetail: "連線的應用程式準備就緒後，已註冊旗標會顯示在這裡。",
+    flagsNotReady: "此應用程式為 {{status}}，不會假定旗標已關閉。",
+    noFlagDefinitions: "此應用程式沒有已註冊的旗標定義。",
+    noFlagDescription: "未提供說明。",
+    selected: "已選取",
+    openFlag: "開啟功能旗標",
+    confirm: "確認",
+    name: "名稱",
+    appId: "應用程式 ID",
+    flagKey: "功能旗標",
   },
   providerCorpusNotifier: {
     completed: "提供者語料庫作業已完成",