@agent-native/core 0.72.4 → 0.73.0

package/corpus/core/src/server/onboarding-html.ts

@@ -55,6 +55,36 @@ function withAppBasePath(path: string): string {
   return `${basePath}${cleanPath}`;
 }
 
+const AGENT_NATIVE_TERMS_URL = "https://www.agent-native.com/terms";
+const AGENT_NATIVE_PRIVACY_URL = "https://www.agent-native.com/privacy";
+
+export interface SignupLegalNoticeOptions {
+  termsUrl: string;
+  privacyUrl: string;
+  termsLabel?: string;
+  privacyLabel?: string;
+  prefix?: string;
+  connector?: string;
+  suffix?: string;
+}
+
+function normalizeRequestHostname(host: string | undefined): string {
+  const firstHost = host?.split(",")[0]?.trim().toLowerCase() ?? "";
+  if (!firstHost) return "";
+  if (firstHost.startsWith("[")) {
+    const close = firstHost.indexOf("]");
+    return close > 0 ? firstHost.slice(1, close) : firstHost;
+  }
+  return firstHost.replace(/:\d+$/, "");
+}
+
+function isAgentNativeHostedHost(host: string | undefined): boolean {
+  const hostname = normalizeRequestHostname(host);
+  return (
+    hostname === "agent-native.com" || hostname.endsWith(".agent-native.com")
+  );
+}
+
 export interface OnboardingHtmlOptions {
   /**
    * Hide email/password forms and show ONLY the Google sign-in button.
@@ -93,6 +123,12 @@ export interface OnboardingHtmlOptions {
     continueLabel?: string;
     cancelLabel?: string;
   };
+  /**
+   * Optional email signup legal copy. Builder-hosted `*.agent-native.com`
+   * deployments get the Agent Native links automatically; self-hosted and
+   * custom-domain apps must opt in with their own URLs.
+   */
+  signupLegalNotice?: SignupLegalNoticeOptions | false;
   /**
    * Google sign-in flow: `'popup'`, `'redirect'`, or `'auto'` (default).
    * Falls back to `GOOGLE_AUTH_MODE` env var, then `'auto'`. Builder web
@@ -139,6 +175,21 @@ export function getOnboardingHtml(opts: OnboardingHtmlOptions = {}): string {
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;");
+  const hostedSignupLegalNotice: SignupLegalNoticeOptions | undefined =
+    opts.signupLegalNotice === undefined &&
+    isAgentNativeHostedHost(opts.requestHost)
+      ? {
+          termsUrl: AGENT_NATIVE_TERMS_URL,
+          privacyUrl: AGENT_NATIVE_PRIVACY_URL,
+        }
+      : undefined;
+  const signupLegalNotice =
+    opts.signupLegalNotice === false
+      ? undefined
+      : (opts.signupLegalNotice ?? hostedSignupLegalNotice);
+  const signupLegalNoteHtml = signupLegalNotice
+    ? `      <p class="legal-note">${esc(signupLegalNotice.prefix ?? "By signing up, you accept our")} <a href="${esc(signupLegalNotice.termsUrl)}" target="_blank" rel="noreferrer">${esc(signupLegalNotice.termsLabel ?? "Terms")}</a> ${esc(signupLegalNotice.connector ?? "and")} <a href="${esc(signupLegalNotice.privacyUrl)}" target="_blank" rel="noreferrer">${esc(signupLegalNotice.privacyLabel ?? "Privacy Policy")}</a>${esc(signupLegalNotice.suffix ?? ".")}</p>`
+    : "";
   const googleSignInNotice = opts.googleSignInNotice;
   const googleNoticeBodyParts = googleSignInNotice
     ? (Array.isArray(googleSignInNotice.body)
@@ -177,11 +228,16 @@ export function getOnboardingHtml(opts: OnboardingHtmlOptions = {}): string {
     aria-describedby="google-preflight-copy"
     tabindex="-1"
   >
-    <div class="google-preflight-heading">
-      <p class="google-preflight-title" id="google-preflight-title">${esc(googleSignInNotice.title)}</p>
-      <button type="button" class="google-preflight-close" aria-label="Close Google sign-in choices" onclick="__anHideGoogleNotice()">&times;</button>
-    </div>
+    <button type="button" class="google-preflight-close" aria-label="Close Google sign-in choices" onclick="__anHideGoogleNotice()">&times;</button>
+    <div class="google-preflight-main">
+      <span class="google-preflight-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z"/><path d="M12 9v4"/><path d="M12 16h.01"/></svg>
+      </span>
+      <div class="google-preflight-text">
+        <p class="google-preflight-title" id="google-preflight-title">${esc(googleSignInNotice.title)}</p>
 ${googleNoticeBodyHtml}
+      </div>
+    </div>
     <div class="google-preflight-actions">
       <button type="button" class="btn-primary" id="google-preflight-continue" onclick="__anAcceptGoogleNotice()">${esc(googleSignInNotice.continueLabel ?? "Continue")}</button>
 ${googleNoticeRunLocalHtml}
@@ -707,6 +763,19 @@ ${
     cursor: pointer;
   }
   .btn-secondary:hover { color: #bbb; border-color: rgba(255,255,255,0.2); }
+  .legal-note {
+    margin-top: 0.625rem;
+    color: #666;
+    font-size: 0.6875rem;
+    line-height: 1.45;
+    text-align: center;
+  }
+  .legal-note a {
+    color: #777;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .legal-note a:hover { color: #aaa; }
   .msg { margin-top: 0.75rem; font-size: 0.8125rem; display: none; }
   .msg.error { color: #f87171; }
   .msg.success { color: #33C4FF; }
@@ -898,25 +967,40 @@ ${
     border-left: 1px solid rgba(255,255,255,0.12);
     border-top: 1px solid rgba(255,255,255,0.12);
   }
-  .google-preflight-heading {
+  .google-preflight-main {
     display: flex;
     align-items: flex-start;
-    justify-content: space-between;
-    gap: 0.75rem;
-    margin-bottom: 0.375rem;
+    gap: 0.625rem;
+    padding-right: 1.25rem;
   }
+  .google-preflight-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 7px;
+    background: rgba(245,158,11,0.15);
+    color: #fcd34d;
+  }
+  .google-preflight-icon svg { width: 1rem; height: 1rem; }
+  .google-preflight-text { min-width: 0; }
   .google-preflight-title {
     color: #fff;
     font-size: 0.8125rem;
     font-weight: 600;
+    margin-bottom: 0.25rem;
   }
   .google-preflight-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
-    margin: -0.25rem -0.25rem 0 0;
     background: transparent;
     border: none;
     border-radius: 999px;
@@ -942,6 +1026,7 @@ ${
     flex: 1;
     width: auto;
     margin-top: 0;
+    white-space: nowrap;
   }
   .google-preflight-command {
     margin-top: 0.75rem;
@@ -1039,6 +1124,7 @@ ${
     <label for="s-pass2">Confirm password</label>
     <input id="s-pass2" type="password" autocomplete="new-password" placeholder="Confirm password" required minlength="8" />
       <button type="submit">Create account</button>
+${signupLegalNoteHtml}
       <p class="msg" id="s-msg"></p>
     </form>
 

package/corpus/core/src/templates/default/AGENTS.md

@@ -38,6 +38,10 @@ Read these local package docs before implementing advanced Agent Native
 features. Prefer this app's own `AGENTS.md` and `.agents/skills/` for
 app-specific rules, then use the corpus for reusable framework/template
 patterns.
+After updating `@agent-native/core`, run `pnpm skills:update` or
+`npx @agent-native/core@latest skills update scaffold --project` from the app
+root to refresh framework-provided `.agents/skills` and repair `CLAUDE.md` /
+`.claude/skills` compatibility links.
 
 ### Database Code
 

package/corpus/core/src/templates/default/package.json

@@ -8,7 +8,8 @@
     "start": "agent-native start",
     "typecheck": "agent-native typecheck",
     "action": "agent-native action",
-    "script": "agent-native script"
+    "script": "agent-native script",
+    "skills:update": "agent-native skills update scaffold --project"
   },
   "dependencies": {
     "@agent-native/core": "latest",

package/corpus/core/src/templates/headless/AGENTS.md

@@ -38,6 +38,10 @@ first-party template patterns ships in `node_modules/@agent-native/core/corpus`.
 Read these local package docs before implementing advanced Agent Native
 features. Prefer this app's own `AGENTS.md` for app-specific rules, then use
 the corpus for reusable framework/template patterns.
+After updating `@agent-native/core`, run `pnpm skills:update` or
+`npx @agent-native/core@latest skills update scaffold --project` from the app
+root to refresh framework-provided `.agents/skills` and repair `CLAUDE.md` /
+`.claude/skills` compatibility links.
 
 ## Actions
 

package/corpus/core/src/templates/headless/package.json

@@ -6,6 +6,7 @@
     "action": "agent-native action",
     "agent": "agent-native agent",
     "script": "agent-native script",
+    "skills:update": "agent-native skills update scaffold --project",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

package/corpus/core/src/templates/workspace-root/AGENTS.md

@@ -27,6 +27,10 @@ first-party template patterns ships in `node_modules/@agent-native/core/corpus`.
 Use package docs for framework APIs, the package corpus for reusable
 framework/template patterns, and `packages/shared/AGENTS.md` plus
 `packages/shared/.agents/skills/` for workspace-specific conventions.
+After updating `@agent-native/core`, run `pnpm skills:update` or
+`npx @agent-native/core@latest skills update scaffold --project` from the
+workspace root to refresh framework-provided shared skills and repair
+`CLAUDE.md` / `.claude/skills` compatibility links.
 
 ## Core Agent Rule
 

package/corpus/core/src/templates/workspace-root/README.md

@@ -35,6 +35,10 @@ the shared package (`@{{APP_NAME}}/shared`).
 
 The workspace root also links `.agents/skills` to the shared package so coding
 agents launched from the root can discover the same workspace-wide skills.
+Run `pnpm skills:update` (or
+`npx @agent-native/core@latest skills update scaffold --project`) after updating
+`@agent-native/core` to refresh framework-provided shared skills and repair
+Claude compatibility links.
 
 Runtime-editable global resources live in Dispatch, not in `packages/shared`.
 Use Dispatch **Resources** for company context and guardrails that admins should

package/corpus/core/src/templates/workspace-root/package.json

@@ -7,6 +7,7 @@
     "build": "pnpm -r build",
     "typecheck": "pnpm -r typecheck",
     "repair:workspace-org": "tsx scripts/repair-workspace-org.ts",
+    "skills:update": "agent-native skills update scaffold --project",
     "fmt:check": "prettier --check .",
     "lint": "pnpm fmt:check"
   },

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

@@ -265,9 +265,8 @@ function validateDashboardConfig(
     if (!p || typeof p !== "object") {
       return `panel[${i}] must be an object`;
     }
-    // Section panels are pure layout dividers — they have no query, so source
-    // and sql are optional. They still need id/title/chartType/width so the
-    // grid renders them.
+    // Section panels are pure layout dividers, so source and sql are optional.
+    // Width stays required for backward-compatible dashboard payloads.
     const isSection = p.chartType === "section";
     const required = isSection
       ? (["id", "title", "chartType", "width"] as const)
@@ -276,7 +275,7 @@ function validateDashboardConfig(
       const v = p[field];
       if (field === "width") {
         if (!isValidColumnCount(v)) {
-          return `panel[${i}].width must be an integer between 1 and 6 (number of grid columns to span)`;
+          return `panel[${i}].width must be an integer between 1 and 6 (legacy layout field)`;
         }
         continue;
       }

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

@@ -240,39 +240,114 @@ function shouldShowLegend(panel: SqlPanel, seriesCount: number): boolean {
   return panel.config?.legend !== false && seriesCount > 0;
 }
 
+function numericTooltipValue(value: unknown): number {
+  const numeric = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(numeric) ? numeric : Number.NEGATIVE_INFINITY;
+}
+
+export function sortTooltipPayloadItems<
+  T extends {
+    value?: unknown;
+  },
+>(items: T[]): T[] {
+  return items
+    .map((item, index) => ({ item, index }))
+    .sort((a, b) => {
+      const diff =
+        numericTooltipValue(b.item.value) - numericTooltipValue(a.item.value);
+      return diff !== 0 ? diff : a.index - b.index;
+    })
+    .map(({ item }) => item);
+}
+
+function useSeriesVisibility(keys: string[]): {
+  hiddenKeys: Set<string>;
+  visibleKeys: string[];
+  toggleSeries: (key: string) => void;
+} {
+  const [hiddenKeys, setHiddenKeys] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    setHiddenKeys((prev) => {
+      const next = new Set(
+        Array.from(prev).filter((key) => keys.includes(key)),
+      );
+      return next.size === prev.size ? prev : next;
+    });
+  }, [keys]);
+
+  const visibleKeys = useMemo(
+    () => keys.filter((key) => !hiddenKeys.has(key)),
+    [hiddenKeys, keys],
+  );
+
+  const toggleSeries = useCallback(
+    (key: string) => {
+      setHiddenKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+          return next;
+        }
+        const visibleCount = keys.filter((k) => !next.has(k)).length;
+        if (visibleCount <= 1) return prev;
+        next.add(key);
+        return next;
+      });
+    },
+    [keys],
+  );
+
+  return { hiddenKeys, visibleKeys, toggleSeries };
+}
+
 function SeriesLegend({
   keys,
   colors,
   panel,
+  hiddenKeys,
+  onToggleKey,
 }: {
   keys: string[];
   colors: string[];
   panel: SqlPanel;
+  hiddenKeys?: Set<string>;
+  onToggleKey?: (key: string) => void;
 }) {
-  if (
-    !usesPrometheusPresentation(panel) ||
-    !shouldShowLegend(panel, keys.length)
-  )
-    return null;
+  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="flex flex-wrap gap-x-3 gap-y-1">
-        {keys.map((key, i) => (
-          <span
-            key={key}
-            className="inline-flex max-w-[14rem] items-center gap-1.5"
-            title={key}
-          >
-            <span
-              className="h-2 w-2 shrink-0 rounded-full"
-              style={{ backgroundColor: colors[i % colors.length] }}
-            />
-            <span className="truncate">
-              {formatSeriesLabelForPanel(panel, key)}
-            </span>
-          </span>
-        ))}
+        {keys.map((key, i) => {
+          const hidden = hiddenKeys?.has(key) ?? false;
+          const label = formatSeriesLabelForPanel(panel, key);
+          const color = colors[i % colors.length];
+          return (
+            <button
+              key={key}
+              type="button"
+              aria-pressed={!hidden}
+              className={`inline-flex max-w-[14rem] items-center gap-1.5 rounded-sm text-left transition-opacity hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${
+                hidden ? "opacity-35" : "opacity-100"
+              } ${onToggleKey ? "cursor-pointer" : "cursor-default"}`}
+              title={label}
+              onClick={() => onToggleKey?.(key)}
+            >
+              <span className="relative h-2.5 w-3 shrink-0">
+                <span
+                  className="absolute left-0 right-0 top-1/2 h-px -translate-y-1/2"
+                  style={{ backgroundColor: color }}
+                />
+                <span
+                  className="absolute left-1/2 top-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full"
+                  style={{ backgroundColor: color }}
+                />
+              </span>
+              <span className="truncate">{label}</span>
+            </button>
+          );
+        })}
       </div>
     </div>
   );
@@ -296,17 +371,25 @@ function ChartFrame({
   panel,
   legendKeys,
   colors,
+  hiddenKeys,
+  onToggleLegendKey,
+  showCustomLegend = false,
   children,
 }: {
   panel: SqlPanel;
   legendKeys: string[];
   colors: string[];
+  hiddenKeys?: Set<string>;
+  onToggleLegendKey?: (key: string) => void;
+  showCustomLegend?: boolean;
   children: ReactNode;
 }) {
   const fill = useContext(ChartFillHeightContext);
   const chartHeight = fill ? "h-full min-h-[250px]" : "h-[250px]";
 
-  if (!usesPrometheusPresentation(panel)) {
+  const renderLegend = showCustomLegend || usesPrometheusPresentation(panel);
+
+  if (!renderLegend) {
     return (
       <div className={`${chartHeight} w-full overflow-visible`}>{children}</div>
     );
@@ -321,7 +404,13 @@ function ChartFrame({
       >
         {children}
       </div>
-      <SeriesLegend keys={legendKeys} colors={colors} panel={panel} />
+      <SeriesLegend
+        keys={legendKeys}
+        colors={colors}
+        panel={panel}
+        hiddenKeys={hiddenKeys}
+        onToggleKey={onToggleLegendKey}
+      />
     </div>
   );
 }
@@ -347,8 +436,9 @@ function ChartTooltip({
   valueFormatter?: (value: number) => string;
 }) {
   const tooltipRef = useChartTooltipFlip<HTMLDivElement>();
-  const items =
-    payload?.filter((item) => item.value != null && item.value !== "") ?? [];
+  const items = sortTooltipPayloadItems(
+    payload?.filter((item) => item.value != null && item.value !== "") ?? [],
+  );
   if (!active || items.length === 0) return null;
 
   const labelText =
@@ -1067,9 +1157,17 @@ function BarRenderer({
     formatXLabel(String(value ?? ""), panel);
   const seriesNameFormatter = (name: string) =>
     formatSeriesLabelForPanel(panel, name);
+  const { hiddenKeys, toggleSeries } = useSeriesVisibility(yKeys);
 
   return (
-    <ChartFrame panel={panel} legendKeys={yKeys} colors={colors}>
+    <ChartFrame
+      panel={panel}
+      legendKeys={yKeys}
+      colors={colors}
+      hiddenKeys={hiddenKeys}
+      onToggleLegendKey={toggleSeries}
+      showCustomLegend
+    >
       <ResponsiveContainer width="100%" height="100%">
         <BarChart data={rows}>
           <XAxis
@@ -1104,10 +1202,6 @@ function BarRenderer({
             }
             itemSorter={(item) => -(Number(item.value) || 0)}
           />
-          {!usesPrometheusPresentation(panel) &&
-            shouldShowLegend(panel, yKeys.length) && (
-              <Legend {...CHART_LEGEND_PROPS} />
-            )}
           {yKeys.map((key, i) => (
             <Bar
               key={key}
@@ -1118,6 +1212,7 @@ function BarRenderer({
                 stacked && i < yKeys.length - 1 ? [0, 0, 0, 0] : [4, 4, 0, 0]
               }
               stackId={stacked ? "stack" : undefined}
+              hide={hiddenKeys.has(key)}
             />
           ))}
         </BarChart>
@@ -1149,10 +1244,18 @@ function TimeSeriesRenderer({
     formatXLabel(String(value ?? ""), panel);
   const seriesNameFormatter = (name: string) =>
     formatSeriesLabelForPanel(panel, name);
+  const { hiddenKeys, visibleKeys, toggleSeries } = useSeriesVisibility(yKeys);
 
   if (chartType === "line") {
     return (
-      <ChartFrame panel={panel} legendKeys={yKeys} colors={colors}>
+      <ChartFrame
+        panel={panel}
+        legendKeys={yKeys}
+        colors={colors}
+        hiddenKeys={hiddenKeys}
+        onToggleLegendKey={toggleSeries}
+        showCustomLegend
+      >
         <ResponsiveContainer width="100%" height="100%">
           <LineChart data={rows}>
             <XAxis
@@ -1187,10 +1290,6 @@ function TimeSeriesRenderer({
               }
               itemSorter={(item) => -(Number(item.value) || 0)}
             />
-            {!usesPrometheusPresentation(panel) &&
-              shouldShowLegend(panel, yKeys.length) && (
-                <Legend {...CHART_LEGEND_PROPS} />
-              )}
             {yKeys.map((key, i) => (
               <Line
                 key={key}
@@ -1200,6 +1299,7 @@ function TimeSeriesRenderer({
                 stroke={colors[i % colors.length]}
                 strokeWidth={2}
                 dot={false}
+                hide={hiddenKeys.has(key)}
               />
             ))}
           </LineChart>
@@ -1211,10 +1311,17 @@ function TimeSeriesRenderer({
   // With multiple series, filled areas stack and obscure lines behind them,
   // so only draw the gradient fill when there's a single series — unless
   // the caller asked for an explicit stacked area.
-  const showFill = yKeys.length === 1 || stacked;
+  const showFill = visibleKeys.length === 1 || stacked;
 
   return (
-    <ChartFrame panel={panel} legendKeys={yKeys} colors={colors}>
+    <ChartFrame
+      panel={panel}
+      legendKeys={yKeys}
+      colors={colors}
+      hiddenKeys={hiddenKeys}
+      onToggleLegendKey={toggleSeries}
+      showCustomLegend
+    >
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart data={rows}>
           {showFill && (
@@ -1274,10 +1381,6 @@ function TimeSeriesRenderer({
             }
             itemSorter={(item) => -(Number(item.value) || 0)}
           />
-          {!usesPrometheusPresentation(panel) &&
-            shouldShowLegend(panel, yKeys.length) && (
-              <Legend {...CHART_LEGEND_PROPS} />
-            )}
           {yKeys.map((key, i) => (
             <Area
               key={key}
@@ -1289,6 +1392,7 @@ function TimeSeriesRenderer({
               fillOpacity={showFill ? 1 : 0}
               fill={showFill ? `url(#sql-gradient-${key})` : "none"}
               stackId={stacked ? "stack" : undefined}
+              hide={hiddenKeys.has(key)}
             />
           ))}
         </AreaChart>

package/corpus/templates/analytics/app/global.css

@@ -314,31 +314,33 @@
 }
 
 /* The dashboard grid responds to the available content width — which shrinks
-   when the agent sidebar is open — not the viewport. Below the threshold it
-   stacks to one column (mobile layout); at/above it expands to the dashboard's
-   configured column count. Mirrors templates/macros/app/global.css. */
+   when the agent sidebar is open — not the viewport. Rows auto-fit like
+   Amplitude: a partial row stretches its cards across the available width. */
 .dashboard-grid-container {
   container: dashboard-grid / inline-size;
 }
 
 .dashboard-grid {
-  display: grid;
-  grid-auto-rows: auto;
+  --dashboard-grid-gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
   align-items: stretch;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr);
+  gap: var(--dashboard-grid-gap);
 }
 
 .dashboard-grid > .dashboard-grid-cell {
-  grid-column: auto;
+  flex: 1 1 100%;
+  min-width: 0;
 }
 
 @container dashboard-grid (min-width: 768px) {
-  .dashboard-grid {
-    grid-template-columns: repeat(var(--dash-cols), minmax(0, 1fr));
-  }
-
   .dashboard-grid > .dashboard-grid-cell {
-    grid-column: span var(--panel-span);
+    flex-basis: max(
+      0px,
+      calc(
+        (100% - (var(--dash-cols) - 1) * var(--dashboard-grid-gap)) /
+          var(--dash-cols)
+      )
+    );
   }
 }