@agent-native/core 0.91.2 → 0.92.1

package/corpus/templates/analytics/app/pages/Agents.tsx

@@ -3,15 +3,20 @@ import {
   ObservabilityDashboard,
   useActionMutation,
   useActionQuery,
+  useFormatters,
   useT,
 } from "@agent-native/core/client";
 import { DbAdminPage } from "@agent-native/core/client/db-admin";
+import { useOrgRole } from "@agent-native/core/client/org";
 import {
   IconActivity,
   IconAlertTriangle,
+  IconChartBar,
   IconChevronDown,
   IconDatabase,
+  IconEye,
   IconLoader2,
+  IconMouse,
   IconPlus,
   IconTrash,
 } from "@tabler/icons-react";
@@ -28,6 +33,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -54,9 +60,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 
-type AgentAdminView = "monitoring" | "database";
+type AgentAdminView = "monitoring" | "dashboards" | "database";
 
 interface DbAdminConnection {
   id: string;
@@ -76,7 +90,34 @@ interface SaveDbAdminConnectionInput {
   databaseAuthToken?: string;
 }
 
-const AGENT_ADMIN_VIEWS: AgentAdminView[] = ["monitoring", "database"];
+interface DashboardUsageStats {
+  id: string;
+  name: string;
+  kind: "explorer" | "sql";
+  ownerEmail: string | null;
+  visibility: "private" | "org" | "public";
+  createdAt: string;
+  updatedAt: string;
+  updatedBy: string | null;
+  archivedAt: string | null;
+  hiddenAt: string | null;
+  hiddenBy: string | null;
+  viewCount: number;
+  engagementCount: number;
+  eventEngagementCount: number;
+  savedViewCount: number;
+  uniqueUserCount: number;
+  lastViewedAt: string | null;
+  lastSavedViewAt: string | null;
+  panelCount: number | null;
+  url: string;
+}
+
+const AGENT_ADMIN_VIEWS: AgentAdminView[] = [
+  "monitoring",
+  "dashboards",
+  "database",
+];
 
 function parseView(value: string | null): AgentAdminView {
   return AGENT_ADMIN_VIEWS.includes(value as AgentAdminView)
@@ -84,11 +125,265 @@ function parseView(value: string | null): AgentAdminView {
     : "monitoring";
 }
 
+function toCount(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+function DashboardUsageAdminPanel() {
+  const t = useT();
+  const { formatDate } = useFormatters();
+  const numberFormat = useMemo(() => new Intl.NumberFormat(), []);
+  const {
+    data: dashboards = [],
+    isLoading,
+    error,
+  } = useActionQuery<DashboardUsageStats[]>(
+    "list-dashboard-usage-stats",
+    undefined,
+    { retry: false },
+  );
+
+  function formatCount(value: unknown) {
+    return numberFormat.format(toCount(value));
+  }
+
+  function formatMaybeDate(value: string | null) {
+    if (!value) return t("agents.notTracked");
+    try {
+      return formatDate(value, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    } catch {
+      return value;
+    }
+  }
+
+  const activeDashboards = dashboards.filter(
+    (dashboard) => !dashboard.archivedAt,
+  );
+  const totalViews = dashboards.reduce(
+    (sum, dashboard) => sum + toCount(dashboard.viewCount),
+    0,
+  );
+  const staleDashboards = dashboards.filter(
+    (dashboard) => dashboard.viewCount === 0 && !dashboard.archivedAt,
+  );
+  const mostViewedDashboard = dashboards[0] ?? null;
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col gap-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold">
+            {t("agents.dashboardUsageTitle")}
+          </h2>
+          <p className="mt-1 max-w-3xl text-sm leading-6 text-muted-foreground">
+            {t("agents.dashboardUsageDescription")}
+          </p>
+        </div>
+      </div>
+
+      {error ? (
+        <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive">
+          <IconAlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>{error.message}</span>
+        </div>
+      ) : isLoading ? (
+        <div className="flex min-h-[460px] items-center justify-center rounded-lg border bg-background">
+          <IconLoader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : dashboards.length === 0 ? (
+        <div className="flex min-h-[360px] items-center justify-center rounded-lg border bg-background p-8 text-center">
+          <div className="max-w-sm">
+            <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+              <IconChartBar className="h-5 w-5 text-muted-foreground" />
+            </div>
+            <h2 className="text-sm font-semibold">
+              {t("agents.dashboardUsageEmpty")}
+            </h2>
+            <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+              {t("agents.dashboardUsageEmptyDescription")}
+            </p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <UsageStatCard
+              icon={IconChartBar}
+              label={t("agents.dashboardUsageTotal")}
+              value={formatCount(dashboards.length)}
+              detail={t("agents.dashboardUsageActive", {
+                count: formatCount(activeDashboards.length),
+              })}
+            />
+            <UsageStatCard
+              icon={IconEye}
+              label={t("agents.dashboardUsageViews")}
+              value={formatCount(totalViews)}
+              detail={
+                mostViewedDashboard
+                  ? t("agents.dashboardUsageTop", {
+                      name: mostViewedDashboard.name,
+                    })
+                  : t("agents.notTracked")
+              }
+            />
+            <UsageStatCard
+              icon={IconMouse}
+              label={t("agents.dashboardUsageEngagements")}
+              value={formatCount(
+                dashboards.reduce(
+                  (sum, dashboard) => sum + toCount(dashboard.engagementCount),
+                  0,
+                ),
+              )}
+              detail={t("agents.dashboardUsageEngagementsHint")}
+            />
+            <UsageStatCard
+              icon={IconAlertTriangle}
+              label={t("agents.dashboardUsageStale")}
+              value={formatCount(staleDashboards.length)}
+              detail={t("agents.dashboardUsageStaleHint")}
+            />
+          </div>
+
+          <div className="overflow-hidden rounded-lg border bg-background">
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t("agents.dashboardUsageDashboard")}</TableHead>
+                    <TableHead>{t("agents.dashboardUsageOwner")}</TableHead>
+                    <TableHead>{t("agents.dashboardUsageViews")}</TableHead>
+                    <TableHead>
+                      {t("agents.dashboardUsageEngagements")}
+                    </TableHead>
+                    <TableHead>{t("agents.dashboardUsageUsers")}</TableHead>
+                    <TableHead>{t("agents.dashboardUsageModified")}</TableHead>
+                    <TableHead>{t("agents.dashboardUsageCreated")}</TableHead>
+                    <TableHead>{t("agents.dashboardUsageState")}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {dashboards.map((dashboard) => (
+                    <TableRow key={dashboard.id}>
+                      <TableCell className="min-w-[240px]">
+                        <div className="flex min-w-0 flex-col gap-1">
+                          <Link
+                            to={dashboard.url}
+                            className="truncate font-medium text-foreground underline-offset-4 hover:underline"
+                          >
+                            {dashboard.name}
+                          </Link>
+                          <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+                            <span>{dashboard.kind.toUpperCase()}</span>
+                            {typeof dashboard.panelCount === "number" ? (
+                              <span>
+                                {t("agents.dashboardUsagePanels", {
+                                  count: formatCount(dashboard.panelCount),
+                                })}
+                              </span>
+                            ) : null}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell className="min-w-[180px] text-sm text-muted-foreground">
+                        {dashboard.ownerEmail ?? t("agents.notTracked")}
+                      </TableCell>
+                      <TableCell>
+                        <div className="font-medium">
+                          {formatCount(dashboard.viewCount)}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {formatMaybeDate(dashboard.lastViewedAt)}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="font-medium">
+                          {formatCount(dashboard.engagementCount)}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {t("agents.dashboardUsageSavedViews", {
+                            count: formatCount(dashboard.savedViewCount),
+                          })}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {formatCount(dashboard.uniqueUserCount)}
+                      </TableCell>
+                      <TableCell className="min-w-[180px]">
+                        <div>{formatMaybeDate(dashboard.updatedAt)}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {dashboard.updatedBy ?? t("agents.notTracked")}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        {formatMaybeDate(dashboard.createdAt)}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1.5">
+                          <Badge variant="outline">
+                            {t(`agents.visibility${dashboard.visibility}`)}
+                          </Badge>
+                          {dashboard.hiddenAt ? (
+                            <Badge variant="secondary">
+                              {t("agents.dashboardUsageHidden")}
+                            </Badge>
+                          ) : null}
+                          {dashboard.archivedAt ? (
+                            <Badge variant="secondary">
+                              {t("agents.dashboardUsageArchived")}
+                            </Badge>
+                          ) : null}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function UsageStatCard({
+  icon: Icon,
+  label,
+  value,
+  detail,
+}: {
+  icon: typeof IconChartBar;
+  label: string;
+  value: string;
+  detail: string;
+}) {
+  return (
+    <div className="rounded-lg border bg-background p-4">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Icon className="h-4 w-4" />
+        <span>{label}</span>
+      </div>
+      <div className="mt-3 text-2xl font-semibold tracking-tight">{value}</div>
+      <div className="mt-1 truncate text-xs text-muted-foreground">
+        {detail}
+      </div>
+    </div>
+  );
+}
+
 export default function AgentsPage() {
   const t = useT();
+  const { canManageOrg, isLoading: orgRoleLoading } = useOrgRole();
   const [searchParams, setSearchParams] = useSearchParams();
   const view = parseView(searchParams.get("view"));
   const selectedConnectionId = searchParams.get("db");
+  const isAdminView = view === "dashboards" || view === "database";
 
   function setView(next: AgentAdminView) {
     const params = new URLSearchParams(searchParams);
@@ -109,6 +404,32 @@ export default function AgentsPage() {
     setSearchParams(params, { replace: true });
   }
 
+  if (orgRoleLoading) {
+    return (
+      <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-center px-4 py-5 lg:px-6">
+        <IconLoader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!canManageOrg && isAdminView) {
+    return (
+      <div className="mx-auto flex h-full w-full max-w-7xl items-center justify-center px-4 py-5 lg:px-6">
+        <div className="max-w-sm rounded-lg border bg-background p-6 text-center">
+          <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+            <IconAlertTriangle className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <h1 className="text-sm font-semibold">
+            {t("agents.adminOnlyTitle")}
+          </h1>
+          <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+            {t("agents.adminOnlyDescription")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="mx-auto flex h-full w-full max-w-7xl flex-col gap-5 px-4 py-5 lg:px-6">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -122,22 +443,24 @@ export default function AgentsPage() {
           <Button variant="outline" size="sm" asChild>
             <Link to="/catalog">{t("agents.openCatalog")}</Link>
           </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="sm">
-                {t("agents.advanced")}
-                <IconChevronDown className="ms-1 h-3.5 w-3.5" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <DropdownMenuLabel>{t("agents.advanced")}</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem onSelect={() => setView("database")}>
-                <IconDatabase className="me-2 h-4 w-4" />
-                {t("agents.database")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          {canManageOrg ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="secondary" size="sm">
+                  {t("agents.advanced")}
+                  <IconChevronDown className="ms-1 h-3.5 w-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuLabel>{t("agents.advanced")}</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onSelect={() => setView("database")}>
+                  <IconDatabase className="me-2 h-4 w-4" />
+                  {t("agents.database")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
         </div>
       </div>
 
@@ -155,7 +478,22 @@ export default function AgentsPage() {
           <IconActivity className="h-4 w-4" />
           {t("agents.monitoring")}
         </button>
-        {view === "database" && (
+        {canManageOrg ? (
+          <button
+            type="button"
+            onClick={() => setView("dashboards")}
+            className={cn(
+              "inline-flex h-8 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors",
+              view === "dashboards"
+                ? "bg-foreground text-background"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            <IconChartBar className="h-4 w-4" />
+            {t("agents.dashboardUsage")}
+          </button>
+        ) : null}
+        {canManageOrg && view === "database" && (
           <button
             type="button"
             onClick={() => setView("database")}
@@ -172,6 +510,8 @@ export default function AgentsPage() {
           selectedConnectionId={selectedConnectionId}
           onSelectConnection={setSelectedConnectionId}
         />
+      ) : view === "dashboards" ? (
+        <DashboardUsageAdminPanel />
       ) : (
         <div className="min-w-0">
           <div className="mb-4 max-w-3xl text-sm leading-6 text-muted-foreground">

package/corpus/templates/analytics/app/pages/Settings.tsx

@@ -199,7 +199,7 @@ export default function Settings() {
         icon: IconBell,
         keywords: "alerts rules notifications thresholds triggers monitoring",
         content: (
-          <div className="mx-auto w-full max-w-3xl">
+          <div className="mx-auto w-full max-w-5xl">
             <AlertRulesSettingsCard />
           </div>
         ),
@@ -515,10 +515,11 @@ export default function Settings() {
         </div>
       }
       team={
-        <div className="mx-auto w-full max-w-2xl">
+        <div className="mx-auto w-full max-w-5xl">
           <TeamPage
             showTitle={false}
             createOrgDescription="Set up a team to share dashboards and data sources with your colleagues."
+            className="max-w-5xl"
           />
         </div>
       }

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/index.tsx

@@ -38,12 +38,14 @@ import {
   IconEye,
   IconEyeOff,
   IconGripVertical,
+  IconHistory,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState, useEffect, useCallback } from "react";
 import { useSearchParams, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { DashboardHistoryPanel } from "@/components/dashboard/DashboardHistoryPanel";
 import {
   DashboardTitleSkeleton,
   useSetPageTitle,
@@ -80,6 +82,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useDashboardChatContext } from "@/hooks/use-dashboard-chat-context";
 import {
   resourceCanEdit,
   resourceCanManage,
@@ -195,11 +198,19 @@ export default function ExplorerDashboardPage() {
   const [addChartOpen, setAddChartOpen] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
   const [activeDragChartId, setActiveDragChartId] = useState<string | null>(
     null,
   );
   const canEdit = resourceCanEdit(resourceAccess);
   const canManage = resourceCanManage(resourceAccess);
+  useDashboardChatContext({
+    id: dashboardId,
+    kind: "explorer",
+    title: dashboard?.name,
+    panelCount: dashboard?.charts.length,
+    canEdit,
+  });
   const { mutateAsync: hideDashboardAction, isPending: unhidePending } =
     useActionMutation("hide-dashboard");
 
@@ -608,7 +619,7 @@ export default function ExplorerDashboardPage() {
               {t("explorerDashboard.addChart")}
             </Button>
           ) : null}
-          {canEdit || canManage ? (
+          {dashboardId || canEdit || canManage ? (
             <DropdownMenu>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -628,6 +639,20 @@ export default function ExplorerDashboardPage() {
                 </TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-44">
+                {dashboardId ? (
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      setHistoryOpen(true);
+                    }}
+                  >
+                    <IconHistory className="mr-2 h-3.5 w-3.5" />
+                    {t("dashboard.historyTitle")}
+                  </DropdownMenuItem>
+                ) : null}
+                {dashboardId && canEdit && !archivedAt ? (
+                  <DropdownMenuSeparator />
+                ) : null}
                 {canEdit && !archivedAt ? (
                   <DropdownMenuItem
                     onSelect={(event) => {
@@ -657,6 +682,14 @@ export default function ExplorerDashboardPage() {
               </DropdownMenuContent>
             </DropdownMenu>
           ) : null}
+          {dashboardId ? (
+            <DashboardHistoryPanel
+              dashboardId={dashboardId}
+              open={historyOpen}
+              onOpenChange={setHistoryOpen}
+              canRestore={canEdit && !archivedAt}
+            />
+          ) : null}
           {canManage ? (
             <AlertDialog
               open={confirmDeleteOpen}

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/index.tsx

@@ -32,6 +32,7 @@ import {
   IconEye,
   IconEyeOff,
   IconGripVertical,
+  IconHistory,
   IconInfoCircle,
   IconLock,
   IconMail,
@@ -56,6 +57,7 @@ import {
 import { useSearchParams, useParams, useNavigate } from "react-router";
 import { toast } from "sonner";
 
+import { DashboardHistoryPanel } from "@/components/dashboard/DashboardHistoryPanel";
 import {
   DashboardTitleSkeleton,
   useSetPageTitle,
@@ -90,6 +92,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useDashboardChatContext } from "@/hooks/use-dashboard-chat-context";
 import { useDashboardViews } from "@/hooks/use-dashboard-views";
 import { useUserPref } from "@/hooks/use-user-pref";
 import { incrementItemView } from "@/lib/item-popularity";
@@ -460,6 +463,7 @@ export default function SqlDashboardPage() {
   const [loaded, setLoaded] = useState(false);
   const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
   const [emailReportOpen, setEmailReportOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
   const [activeDropSlot, setActiveDropSlot] =
     useState<DashboardDropSlot | null>(null);
   const [activeDragPanelId, setActiveDragPanelId] = useState<string | null>(
@@ -472,6 +476,13 @@ export default function SqlDashboardPage() {
   const dashboardColumns = clampDashboardColumns(
     dashboard?.columns ?? DEFAULT_DASHBOARD_COLUMNS,
   );
+  useDashboardChatContext({
+    id: reportScreenshot ? null : dashboardId,
+    kind: "sql",
+    title: dashboard?.name,
+    panelCount: dashboard?.panels.length,
+    canEdit,
+  });
   const isDemoDashboard = dashboard?.demo?.id === "demo-node-exporter";
   const showDemoIntro =
     isDemoDashboard && searchParams.get("demoIntro") === "1";
@@ -1463,6 +1474,15 @@ export default function SqlDashboardPage() {
                   <IconMail className="mr-2 h-3.5 w-3.5" />
                   {t("sqlDashboard.emailReports")}
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    setHistoryOpen(true);
+                  }}
+                >
+                  <IconHistory className="mr-2 h-3.5 w-3.5" />
+                  {t("dashboard.historyTitle")}
+                </DropdownMenuItem>
               </>
             ) : null}
             {canEdit && !archivedAt ? (
@@ -1502,6 +1522,14 @@ export default function SqlDashboardPage() {
             filters={currentReportFilters}
           />
         ) : null}
+        {dashboardId ? (
+          <DashboardHistoryPanel
+            dashboardId={dashboardId}
+            open={historyOpen}
+            onOpenChange={setHistoryOpen}
+            canRestore={canEdit && !archivedAt}
+          />
+        ) : null}
         {canManage ? (
           <AlertDialog
             open={confirmDeleteOpen}