@agent-native/core 0.122.4 → 0.123.0

package/corpus/templates/analytics/actions/list-dashboard-views.ts

@@ -0,0 +1,25 @@
+import { defineAction } from "@agent-native/core";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server";
+import { z } from "zod";
+
+import { listDashboardViews } from "../server/lib/dashboards-store";
+
+export default defineAction({
+  agentTool: false,
+  description: "List the saved filter views for a dashboard.",
+  schema: z.object({
+    dashboardId: z.string().min(1).describe("The dashboard ID"),
+  }),
+  http: { method: "GET" },
+  readOnly: true,
+  run: async (args) => {
+    const email = getRequestUserEmail();
+    if (!email) throw new Error("no authenticated user");
+    const orgId = getRequestOrgId() || null;
+    const views = await listDashboardViews(args.dashboardId, { email, orgId });
+    return { views };
+  },
+});

package/corpus/templates/analytics/actions/save-dashboard-view.ts

@@ -0,0 +1,33 @@
+import { defineAction } from "@agent-native/core";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server";
+import { z } from "zod";
+
+import { saveDashboardView } from "../server/lib/dashboards-store";
+
+export default defineAction({
+  agentTool: false,
+  description: "Create or update a saved filter view on a dashboard.",
+  schema: z.object({
+    dashboardId: z.string().min(1).describe("The dashboard ID"),
+    id: z.string().optional().describe("Existing view ID when updating"),
+    name: z.string().min(1).describe("View name"),
+    filters: z
+      .record(z.string(), z.string())
+      .optional()
+      .describe("Filter params to apply, e.g. { f_recentOnly: '2026-01-01' }"),
+  }),
+  http: { method: "POST" },
+  run: async (args) => {
+    const email = getRequestUserEmail() ?? "";
+    const orgId = getRequestOrgId() || null;
+    const view = await saveDashboardView(
+      args.dashboardId,
+      { id: args.id, name: args.name, filters: args.filters ?? {} },
+      { email, orgId },
+    );
+    return { success: true, view };
+  },
+});

package/corpus/templates/analytics/actions/set-theme.ts

@@ -0,0 +1,22 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+
+import {
+  putScopedSettingRecord,
+  resolveRequestScope,
+} from "../server/lib/scoped-settings";
+
+export default defineAction({
+  agentTool: false,
+  description: "Save the Analytics UI theme for the current scope.",
+  schema: z.object({
+    theme: z.unknown().optional().describe("'light' or 'dark'"),
+  }),
+  http: { method: "POST" },
+  run: async (args) => {
+    const theme = args.theme === "light" ? "light" : "dark";
+    const scope = resolveRequestScope();
+    await putScopedSettingRecord(scope, "analytics-theme", { theme });
+    return { theme };
+  },
+});

package/corpus/templates/analytics/actions/set-user-pref.ts

@@ -0,0 +1,24 @@
+import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server";
+import { putUserSetting } from "@agent-native/core/settings";
+import { z } from "zod";
+
+export default defineAction({
+  agentTool: false,
+  description: "Write a per-user UI preference record to the settings store.",
+  schema: z.object({
+    key: z.string().min(1).describe("Preference key"),
+    value: z
+      .record(z.string(), z.unknown())
+      .describe("Preference record to store under the key"),
+  }),
+  http: { method: "PUT" },
+  run: async (args) => {
+    const email = getRequestUserEmail();
+    if (!email) {
+      throw Object.assign(new Error("Not authenticated"), { statusCode: 401 });
+    }
+    await putUserSetting(email, args.key, args.value);
+    return { success: true };
+  },
+});

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

@@ -66,6 +66,12 @@ import { useChartTooltipPortalPosition } from "@/hooks/use-chart-tooltip-portal"
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 import { createDemoChartTrendRows } from "@/lib/demo-chart-trend";
 import { useSqlQuery } from "@/lib/sql-query";
