@agent-native/core 0.79.20 → 0.79.22

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

@@ -120,6 +120,8 @@ const DASHBOARD_SORT_MODE_KEY = "dashboard-sort-mode";
 const ANALYSIS_SORT_MODE_KEY = "analysis-sort-mode";
 const DASHBOARDS_OPEN_KEY = "analytics-sidebar-dashboards-open";
 const ANALYSES_OPEN_KEY = "analytics-sidebar-analyses-open";
+const SIDEBAR_SKELETON_CLASS =
+  "bg-sidebar-foreground/12 dark:bg-sidebar-foreground/10";
 
 type SidebarSortMode = "most-used" | "alphabetical" | "manual";
 
@@ -2056,9 +2058,17 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                           key={`sql-skeleton-${i}`}
                           className="flex items-center gap-2 px-3 py-1"
                         >
-                          <Skeleton className="h-3.5 w-3.5 shrink-0 rounded-sm" />
                           <Skeleton
-                            className="h-3 rounded"
+                            className={cn(
+                              "h-3.5 w-3.5 shrink-0 rounded-sm",
+                              SIDEBAR_SKELETON_CLASS,
+                            )}
+                          />
+                          <Skeleton
+                            className={cn(
+                              "h-3 rounded",
+                              SIDEBAR_SKELETON_CLASS,
+                            )}
                             style={{ width: `${60 + ((i * 17) % 30)}%` }}
                           />
                         </div>
@@ -2184,9 +2194,17 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                           key={`analysis-skeleton-${i}`}
                           className="flex items-center gap-2 px-3 py-1"
                         >
-                          <Skeleton className="h-3.5 w-3.5 shrink-0 rounded-sm" />
                           <Skeleton
-                            className="h-3 rounded"
+                            className={cn(
+                              "h-3.5 w-3.5 shrink-0 rounded-sm",
+                              SIDEBAR_SKELETON_CLASS,
+                            )}
+                          />
+                          <Skeleton
+                            className={cn(
+                              "h-3 rounded",
+                              SIDEBAR_SKELETON_CLASS,
+                            )}
                             style={{ width: `${60 + ((i * 17) % 30)}%` }}
                           />
                         </div>

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

