@agent-native/core 0.91.2 → 0.92.0

package/corpus/templates/analytics/.agents/skills/upgrade-agent-native/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: upgrade-agent-native
+description: >-
+  Bring an older Agent Native app or workspace current. Use when updating
+  @agent-native/core, fixing a broken upgrade, or when tempted to patch or
+  override core/dispatch packages to make an old branch run.
+scope: dev
+metadata:
+  internal: true
+---
+
+# Upgrade Agent Native
+
+## Rule
+
+When an older Agent Native app/branch needs to run on current packages, use
+`agent-native upgrade`. Never "fix" upgrade breakage with
+`pnpm.overrides`, `patchedDependencies`, `resolutions`, local patches, or
+edits under `node_modules/@agent-native/*` — especially not against
+`@agent-native/core` or `@agent-native/dispatch`.
+
+## Why
+
+Agents often respond to a failed core bump by inventing framework patches and
+dispatch behavior overrides. That hides the real app-level break, drifts from
+upstream, and makes the next upgrade worse. The supported path is bump →
+install → refresh scaffold skills → verify, then fix **app** code only.
+
+## How
+
+1. **Doctor first (optional but recommended)**
+
+   ```bash
+   npx @agent-native/core@latest upgrade check
+   ```
+
+   This reports framework overrides/patches and pending `@agent-native/*`
+   bumps. If overrides/patches are present, remove them before continuing.
+
+2. **Run the upgrade**
+
+   ```bash
+   npx @agent-native/core@latest upgrade
+   ```
+
+   Or from an already-installed CLI: `pnpm exec agent-native upgrade` /
+   `agent-native upgrade`.
+
+   What it does:
+
+   - Blocks (unless `--force`) when `@agent-native/*` overrides/patches exist
+   - Rewrites non-local `@agent-native/*` dependency pins to `latest`
+   - Runs the package manager install
+   - Runs `skills update scaffold --project`
+   - Runs `typecheck` when the project has that script
+
+3. **If upgrade or typecheck fails**
+
+   - Read the concrete error
+   - Fix **app** source, actions, config, or env — not framework packages
+   - Re-run `agent-native upgrade` or `pnpm typecheck`
+   - Stop and ask the user if you cannot fix the app-level error
+
+4. **Dry-run / partial runs**
+
+   ```bash
+   agent-native upgrade --dry-run
+   agent-native upgrade --skip-verify
+   agent-native upgrade --skip-install   # package.json bumps only
+   ```
+
+## Don't
+
+- Don't add `pnpm.overrides`, `overrides`, `resolutions`, or
+  `patchedDependencies` for any `@agent-native/*` package
+- Don't edit `node_modules/@agent-native/core` or
+  `node_modules/@agent-native/dispatch`
+- Don't invent local "dispatch behavior" shims to paper over version skew
+- Don't keep iterating with more framework patches after a failed install
+- Don't skip `skills update scaffold --project` after a core bump (the
+  upgrade command does this for you)
+
+## Related Skills
+
+- **self-modifying-code** — Tier 4: framework packages are off limits
+- **agent-native-docs** — version-matched docs after the bump
+- **portability** — keep app code provider-agnostic across upgrades

package/corpus/templates/analytics/AGENTS.md

@@ -140,11 +140,13 @@ details live in `.agents/skills/`.
   `thresholdMode: "distinct_count"` counts unique values from `distinctBy`.
   Alert notifications use the shared notification channel registry, so
   `channels` can include `inbox`, `email`, `slack`, `webhook`, or any custom
