@agent-native/core 0.91.1 → 0.92.0

package/corpus/core/src/triggers/dispatcher.ts

@@ -414,7 +414,7 @@ async function dispatchAgentic(
           (await getStoredModelForEngine(engine, { appId: _deps!.appId })) ??
           engine.defaultModel;
         const model = normalizeModelForEngine(engine, modelCandidate);
-        await createThread(jobUserEmail, {
+        const thread = await createThread(jobUserEmail, {
           title: `Trigger: ${triggerName} — ${now.toLocaleDateString()}`,
         });
 
@@ -448,9 +448,11 @@ ${body}`;
         const timeout = setTimeout(() => controller.abort(), 5 * 60 * 1000);
 
         const events: AgentChatEvent[] = [];
+        let triggerUsage: Awaited<ReturnType<typeof runAgentLoop>> | null =
+          null;
 
         try {
-          await runAgentLoop({
+          triggerUsage = await runAgentLoop({
             engine,
             model,
             systemPrompt,
@@ -459,11 +461,37 @@ ${body}`;
             actions,
             send: (event) => events.push(event),
             signal: controller.signal,
+            threadId: thread.id,
           });
         } finally {
           clearTimeout(timeout);
         }
 
+        if (
+          triggerUsage &&
+          (triggerUsage.inputTokens > 0 ||
+            triggerUsage.outputTokens > 0 ||
+            triggerUsage.cacheReadTokens > 0 ||
+            triggerUsage.cacheWriteTokens > 0)
+        ) {
+          try {
+            const { recordUsage } = await import("../usage/store.js");
+            await recordUsage({
+              ownerEmail: jobUserEmail,
+              inputTokens: triggerUsage.inputTokens,
+              outputTokens: triggerUsage.outputTokens,
+              cacheReadTokens: triggerUsage.cacheReadTokens,
+              cacheWriteTokens: triggerUsage.cacheWriteTokens,
+              model: triggerUsage.model,
+              label: `automation:${triggerName}`,
+              app: _deps!.appId,
+              refId: eventMeta.eventId,
+            });
+          } catch {
+            // Usage attribution must not break automation dispatch.
+          }
+        }
+
         meta.lastStatus = "success";
         await resourcePut(
           resource.owner,

package/corpus/core/src/vite/client.ts

@@ -306,7 +306,7 @@ function findWorkspaceCoreSync(
 
 function findLocalWorkspacePackageDeps(
   startDir: string,
-  _workspaceRoot: string | null,
+  workspaceRoot: string | null,
 ): Array<{ packageName: string; packageDir: string }> {
   const pkgPath = path.join(startDir, "package.json");
   if (!fs.existsSync(pkgPath)) return [];
@@ -329,6 +329,12 @@ function findLocalWorkspacePackageDeps(
         let packageJsonPath: string | null = null;
         if (range.startsWith("file:")) {
           packageJsonPath = findFilePackageJsonPath(pkgPath, range);
+        } else if (range.startsWith("workspace:")) {
+          packageJsonPath = findWorkspacePackageJsonPath(
+            pkgPath,
+            packageName,
+            workspaceRoot,
+          );
         } else {
           continue;
         }
@@ -350,6 +356,93 @@ function findLocalWorkspacePackageDeps(
   }
 }
 
+function packagePathSegments(packageName: string): string[] {
+  return packageName.split("/");
+}
+
+function findWorkspacePackageJsonPath(
+  pkgPath: string,
+  packageName: string,
+  workspaceRoot: string | null,
+): string | null {
+  const packageSegments = packagePathSegments(packageName);
+  const candidates = [
+    path.join(path.dirname(pkgPath), "node_modules", ...packageSegments),
+    ...(workspaceRoot
+      ? [path.join(workspaceRoot, "node_modules", ...packageSegments)]
+      : []),
+  ];
+
+  for (const candidate of candidates) {
+    const packageJsonPath = path.join(candidate, "package.json");
+    if (!fs.existsSync(packageJsonPath)) continue;
+    const realPath = fs.realpathSync(packageJsonPath);
+    if (
+      workspaceRoot &&
+      !realPath.startsWith(`${fs.realpathSync(workspaceRoot)}${path.sep}`)
+    ) {
+      continue;
+    }
+    return realPath;
+  }
+
+  if (workspaceRoot) {
+    return findWorkspacePackageJsonByName(workspaceRoot, packageName);
+  }
+
+  return null;
+}
+
+function findWorkspacePackageJsonByName(
+  workspaceRoot: string,
+  packageName: string,
+): string | null {
+  const searchRoots = ["packages", "templates"].map((name) =>
+    path.join(workspaceRoot, name),
+  );
+
+  for (const searchRoot of searchRoots) {
+    const packageJsonPath = findPackageJsonInTree(searchRoot, packageName, 2);
+    if (packageJsonPath) return packageJsonPath;
+  }
+
+  return null;
+}
+
+function findPackageJsonInTree(
+  root: string,
+  packageName: string,
+  maxDepth: number,
+): string | null {
+  if (!fs.existsSync(root)) return null;
+
+  const packageJsonPath = path.join(root, "package.json");
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+      if (pkg?.name === packageName) return fs.realpathSync(packageJsonPath);
+    } catch {
+      // Ignore malformed workspace package metadata.
+    }
+  }
+
+  if (maxDepth <= 0) return null;
+
+  for (const entry of fs.readdirSync(root, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name === "node_modules" || entry.name.startsWith(".")) continue;
+
+    const found = findPackageJsonInTree(
+      path.join(root, entry.name),
+      packageName,
+      maxDepth - 1,
+    );
+    if (found) return found;
+  }
+
+  return null;
+}
+
 function findFilePackageJsonPath(
   pkgPath: string,
   range: string,
@@ -2157,8 +2250,10 @@ function localWorkspacePackageAliases(
   packages: Array<{ packageName: string; packageDir: string }>,
 ): any[] {
   const aliases: any[] = [];
+  const sourceAliasExcludes = new Set(["@agent-native/pinpoint"]);
 
   for (const { packageName, packageDir } of packages) {
+    if (sourceAliasExcludes.has(packageName)) continue;
     const pkgPath = path.join(packageDir, "package.json");
     if (!fs.existsSync(pkgPath)) continue;
 

package/corpus/templates/analytics/.agents/skills/self-modifying-code/SKILL.md

@@ -28,7 +28,19 @@ Not all modifications are equal. Use this to decide what level of care is needed
 | 1: Data       | Files in `data/`      | JSON state, generated content, markdown          | Nothing — these are routine       |
 | 2: Source     | App code              | Components, routes, styles, scripts              | Run `pnpm typecheck && pnpm lint` |
 | 3: Config     | Project config        | `package.json`, `tsconfig.json`, `vite.config.*` | Ask for explicit approval first   |
-| 4: Off limits | Secrets and framework | `.env`, `@agent-native/core` internals           | Never modify these                |
+| 4: Off limits | Secrets and framework | `.env`, `@agent-native/*` packages & overrides   | Never modify these                |
+
+Tier 4 includes **all** of the following — not only editing package source:
+
+- Files under `node_modules/@agent-native/*` (core, dispatch, scheduling, …)
+- `pnpm.overrides`, `overrides`, `resolutions`, or `patchedDependencies` that
+  target any `@agent-native/*` package
+- Local patches, vendored copies, or invented "dispatch/core behavior"
+  shims meant to paper over a version skew or failed upgrade
+
+When an older branch needs current packages, use **`agent-native upgrade`**
+(see the `upgrade-agent-native` skill). If upgrade or typecheck fails, fix
+**app** code or stop and ask — do not patch the framework.
 
 ## Git Checkpoint Pattern
 
@@ -74,13 +86,19 @@ inline strings in components.
 ## Don't
 
 - Don't modify `.env` files or files containing secrets
-- Don't modify `@agent-native/core` package internals
+- Don't modify `@agent-native/core`, `@agent-native/dispatch`, or other
+  `@agent-native/*` package internals (including under `node_modules`)
+- Don't add `pnpm.overrides` / `patchedDependencies` / `resolutions` for
+  `@agent-native/*` to "make the app run" after a version bump
+- Don't invent local dispatch/core behavior overrides when upgrade fails —
+  run `npx @agent-native/core@latest upgrade`, then fix app-level errors only
 - Don't modify `.agents/skills/` or `AGENTS.md` unless explicitly requested
 - Don't skip the typecheck/lint step after editing source code
 - Don't make source changes without a git checkpoint to roll back to
 
 ## Related Skills
 
+- **upgrade-agent-native** — supported path to bring an older app/workspace current
 - **storing-data** — Tier 1 modifications (data files) are the safest and most common
 - **actions** — The agent can create or modify actions to add new capabilities
 - **delegate-to-agent** — Self-modification requests come through the agent chat

package/corpus/templates/analytics/.agents/skills/session-replay/SKILL.md

@@ -89,8 +89,26 @@ agent answers about browser recordings in the Analytics template.
 - The `/sessions/:recordingId` replay player has a Dev Tools toggle that opens
   a panel with Console and Network tabs: filter chips, search, an error-count
   badge, and playback-time highlighting.
-- Rows are Jump-to-seek: clicking one seeks the player to that moment. Extend
-  this panel instead of adding a separate debugging surface.
+- Rows expand inline under the selected line (Chrome-style). Expanding a row
+  does not seek; use Jump to to move the playhead. Extend this panel instead of
+  adding a separate debugging surface.
+
+## Playback Viewer
+
+- Wait for all replay chunks (`isComplete`) before constructing the rrweb
+  `Replayer`. Progressive chunk publishes should only update the loading bar;
+  rebuilding the player mid-load desyncs the scrubber and playhead.
+- Pass events to `Replayer` untouched (aside from stylesheet/script sanitization
+  that prevents blank frames from live CSS loads). Let rrweb own iframe sizing
+  via Meta / ViewportResize; use those dimensions only for CSS fit-to-stage of
+  the outer wrapper. Never rewrite Meta widths or force iframe dimensions —
+  that desyncs the FullSnapshot DOM and blanks the stage.
+- The event timeline soft-highlights the active marker, auto-scrolls it into
+  view (pausing briefly after manual scroll), and supports search. It appears
+  beside the player from ~880px content width upward.
+- Dev Tools height is capped so the replay stage never collapses into a ribbon
+  on short viewports; the scrubber playhead stays visually distinct from red
+  error marker dots.
 
 ## Debugging A User-Reported Bug
 

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">