@agent-native/core 0.72.4 → 0.74.0

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 =
@@ -722,6 +812,24 @@ function formatCell(value: unknown, format: ColumnFormat | undefined): string {
   return String(value);
 }
 
+export function safeDashboardLinkHref(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const href = value.trim();
+  if (!href) return null;
+  if (href.startsWith("//")) return null;
+
+  try {
+    const parsed = href.startsWith("/")
+      ? new URL(href, "https://agent-native.local")
+      : new URL(href);
+    return parsed.protocol === "http:" || parsed.protocol === "https:"
+      ? href
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 function renderDeltaCell(value: unknown): ReactNode {
   if (value == null || typeof value !== "number" || Number.isNaN(value)) {
     return <span className="text-muted-foreground">-</span>;
@@ -893,19 +1001,24 @@ function TableRenderer({
                     const href = col.linkKey
                       ? String(row[col.linkKey] ?? "")
                       : String(raw ?? "");
+                    const safeHref = safeDashboardLinkHref(href);
                     return (
                       <td
                         key={col.key}
                         className="py-1.5 px-2 whitespace-nowrap"
                       >
-                        <a
-                          href={href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-primary hover:underline"
-                        >
-                          {formatted}
-                        </a>
+                        {safeHref ? (
+                          <a
+                            href={safeHref}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-primary hover:underline"
+                          >
+                            {formatted}
+                          </a>
+                        ) : (
+                          formatted
+                        )}
                       </td>
                     );
                   }
@@ -1067,9 +1180,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 +1225,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 +1235,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 +1267,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 +1313,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 +1322,7 @@ function TimeSeriesRenderer({
                 stroke={colors[i % colors.length]}
                 strokeWidth={2}
                 dot={false}
+                hide={hiddenKeys.has(key)}
               />
             ))}
           </LineChart>
@@ -1211,10 +1334,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 +1404,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 +1415,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)
+      )
+    );
   }
 }

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/PanelEditorDialog.tsx