@@ -11,7 +11,7 @@ import {
   IconDownload,
 } from "@tabler/icons-react";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { ChartFillHeight, SqlChart } from "@/components/dashboard/SqlChart";
 import {
@@ -59,8 +59,51 @@ interface SqlChartCardProps {
   onSaveSql?: (sql: string) => Promise<void>;
   editable?: boolean;
   eagerLoad?: boolean;
+  isDragSource?: boolean;
 }
 
+const PanelDragHandle = memo(function PanelDragHandle({
+  panelId,
+  label,
+  className,
+  iconClassName,
+}: {
+  panelId: string;
+  label: string;
+  className: string;
+  iconClassName: string;
+}) {
+  const { attributes, listeners, setActivatorNodeRef, setNodeRef } =
+    useDraggable({
+      id: panelId,
+    });
+
+  const setHandleRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      setNodeRef(node);
+      setActivatorNodeRef(node);
+    },
+    [setActivatorNodeRef, setNodeRef],
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          ref={setHandleRef}
+          className={className}
+          aria-label={label}
+          {...attributes}
+          {...listeners}
+        >
+          <IconGripVertical className={iconClassName} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+});
+
 export function SqlChartCard({
   panel,
   resolvedSql,
@@ -69,13 +112,10 @@ export function SqlChartCard({
   onSaveSql,
   editable = true,
   eagerLoad = false,
+  isDragSource = false,
 }: SqlChartCardProps) {
   const t = useT();
   const queryClient = useQueryClient();
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: panel.id,
-    disabled: !editable,
-  });
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [expanded, setExpanded] = useState(false);
@@ -99,13 +139,9 @@ export function SqlChartCard({
     queryClient.getQueryData(chartQueryKey) !== undefined;
   const isChartRefreshing = chartHasCachedData && chartFetchCount > 0;
 
-  const setCardNodeRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      setNodeRef(node);
-      cardRef.current = node;
-    },
-    [setNodeRef],
-  );
+  const setCardNodeRef = useCallback((node: HTMLDivElement | null) => {
+    cardRef.current = node;
+  }, []);
 
   const handleExportCsvChange = useCallback((handler: (() => void) | null) => {
     setExportCsv(handler ? () => handler : null);
@@ -155,10 +191,6 @@ export function SqlChartCard({
     setExportCsv(null);
   }, [panel.id]);
 
-  const style = {
-    zIndex: isDragging ? 50 : undefined,
-  };
-
   // Section panels render as a flush header row (no card chrome, full width)
   // so they read as dividers between groups of panels rather than as another
   // tile in the grid.
@@ -166,8 +198,8 @@ export function SqlChartCard({
     return (
       <div
         ref={setCardNodeRef}
-        style={style}
-        data-dragging={isDragging ? "true" : undefined}
+        style={isDragSource ? { zIndex: 50 } : undefined}
+        data-dragging={isDragSource ? "true" : undefined}
         className="dashboard-section-card group relative mt-2 first:mt-0"
       >
         <div className="flex items-center gap-2 border-b border-border pb-2">
@@ -209,21 +241,12 @@ export function SqlChartCard({
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
-                    aria-label={t("sqlDashboard.dragToReorder")}
-                    {...attributes}
-                    {...listeners}
-                  >
-                    <IconGripVertical className="h-3.5 w-3.5" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t("sqlDashboard.dragToReorder")}
-                </TooltipContent>
-              </Tooltip>
+              <PanelDragHandle
+                panelId={panel.id}
+                label={t("sqlDashboard.dragToReorder")}
+                className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
+                iconClassName="h-3.5 w-3.5"
+              />
             </div>
           ) : null}
         </div>
@@ -270,8 +293,8 @@ export function SqlChartCard({
   return (
     <div
       ref={setCardNodeRef}
-      style={style}
-      data-dragging={isDragging ? "true" : undefined}
+      style={isDragSource ? { zIndex: 50 } : undefined}
+      data-dragging={isDragSource ? "true" : undefined}
       className="dashboard-chart-card group relative h-full hover:z-20 focus-within:z-20"
     >
       <Card className="flex h-full flex-col overflow-visible">
@@ -375,21 +398,12 @@ export function SqlChartCard({
               </DropdownMenu>
             ) : null}
             {editable ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
-                    aria-label={t("sqlDashboard.dragToReorder")}
-                    {...attributes}
-                    {...listeners}
-                  >
-                    <IconGripVertical className="h-3.5 w-3.5" />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {t("sqlDashboard.dragToReorder")}
-                </TooltipContent>
-              </Tooltip>
+              <PanelDragHandle
+                panelId={panel.id}
+                label={t("sqlDashboard.dragToReorder")}
+                className="p-1 rounded cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground"
+                iconClassName="h-3.5 w-3.5"
+              />
             ) : null}
           </div>
         </CardHeader>

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/dashboard-layout.ts

@@ -279,6 +279,44 @@ export function isDropSlotAvailable(
   return row.panels.length < group.columns;
 }
 
+export function availableDropSlotIdsForPanel(
+  groups: DashboardPanelGroup[],
+  panelId: string,
+): Set<string> {
+  const ids = new Set<string>();
+  if (!panelIsInRenderedRow(groups, panelId)) return ids;
+
+  for (const group of groups) {
+    for (let rowIndex = 0; rowIndex <= group.rows.length; rowIndex++) {
+      ids.add(dropSlotId({ type: "row", groupKey: group.key, rowIndex }));
+    }
+
+    for (let rowIndex = 0; rowIndex < group.rows.length; rowIndex++) {
+      const row = group.rows[rowIndex];
+      const rowContainsPanel = row.panels.some((panel) => panel.id === panelId);
+      if (!rowContainsPanel && row.panels.length >= group.columns) continue;
+      if (rowContainsPanel && row.panels.length <= 1) continue;
+
+      for (
+        let columnIndex = 0;
+        columnIndex <= row.panels.length;
+        columnIndex++
+      ) {
+        ids.add(
+          dropSlotId({
+            type: "column",
+            groupKey: group.key,
+            rowIndex,
+            columnIndex,
+          }),
+        );
+      }
+    }
+  }
+
+  return ids;
+}
+
 export function movePanelToDropSlot(
   panels: SqlPanel[],
   panelId: string,

package/corpus/templates/analytics/app/pages/adhoc/sql-dashboard/dashboard-sync.ts

@@ -0,0 +1,89 @@
+export type DashboardAdoptionHold = {
+  dashboardId: string;
+  minUpdatedAtMs: number | null;
+  expiresAt: number;
+};
+
+type PrefetchSnapshotLike<T> = {
+  data: T;
+  syncVersion: number;
+};
+
+export function dashboardPrefetchInitialData<T>(
+  snapshot: PrefetchSnapshotLike<T> | undefined,
+  syncVersion: number,
+): T | undefined {
+  if (!snapshot || snapshot.syncVersion !== syncVersion) return undefined;
+  return snapshot.data;
+}
+
+export function dashboardUpdatedAtMs(value: string | null | undefined) {
+  if (!value) return null;
+  const ms = Date.parse(value);
+  return Number.isFinite(ms) ? ms : null;
+}
+
+export function createDashboardAdoptionHold({
+  dashboardId,
+  currentUpdatedAt,
+  now = Date.now(),
+  ttlMs = 10_000,
+}: {
+  dashboardId: string;
+  currentUpdatedAt: string | null;
+  now?: number;
+  ttlMs?: number;
+}): DashboardAdoptionHold {
+  const currentUpdatedAtMs = dashboardUpdatedAtMs(currentUpdatedAt);
+  return {
+    dashboardId,
+    minUpdatedAtMs: currentUpdatedAtMs ?? now,
+    expiresAt: now + ttlMs,
+  };
+}
+
+export function shouldAdoptDashboardQueryResult({
+  dashboardId,
+  loaded,
+  isPlaceholderData,
+  fetchedId,
+  fetchedUpdatedAt,
+  currentUpdatedAt,
+  hold,
+  now = Date.now(),
+}: {
+  dashboardId: string | undefined;
+  loaded: boolean;
+  isPlaceholderData: boolean;
+  fetchedId: string | null | undefined;
+  fetchedUpdatedAt: string | null | undefined;
+  currentUpdatedAt: string | null;
+  hold: DashboardAdoptionHold | null;
+  now?: number;
+}): { adopt: boolean; clearHold: boolean } {
+  if (!dashboardId) return { adopt: false, clearHold: false };
+  if (loaded && isPlaceholderData) {
+    return { adopt: false, clearHold: false };
+  }
+  if (fetchedId && fetchedId !== dashboardId) {
+    return { adopt: false, clearHold: false };
+  }
+
+  const fetchedMs = dashboardUpdatedAtMs(fetchedUpdatedAt);
+  const currentMs = dashboardUpdatedAtMs(currentUpdatedAt);
+  const activeHold = hold?.dashboardId === dashboardId ? hold : null;
+  const clearHold = !!activeHold && now >= activeHold.expiresAt;
+
+  if (activeHold && !clearHold && activeHold.minUpdatedAtMs !== null) {
+    if (fetchedMs === null || fetchedMs <= activeHold.minUpdatedAtMs) {
+      return { adopt: false, clearHold: false };
+    }
+    return { adopt: true, clearHold: true };
+  }
+
+  if (currentMs !== null && fetchedMs !== null && fetchedMs < currentMs) {
+    return { adopt: false, clearHold };
+  }
+
+  return { adopt: true, clearHold };
+}