@agent-native/core 0.92.6 → 0.92.8

package/corpus/templates/analytics/actions/list-data-programs.ts

@@ -0,0 +1,49 @@
+/**
+ * Analytics HTTP surface for listing stored data programs.
+ *
+ * Core registers list-data-programs for the agent tool bag; template apps also
+ * expose it here so extension iframes can call it via
+ * /_agent-native/actions/list-data-programs.
+ */
+import { defineAction } from "@agent-native/core";
+import { listDataPrograms } from "@agent-native/core/data-programs";
+import { getCredentialContext } from "@agent-native/core/server/request-context";
+import { z } from "zod";
+
+import { ANALYTICS_APP_ID } from "../server/lib/provider-credentials";
+
+export default defineAction({
+  description:
+    "List data programs for Analytics, scoped to what the caller can access.",
+  schema: z.object({
+    includeArchived: z.boolean().optional(),
+  }),
+  http: { method: "GET" },
+  readOnly: true,
+  run: async (args) => {
+    const ctx = getCredentialContext();
+    if (!ctx)
+      throw new Error("No authenticated context for list-data-programs.");
+
+    const programs = await listDataPrograms(
+      ANALYTICS_APP_ID,
+      { userEmail: ctx.userEmail, orgId: ctx.orgId ?? undefined },
+      { includeArchived: args.includeArchived },
+    );
+
+    return {
+      programs: programs.map((p) => ({
+        id: p.id,
+        name: p.name,
+        title: p.title,
+        description: p.description,
+        refreshMode: p.refreshMode,
+        refreshTtlMs: p.refreshTtlMs,
+        background: p.background,
+        archivedAt: p.archivedAt,
+        updatedAt: p.updatedAt,
+        columns: p.outputColumns ? JSON.parse(p.outputColumns) : [],
+      })),
+    };
+  },
+});

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

@@ -602,6 +602,7 @@
 .dashboard-grid-container {
   --dashboard-drop-line: hsl(217 91% 60%);
   container: dashboard-grid / inline-size;
+  gap: 0;
 }
 
 .dashboard-grid {
@@ -634,6 +635,16 @@
   margin-block: -0.75rem;
 }
 
