@agent-native/core 0.69.0 → 0.70.1

package/corpus/templates/analytics/actions/update-dashboard.ts

@@ -378,6 +378,11 @@ function resolveScope() {
   return { orgId, email };
 }
 
+/** Resulting panel count, used for the proof-of-done return summary. */
+function countPanels(config: Record<string, unknown>): number {
+  return Array.isArray(config.panels) ? config.panels.length : 0;
+}
+
 /**
  * Push a config update through the collab layer so open dashboard editors
  * receive the change in real time. Seeds the collab state if it doesn't
@@ -407,10 +412,20 @@ async function syncToCollab(
 
 export default defineAction({
   description:
-    "Edit a SQL dashboard config (scope-aware). Prefer this over raw db-patch on the settings table — " +
+    "Edit a SQL dashboard config (scope-aware) atomically in ONE call. Prefer this over raw db-patch on the settings table — " +
     "it resolves org vs. user scope correctly so the edit lands on the row the UI actually renders. " +
-    "Use `ops` for structural changes (reorder/insert/remove panels, update field values via JSON Pointer paths). " +
-    "Use `config` to replace the entire dashboard config. The UI auto-refreshes after this action — do NOT call `refresh-screen`.",
+    "BATCH ALL EDITS INTO A SINGLE CALL. Never call this action repeatedly in a loop: hosted agent runs have a ~40s budget, and many sequential update-dashboard calls time out mid-way and leave the dashboard in a partial state even though earlier calls looked like they succeeded. Put every change you want to make into one `ops` array (or one `config`). " +
+    "`ops` is an array of { op, path, from?, value? } applied in order in a single atomic save. " +
+    "`op` is one of: set | replace | remove | insert | move | move-before. " +
+    "`path` is a JSON Pointer into the config (e.g. `/panels/3` is the 4th panel, `/panels/3/title` is its title, `/name` is the dashboard name). The special index `-` means the end of an array: `/panels/-` appends. " +
+    "`value` is the panel or object to set/insert. `from` is the source JSON Pointer for move / move-before. " +
+    "To ADD N panels in one call, pass N entries of { op: 'insert', path: '/panels/-', value: <panel> }. " +
+    "To reorder: [{ op: 'move', from: '/panels/2', path: '/panels/0' }]. " +
+    "To edit a field: [{ op: 'replace', path: '/panels/0/title', value: 'Events by Day' }]. " +
+    "Use `config` to replace the entire dashboard config in one call. Provide `ops` OR `config`, not both. " +
+    "To add a shipped catalog template's panels to an existing dashboard, prefer `install-dashboard-template` with `mergePanels: true` — it appends the template's panels in one call without you having to author each panel. " +
+    "The result includes `panelCount` (resulting number of panels), `appliedOps` (count), and a `summary` string — use them as proof-of-done and report the new panel count back to the user instead of assuming success. " +
+    "The UI auto-refreshes after this action — do NOT call `refresh-screen`.",
   schema: z.object({
     dashboardId: z
       .string()
@@ -438,8 +453,11 @@ export default defineAction({
       )
       .optional()
       .describe(
-        "Array of JSON-patch-style ops applied in order (or a JSON string). " +
-          "Example reorder: [{op:'move', from:'/panels/2', path:'/panels/0'}]",
+        "Array of JSON-patch-style ops applied in order in ONE atomic save (or a JSON string). " +
+          "Each op is { op, path, from?, value? }. op ∈ set|replace|remove|insert|move|move-before. " +
+          "path is a JSON Pointer (e.g. '/panels/3', and '/panels/-' appends to the end). " +
+          "Add N panels at once with N {op:'insert', path:'/panels/-', value:<panel>} entries. " +
+          "Example reorder: [{op:'move', from:'/panels/2', path:'/panels/0'}].",
       ),
     config: z
       .preprocess(
@@ -480,6 +498,7 @@ export default defineAction({
       if (sqlError) throw new Error(sqlError);
       await upsertDashboard(args.dashboardId, "sql", args.config, ctx);
       await syncToCollab(args.dashboardId, args.config);
+      const panelCount = countPanels(args.config);
       return {
         id: args.dashboardId,
         dashboardId: args.dashboardId,
@@ -487,8 +506,13 @@ export default defineAction({
           typeof args.config.name === "string"
             ? args.config.name
             : args.dashboardId,
+        // Proof-of-done: lead with verifiable state so the agent/UI can
+        // confirm the new shape cheaply instead of assuming success.
+        panelCount,
+        appliedOps: 0,
+        summary: `Replaced dashboard "${args.dashboardId}"; it now has ${panelCount} panel(s).`,
         config: args.config,
-        urlPath: `/adhoc/${args.dashboardId}`,
+        urlPath: `/dashboards/${args.dashboardId}`,
         deepLink: buildDeepLink({
           app: "analytics",
           view: "adhoc",
@@ -526,12 +550,18 @@ export default defineAction({
     );
     await syncToCollab(args.dashboardId, root as Record<string, unknown>);
 
+    const panelCount = countPanels(root as Record<string, unknown>);
     return {
       id: args.dashboardId,
       dashboardId: args.dashboardId,
       name: typeof root.name === "string" ? root.name : args.dashboardId,
+      // Proof-of-done: lead with verifiable state (op count + resulting panel
+      // count) so the agent/UI can confirm success without re-fetching.
+      panelCount,
+      appliedOps: details.length,
+      summary: `Applied ${details.length} op(s); dashboard "${args.dashboardId}" now has ${panelCount} panel(s).`,
       config: root,
-      urlPath: `/adhoc/${args.dashboardId}`,
+      urlPath: `/dashboards/${args.dashboardId}`,
       deepLink: buildDeepLink({
         app: "analytics",
         view: "adhoc",
@@ -539,7 +569,8 @@ export default defineAction({
       }),
       message:
         `Dashboard "${args.dashboardId}" updated. ` +
-        `Applied ${details.length} op(s): ${details.join("; ")}.`,
+        `Applied ${details.length} op(s): ${details.join("; ")}. ` +
+        `Now ${panelCount} panel(s).`,
     };
   },
   link: ({ result }) => {

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

@@ -1,5 +1,7 @@
 import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -248,6 +250,20 @@ function SeriesLegend({
   );
 }
 
+// When a chart renders inside the full-screen modal it should grow to fill the
+// available space rather than the fixed 250px card height. ChartFrame reads
+// this via context so we avoid threading a prop through every renderer
+// (line/area/bar/pie all share ChartFrame).
+const ChartFillHeightContext = createContext(false);
+
+export function ChartFillHeight({ children }: { children: ReactNode }) {
+  return (
+    <ChartFillHeightContext.Provider value={true}>
+      {children}
+    </ChartFillHeightContext.Provider>
+  );
+}
+
 function ChartFrame({
   panel,
   legendKeys,
@@ -259,13 +275,24 @@ function ChartFrame({
   colors: string[];
   children: ReactNode;
 }) {
+  const fill = useContext(ChartFillHeightContext);
+  const chartHeight = fill ? "h-full min-h-[250px]" : "h-[250px]";
+
   if (!usesPrometheusPresentation(panel)) {
-    return <div className="h-[250px] w-full overflow-visible">{children}</div>;
+    return (
+      <div className={`${chartHeight} w-full overflow-visible`}>{children}</div>
+    );
   }
 
   return (
-    <div className="w-full overflow-hidden">
-      <div className="h-[250px] w-full overflow-visible">{children}</div>
+    <div
+      className={`flex w-full flex-col overflow-hidden ${fill ? "h-full" : ""}`}
+    >
+      <div
+        className={`${chartHeight} w-full overflow-visible ${fill ? "flex-1" : ""}`}
+      >
+        {children}
+      </div>
       <SeriesLegend keys={legendKeys} colors={colors} panel={panel} />
     </div>
   );

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

@@ -16,6 +16,7 @@ import {
   IconLayoutDashboard,
   IconSun,
   IconMoon,
+  IconHistory,
 } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { dashboards } from "@/pages/adhoc/registry";
@@ -25,8 +26,10 @@ import {
   appApiPath,
   callAction,
   useChangeVersions,
+  ChangelogDialog,
 } from "@agent-native/core/client";
 import { extensionPath } from "@agent-native/core/client/extensions";
+import changelog from "../../../CHANGELOG.md?raw";
 import { commandPaletteKeywords } from "./command-palette-search";
 
 interface SavedConfig {
@@ -47,11 +50,11 @@ interface ExtensionSearchItem {
 }
 
 const defaultTools = [
-  { id: "explorer", name: "Explorer", href: "/adhoc/explorer" },
+  { id: "explorer", name: "Explorer", href: "/dashboards/explorer" },
   {
     id: "customer-health",
     name: "Customer Health",
-    href: "/adhoc/customer-health",
+    href: "/dashboards/customer-health",
   },
 ];
 
@@ -181,6 +184,7 @@ function persistThemePreference(theme: "light" | "dark") {
 
 export function CommandPalette() {
   const [open, setOpen] = useState(false);
+  const [changelogOpen, setChangelogOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const navigate = useNavigate();
   const { resolvedTheme, setTheme } = useTheme();
@@ -263,168 +267,200 @@ export function CommandPalette() {
     : sqlDashboards.filter((dashboard) => !dashboard.hiddenAt);
 
   return (
-    <CommandDialog
-      open={open}
-      onOpenChange={(next) => {
-        setOpen(next);
-        if (!next) setSearchQuery("");
-      }}
-    >
-      <CommandInput
-        placeholder="Search dashboards, extensions, charts..."
-        value={searchQuery}
-        onValueChange={setSearchQuery}
-      />
-      <CommandList>
-        {!asyncGroupsLoading && <CommandEmpty>No results found.</CommandEmpty>}
-
-        {explorerDashboardsFetching && explorerDashboards.length === 0 && (
-          <CommandLoadingGroup heading="Explorer Dashboards" rows={2} />
-        )}
-
-        {visibleExplorerDashboards.length > 0 && (
-          <CommandGroup heading="Explorer Dashboards">
-            {visibleExplorerDashboards.map((d) => (
-              <CommandItem
-                key={`ed-${d.id}`}
-                onSelect={() => go(`/adhoc/explorer-dashboard?id=${d.id}`)}
-                keywords={commandPaletteKeywords(
-                  d.name,
-                  "explorer dashboard",
-                  "dashboard",
-                )}
-              >
-                <IconLayoutDashboard className="mr-2 h-4 w-4 text-muted-foreground" />
-                <span className="truncate">{d.name}</span>
-                {d.hiddenAt ? (
-                  <span className="ml-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                    Hidden
-                  </span>
-                ) : null}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        )}
-
-        {sqlDashboardsFetching && sqlDashboards.length === 0 && (
-          <CommandLoadingGroup heading="SQL Dashboards" rows={3} />
-        )}
-
-        {visibleSqlDashboards.length > 0 && (
-          <CommandGroup heading="SQL Dashboards">
-            {visibleSqlDashboards.map((d) => (
+    <>
+      <CommandDialog
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) setSearchQuery("");
+        }}
+      >
+        <CommandInput
+          placeholder="Search dashboards, extensions, charts..."
+          value={searchQuery}
+          onValueChange={setSearchQuery}
+        />
+        <CommandList>
+          {!asyncGroupsLoading && (
+            <CommandEmpty>No results found.</CommandEmpty>
+          )}
+
+          {explorerDashboardsFetching && explorerDashboards.length === 0 && (
+            <CommandLoadingGroup heading="Explorer Dashboards" rows={2} />
+          )}
+
+          {visibleExplorerDashboards.length > 0 && (
+            <CommandGroup heading="Explorer Dashboards">
+              {visibleExplorerDashboards.map((d) => (
+                <CommandItem
+                  key={`ed-${d.id}`}
+                  onSelect={() =>
+                    go(`/dashboards/explorer-dashboard?id=${d.id}`)
+                  }
+                  keywords={commandPaletteKeywords(
+                    d.name,
+                    "explorer dashboard",
+                    "dashboard",
+                  )}
+                >
+                  <IconLayoutDashboard className="mr-2 h-4 w-4 text-muted-foreground" />
+                  <span className="truncate">{d.name}</span>
+                  {d.hiddenAt ? (
+                    <span className="ml-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                      Hidden
+                    </span>
+                  ) : null}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+
+          {sqlDashboardsFetching && sqlDashboards.length === 0 && (
+            <CommandLoadingGroup heading="SQL Dashboards" rows={3} />
+          )}
+
+          {visibleSqlDashboards.length > 0 && (
+            <CommandGroup heading="SQL Dashboards">
+              {visibleSqlDashboards.map((d) => (
+                <CommandItem
+                  key={`sql-${d.id}`}
+                  onSelect={() => go(`/dashboards/${d.id}`)}
+                  keywords={commandPaletteKeywords(
+                    d.name,
+                    "sql dashboard",
+                    "dashboard",
+                  )}
+                >
+                  <IconLayoutDashboard className="mr-2 h-4 w-4 text-muted-foreground" />
+                  <span className="truncate">{d.name}</span>
+                  {d.hiddenAt ? (
+                    <span className="ml-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                      Hidden
+                    </span>
+                  ) : null}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+
+          {extensionsFetching && extensions.length === 0 && (
+            <CommandLoadingGroup heading="Extensions" rows={3} />
+          )}
+
+          {extensions.length > 0 && (
+            <CommandGroup heading="Extensions">
+              {extensions.map((extension) => (
+                <CommandItem
+                  key={`extension-${extension.id}`}
+                  onSelect={() =>
+                    go(extensionPath(extension.id, extension.name))
+                  }
+                  keywords={commandPaletteKeywords(
+                    extension.name,
+                    extension.description,
+                    "extension",
+                    "tool",
+                  )}
+                >
+                  <IconTool className="mr-2 h-4 w-4 text-muted-foreground" />
+                  {extension.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+
+          <CommandGroup heading="Dashboards">
+            {dashboards.map((d) => (
               <CommandItem
-                key={`sql-${d.id}`}
-                onSelect={() => go(`/adhoc/${d.id}`)}
-                keywords={commandPaletteKeywords(
-                  d.name,
-                  "sql dashboard",
-                  "dashboard",
-                )}
+                key={`dash-${d.id}`}
+                onSelect={() => go(`/dashboards/${d.id}`)}
+                keywords={commandPaletteKeywords(d.name, "dashboard")}
               >
-                <IconLayoutDashboard className="mr-2 h-4 w-4 text-muted-foreground" />
-                <span className="truncate">{d.name}</span>
-                {d.hiddenAt ? (
-                  <span className="ml-2 rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                    Hidden
-                  </span>
-                ) : null}
+                <IconFlask className="mr-2 h-4 w-4 text-muted-foreground" />
+                {d.name}
               </CommandItem>
             ))}
           </CommandGroup>
-        )}
-
-        {extensionsFetching && extensions.length === 0 && (
-          <CommandLoadingGroup heading="Extensions" rows={3} />
-        )}
 
-        {extensions.length > 0 && (
-          <CommandGroup heading="Extensions">
-            {extensions.map((extension) => (
+          <CommandGroup heading="Tools">
+            {defaultTools.map((t) => (
               <CommandItem
-                key={`extension-${extension.id}`}
-                onSelect={() => go(extensionPath(extension.id, extension.name))}
-                keywords={commandPaletteKeywords(
-                  extension.name,
-                  extension.description,
-                  "extension",
-                  "tool",
-                )}
+                key={`tool-${t.id}`}
+                onSelect={() => go(t.href)}
+                keywords={commandPaletteKeywords(t.name, "tool")}
               >
                 <IconTool className="mr-2 h-4 w-4 text-muted-foreground" />
-                {extension.name}
+                {t.name}
               </CommandItem>
             ))}
           </CommandGroup>
-        )}
 
-        <CommandGroup heading="Dashboards">
-          {dashboards.map((d) => (
+          <CommandGroup heading="Appearance">
             <CommandItem
-              key={`dash-${d.id}`}
-              onSelect={() => go(`/adhoc/${d.id}`)}
-              keywords={commandPaletteKeywords(d.name, "dashboard")}
+              onSelect={() => {
+                const nextTheme = isDark ? "light" : "dark";
+                setTheme(nextTheme);
+                persistThemePreference(nextTheme);
+              }}
+              keywords={["theme", "dark", "light", "mode"]}
             >
-              <IconFlask className="mr-2 h-4 w-4 text-muted-foreground" />
-              {d.name}
+              {isDark ? (
+                <IconSun className="mr-2 h-4 w-4 text-muted-foreground" />
+              ) : (
+                <IconMoon className="mr-2 h-4 w-4 text-muted-foreground" />
+              )}
+              Toggle {isDark ? "light" : "dark"} mode
             </CommandItem>
-          ))}
-        </CommandGroup>
+          </CommandGroup>
 
-        <CommandGroup heading="Tools">
-          {defaultTools.map((t) => (
+          <CommandGroup heading="Help">
             <CommandItem
-              key={`tool-${t.id}`}
-              onSelect={() => go(t.href)}
-              keywords={commandPaletteKeywords(t.name, "tool")}
+              onSelect={() => {
+                setOpen(false);
+                setChangelogOpen(true);
+              }}
+              keywords={commandPaletteKeywords(
+                "What's new",
+                "changelog",
+                "updates",
+                "release notes",
+                "changes",
+              )}
             >
-              <IconTool className="mr-2 h-4 w-4 text-muted-foreground" />
-              {t.name}
+              <IconHistory className="mr-2 h-4 w-4 text-muted-foreground" />
+              What's new
             </CommandItem>
-          ))}
-        </CommandGroup>
-
-        <CommandGroup heading="Appearance">
-          <CommandItem
-            onSelect={() => {
-              const nextTheme = isDark ? "light" : "dark";
-              setTheme(nextTheme);
-              persistThemePreference(nextTheme);
-            }}
-            keywords={["theme", "dark", "light", "mode"]}
-          >
-            {isDark ? (
-              <IconSun className="mr-2 h-4 w-4 text-muted-foreground" />
-            ) : (
-              <IconMoon className="mr-2 h-4 w-4 text-muted-foreground" />
-            )}
-            Toggle {isDark ? "light" : "dark"} mode
-          </CommandItem>
-        </CommandGroup>
-
-        {savedChartsFetching && savedCharts.length === 0 && (
-          <CommandLoadingGroup heading="Saved Charts" rows={2} />
-        )}
-
-        {savedCharts.length > 0 && (
-          <CommandGroup heading="Saved Charts">
-            {savedCharts.map((c) => (
-              <CommandItem
-                key={`chart-${c.id}`}
-                onSelect={() => go(`/adhoc/explorer?config=${c.id}`)}
-                keywords={commandPaletteKeywords(
-                  c.name,
-                  "saved chart",
-                  "chart",
-                )}
-              >
-                <IconChartBar className="mr-2 h-4 w-4 text-muted-foreground" />
-                {c.name}
-              </CommandItem>
-            ))}
           </CommandGroup>
-        )}
-      </CommandList>
-    </CommandDialog>
+
+          {savedChartsFetching && savedCharts.length === 0 && (
+            <CommandLoadingGroup heading="Saved Charts" rows={2} />
+          )}
+
+          {savedCharts.length > 0 && (
+            <CommandGroup heading="Saved Charts">
+              {savedCharts.map((c) => (
+                <CommandItem
+                  key={`chart-${c.id}`}
+                  onSelect={() => go(`/dashboards/explorer?config=${c.id}`)}
+                  keywords={commandPaletteKeywords(
+                    c.name,
+                    "saved chart",
+                    "chart",
+                  )}
+                >
+                  <IconChartBar className="mr-2 h-4 w-4 text-muted-foreground" />
+                  {c.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </CommandDialog>
+      <ChangelogDialog
+        open={changelogOpen}
+        onOpenChange={setChangelogOpen}
+        markdown={changelog}
+      />
+    </>
   );
 }

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

@@ -15,16 +15,15 @@ const pageTitles: Record<string, string> = {
   "/data-dictionary": "Data Dictionary",
   "/catalog": "Template Catalog",
   "/analyses": "Analyses",
-  "/adhoc/explorer": "Explorer",
+  "/dashboards/explorer": "Explorer",
   "/team": "Team",
   "/settings": "Settings",
-  "/about": "About",
 };
 
 function resolveTitle(pathname: string): ReactNode {
   if (pageTitles[pathname]) return pageTitles[pathname];
 
-  const adhocMatch = pathname.match(/^\/adhoc\/(.+)$/);
+  const adhocMatch = pathname.match(/^\/(?:adhoc|dashboards)\/(.+)$/);
   if (adhocMatch) {
     const id = adhocMatch[1];
     const dash = dashboards.find((d) => d.id === id);

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

@@ -29,12 +29,14 @@ export function Layout({ children }: LayoutProps) {
   const navigate = useNavigate();
 
   // Analytics has two distinct "primary resources" — dashboards
-  // (`/adhoc/:id`) and ad-hoc analyses (`/analyses/:id`). Each binds the
-  // chat to that artifact so a dashboard chat doesn't leak into a
-  // different analysis (and vice versa). The list pages and overview
-  // leave scope null so general data questions still work.
+  // (`/dashboards/:id`, legacy `/adhoc/:id`) and ad-hoc analyses
+  // (`/analyses/:id`). Each binds the chat to that artifact so a dashboard
+  // chat doesn't leak into a different analysis (and vice versa). The list
+  // pages and overview leave scope null so general data questions still work.
   const analyticsScope = useMemo(() => {
-    const dashMatch = location.pathname.match(/^\/adhoc\/([^/]+)/);
+    const dashMatch = location.pathname.match(
+      /^\/(?:adhoc|dashboards)\/([^/]+)/,
+    );
     if (dashMatch?.[1]) {
       return { type: "dashboard" as const, id: dashMatch[1] };
     }