+import {
+  resolveDualAxis,
+  type ChartAxisSide,
+  type ChartValueFormatter,
+  type DualAxisPlan,
+} from "@/pages/adhoc/sql-dashboard/dual-axis";
 import { serializePanelSql } from "@/pages/adhoc/sql-dashboard/panel-sql";
 import { pivotRows } from "@/pages/adhoc/sql-dashboard/pivot";
 import type {
@@ -238,6 +244,103 @@ function formatYValue(
   return value.toLocaleString();
 }
 
+const Y_AXIS_BASE_PROPS = {
+  stroke: "hsl(var(--muted-foreground))",
+  fontSize: 12,
+  tickLine: false,
+  axisLine: false,
+} as const;
+
+function axisLabelProps(value: string, side: ChartAxisSide) {
+  return {
+    value,
+    angle: side === "left" ? -90 : 90,
+    position:
+      side === "left" ? ("insideLeft" as const) : ("insideRight" as const),
+    style: {
+      textAnchor: "middle" as const,
+      fill: "hsl(var(--muted-foreground))",
+      fontSize: 11,
+    },
+  };
+}
+
+/**
+ * Recharts only discovers axes it finds among a chart's own children, so these
+ * come back as an array rather than a wrapper component.
+ */
+function renderChartYAxes(
+  plan: DualAxisPlan,
+  yFormatter?: ChartValueFormatter,
+): ReactNode[] {
+  if (!plan.enabled) {
+    return [
+      <YAxis
+        key="y"
+        {...Y_AXIS_BASE_PROPS}
+        tickFormatter={(v) => formatYValue(v, yFormatter)}
+      />,
+    ];
+  }
+
+  return [
+    <YAxis
+      key="y-left"
+      yAxisId="left"
+      {...Y_AXIS_BASE_PROPS}
+      tickFormatter={(v) => formatYValue(v, plan.leftFormatter)}
+      label={
+        plan.leftLabel ? axisLabelProps(plan.leftLabel, "left") : undefined
+      }
+    />,
+    <YAxis
+      key="y-right"
+      yAxisId="right"
+      orientation="right"
+      {...Y_AXIS_BASE_PROPS}
+      tickFormatter={(v) => formatYValue(v, plan.rightFormatter)}
+      label={
+        plan.rightLabel ? axisLabelProps(plan.rightLabel, "right") : undefined
+      }
+    />,
+  ];
+}
+
+function seriesAxisId(plan: DualAxisPlan, key: string): string | undefined {
+  return plan.enabled ? plan.sideFor(key) : undefined;
+}
+
+/**
+ * Tooltip values follow their own axis, so a count and a rate in the same
+ * tooltip each read with the right unit. Series arrive named by their display
+ * label, which for Prometheus panels differs from the data key.
+ */
+export function seriesValueFormatter(
+  yKeys: string[],
+  plan: DualAxisPlan,
+  seriesNameFormatter: (name: string) => string,
+  fallback?: ChartValueFormatter,
+): (value: number, name?: string | number) => string {
+  if (!plan.enabled) return (value) => formatYValue(value, fallback);
+
+  const byName = new Map<string, ChartValueFormatter | undefined>();
+  for (const key of yKeys) {
+    const formatter = plan.formatterFor(key);
+    byName.set(key, formatter);
+    byName.set(seriesNameFormatter(key), formatter);
+  }
+
+  return (value, name) => {
+    const lookup = name == null ? undefined : String(name);
+    return formatYValue(
+      value,
+      lookup !== undefined && byName.has(lookup)
+        ? byName.get(lookup)
+        : fallback,
+    );
+  };
+}
+
 /**
  * Format a single metric value for display. Coerces Postgres numeric/bigint
  * columns (returned as strings, e.g. a rate of "0.00000000000000000000") to a
@@ -967,7 +1070,7 @@ export function ChartTooltip({
   coordinate?: { x?: number; y?: number };
   labelFormatter?: (value: string) => string;
   seriesNameFormatter?: (value: string) => string;
-  valueFormatter?: (value: number) => string;
+  valueFormatter?: (value: number, name?: string | number) => string;
 }) {
   const items = useMemo(
     () =>
@@ -1007,11 +1110,11 @@ export function ChartTooltip({
         {items.map((item) => {
           const raw = item.value;
           const numeric = typeof raw === "number" ? raw : Number(raw);
+          const name = String(item.name ?? item.dataKey ?? "");
           const value =
             Number.isFinite(numeric) && valueFormatter
-              ? valueFormatter(numeric)
+              ? valueFormatter(numeric, name)
               : String(raw ?? "");
-          const name = String(item.name ?? item.dataKey ?? "");
           return (
             <div key={name} className="flex items-center gap-2">
               <span
@@ -1106,6 +1209,9 @@ function configuredKeysMissingFromRows(
     for (const key of config?.yKeys ?? []) {
       if (!rowKeys.has(key)) missing.add(key);
     }
+    for (const key of config?.rightYKeys ?? []) {
+      if (!rowKeys.has(key)) missing.add(key);
+    }
   }
 
   for (const col of config?.columns ?? []) {
@@ -1937,6 +2043,13 @@ function BarRenderer({
   const seriesNameFormatter = (name: string) =>
     formatSeriesLabelForPanel(panel, name);
   const { hiddenKeys, toggleSeries, filterSeries } = useSeriesVisibility(yKeys);
+  const dualAxis = resolveDualAxis(yKeys, panel.config, seriesNameFormatter);
+  const valueFormatter = seriesValueFormatter(
+    yKeys,
+    dualAxis,
+    seriesNameFormatter,
+    yFormatter,
+  );
 
   return (
     <ChartFrame
@@ -1959,13 +2072,7 @@ function BarRenderer({
               axisLine={false}
               tickFormatter={xLabelFormatter}
             />
-            <YAxis
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={(v) => formatYValue(v, yFormatter)}
-            />
+            {renderChartYAxes(dualAxis, yFormatter)}
             <CartesianGrid
               strokeDasharray="3 3"
               stroke="hsl(var(--border))"
@@ -1979,7 +2086,7 @@ function BarRenderer({
                 <ChartTooltip
                   labelFormatter={xLabelFormatter}
                   seriesNameFormatter={seriesNameFormatter}
-                  valueFormatter={(v) => formatYValue(v, yFormatter)}
+                  valueFormatter={valueFormatter}
                 />
               }
               itemSorter={(item) => -(Number(item.value) || 0)}
@@ -1989,6 +2096,7 @@ function BarRenderer({
                 key={key}
                 dataKey={key}
                 name={seriesNameFormatter(key)}
+                yAxisId={seriesAxisId(dualAxis, key)}
                 fill={colors[i % colors.length]}
                 radius={
                   stacked && i < yKeys.length - 1 ? [0, 0, 0, 0] : [4, 4, 0, 0]
@@ -2030,6 +2138,13 @@ function TimeSeriesRenderer({
     formatSeriesLabelForPanel(panel, name);
   const { hiddenKeys, visibleKeys, toggleSeries, filterSeries } =
     useSeriesVisibility(yKeys);
+  const dualAxis = resolveDualAxis(yKeys, panel.config, seriesNameFormatter);
+  const valueFormatter = seriesValueFormatter(
+    yKeys,
+    dualAxis,
+    seriesNameFormatter,
+    yFormatter,
+  );
   const splitPartialDay = shouldSplitCurrentDayTimeSeries(panel, xKey);
   const { rows: chartRows, series } = useMemo(
     () =>
@@ -2068,13 +2183,7 @@ function TimeSeriesRenderer({
                 axisLine={false}
                 tickFormatter={xLabelFormatter}
               />
-              <YAxis
-                stroke="hsl(var(--muted-foreground))"
-                fontSize={12}
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={(v) => formatYValue(v, yFormatter)}
-              />
+              {renderChartYAxes(dualAxis, yFormatter)}
               <CartesianGrid
                 strokeDasharray="3 3"
                 stroke="hsl(var(--border))"
@@ -2087,7 +2196,7 @@ function TimeSeriesRenderer({
                   <ChartTooltip
                     labelFormatter={xLabelFormatter}
                     seriesNameFormatter={seriesNameFormatter}
-                    valueFormatter={(v) => formatYValue(v, yFormatter)}
+                    valueFormatter={valueFormatter}
                   />
                 }
                 itemSorter={(item) => -(Number(item.value) || 0)}
@@ -2098,6 +2207,7 @@ function TimeSeriesRenderer({
                   type="monotone"
                   dataKey={item.solidKey}
                   name={seriesNameFormatter(item.key)}
+                  yAxisId={seriesAxisId(dualAxis, item.key)}
                   stroke={colors[i % colors.length]}
                   strokeWidth={2}
                   dot={false}
@@ -2112,6 +2222,7 @@ function TimeSeriesRenderer({
                     type="monotone"
                     dataKey={item.partialKey}
                     name={seriesNameFormatter(item.key)}
+                    yAxisId={seriesAxisId(dualAxis, item.key)}
                     stroke={colors[i % colors.length]}
                     strokeWidth={2}
                     strokeDasharray={PARTIAL_DAY_DASH}
@@ -2179,13 +2290,7 @@ function TimeSeriesRenderer({
               axisLine={false}
               tickFormatter={xLabelFormatter}
             />
-            <YAxis
-              stroke="hsl(var(--muted-foreground))"
-              fontSize={12}
-              tickLine={false}
-              axisLine={false}
-              tickFormatter={(v) => formatYValue(v, yFormatter)}
-            />
+            {renderChartYAxes(dualAxis, yFormatter)}
             <CartesianGrid
               strokeDasharray="3 3"
               stroke="hsl(var(--border))"
@@ -2198,7 +2303,7 @@ function TimeSeriesRenderer({
                 <ChartTooltip
                   labelFormatter={xLabelFormatter}
                   seriesNameFormatter={seriesNameFormatter}
-                  valueFormatter={(v) => formatYValue(v, yFormatter)}
+                  valueFormatter={valueFormatter}
                 />
               }
               itemSorter={(item) => -(Number(item.value) || 0)}
@@ -2209,6 +2314,7 @@ function TimeSeriesRenderer({
                 type="monotone"
                 dataKey={item.solidKey}
                 name={seriesNameFormatter(item.key)}
+                yAxisId={seriesAxisId(dualAxis, item.key)}
                 stroke={colors[i % colors.length]}
                 strokeWidth={2}
                 fillOpacity={showFill ? 1 : 0}
@@ -2225,6 +2331,7 @@ function TimeSeriesRenderer({
                   type="monotone"
                   dataKey={item.partialKey}
                   name={seriesNameFormatter(item.key)}
+                  yAxisId={seriesAxisId(dualAxis, item.key)}
                   stroke={colors[i % colors.length]}
                   strokeWidth={2}
                   strokeDasharray={PARTIAL_DAY_DASH}

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

@@ -1,7 +1,4 @@
-import {
-  agentNativePath,
-  appApiPath,
-} from "@agent-native/core/client/api-path";
+import { agentNativePath } from "@agent-native/core/client/api-path";
 import { ChangelogDialog } from "@agent-native/core/client/changelog";
 import { extensionPath } from "@agent-native/core/client/extensions";
 import { callAction, useChangeVersions } from "@agent-native/core/client/hooks";
@@ -288,11 +285,7 @@ async function fetchExtensions(): Promise<ExtensionSearchItem[]> {
 }
 
 function persistThemePreference(theme: "light" | "dark") {
-  fetch(appApiPath("/api/theme"), {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ theme }),
-  }).catch(() => {});
+  callAction("set-theme", { theme }).catch(() => {});
 }
 
 export function CommandPalette() {

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

@@ -20,7 +20,6 @@ import {
   ANALYTICS_CHAT_STORAGE_KEY,
   markAnalyticsChatActivity,
 } from "@/lib/chat-handoff";
-import { isDashboardReportScreenshot } from "@/lib/dashboard-report-capture";
 import { TAB_ID } from "@/lib/tab-id";
 
 import { Header } from "./Header";
@@ -35,25 +34,9 @@ interface LayoutProps {
 const BARE_ROUTES = new Set(["/chart"]);
 
 export function Layout({ children }: LayoutProps) {
-  const location = useLocation();
-
-  if (isDashboardReportScreenshot(location.search)) {
-    return <DashboardReportLayout>{children}</DashboardReportLayout>;
-  }
-
   return <InteractiveLayout>{children}</InteractiveLayout>;
 }
 
-function DashboardReportLayout({ children }: LayoutProps) {
-  return (
-    <HeaderActionsProvider>
-      <main className="agent-native-app-main min-h-screen bg-background p-6 text-foreground md:p-8">
-        {children}
-      </main>
-    </HeaderActionsProvider>
-  );
-}
-
 function InteractiveLayout({ children }: LayoutProps) {
   useNavigationState();
   const location = useLocation();

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

@@ -85,7 +85,7 @@ import {
   useChatThreads,
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
-import { appApiPath, appPath } from "@agent-native/core/client/api-path";
+import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import {
   callAction,
@@ -1478,10 +1478,9 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     if (typeof window !== "undefined" && window.localStorage.getItem("theme")) {
       return;
     }
-    fetch(appApiPath("/api/theme"))
-      .then((r) => r.json())
+    callAction("get-theme", {}, { method: "GET" })
       .then((d) => {
-        if (d.theme === "light" || d.theme === "dark") {
+        if (d?.theme === "light" || d?.theme === "dark") {
           setTheme(d.theme);
         }
       })
@@ -1531,6 +1530,8 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const {
     data: favoritesData,
     isLoading: favoritesLoading,
+    isError: favoritesError,
+    isSuccess: favoritesLoaded,
     save: saveFavorites,
   } = useUserPref<{
     ids: string[];
@@ -1541,6 +1542,10 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   );
   const toggleFavorite = useCallback(
     (id: string) => {
+      if (favoritesError || !favoritesLoaded) {
+        toast.error(t("sidebar.favoritesUnavailable"));
+        return;
+      }
       const next = new Set(favoriteIds);
       if (next.has(id)) {
         next.delete(id);
@@ -1549,7 +1554,7 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       }
       saveFavorites({ ids: Array.from(next) });
     },
-    [favoriteIds, saveFavorites],
+    [favoriteIds, favoritesError, favoritesLoaded, saveFavorites],
   );
 
   const setDashboardSortMode = useCallback((mode: SidebarSortMode) => {

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

@@ -1,8 +1,6 @@
-import { appApiPath } from "@agent-native/core/client/api-path";
+import { callAction } from "@agent-native/core/client/hooks";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 
-import { getIdToken } from "@/lib/auth";
-
 export interface DashboardView {
   id: string;
   name: string;
@@ -11,28 +9,13 @@ export interface DashboardView {
   createdAt?: string;
 }
 
-async function fetchWithAuth(url: string, options?: RequestInit) {
-  const token = await getIdToken();
-  return fetch(appApiPath(url), {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      ...(token && { Authorization: `Bearer ${token}` }),
-      ...options?.headers,
-    },
-  });
-}
-
-async function responseError(res: Response, fallback: string): Promise<Error> {
-  try {
-    const body = (await res.json()) as { error?: unknown };
-    if (typeof body.error === "string" && body.error.trim()) {
-      return new Error(body.error.trim());
-    }
-  } catch {
-    // Keep the status fallback when the server did not return JSON.
-  }
-  return new Error(`${fallback}: ${res.status}`);
+async function loadViews(dashboardId: string): Promise<DashboardView[]> {
+  const data = await callAction(
+    "list-dashboard-views",
+    { dashboardId },
+    { method: "GET" },
+  );
+  return (data?.views ?? []) as DashboardView[];
 }
 
 export function useDashboardViews(dashboardId: string | undefined) {
@@ -43,12 +26,7 @@ export function useDashboardViews(dashboardId: string | undefined) {
     queryKey,
     queryFn: async (): Promise<DashboardView[]> => {
       if (!dashboardId) return [];
-      const res = await fetchWithAuth(
-        `/api/dashboard-views/${encodeURIComponent(dashboardId)}`,
-      );
-      if (!res.ok) throw new Error(`Load failed: ${res.status}`);
-      const data = await res.json();
-      return data.views ?? [];
+      return await loadViews(dashboardId);
     },
     enabled: !!dashboardId,
     staleTime: 30_000,
@@ -58,14 +36,12 @@ export function useDashboardViews(dashboardId: string | undefined) {
   const { mutateAsync: saveView } = useMutation({
     mutationFn: async (view: DashboardView) => {
       if (!dashboardId) return;
-      const res = await fetchWithAuth(
-        `/api/dashboard-views/${encodeURIComponent(dashboardId)}`,
-        {
-          method: "POST",
-          body: JSON.stringify(view),
-        },
-      );
-      if (!res.ok) throw await responseError(res, "Save failed");
+      await callAction("save-dashboard-view", {
+        dashboardId,
+        id: view.id,
+        name: view.name,
+        filters: view.filters,
+      });
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey });
@@ -77,11 +53,11 @@ export function useDashboardViews(dashboardId: string | undefined) {
   const { mutateAsync: deleteView } = useMutation({
     mutationFn: async (viewId: string) => {
       if (!dashboardId) return;
-      const res = await fetchWithAuth(
-        `/api/dashboard-views/${encodeURIComponent(dashboardId)}/${encodeURIComponent(viewId)}`,
+      await callAction(
+        "delete-dashboard-view",
+        { dashboardId, viewId },
         { method: "DELETE" },
       );
-      if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey });
@@ -114,11 +90,11 @@ export function useDeleteDashboardView() {
       dashboardId: string;
       viewId: string;
     }) => {
-      const res = await fetchWithAuth(
-        `/api/dashboard-views/${encodeURIComponent(dashboardId)}/${encodeURIComponent(viewId)}`,
+      await callAction(
+        "delete-dashboard-view",
+        { dashboardId, viewId },
         { method: "DELETE" },
       );
-      if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
     },
     onSettled: (_data, _err, { dashboardId }) => {
       queryClient.invalidateQueries({
@@ -140,13 +116,7 @@ export function useAllDashboardViews(dashboardIds: string[]) {
       const results: Record<string, DashboardView[]> = {};
       await Promise.all(
         dashboardIds.map(async (id) => {
-          const res = await fetchWithAuth(
-            `/api/dashboard-views/${encodeURIComponent(id)}`,
-          );
-          if (res.ok) {
-            const data = await res.json();
-            results[id] = data.views ?? [];
-          }
+          results[id] = await loadViews(id);
         }),
       );
       return results;