@agent-native/core 0.91.2 → 0.92.1

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

@@ -113,6 +113,8 @@ const CHART_LEGEND_PROPS = {
 const PARTIAL_DAY_TIME_ZONE = "America/Los_Angeles";
 const PARTIAL_DAY_DASH = "3 5";
 const PARTIAL_DAY_KEY_PREFIX = "__sql_chart_partial_day";
+const TABLE_PANEL_MIN_HEIGHT_CLASS = "min-h-[386px]";
+const TABLE_PANEL_SKELETON_ROWS = 10;
 
 function formatYValue(
   value: number,
@@ -488,7 +490,7 @@ function SeriesLegend({
   if (!shouldShowLegend(panel, keys.length)) return null;
 
   return (
-    <div className="mt-2 max-h-16 overflow-y-auto overflow-x-hidden pr-1 text-[11px] leading-4 text-muted-foreground">
+    <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="flex flex-wrap gap-x-3 gap-y-1">
         {keys.map((key, i) => {
           const hidden = hiddenKeys?.has(key) ?? false;
@@ -586,6 +588,113 @@ function ChartFrame({
   );
 }
 
+function isTableLikeChartType(type: ChartType): boolean {
+  return type === "table" || type === "heatmap";
+}
+
+function chartTypeReservesLegend(panel: SqlPanel): boolean {
+  if (panel.config?.legend === false) return false;
+  const chartUsesFrame =
+    panel.chartType === "line" ||
+    panel.chartType === "area" ||
+    panel.chartType === "bar" ||
+    panel.chartType === "pie";
+  if (!chartUsesFrame) return false;
+  return (
+    panel.chartType === "line" ||
+    panel.chartType === "area" ||
+    panel.chartType === "bar" ||
+    usesPrometheusPresentation(panel)
+  );
+}
+
+function TableLoadingSkeleton() {
+  const columnWidths = ["w-24", "w-32", "w-20", "w-28"];
+
+  return (
+    <div
+      data-dashboard-report-loading="true"
+      className={`w-full flex-1 space-y-1 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}
+    >
+      <div className="relative overflow-x-auto">
+        <div className="min-w-[480px]">
+          <div className="grid h-8 grid-cols-4 items-center border-b border-border px-2">
+            {columnWidths.map((width, index) => (
+              <Skeleton key={index} className={`h-3 ${width}`} />
+            ))}
+          </div>
+          {Array.from({ length: TABLE_PANEL_SKELETON_ROWS }).map((_, row) => (
+            <div
+              key={row}
+              className="grid h-8 grid-cols-4 items-center border-b border-border/50 px-2"
+            >
+              {columnWidths.map((width, col) => (
+                <Skeleton
+                  key={col}
+                  className={`h-3 ${
+                    col === 0 ? "w-36" : col === 2 ? "ml-auto w-16" : width
+                  }`}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex h-8 items-center justify-between border-t border-border px-1 text-xs">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+    </div>
+  );
+}
+
+function SqlChartLoadingSkeleton({ panel }: { panel: SqlPanel }) {
+  const fill = useContext(ChartFillHeightContext);
+
+  if (panel.chartType === "metric") {
+    return (
+      <Skeleton
+        data-dashboard-report-loading="true"
+        className="w-full flex-1 min-h-12"
+      />
+    );
+  }
+
+  if (isTableLikeChartType(panel.chartType)) {
+    return <TableLoadingSkeleton />;
+  }
+
+  const reserveLegend = chartTypeReservesLegend(panel);
+
+  if (!reserveLegend) {
+    return (
+      <Skeleton
+        data-dashboard-report-loading="true"
+        className={`w-full flex-1 ${fill ? "h-full min-h-[250px]" : "min-h-[250px]"}`}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-dashboard-report-loading="true"
+      className={`flex w-full flex-1 flex-col overflow-hidden ${fill ? "h-full" : ""}`}
+    >
+      <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">
+            <Skeleton className="h-2.5 w-3 shrink-0 rounded-sm" />
+            <Skeleton className="h-3 w-20 min-w-0" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function ChartTooltip({
   active,
   payload,
@@ -962,16 +1071,16 @@ export function SqlChart({
   const yFormatter = panel.config?.yFormatter;
 
   const isMetric = panel.chartType === "metric";
-  const placeholderMinH = isMetric ? "min-h-12" : "min-h-[250px]";
+  const isTableLike = isTableLikeChartType(panel.chartType);
+  const placeholderMinH = isMetric
+    ? "min-h-12"
+    : isTableLike
+      ? TABLE_PANEL_MIN_HEIGHT_CLASS
+      : "min-h-[250px]";
   const placeholderPadY = isMetric ? "py-2" : "py-8";
 
   if (!loadData || isLoading) {
-    return (
-      <Skeleton
-        data-dashboard-report-loading="true"
-        className={`w-full flex-1 ${placeholderMinH}`}
-      />
-    );
+    return <SqlChartLoadingSkeleton panel={panel} />;
   }
 
   if (error) {
@@ -1366,7 +1475,7 @@ function TableRenderer({
   }, [handleExportCsv, onExportCsvChange]);
 
   return (
-    <div className="space-y-1">
+    <div className={`space-y-1 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}>
       <div className="relative overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
@@ -1989,7 +2098,9 @@ function HeatmapRenderer({
 
   if (rows.length === 0 || !valueKey) {
     return (
-      <div className="flex min-h-[250px] items-center justify-center py-8">
+      <div
+        className={`flex items-center justify-center py-8 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}
+      >
         <p className="text-sm text-muted-foreground text-center">
           {t("common.noData")}
         </p>
@@ -2010,7 +2121,7 @@ function HeatmapRenderer({
   };
 
   return (
-    <div className="overflow-x-auto">
+    <div className={`${TABLE_PANEL_MIN_HEIGHT_CLASS} overflow-x-auto`}>
       <table className="w-full border-collapse text-sm">
         <thead>
           <tr className="border-b border-border">

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

@@ -8,6 +8,7 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { extensionPath } from "@agent-native/core/client/extensions";
+import { useOrgRole } from "@agent-native/core/client/org";
 import {
   IconFlask,
   IconTool,
@@ -64,8 +65,8 @@ interface ExtensionSearchItem {
 const defaultTools = [
   {
     id: "agents",
-    nameKey: "navigation.agents",
-    href: "/agents",
+    nameKey: "navigation.admin",
+    href: "/agents?view=dashboards",
     keywords: [
       "agent monitoring",
       "observability",
@@ -74,6 +75,8 @@ const defaultTools = [
       "feedback",
       "database",
       "db admin",
+      "dashboard usage",
+      "dashboard audit",
       "ab testing",
       "llm",
     ],
@@ -218,6 +221,7 @@ function persistThemePreference(theme: "light" | "dark") {
 
 export function CommandPalette() {
   const t = useT();
+  const { canManageOrg } = useOrgRole();
   const [open, setOpen] = useState(false);
   const [changelogOpen, setChangelogOpen] = useState(false);
   const [languageOpen, setLanguageOpen] = useState(false);
@@ -428,20 +432,22 @@ export function CommandPalette() {
           </CommandGroup>
 
           <CommandGroup heading={t("commandPalette.groupTools")}>
-            {defaultTools.map((tool) => (
-              <CommandItem
-                key={`tool-${tool.id}`}
-                onSelect={() => go(tool.href)}
-                keywords={commandPaletteKeywords(
-                  t(tool.nameKey),
-                  "tool",
-                  ...tool.keywords,
-                )}
-              >
-                <IconTool className="me-2 h-4 w-4 text-muted-foreground" />
-                {t(tool.nameKey)}
-              </CommandItem>
-            ))}
+            {defaultTools
+              .filter((tool) => tool.id !== "agents" || canManageOrg)
+              .map((tool) => (
+                <CommandItem
+                  key={`tool-${tool.id}`}
+                  onSelect={() => go(tool.href)}
+                  keywords={commandPaletteKeywords(
+                    t(tool.nameKey),
+                    "tool",
+                    ...tool.keywords,
+                  )}
+                >
+                  <IconTool className="me-2 h-4 w-4 text-muted-foreground" />
+                  {t(tool.nameKey)}
+                </CommandItem>
+              ))}
           </CommandGroup>
 
           <CommandGroup heading={t("commandPalette.groupAppearance")}>

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

@@ -21,7 +21,7 @@ const pageTitleKeys: Record<string, string> = {
   "/analyses": "navigation.analyses",
   "/sessions": "navigation.sessions",
   "/monitoring": "navigation.monitoring",
-  "/agents": "navigation.agents",
+  "/agents": "navigation.admin",
   "/dashboards/explorer": "navigation.explorer",
   "/settings": "navigation.settings",
 };

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

@@ -14,7 +14,6 @@ import {
   IconReportAnalytics,
   IconSearch,
   IconArchive,
-  IconActivity,
   IconHeartbeat,
   IconPin,
   IconPlus,
@@ -27,6 +26,7 @@ import {
   IconPlayerPlay,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
+  IconShieldCheck,
 } from "@tabler/icons-react";
 import {
   useQuery,
@@ -83,7 +83,7 @@ import {
   type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-import { OrgSwitcher } from "@agent-native/core/client/org";
+import { OrgSwitcher, useOrgRole } from "@agent-native/core/client/org";
 
 import {
   AlertDialog,
@@ -1585,6 +1585,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const navigate = useNavigate();
   const t = useT();
   const queryClient = useQueryClient();
+  const { canManageOrg } = useOrgRole();
   const { setTheme } = useTheme();
 
   const isAskRoute = location.pathname === "/ask";
@@ -2397,12 +2398,16 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       href: "/monitoring",
       active: location.pathname.startsWith("/monitoring"),
     },
-    {
-      icon: IconActivity,
-      label: t("navigation.agents"),
-      href: "/agents",
-      active: location.pathname.startsWith("/agents"),
-    },
+    ...(canManageOrg
+      ? [
+          {
+            icon: IconShieldCheck,
+            label: t("navigation.admin"),
+            href: "/agents?view=dashboards",
+            active: location.pathname.startsWith("/agents"),
+          },
+        ]
+      : []),
     {
       icon: IconDatabase,
       label: t("navigation.dataSources"),
@@ -2618,19 +2623,20 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 {t("navigation.monitoring")}
               </Link>
 
-              {/* Agents link */}
-              <Link
-                to="/agents"
-                className={cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
-                  location.pathname.startsWith("/agents")
-                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                    : "text-muted-foreground hover:bg-sidebar-accent/50",
-                )}
-              >
-                <IconActivity className="h-4 w-4" />
-                {t("navigation.agents")}
-              </Link>
+              {canManageOrg ? (
+                <Link
+                  to="/agents?view=dashboards"
+                  className={cn(
+                    "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
+                    location.pathname.startsWith("/agents")
+                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                      : "text-muted-foreground hover:bg-sidebar-accent/50",
+                  )}
+                >
+                  <IconShieldCheck className="h-4 w-4" />
+                  {t("navigation.admin")}
+                </Link>
+              ) : null}
 
               {/* Data Sources link */}
               <Link

package/corpus/templates/analytics/app/hooks/use-analysis-revisions.ts

@@ -0,0 +1,43 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+export interface AnalysisRevision {
+  id: string;
+  analysisId: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  createdBy: string | null;
+}
+
+export function useAnalysisRevisions(analysisId: string | null) {
+  return useActionQuery<AnalysisRevision[]>(
+    "list-analysis-revisions",
+    analysisId ? { analysisId } : undefined,
+    {
+      enabled: !!analysisId,
+      select: (data: any) => {
+        const revisions = data?.revisions ?? data;
+        return Array.isArray(revisions) ? revisions : [];
+      },
+      placeholderData: (prev: any) => prev,
+    } as any,
+  );
+}
+
+export function useRestoreAnalysisRevision(analysisId: string) {
+  const queryClient = useQueryClient();
+  return useActionMutation<
+    { id: string; name: string; updatedAt: string },
+    { analysisId: string; revisionId: string }
+  >("restore-analysis-revision", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["action", "list-analysis-revisions", { analysisId }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["analysis-detail", analysisId],
+      });
+    },
+  });
+}

package/corpus/templates/analytics/app/hooks/use-dashboard-chat-context.ts

@@ -0,0 +1,110 @@
+import {
+  deleteClientAppState,
+  readClientAppState,
+  removeAgentChatContextItem,
+  setAgentChatContextItem,
+  setClientAppState,
+} from "@agent-native/core/client";
+import { useEffect } from "react";
+
+import { TAB_ID } from "@/lib/tab-id";
+
+const DASHBOARD_CONTEXT_KEY = "analytics-selected-dashboard";
+const SELECTED_OBJECT_STATE_KEY = "selected-object";
+const SELECTED_OBJECT_SOURCE_FIELD = "__agentNativeSelectedObjectSource";
+
+export interface DashboardChatContextArgs {
+  id: string | null | undefined;
+  kind: "explorer" | "sql";
+  title?: string | null;
+  panelCount?: number;
+  canEdit?: boolean;
+}
+
+function dashboardContext(
+  args: Required<Pick<DashboardChatContextArgs, "id" | "kind">> & {
+    title: string;
+    panelCount?: number;
+    canEdit?: boolean;
+  },
+): string {
+  const lines = [
+    `The user currently has this Analytics dashboard selected: ${args.title}.`,
+    `Dashboard id: ${args.id}`,
+    `Dashboard kind: ${args.kind}`,
+  ];
+  if (typeof args.panelCount === "number") {
+    lines.push(`Panel count: ${args.panelCount}`);
+  }
+  if (typeof args.canEdit === "boolean") {
+    lines.push(`User can edit: ${args.canEdit ? "yes" : "no"}`);
+  }
+  if (typeof window !== "undefined") {
+    lines.push(
+      `Current URL: ${window.location.pathname}${window.location.search}`,
+    );
+  }
+  lines.push(
+    "Use the Analytics dashboard actions to inspect, edit, or restore this dashboard.",
+  );
+  return lines.join("\n");
+}
+
+async function deleteSelectedObjectIfOwned() {
+  try {
+    const current = await readClientAppState<Record<string, unknown>>(
+      SELECTED_OBJECT_STATE_KEY,
+    );
+    if (current?.[SELECTED_OBJECT_SOURCE_FIELD] !== TAB_ID) return;
+    await deleteClientAppState(SELECTED_OBJECT_STATE_KEY, {
+      keepalive: true,
+      requestSource: TAB_ID,
+    });
+  } catch {
+    // Best effort only; avoid clearing another tab's selected object on errors.
+  }
+}
+
+export function useDashboardChatContext(args: DashboardChatContextArgs): void {
+  const { id, kind, title, panelCount, canEdit } = args;
+
+  useEffect(() => {
+    if (!id) return;
+    const displayTitle = title?.trim() || id;
+    const selection = {
+      type: "dashboard",
+      id,
+      kind,
+      title: displayTitle,
+      panelCount,
+      canEdit,
+      [SELECTED_OBJECT_SOURCE_FIELD]: TAB_ID,
+    };
+
+    setAgentChatContextItem({
+      key: DASHBOARD_CONTEXT_KEY,
+      title: `Dashboard: ${displayTitle}`,
+      context: dashboardContext({
+        id,
+        kind,
+        title: displayTitle,
+        panelCount,
+        canEdit,
+      }),
+      openSidebar: false,
+      focus: false,
+    });
+    setClientAppState(SELECTED_OBJECT_STATE_KEY, selection, {
+      keepalive: true,
+      requestSource: TAB_ID,
+    }).catch(() => {});
+
+    return () => {
+      removeAgentChatContextItem({
+        key: DASHBOARD_CONTEXT_KEY,
+        openSidebar: false,
+      });
+      deleteSelectedObjectIfOwned();
+    };
+  }, [canEdit, id, kind, panelCount, title]);
+}

package/corpus/templates/analytics/app/hooks/use-dashboard-revisions.ts

@@ -0,0 +1,43 @@
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+export interface DashboardRevision {
+  id: string;
+  dashboardId: string;
+  kind: "explorer" | "sql";
+  title: string;
+  createdAt: string;
+  createdBy: string | null;
+}
+
+export function useDashboardRevisions(dashboardId: string | null) {
+  return useActionQuery<DashboardRevision[]>(
+    "list-dashboard-revisions",
+    dashboardId ? { dashboardId } : undefined,
+    {
+      enabled: !!dashboardId,
+      select: (data: any) => {
+        const revisions = data?.revisions ?? data;
+        return Array.isArray(revisions) ? revisions : [];
+      },
+      placeholderData: (prev: any) => prev,
+    } as any,
+  );
+}
+
+export function useRestoreDashboardRevision(dashboardId: string) {
+  const queryClient = useQueryClient();
+  return useActionMutation<
+    { id: string; name: string; updatedAt: string },
+    { dashboardId: string; revisionId: string }
+  >("restore-dashboard-revision", {
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["action", "list-dashboard-revisions", { dashboardId }],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["dashboard", dashboardId],
+      });
+    },
+  });
+}

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

@@ -127,9 +127,14 @@ export function useNavigationState() {
       if (cmd.view === "sessions" && cmd.recordingId)
         return `/sessions/${encodeURIComponent(cmd.recordingId)}`;
       if (cmd.view === "sessions") return "/sessions";
-      if (cmd.view === "agents" && cmd.agentsView === "database") {
-        const params = new URLSearchParams({ view: "database" });
-        if (cmd.dbAdminConnectionId) params.set("db", cmd.dbAdminConnectionId);
+      if (
+        cmd.view === "agents" &&
+        (cmd.agentsView === "database" || cmd.agentsView === "dashboards")
+      ) {
+        const params = new URLSearchParams({ view: cmd.agentsView });
+        if (cmd.agentsView === "database" && cmd.dbAdminConnectionId) {
+          params.set("db", cmd.dbAdminConnectionId);
+        }
         return `/agents?${params.toString()}`;
       }
       if (cmd.view === "agents") return "/agents";