-  registered channel. Configure Slack with `NOTIFICATIONS_SLACK_WEBHOOK_URL`
-  and optional `NOTIFICATIONS_SLACK_WEBHOOK_AUTH`; configure email with
-  `NOTIFICATIONS_EMAIL_CHANNEL=1`, existing `RESEND_API_KEY` or
-  `SENDGRID_API_KEY` plus `EMAIL_FROM`, and pass per-rule `emailRecipients` or
-  the fallback `NOTIFICATIONS_EMAIL_RECIPIENTS`.
+  registered channel. Slack/webhook prefer delivery-only
+  `metadata.delivery.slackWebhookUrl` / `metadata.delivery.webhookUrl` (uptime
+  monitors store these on the monitor row), then fall back to
+  `NOTIFICATIONS_SLACK_WEBHOOK_URL` / `NOTIFICATIONS_WEBHOOK_URL`. Configure
+  optional `NOTIFICATIONS_SLACK_WEBHOOK_AUTH`; configure email with existing
+  `RESEND_API_KEY` or `SENDGRID_API_KEY` plus `EMAIL_FROM`, and pass per-rule
+  `emailRecipients` or the fallback `NOTIFICATIONS_EMAIL_RECIPIENTS`.
   Netlify builds emit an alert cron trigger plus background worker from
   `scripts/emit-netlify-dashboard-report-cron.ts` every five minutes; long-lived
   runtimes use the in-process scheduler unless `ANALYTICS_ALERT_JOBS=0` is set.

package/corpus/templates/analytics/actions/save-monitor.ts