@@ -73,6 +73,8 @@ export interface PanelFormValues {
   title: string;
   chartType: ChartType;
   source: DataSourceType;
+  /** Legacy storage field retained for existing dashboards. Row widths are
+   *  now inferred from how many panels share the row. */
   width: number;
   /** Section panels only: number of grid columns the panels following this
    *  section should use. Ignored when `chartType` is not `"section"`. */
@@ -226,7 +228,8 @@ function PanelEditorContent({
         `If no source can answer, report the exact unavailable/error result instead of saving a panel with guessed schema or metrics. ` +
         `Use the \`update-dashboard\` action with ops=[{op:'insert', path:'/panels/-', value: <panel>}] ` +
         `to append, or an appropriate index to place the panel in the right spot. ` +
-        `Panel shape: { id (unique slug), title, sql, source ('bigquery'|'ga4'|'amplitude'|'first-party'|'demo'|'prometheus'), chartType ('line'|'area'|'bar'|'metric'|'table'|'pie'|'section'), width (number of grid columns to span, 1..6), tab? (use 'Group / Tab' for grouped tabs), columns? (section panels only — 1..6 grid columns for the panels following this section), config? }. ` +
+        `Panel shape: { id (unique slug), title, sql, source ('bigquery'|'ga4'|'amplitude'|'first-party'|'demo'|'prometheus'), chartType ('line'|'area'|'bar'|'metric'|'table'|'pie'|'section'), width (legacy integer 1..6; set to 1 unless editing existing data), tab? (use 'Group / Tab' for grouped tabs), columns? (section panels only - 1..6 max panels per row for panels following this section), config? }. ` +
+        `Visible layout auto-fits by row: one panel in a row spans the row, two split it, three split it into thirds, up to the section column limit. ` +
         `For amplitude panels, sql is a JSON descriptor: {"event":"event name","groupBy":"property","days":30}. ` +
         `For first-party panels, sql is read-only SQL over analytics_events only; use source 'first-party' and do not call db-query for this datasource. ` +
         `For demo panels, sql uses the same Prometheus JSON descriptor shape as source 'prometheus': {"promql":"rate(http_requests_total[5m])","mode":"range","range":"1h","step":"30s"}. ` +
@@ -310,11 +313,9 @@ function PanelEditorContent({
           </Select>
         </div>
 
-        <div className="grid gap-1.5">
-          <Label>
-            {form.chartType === "section" ? "Section columns" : "Span"}
-          </Label>
-          {form.chartType === "section" ? (
+        {form.chartType === "section" ? (
+          <div className="grid gap-1.5">
+            <Label>Section columns</Label>
             <ToggleGroup
               type="single"
               value={String(form.columns)}
@@ -338,32 +339,8 @@ function PanelEditorContent({
                 </ToggleGroupItem>
               ))}
             </ToggleGroup>
-          ) : (
-            <ToggleGroup
-              type="single"
-              value={String(form.width)}
-              onValueChange={(v) => {
-                if (!v) return;
-                const next = clampPanelWidth(Number(v), MAX_DASHBOARD_COLUMNS);
-                setForm((f) => ({ ...f, width: next }));
-              }}
-              className="justify-start h-9"
-            >
-              {Array.from(
-                { length: MAX_DASHBOARD_COLUMNS },
-                (_, i) => i + 1,
-              ).map((n) => (
-                <ToggleGroupItem
-                  key={n}
-                  value={String(n)}
-                  className="h-9 w-9 px-0 text-xs"
-                >
-                  {n}
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-          )}
-        </div>
+          </div>
+        ) : null}
       </div>
 
       <div className="grid gap-1.5">

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/SqlChartCard.tsx

@@ -2,8 +2,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   IconGripVertical,
-  IconArrowsMaximize,
-  IconArrowsMinimize,
   IconDotsVertical,
   IconMaximize,
   IconPencil,
@@ -49,13 +47,6 @@ interface SqlChartCardProps {
   panel: SqlPanel;
   resolvedSql?: string;
   onRemove: () => void;
-  /** Toggle between "span 1 column" and "span all columns of the current
-   *  section". Optional because section panels never expose this control. */
-  onToggleWidth?: () => void;
-  /** Number of columns in the section this panel currently lives in. Used to
-   *  decide the toggle label / icon: when the panel already spans the full
-   *  row, we offer to shrink; otherwise we offer to expand. */
-  gridColumns?: number;
   onEdit?: () => void;
   /** Persist a SQL-only edit from the inline View SQL popover. Should throw on
    *  validation failure so the popover can stay open and surface the error. */
@@ -67,8 +58,6 @@ export function SqlChartCard({
   panel,
   resolvedSql,
   onRemove,
-  onToggleWidth,
-  gridColumns,
   onEdit,
   onSaveSql,
   editable = true,
@@ -300,21 +289,6 @@ export function SqlChartCard({
                       </DropdownMenuItem>
                     </ViewSqlPopover>
                   ) : null}
-                  {editable && onToggleWidth && (gridColumns ?? 2) > 1 && (
-                    <DropdownMenuItem onSelect={onToggleWidth}>
-                      {panel.width >= (gridColumns ?? 2) ? (
-                        <>
-                          <IconArrowsMinimize className="h-4 w-4 mr-2" />
-                          Span 1 column
-                        </>
-                      ) : (
-                        <>
-                          <IconArrowsMaximize className="h-4 w-4 mr-2" />
-                          Span full row
-                        </>
-                      )}
-                    </DropdownMenuItem>
-                  )}
                   {editable ? <DropdownMenuSeparator /> : null}
                   {editable && onEdit && (
                     <DropdownMenuItem onSelect={() => onEdit()}>

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/index.tsx

@@ -79,7 +79,6 @@ import { ViewsMenu } from "./ViewsMenu";
 import BlankDashboard from "../BlankDashboard";
 import {
   clampDashboardColumns,
-  clampPanelWidth,
   DEFAULT_DASHBOARD_COLUMNS,
   type SqlDashboardConfig,
   type SqlPanel,
@@ -632,22 +631,6 @@ export default function SqlDashboardPage() {
     [dashboard, persist],
   );
 
-  const toggleWidth = useCallback(
-    (panelId: string, gridColumns: number) => {
-      if (!dashboard) return;
-      const max = clampDashboardColumns(gridColumns);
-      persist({
-        ...dashboard,
-        panels: dashboard.panels.map((p) => {
-          if (p.id !== panelId) return p;
-          const current = clampPanelWidth(p.width, max);
-          return { ...p, width: current >= max ? 1 : max };
-        }),
-      });
-    },
-    [dashboard, persist],
-  );
-
   const handleSavePanel = useCallback(
     async (panel: SqlPanel) => {
       if (!dashboard) return;
@@ -1349,14 +1332,12 @@ export default function SqlDashboardPage() {
                       }
                     : panel;
                   const remoteEditor = remoteEditingPanels.get(panel.id);
-                  const span = clampPanelWidth(panel.width, group.columns);
                   return (
                     <div
                       key={panel.id}
                       className="dashboard-grid-cell relative h-full"
                       style={
                         {
-                          "--panel-span": span,
                           ...(remoteEditor
                             ? {
                                 outline: `2px solid ${remoteEditor.color}`,
@@ -1384,11 +1365,7 @@ export default function SqlDashboardPage() {
                           serializePanelSql(panel.sql),
                           vars,
                         )}
-                        gridColumns={group.columns}
                         onRemove={() => removePanel(panel.id)}
-                        onToggleWidth={() =>
-                          toggleWidth(panel.id, group.columns)
-                        }
                         onEdit={() => openEditPanel(panel)}
                         onSaveSql={(sql) => handleSavePanel({ ...panel, sql })}
                         editable={canEdit}