@agent-native/core 0.92.0 → 0.92.2

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

@@ -0,0 +1,184 @@
+import { useT } from "@agent-native/core/client";
+import { IconHistory, IconLoader2, IconRotate } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  type DashboardRevision,
+  useDashboardRevisions,
+  useRestoreDashboardRevision,
+} from "@/hooks/use-dashboard-revisions";
+
+function formatRelativeTime(dateStr: string): string {
+  const then = new Date(dateStr).getTime();
+  if (!Number.isFinite(then)) return dateStr;
+  const diffMs = Date.now() - then;
+  const diffMin = Math.floor(diffMs / 60_000);
+  const diffHr = Math.floor(diffMs / 3_600_000);
+  const diffDay = Math.floor(diffMs / 86_400_000);
+
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHr < 24) return `${diffHr}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+interface DashboardHistoryPanelProps {
+  dashboardId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  canRestore?: boolean;
+}
+
+export function DashboardHistoryPanel({
+  dashboardId,
+  open,
+  onOpenChange,
+  canRestore = true,
+}: DashboardHistoryPanelProps) {
+  const t = useT();
+  const { data: revisions, isLoading } = useDashboardRevisions(
+    open ? dashboardId : null,
+  );
+  const restoreRevision = useRestoreDashboardRevision(dashboardId);
+  const [pendingRestore, setPendingRestore] =
+    useState<DashboardRevision | null>(null);
+
+  const doRestore = async (revision: DashboardRevision) => {
+    try {
+      await restoreRevision.mutateAsync({
+        dashboardId,
+        revisionId: revision.id,
+      });
+      toast.success(t("dashboard.historyRestored"));
+      setPendingRestore(null);
+      onOpenChange(false);
+    } catch {
+      toast.error(t("dashboard.historyRestoreFailed"));
+    }
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent side="right" className="w-[85vw] max-w-[420px] p-0">
+          <SheetHeader className="px-4 pb-0 pt-4">
+            <SheetTitle className="flex items-center gap-2 text-sm font-medium">
+              <IconHistory size={16} />
+              {t("dashboard.historyTitle")}
+            </SheetTitle>
+            <SheetDescription>
+              {t("dashboard.historyDescription")}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="mt-3 border-t border-border" />
+
+          <div className="h-[calc(100%-96px)] overflow-y-auto p-2">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <IconLoader2
+                  size={16}
+                  className="animate-spin text-muted-foreground"
+                />
+              </div>
+            ) : !revisions?.length ? (
+              <div className="px-6 py-12 text-center text-xs text-muted-foreground">
+                {t("dashboard.historyEmpty")}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {revisions.map((revision) => (
+                  <div
+                    key={revision.id}
+                    className="rounded-lg border border-border bg-card p-3"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="truncate text-xs font-medium">
+                          {revision.title || t("common.untitledDashboard")}
+                        </p>
+                        <p className="mt-0.5 text-[10px] text-muted-foreground">
+                          {formatRelativeTime(revision.createdAt)}
+                          {revision.createdBy
+                            ? ` by ${revision.createdBy}`
+                            : ""}
+                        </p>
+                      </div>
+                      {canRestore ? (
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          className="h-7 shrink-0 px-2 text-[11px]"
+                          onClick={() => setPendingRestore(revision)}
+                          disabled={restoreRevision.isPending}
+                        >
+                          {restoreRevision.isPending ? (
+                            <IconLoader2 size={13} className="animate-spin" />
+                          ) : (
+                            <IconRotate size={13} />
+                          )}
+                          <span className="ml-1">
+                            {t("dashboard.historyRestore")}
+                          </span>
+                        </Button>
+                      ) : null}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog
+        open={pendingRestore !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setPendingRestore(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("dashboard.historyRestoreQuestion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("dashboard.historyRestoreWarning")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (pendingRestore) void doRestore(pendingRestore);
+              }}
+            >
+              {t("dashboard.historyRestore")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

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";