@@ -123,6 +123,20 @@ export default defineAction({
       .array(z.string().email())
       .optional()
       .describe("Email recipients used by the email channel."),
+    slackWebhookUrl: z
+      .string()
+      .nullable()
+      .optional()
+      .describe(
+        "Optional Slack incoming webhook URL for this monitor. Overrides NOTIFICATIONS_SLACK_WEBHOOK_URL when set.",
+      ),
+    webhookUrl: z
+      .string()
+      .nullable()
+      .optional()
+      .describe(
+        "Optional generic webhook URL for this monitor. Overrides NOTIFICATIONS_WEBHOOK_URL when set.",
+      ),
     cooldownMinutes: z
       .number()
       .int()

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

@@ -27,6 +27,8 @@ import {
 import { cn } from "@/lib/utils";
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+const TABLE_MIN_HEIGHT_CLASS = "min-h-[386px]";
+const TABLE_SKELETON_ROWS = 10;
 
 interface DataTableProps {
   title?: string;
@@ -109,11 +111,7 @@ export function DataTable({
   const content = (
     <>
       {isLoading ? (
-        <div className="space-y-2">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Skeleton key={i} className="h-8 w-full" />
-          ))}
-        </div>
+        <DataTableLoadingSkeleton />
       ) : error ? (
         <p className="text-sm text-red-400 py-4">{error}</p>
       ) : data.length === 0 ? (
@@ -121,7 +119,7 @@ export function DataTable({
           {t("common.noData")}
         </p>
       ) : (
-        <div className="overflow-x-auto">
+        <div className={`overflow-x-auto ${TABLE_MIN_HEIGHT_CLASS}`}>
           <Table>
             <TableHeader>
               <TableRow>
@@ -227,3 +225,40 @@ export function DataTable({
     </Card>
   );
 }
+
+function DataTableLoadingSkeleton() {
+  const columnWidths = ["w-24", "w-32", "w-20", "w-28"];
+
+  return (
+    <div className={`space-y-1 ${TABLE_MIN_HEIGHT_CLASS}`}>
+      <div className="overflow-x-auto">
+        <div className="min-w-[480px]">
+          <div className="grid h-8 grid-cols-4 items-center border-b border-border px-2">
+            {columnWidths.map((width, index) => (
+              <Skeleton key={index} className={`h-3 ${width}`} />
+            ))}
+          </div>
+          {Array.from({ length: TABLE_SKELETON_ROWS }).map((_, row) => (
+            <div
+              key={row}
+              className="grid h-8 grid-cols-4 items-center border-b border-border/50 px-2"
+            >
+              {columnWidths.map((width, col) => (
+                <Skeleton
+                  key={col}
+                  className={`h-3 ${
+                    col === 0 ? "w-36" : col === 2 ? "ml-auto w-16" : width
+                  }`}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex h-8 items-center justify-between border-t border-border px-2 text-xs">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+    </div>
+  );
+}

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

@@ -113,6 +113,8 @@ const CHART_LEGEND_PROPS = {
 const PARTIAL_DAY_TIME_ZONE = "America/Los_Angeles";
 const PARTIAL_DAY_DASH = "3 5";
 const PARTIAL_DAY_KEY_PREFIX = "__sql_chart_partial_day";
+const TABLE_PANEL_MIN_HEIGHT_CLASS = "min-h-[386px]";
+const TABLE_PANEL_SKELETON_ROWS = 10;
 
 function formatYValue(
   value: number,
@@ -488,7 +490,7 @@ function SeriesLegend({
   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="mt-2 min-h-16 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) => {
           const hidden = hiddenKeys?.has(key) ?? false;
@@ -586,6 +588,113 @@ function ChartFrame({
   );
 }
 
+function isTableLikeChartType(type: ChartType): boolean {
+  return type === "table" || type === "heatmap";
+}
+
+function chartTypeReservesLegend(panel: SqlPanel): boolean {
+  if (panel.config?.legend === false) return false;
+  const chartUsesFrame =
+    panel.chartType === "line" ||
+    panel.chartType === "area" ||
+    panel.chartType === "bar" ||
+    panel.chartType === "pie";
+  if (!chartUsesFrame) return false;
+  return (
+    panel.chartType === "line" ||
+    panel.chartType === "area" ||
+    panel.chartType === "bar" ||
+    usesPrometheusPresentation(panel)
+  );
+}
+
+function TableLoadingSkeleton() {
+  const columnWidths = ["w-24", "w-32", "w-20", "w-28"];
+
+  return (
+    <div
+      data-dashboard-report-loading="true"
+      className={`w-full flex-1 space-y-1 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}
+    >
+      <div className="relative overflow-x-auto">
+        <div className="min-w-[480px]">
+          <div className="grid h-8 grid-cols-4 items-center border-b border-border px-2">
+            {columnWidths.map((width, index) => (
+              <Skeleton key={index} className={`h-3 ${width}`} />
+            ))}
+          </div>
+          {Array.from({ length: TABLE_PANEL_SKELETON_ROWS }).map((_, row) => (
+            <div
+              key={row}
+              className="grid h-8 grid-cols-4 items-center border-b border-border/50 px-2"
+            >
+              {columnWidths.map((width, col) => (
+                <Skeleton
+                  key={col}
+                  className={`h-3 ${
+                    col === 0 ? "w-36" : col === 2 ? "ml-auto w-16" : width
+                  }`}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex h-8 items-center justify-between border-t border-border px-1 text-xs">
+        <Skeleton className="h-3 w-28" />
+        <Skeleton className="h-3 w-24" />
+      </div>
+    </div>
+  );
+}
+
+function SqlChartLoadingSkeleton({ panel }: { panel: SqlPanel }) {
+  const fill = useContext(ChartFillHeightContext);
+
+  if (panel.chartType === "metric") {
+    return (
+      <Skeleton
+        data-dashboard-report-loading="true"
+        className="w-full flex-1 min-h-12"
+      />
+    );
+  }
+
+  if (isTableLikeChartType(panel.chartType)) {
+    return <TableLoadingSkeleton />;
+  }
+
+  const reserveLegend = chartTypeReservesLegend(panel);
+
+  if (!reserveLegend) {
+    return (
+      <Skeleton
+        data-dashboard-report-loading="true"
+        className={`w-full flex-1 ${fill ? "h-full min-h-[250px]" : "min-h-[250px]"}`}
+      />
+    );
+  }
+
+  return (
+    <div
+      data-dashboard-report-loading="true"
+      className={`flex w-full flex-1 flex-col overflow-hidden ${fill ? "h-full" : ""}`}
+    >
+      <Skeleton
+        className={`w-full ${fill ? "h-full min-h-[250px] flex-1" : "h-[250px]"}`}
+      />
+      <div className="mt-2 grid min-h-16 grid-cols-2 gap-x-3 gap-y-1 overflow-hidden pr-1 sm:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <div key={index} className="flex items-center gap-1.5">
+            <Skeleton className="h-2.5 w-3 shrink-0 rounded-sm" />
+            <Skeleton className="h-3 w-20 min-w-0" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function ChartTooltip({
   active,
   payload,
@@ -962,16 +1071,16 @@ export function SqlChart({
   const yFormatter = panel.config?.yFormatter;
 
   const isMetric = panel.chartType === "metric";
-  const placeholderMinH = isMetric ? "min-h-12" : "min-h-[250px]";
+  const isTableLike = isTableLikeChartType(panel.chartType);
+  const placeholderMinH = isMetric
+    ? "min-h-12"
+    : isTableLike
+      ? TABLE_PANEL_MIN_HEIGHT_CLASS
+      : "min-h-[250px]";
   const placeholderPadY = isMetric ? "py-2" : "py-8";
 
   if (!loadData || isLoading) {
-    return (
-      <Skeleton
-        data-dashboard-report-loading="true"
-        className={`w-full flex-1 ${placeholderMinH}`}
-      />
-    );
+    return <SqlChartLoadingSkeleton panel={panel} />;
   }
 
   if (error) {
@@ -1366,7 +1475,7 @@ function TableRenderer({
   }, [handleExportCsv, onExportCsvChange]);
 
   return (
-    <div className="space-y-1">
+    <div className={`space-y-1 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}>
       <div className="relative overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
@@ -1989,7 +2098,9 @@ function HeatmapRenderer({
 
   if (rows.length === 0 || !valueKey) {
     return (
-      <div className="flex min-h-[250px] items-center justify-center py-8">
+      <div
+        className={`flex items-center justify-center py-8 ${TABLE_PANEL_MIN_HEIGHT_CLASS}`}
+      >
         <p className="text-sm text-muted-foreground text-center">
           {t("common.noData")}
         </p>
@@ -2010,7 +2121,7 @@ function HeatmapRenderer({
   };
 
   return (
-    <div className="overflow-x-auto">
+    <div className={`${TABLE_PANEL_MIN_HEIGHT_CLASS} overflow-x-auto`}>
       <table className="w-full border-collapse text-sm">
         <thead>
           <tr className="border-b border-border">

package/corpus/templates/analytics/app/pages/monitoring/MonitoringPage.tsx

@@ -69,11 +69,17 @@ export default function MonitoringPage() {
         {inSubView ? null : (
           <div className="flex items-center justify-between gap-2">
             <TabsList>
-              <TabsTrigger value="uptime" className="gap-2">
+              <TabsTrigger
+                value="uptime"
+                className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
+              >
                 <IconHeartbeat className="h-4 w-4" />
                 {t("navigation.monitoringUptime")}
               </TabsTrigger>
-              <TabsTrigger value="errors" className="gap-2">
+              <TabsTrigger
+                value="errors"
+                className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm"
+              >
                 <IconAlertTriangle className="h-4 w-4" />
                 {t("navigation.monitoringErrors")}
               </TabsTrigger>

package/corpus/templates/analytics/app/pages/monitoring/uptime/MonitorFormPage.tsx

@@ -101,6 +101,8 @@ interface MonitorFormValues {
   severity: MonitorSeverity;
   channels: Record<(typeof KNOWN_CHANNELS)[number], boolean>;
   emailRecipients: string;
+  slackWebhookUrl: string;
+  webhookUrl: string;
   cooldownMinutes: number;
   enabled: boolean;
 }
@@ -160,6 +162,8 @@ function defaultValues(monitor: MonitorSummary | null): MonitorFormValues {
       webhook: channelSet.has("webhook"),
     },
     emailRecipients: (monitor?.emailRecipients ?? []).join(", "),
+    slackWebhookUrl: monitor?.slackWebhookUrl ?? "",
+    webhookUrl: monitor?.webhookUrl ?? "",
     cooldownMinutes: monitor?.cooldownMinutes ?? 15,
     enabled: monitor?.enabled ?? true,
   };
@@ -206,6 +210,8 @@ function initialSections(monitor: MonitorSummary | null): SectionState {
     alerting:
       !isDefaultChannels ||
       monitor.emailRecipients.length > 0 ||
+      Boolean(monitor.slackWebhookUrl) ||
+      Boolean(monitor.webhookUrl) ||
       monitor.severity !== "critical",
     advanced:
       monitor.method !== "GET" ||
@@ -362,6 +368,30 @@ export function MonitorFormPage({
       setError("channels", { message: t.channelRequired });
       return;
     }
+    if (
+      formValues.channels.email &&
+      !splitList(formValues.emailRecipients).length
+    ) {
+      setSections((prev) => ({ ...prev, alerting: true }));
+      setError("emailRecipients", { message: t.emailRecipientsRequired });
+      return;
+    }
+    if (formValues.channels.slack) {
+      const slackUrl = formValues.slackWebhookUrl.trim();
+      if (slackUrl && !isHttpUrl(slackUrl)) {
+        setSections((prev) => ({ ...prev, alerting: true }));
+        setError("slackWebhookUrl", { message: t.slackWebhookUrlInvalid });
+        return;
+      }
+    }
+    if (formValues.channels.webhook) {
+      const hookUrl = formValues.webhookUrl.trim();
+      if (hookUrl && !isHttpUrl(hookUrl)) {
+        setSections((prev) => ({ ...prev, alerting: true }));
+        setError("webhookUrl", { message: t.webhookUrlInvalid });
+        return;
+      }
+    }
 
     const assertions = formValues.assertions
       .map((assertion) => {
@@ -399,7 +429,15 @@ export function MonitorFormPage({
       followRedirects: formValues.followRedirects,
       severity: formValues.severity,
       channels,
-      emailRecipients: splitList(formValues.emailRecipients),
+      emailRecipients: formValues.channels.email
+        ? splitList(formValues.emailRecipients)
+        : [],
+      slackWebhookUrl: formValues.channels.slack
+        ? formValues.slackWebhookUrl.trim()
+        : null,
+      webhookUrl: formValues.channels.webhook
+        ? formValues.webhookUrl.trim()
+        : null,
       cooldownMinutes: formValues.cooldownMinutes,
       enabled: formValues.enabled,
     };
@@ -736,8 +774,8 @@ export function MonitorFormPage({
             setSections((prev) => ({ ...prev, alerting: open }))
           }
         >
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
+          <div className="space-y-4">
+            <div className="space-y-1.5 sm:max-w-xs">
               <Label htmlFor="monitor-severity">{t.fieldSeverity}</Label>
               <Controller
                 control={control}
@@ -765,43 +803,108 @@ export function MonitorFormPage({
               />
             </div>
 
-            <div className="space-y-1.5">
+            <div className="space-y-2">
               <Label>{t.fieldChannels}</Label>
               <Controller
                 control={control}
                 name="channels"
                 render={({ field }) => (
-                  <div className="grid grid-cols-2 gap-2">
-                    {KNOWN_CHANNELS.map((channel) => (
-                      <label
-                        key={channel}
-                        className="flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs"
-                      >
-                        <Checkbox
-                          checked={field.value[channel]}
-                          onCheckedChange={(checked) =>
-                            field.onChange({
-                              ...field.value,
-                              [channel]: checked === true,
-                            })
-                          }
-                        />
-                        {channelLabel(channel, t)}
-                      </label>
-                    ))}
+                  <div className="space-y-2">
+                    {KNOWN_CHANNELS.map((channel) => {
+                      const checked = field.value[channel];
+                      return (
+                        <div
+                          key={channel}
+                          className="rounded-md border border-border/60"
+                        >
+                          <label className="flex cursor-pointer items-start gap-2.5 px-3 py-2.5">
+                            <Checkbox
+                              className="mt-0.5"
+                              checked={checked}
+                              onCheckedChange={(next) =>
+                                field.onChange({
+                                  ...field.value,
+                                  [channel]: next === true,
+                                })
+                              }
+                            />
+                            <span className="min-w-0">
+                              <span className="block text-sm">
+                                {channelLabel(channel, t)}
+                              </span>
+                              <span className="block text-xs text-muted-foreground">
+                                {channelHint(channel, t)}
+                              </span>
+                            </span>
+                          </label>
+                          {channel === "email" && checked ? (
+                            <div className="space-y-1.5 border-t border-border/60 px-3 py-2.5">
+                              <Label htmlFor="monitor-emails">
+                                {t.fieldEmailRecipients}
+                              </Label>
+                              <Textarea
+                                id="monitor-emails"
+                                className="min-h-[64px]"
+                                placeholder={t.fieldEmailRecipientsPlaceholder}
+                                {...register("emailRecipients")}
+                              />
+                              {errors.emailRecipients ? (
+                                <p className="text-xs text-destructive">
+                                  {errors.emailRecipients.message}
+                                </p>
+                              ) : null}
+                            </div>
+                          ) : null}
+                          {channel === "slack" && checked ? (
+                            <div className="space-y-1.5 border-t border-border/60 px-3 py-2.5">
+                              <Label htmlFor="monitor-slack-url">
+                                {t.fieldSlackWebhookUrl}
+                              </Label>
+                              <Input
+                                id="monitor-slack-url"
+                                type="url"
+                                placeholder={t.fieldSlackWebhookUrlPlaceholder}
+                                {...register("slackWebhookUrl")}
+                              />
+                              {errors.slackWebhookUrl ? (
+                                <p className="text-xs text-destructive">
+                                  {errors.slackWebhookUrl.message}
+                                </p>
+                              ) : (
+                                <p className="text-xs text-muted-foreground">
+                                  {t.fieldSlackWebhookUrlHint}
+                                </p>
+                              )}
+                            </div>
+                          ) : null}
+                          {channel === "webhook" && checked ? (
+                            <div className="space-y-1.5 border-t border-border/60 px-3 py-2.5">
+                              <Label htmlFor="monitor-webhook-url">
+                                {t.fieldWebhookUrl}
+                              </Label>
+                              <Input
+                                id="monitor-webhook-url"
+                                type="url"
+                                placeholder={t.fieldWebhookUrlPlaceholder}
+                                {...register("webhookUrl")}
+                              />
+                              {errors.webhookUrl ? (
+                                <p className="text-xs text-destructive">
+                                  {errors.webhookUrl.message}
+                                </p>
+                              ) : (
+                                <p className="text-xs text-muted-foreground">
+                                  {t.fieldWebhookUrlHint}
+                                </p>
+                              )}
+                            </div>
+                          ) : null}
+                        </div>
+                      );
+                    })}
                   </div>
                 )}
               />
-            </div>
-
-            <div className="space-y-1.5 sm:col-span-2">
-              <Label htmlFor="monitor-emails">{t.fieldEmailRecipients}</Label>
-              <Textarea
-                id="monitor-emails"
-                className="min-h-[64px]"
-                placeholder={t.fieldEmailRecipientsPlaceholder}
-                {...register("emailRecipients")}
-              />
               {errors.channels ? (
                 <p className="text-xs text-destructive">
                   {errors.channels.message}
@@ -1024,3 +1127,19 @@ function channelLabel(
       return t.channelWebhook;
   }
 }
+
+function channelHint(
+  channel: (typeof KNOWN_CHANNELS)[number],
+  t: ReturnType<typeof useUptimeT>,
+): string {
+  switch (channel) {
+    case "inbox":
+      return t.channelInboxHint;
+    case "email":
+      return t.channelEmailHint;
+    case "slack":
+      return t.channelSlackHint;
+    case "webhook":
+      return t.channelWebhookHint;
+  }
+}