+/* At compact widths, panels from the same dashboard row stack vertically.
+   Give the drop targets between those panels the same 1rem footprint as the
+   row drop targets so every adjacent chart has consistent spacing. */
+@container dashboard-grid (max-width: 767px) {
+  .dashboard-grid
+    > .dashboard-column-drop-slot:not(:first-child):not(:last-child) {
+    margin-block: -0.25rem;
+  }
+}
+
 .dashboard-row-drop-slot::after,
 .dashboard-column-drop-slot::after {
   content: "";

package/corpus/templates/analytics/app/hooks/use-dashboard-chat-context.ts

@@ -4,12 +4,14 @@ import {
   removeAgentChatContextItem,
   setAgentChatContextItem,
   setClientAppState,
+  useAgentChatContext,
 } from "@agent-native/core/client";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { TAB_ID } from "@/lib/tab-id";
 
 const DASHBOARD_CONTEXT_KEY = "analytics-selected-dashboard";
+const DASHBOARD_PANEL_CONTEXT_KEY = "analytics-selected-dashboard-panel";
 const SELECTED_OBJECT_STATE_KEY = "selected-object";
 const SELECTED_OBJECT_SOURCE_FIELD = "__agentNativeSelectedObjectSource";
 
@@ -21,6 +23,29 @@ export interface DashboardChatContextArgs {
   canEdit?: boolean;
 }
 
+export interface DashboardPanelChatContextArgs {
+  panelId: string;
+  panelTitle: string;
+  panelKind: "chart" | "table" | "extension";
+  chartType?: string | null;
+  source?: string | null;
+  configId?: string | null;
+  extensionId?: string | null;
+}
+
+export interface SelectDashboardPanelOptions {
+  focus?: boolean;
+  openSidebar?: boolean;
+}
+
+export interface DashboardChatContextResult {
+  selectedPanelId: string | null;
+  selectPanelForChat: (
+    panel: DashboardPanelChatContextArgs,
+    options?: SelectDashboardPanelOptions,
+  ) => void;
+}
+
 function dashboardContext(
   args: Required<Pick<DashboardChatContextArgs, "id" | "kind">> & {
     title: string;
@@ -50,12 +75,19 @@ function dashboardContext(
   return lines.join("\n");
 }
 
-async function deleteSelectedObjectIfOwned() {
+async function deleteSelectedObjectIfOwned(dashboardId: string) {
   try {
     const current = await readClientAppState<Record<string, unknown>>(
       SELECTED_OBJECT_STATE_KEY,
     );
     if (current?.[SELECTED_OBJECT_SOURCE_FIELD] !== TAB_ID) return;
+    const selectedDashboardId =
+      current.type === "dashboard"
+        ? current.id
+        : current.type === "dashboard-panel"
+          ? current.dashboardId
+          : null;
+    if (selectedDashboardId !== dashboardId) return;
     await deleteClientAppState(SELECTED_OBJECT_STATE_KEY, {
       keepalive: true,
       requestSource: TAB_ID,
@@ -65,21 +97,106 @@ async function deleteSelectedObjectIfOwned() {
   }
 }
 
-export function useDashboardChatContext(args: DashboardChatContextArgs): void {
+function panelSelectionMarker(dashboardId: string, panelId: string): string {
+  return `Analytics panel selection: dashboard=${encodeURIComponent(
+    dashboardId,
+  )}; panel=${encodeURIComponent(panelId)}`;
+}
+
+function parsePanelSelection(
+  context: string,
+): { dashboardId: string; panelId: string } | null {
+  const match = context.match(
+    /^Analytics panel selection: dashboard=([^;]+); panel=(.+)$/m,
+  );
+  if (!match) return null;
+  try {
+    return {
+      dashboardId: decodeURIComponent(match[1]),
+      panelId: decodeURIComponent(match[2]),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function useDashboardChatContext(
+  args: DashboardChatContextArgs,
+): DashboardChatContextResult {
   const { id, kind, title, panelCount, canEdit } = args;
+  const { items } = useAgentChatContext();
+  const panelContext = items.find(
+    (item) => item.key === DASHBOARD_PANEL_CONTEXT_KEY,
+  );
+  const panelSelection = panelContext
+    ? parsePanelSelection(panelContext.context)
+    : null;
+  const selectedPanelId =
+    id && panelSelection?.dashboardId === id ? panelSelection.panelId : null;
+  const hasSelectedPanel = selectedPanelId !== null;
+
+  const selectPanelForChat = useCallback(
+    (
+      panel: DashboardPanelChatContextArgs,
+      options: SelectDashboardPanelOptions = {},
+    ) => {
+      if (!id) return;
+      const displayDashboardTitle = title?.trim() || id;
+      const displayPanelTitle = panel.panelTitle.trim() || panel.panelId;
+      const contextLines = [
+        panelSelectionMarker(id, panel.panelId),
+        `The user selected this ${panel.panelKind} on the Analytics dashboard "${displayDashboardTitle}".`,
+        `Dashboard id: ${id}`,
+        `Dashboard kind: ${kind}`,
+        `Panel id: ${panel.panelId}`,
+        `Panel title: ${displayPanelTitle}`,
+        `Panel kind: ${panel.panelKind}`,
+        panel.chartType ? `Chart type: ${panel.chartType}` : "",
+        panel.source ? `Data source: ${panel.source}` : "",
+        panel.configId ? `Explorer config id: ${panel.configId}` : "",
+        panel.extensionId ? `Extension id: ${panel.extensionId}` : "",
+        kind === "sql"
+          ? "Inspect this panel with get-sql-dashboard (includeConfig: true) before changing it, then use mutate-dashboard for edits."
+          : "Inspect the linked Explorer config before changing this chart.",
+      ].filter(Boolean);
+
+      // The panel context occupies one stable composer slot, so selecting a
+      // different panel replaces the prior chip instead of accumulating chips.
+      setAgentChatContextItem({
+        key: DASHBOARD_PANEL_CONTEXT_KEY,
+        title: displayPanelTitle,
+        context: contextLines.join("\n"),
+        openSidebar: options.openSidebar ?? true,
+        focus: options.focus ?? false,
+      });
+      setClientAppState(
+        SELECTED_OBJECT_STATE_KEY,
+        {
+          type: "dashboard-panel",
+          dashboardId: id,
+          dashboardKind: kind,
+          dashboardTitle: displayDashboardTitle,
+          panelId: panel.panelId,
+          panelTitle: displayPanelTitle,
+          panelKind: panel.panelKind,
+          chartType: panel.chartType || undefined,
+          source: panel.source || undefined,
+          configId: panel.configId || undefined,
+          extensionId: panel.extensionId || undefined,
+          [SELECTED_OBJECT_SOURCE_FIELD]: TAB_ID,
+        },
+        {
+          keepalive: true,
+          requestSource: TAB_ID,
+        },
+      ).catch(() => {});
+    },
+    [id, kind, title],
+  );
 
   useEffect(() => {
     if (!id) return;
     const displayTitle = title?.trim() || id;
-    const selection = {
-      type: "dashboard",
-      id,
-      kind,
-      title: displayTitle,
-      panelCount,
-      canEdit,
-      [SELECTED_OBJECT_SOURCE_FIELD]: TAB_ID,
-    };
 
     setAgentChatContextItem({
       key: DASHBOARD_CONTEXT_KEY,
@@ -94,17 +211,46 @@ export function useDashboardChatContext(args: DashboardChatContextArgs): void {
       openSidebar: false,
       focus: false,
     });
-    setClientAppState(SELECTED_OBJECT_STATE_KEY, selection, {
-      keepalive: true,
-      requestSource: TAB_ID,
-    }).catch(() => {});
 
     return () => {
       removeAgentChatContextItem({
         key: DASHBOARD_CONTEXT_KEY,
         openSidebar: false,
       });
-      deleteSelectedObjectIfOwned();
     };
   }, [canEdit, id, kind, panelCount, title]);
+
+  useEffect(() => {
+    if (!id || hasSelectedPanel) return;
+    const displayTitle = title?.trim() || id;
+    setClientAppState(
+      SELECTED_OBJECT_STATE_KEY,
+      {
+        type: "dashboard",
+        id,
+        kind,
+        title: displayTitle,
+        panelCount,
+        canEdit,
+        [SELECTED_OBJECT_SOURCE_FIELD]: TAB_ID,
+      },
+      {
+        keepalive: true,
+        requestSource: TAB_ID,
+      },
+    ).catch(() => {});
+  }, [canEdit, hasSelectedPanel, id, kind, panelCount, title]);
+
+  useEffect(() => {
+    if (!id) return;
+    return () => {
+      removeAgentChatContextItem({
+        key: DASHBOARD_PANEL_CONTEXT_KEY,
+        openSidebar: false,
+      });
+      deleteSelectedObjectIfOwned(id);
+    };
+  }, [id]);
+
+  return { selectedPanelId, selectPanelForChat };
 }

package/corpus/templates/analytics/app/i18n/zh-TW.ts

@@ -777,6 +777,7 @@ const messages = {
     halfWidth: "半寬",
     fullWidth: "全寬",
     editInExplorer: "在 Explorer 中編輯",
+    chatWithChart: "與圖表聊天",
     removeChart: "刪除圖表",
     removeChartTitle: "刪除圖表？",
     removeChartDescription: "要從此儀表板移除「{{name}}」嗎？此操作無法復原。",
@@ -832,6 +833,7 @@ const messages = {
     extensionMissingId: "此擴充面板未選擇任何擴充功能。",
     extensionUnavailable: "此擴充功能未與您共用，或已不存在。",
     panelOptions: "面板選項",
+    chatWithPanel: "與面板聊天",
     fullScreen: "全螢幕",
     refresh: "重新整理",
     refreshing: "正在重新整理...",

package/corpus/templates/analytics/app/i18n-data.ts

@@ -539,6 +539,7 @@ const enUS = {
     halfWidth: "Half width",
     fullWidth: "Full width",
     editInExplorer: "Edit in Explorer",
+    chatWithChart: "Chat with chart",
     removeChart: "Remove chart",
     removeChartTitle: "Remove chart?",
     removeChartDescription:
@@ -596,6 +597,7 @@ const enUS = {
     extensionUnavailable:
       "This extension isn't shared with you, or it no longer exists.",
     panelOptions: "Panel options",
+    chatWithPanel: "Chat with panel",
     fullScreen: "Full screen",
     refresh: "Refresh",
     refreshing: "Refreshing...",
@@ -5755,6 +5757,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "永久删除？",
       deletePermanently: "永久删除",
       editInExplorer: "在 Explorer 中编辑",
+      chatWithChart: "与图表聊天",
       fullWidth: "全宽",
       halfWidth: "半宽",
       hiddenDescription:
@@ -5874,6 +5877,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "该仪表板还没有面板。",
       noSavedViews: "尚未保存视图。",
       panelOptions: "面板选项",
+      chatWithPanel: "与面板聊天",
       saveAsView: "另存为视图",
       saveCurrentView: "保存当前视图",
       saveFailed: "无法保存仪表板",
@@ -5962,6 +5966,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "¿Eliminar permanentemente?",
       deletePermanently: "Eliminar permanentemente",
       editInExplorer: "Editar en Explorer",
+      chatWithChart: "Chatear sobre el gráfico",
       fullWidth: "Ancho completo",
       halfWidth: "Medio ancho",
       hiddenDescription:
@@ -6085,6 +6090,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "Este panel aún no tiene paneles.",
       noSavedViews: "Aún no hay vistas guardadas.",
       panelOptions: "Opciones de paneles",
+      chatWithPanel: "Chatear sobre el panel",
       saveAsView: "Guardar como vista",
       saveCurrentView: "Guardar vista actual",
       saveFailed: "No se pudo guardar el panel",
@@ -6177,6 +6183,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "Supprimer définitivement ?",
       deletePermanently: "Supprimer définitivement",
       editInExplorer: "Modifier dans Explorer",
+      chatWithChart: "Discuter du graphique",
       fullWidth: "Pleine largeur",
       halfWidth: "Demi-largeur",
       hiddenDescription:
@@ -6300,6 +6307,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "Ce tableau de bord n'a pas encore de panneaux.",
       noSavedViews: "Aucune vue enregistrée pour l'instant.",
       panelOptions: "Options du panneau",
+      chatWithPanel: "Discuter du panneau",
       saveAsView: "Enregistrer sous vue",
       saveCurrentView: "Enregistrer la vue actuelle",
       saveFailed: "Impossible d'enregistrer le tableau de bord",
@@ -6393,6 +6401,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "Endgültig löschen?",
       deletePermanently: "Dauerhaft löschen",
       editInExplorer: "Bearbeiten in Explorer",
+      chatWithChart: "Mit Diagramm chatten",
       fullWidth: "Volle Breite",
       halfWidth: "Halbe Breite",
       hiddenDescription:
@@ -6516,6 +6525,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "Dieses Dashboard hat noch keine Panels.",
       noSavedViews: "Noch keine gespeicherten Ansichten.",
       panelOptions: "Panel-Optionen",
+      chatWithPanel: "Mit Panel chatten",
       saveAsView: "Als Ansicht speichern",
       saveCurrentView: "Aktuelle Ansicht speichern",
       saveFailed: "Das Dashboard konnte nicht gespeichert werden",
@@ -6605,6 +6615,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "永久に削除しますか?",
       deletePermanently: "完全に削除",
       editInExplorer: "Explorerで編集",
+      chatWithChart: "グラフについてチャット",
       fullWidth: "全幅",
       halfWidth: "半角",
       hiddenDescription:
@@ -6727,6 +6738,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "このダッシュボードにはまだパネルがありません。",
       noSavedViews: "保存されたビューはまだありません。",
       panelOptions: "パネルオプション",
+      chatWithPanel: "パネルについてチャット",
       saveAsView: "ビューとして保存",
       saveCurrentView: "現在のビューを保存する",
       saveFailed: "ダッシュボードを保存できませんでした",
@@ -6816,6 +6828,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "영구적으로 삭제하시겠습니까?",
       deletePermanently: "영구 삭제",
       editInExplorer: "Explorer에서 편집",
+      chatWithChart: "차트에 대해 채팅",
       fullWidth: "전폭",
       halfWidth: "반폭",
       hiddenDescription:
@@ -6937,6 +6950,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "이 대시보드에는 아직 패널이 없습니다.",
       noSavedViews: "아직 저장된 보기가 없습니다.",
       panelOptions: "패널 옵션",
+      chatWithPanel: "패널에 대해 채팅",
       saveAsView: "보기로 저장",
       saveCurrentView: "현재 보기 저장",
       saveFailed: "대시보드를 저장할 수 없습니다.",
@@ -7028,6 +7042,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "Excluir permanentemente?",
       deletePermanently: "Excluir permanentemente",
       editInExplorer: "Editar em Explorer",
+      chatWithChart: "Conversar sobre o gráfico",
       fullWidth: "Largura total",
       halfWidth: "Meia largura",
       hiddenDescription:
@@ -7151,6 +7166,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "Este painel ainda não possui painéis.",
       noSavedViews: "Nenhuma visualização salva ainda.",
       panelOptions: "Opções do painel",
+      chatWithPanel: "Conversar sobre o painel",
       saveAsView: "Salvar como visualização",
       saveCurrentView: "Salvar visualização atual",
       saveFailed: "Não foi possível salvar o painel",
@@ -7240,6 +7256,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "स्थायी रूप से हटाएँ?",
       deletePermanently: "स्थायी रूप से हटाएँ",
       editInExplorer: "Explorer में संपादित करें",
+      chatWithChart: "चार्ट के बारे में चैट करें",
       fullWidth: "पूरी चौड़ाई",
       halfWidth: "आधी चौड़ाई",
       hiddenDescription:
@@ -7361,6 +7378,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "इस डैशबोर्ड में अभी तक कोई पैनल नहीं है.",
       noSavedViews: "अभी तक कोई सहेजा गया दृश्य नहीं.",
       panelOptions: "पैनल विकल्प",
+      chatWithPanel: "पैनल के बारे में चैट करें",
       saveAsView: "दृश्य के रूप में सहेजें",
       saveCurrentView: "वर्तमान दृश्य सहेजें",
       saveFailed: "डैशबोर्ड सहेजा नहीं जा सका",
@@ -7449,6 +7467,7 @@ const translatedAnalyticsDebtTranslations = {
       deletePermanentlyTitle: "هل تريد الحذف نهائيًا؟",
       deletePermanently: "حذف نهائيا",
       editInExplorer: "تحرير في Explorer",
+      chatWithChart: "الدردشة حول المخطط",
       fullWidth: "العرض الكامل",
       halfWidth: "نصف العرض",
       hiddenDescription:
@@ -7570,6 +7589,7 @@ const translatedAnalyticsDebtTranslations = {
       noPanels: "لوحة القيادة هذه لا تحتوي على لوحات حتى الآن.",
       noSavedViews: "لا توجد طرق عرض محفوظة حتى الآن.",
       panelOptions: "خيارات اللوحة",
+      chatWithPanel: "الدردشة حول اللوحة",
       saveAsView: "حفظ كعرض",
       saveCurrentView: "حفظ العرض الحالي",
       saveFailed: "تعذر حفظ لوحة البيانات",

package/corpus/templates/analytics/app/pages/adhoc/explorer-dashboard/ChartCard.tsx

@@ -6,10 +6,12 @@ import {
   IconTrash,
   IconArrowsMaximize,
   IconArrowsMinimize,
+  IconDotsVertical,
   IconExternalLink,
+  IconMessageCircle,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import {
   AlertDialog,
@@ -22,13 +24,24 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import type {
+  DashboardPanelChatContextArgs,
+  SelectDashboardPanelOptions,
+} from "@/hooks/use-dashboard-chat-context";
 import { useMetricsQuery } from "@/lib/query-metrics";
+import { cn } from "@/lib/utils";
 
 import { ExplorerChart } from "../explorer/components/ExplorerChart";
 import { buildSql } from "../explorer/sql-builder";
@@ -42,6 +55,11 @@ interface ChartCardProps {
   onToggleWidth: () => void;
   onEdit: () => void;
   editable?: boolean;
+  selectedForChat?: boolean;
+  selectPanelForChat: (
+    panel: DashboardPanelChatContextArgs,
+    options?: SelectDashboardPanelOptions,
+  ) => void;
 }
 
 async function fetchConfig(id: string): Promise<ExplorerConfig | null> {
@@ -66,6 +84,8 @@ export function DashboardChartCard({
   onToggleWidth,
   onEdit,
   editable = true,
+  selectedForChat = false,
+  selectPanelForChat,
 }: ChartCardProps) {
   const t = useT();
   const [confirmOpen, setConfirmOpen] = useState(false);
@@ -100,15 +120,59 @@ export function DashboardChartCard({
   );
 
   const isLoading = !config || queryLoading;
+  const displayTitle = config?.name ?? configName;
+  const handleSelectForChat = useCallback(
+    (options?: SelectDashboardPanelOptions) => {
+      selectPanelForChat(
+        {
+          panelId: chart.id,
+          panelTitle: displayTitle,
+          panelKind: config?.chartType === "table" ? "table" : "chart",
+          chartType: config?.chartType,
+          configId: chart.configId,
+        },
+        options,
+      );
+    },
+    [
+      chart.configId,
+      chart.id,
+      config?.chartType,
+      displayTitle,
+      selectPanelForChat,
+    ],
+  );
+  const handleCardClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const target = event.target;
+      if (
+        target instanceof Element &&
+        target.closest(
+          "button, a, input, textarea, select, [role='menuitem'], [data-no-panel-chat-select]",
+        )
+      ) {
+        return;
+      }
+      handleSelectForChat({ focus: false });
+    },
+    [handleSelectForChat],
+  );
 
   return (
     <div
       ref={setNodeRef}
+      onClick={handleCardClick}
       style={style}
       data-dragging={isDragging ? "true" : undefined}
+      data-chat-selected={selectedForChat ? "true" : undefined}
       className={`explorer-dashboard-card group relative ${chart.width === 2 ? "explorer-dashboard-card-wide" : ""}`}
     >
-      <Card className="h-full">
+      <Card
+        className={cn(
+          "h-full transition-colors",
+          selectedForChat && "border-foreground/35 ring-1 ring-foreground/10",
+        )}
+      >
         <CardHeader className="pb-2 flex flex-row items-center gap-2">
           {editable ? (
             <button
@@ -120,8 +184,37 @@ export function DashboardChartCard({
             </button>
           ) : null}
           <CardTitle className="text-sm font-medium flex-1 truncate">
-            {config?.name ?? configName}
+            {displayTitle}
           </CardTitle>
+          <div className="opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+            <DropdownMenu>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+                      aria-label={t("sqlDashboard.panelOptions")}
+                    >
+                      <IconDotsVertical className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("sqlDashboard.panelOptions")}
+                </TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent align="end" className="w-44">
+                <DropdownMenuItem
+                  onSelect={() =>
+                    handleSelectForChat({ openSidebar: true, focus: true })
+                  }
+                >
+                  <IconMessageCircle className="h-4 w-4 mr-2" />
+                  {t("explorerDashboard.chatWithChart")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
           {editable ? (
             <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
               <Tooltip>

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

@@ -205,7 +205,7 @@ export default function ExplorerDashboardPage() {
   );
   const canEdit = resourceCanEdit(resourceAccess);
   const canManage = resourceCanManage(resourceAccess);
-  useDashboardChatContext({
+  const { selectedPanelId, selectPanelForChat } = useDashboardChatContext({
     id: dashboardId,
     kind: "explorer",
     title: dashboard?.name,
@@ -797,6 +797,8 @@ export default function ExplorerDashboardPage() {
                     navigate(`/dashboards/explorer?config=${chart.configId}`)
                   }
                   editable={canEdit}
+                  selectedForChat={selectedPanelId === chart.id}
+                  selectPanelForChat={selectPanelForChat}
                 />
               ))}
             </div>